Thaves Wireframe Sample- Grainger

Find – Multi Select Filters

Grainger Detailed Wireframes

Filename: Grainger Multi Select Filters Wireframes v1.3.1.graffle

Prepared By: Edwin Thaves

This document is formatted for Tabloid (11x17) but can be printed in Letter format (8.5x11).

© W.W. Grainger, Inc. All rights reserved.

Grainger.com Redesign


Product FamilyPage View

Definite Purpose Motors

Motors / Definite Purpose Motors GO

Search within these results

Refine by

Brand

Shop Items By

Price

Expand All

Grainger offers definite purpose motors like pump motors for liquid transfer and vending machines and pool pump motors that are equivalent replacements for most popular pool and spa manufacturers' pumps. We also stock replacement vacuum motors so you can maintain your industrial cleaning equipment. Our extensive line includes motors for a variety of commercial and industrial applications.

IMG

Item Name Listed Here

IMG


IMG


IMG


IMG


IMG


IMG


IMG


50 Hz Motors (113)

56J Face Pump Motors (46)

Close-Coupled Pump Motors (JM/JP Shaft (425)

Cooling Tower Motors (43)

Crusher Motors (56)

Deep Well Submersible Pump Motors (42)

Farm Duty Motors (114)

Hazardous Location Motors (204)

Jet/Well Pump Motors (51)

Browse

Oil Well Pumping Motors (31)

Show All Categories

Rating

Segment and Family pages would display these modules:

Category moduleProduct categories within Product Family are displayed as links (single select) ordered alphabetically.

It is recommended the module header be labeled "Browse" and given the same visual treatment and weight as Attribute module to clearly communicate primary Find paths available to the Customer (search, browse, filter).

Global Attributes moduleProduct attributes shared by all Product Categories within Product Family would be displayed (e.g. Brand, Price, Shop Items By and Rating).

All product attribute modules are in the collapsed state by default.

1

2

1

2



Product Family Interacted - Customer Expands Attribute ModulePage View

Definite Purpose Motors

Motors / Definite Purpose Motors GO


Refine by

Grainger offers definite purpose motors like pump motors for liquid transfer and vending machines and pool pump motors that are equivalent replacements for most popular pool and spa manufacturers' pumps. We also stock replacement vacuum motors so you can maintain your industrial cleaning equipment. Our extensive line includes motors for a variety of commercial and industrial applications.

IMG


IMG


IMG


IMG


IMG


IMG


IMG


IMG


Brand

DAYTON HD (4)

GENERAL ELECTRIC (6)

FRANKLIN (42)

DAYTON (320)

DOMEL (18)

AMETEK LAMB (134)

APPROVED VENDOR (29)

AUTONICS (24)

CENTURY (55)

A.O. SMITH (120)

50 Hz Motors (113)


Close-Coupled Pump Motors (JM/JP Shaft (425)


Crusher Motors (56)





Browse


Show All Categories

Interaction Notes

Clicking the header for each attribute module expands the module, revealing the attribute's values.

All values for an attribute are displayed when a Customer expands the module. A "Show More" control would not be utilized for attribute values. Results of user testing clearly found viewing all values in an attribute module by default to be preferred.

Customer may select a single value from one Global Attribute module (single-select).

1

1

2

2



IMG

Compare

Item #D0388

Super Awesomebrand anme Item Name listed here for a long title

Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

Refine by

L3 Default – Attribute Modules CollapsedPage View

GO


Incandescent Equivalent Watts

Base

Lamp Shape

Lamp Tone

Length

Brand

Shop Items By

Price

Expand All

Items per page: 16 32 48 1 2 3 4 5 ... 23 Next

View

Sort results by: (4) items selected to compare:

Compare ItemsTop Sellers

GridList

368 Products Found

Lighting // Compact Fluorescent LampsLamps

Rating

Attribute ModuleAll product attribute modules are in the collapsed state by default.

Clicking the header of an attribute module expands the module, revealing the attribute's values.

The order of attribute modules should remain the same as in production, with the exception of "Price" which would now follow "Brand".

See pages 15-17 for additional interaction details of the Attribute Module.

Expand All controlOn click, expand all attribute modules to reveal values.

Close All control (not depicted)On click from expanded state, collapse all attribute modules.

Breadcrumbs moduleRefer to pages 25-27

1

2

1

2

3

3



IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

L3 Interacted – Customer Expands Attribute ModulePage View

Refine by

GO


Base


420 (1)

650 (2)

800 (1)

850 (2)

500 (2)

30/70/100 (2)

50/100/150 (3)

60/100/150 (1)

90 (19)

125 (8)

135 (1)

120 (4)

75 (50)

100 (46)

150 (27)

200 (7)

250 (19)

300 (5)

15 (10)

40 (45)

60 (89)

65 (1)

25 (21)Items per page: 16 32 48 1 2 3 4 5 ... 23 Next

View



GridList

368 Products Found




IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

L3 Event – System Finding Matching ItemsPage View

Refine by

GO


Base


420 (1)

650 (2)

800 (1)

850 (2)

500 (2)

30/70/100 (2)

50/100/150 (3)

60/100/150 (1)

90 (19)

135 (1)

120 (4)

75 (50)

100 (46)

150 (27)

200 (7)

250 (19)

300 (5)

15 (10)

40 (45)

60 (89)

65 (1)

25 (21)

✔

125 (8)


View



GridList

368 Products Found


Finding Matching Items

Interaction Notes

When the Customer selects a value from an attribute module, the page grid refreshes updating the SKUs with matching attribute values.

Asynchronous progress indicator If process feasibilities create a meaningful delay in System refreshing product grid/list with matching SKUs, an asynchronous progress indicator (such as spinning icon) should be utilized to inform the Customer processing is occurring.

1

1



IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

L3 Interacted – Customer Selected Attribute ValuePage View

Refine by

GO


Base


420 (1)

650 (2)

800 (1)

850 (2)

500 (2)

30/70/100 (2)

50/100/150 (3)

60/100/150 (1)

90 (19)

135 (1)

120 (4)

75 (50)

100 (46)

150 (27)

200 (7)

250 (19)

300 (5)

15 (10)

40 (45)

60 (89)

65 (1)

25 (21)

✔

125 (8)


View



GridList

89 Products Found

Lighting // Compact Fluorescent LampsLampsInteraction Notes

System has refreshed page grid with matching attribute values. System has updated matching items count.

Active attribute module (the module Customer is currently interacting with) remains open until closed by Customer by clicking the header of the active module or another module.



IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

L3 Interacted – Customer Expands Second Attribute ModulePage View

Narrow by

GO


Refine by

Base

Lamp Shape

Lamp Tone

Length

Price

Shop Items By

60 (89)

125 (8)


Clear

Clear Selections

Clear

Expand All

Interaction NotesThis page view depicts what occurs when a Customer closes a module where they had selected attribute values and opens a second attribute module.

When the Customer clicks the Incandescent Equivalent Watts attribute header:

System collapses the Incandescent Equivalent Watts module and displays a summary of selected values.

When the Customer clicks to expands the Brand attribute module:

System expands module and shows all compact fluorescent lamp brands. Those brands not available in 60 or 125 watts are dimmed and disabled.

Such an interaction design communicates key information to the Customer, advances understanding of the impact of the Customer's selections on the available products, and avoids null results.

Brand

GE LIGHTING (65)

TCP (0)

SHAT-R-SHIELD (1)

WOBBLE LIGHT (2)

LUMAPRO (29)

LEVITON (0)

FOSTORIA (0)


View



GridList

97 Products Found


Rating



IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

L3 Resulting – Customer Selected Attribute Values and Collapsed ModulePage View

Refine by

GO


Base

Lamp Shape

Lamp Tone

Length

Shop Items By

Price

LUMAPRO (29)

Brand

Clear

Expand All

60 (29)

125 (0)


Clear

Clear Selections

Clear

29 Products Found

Lighting // Compact Fluorescent LampsLampsInteraction Notes

Customer has clicked the header of the Brand Attribute module to collapse module to selection summary.

In the scenario depicted, the Lumapro brand is not available in 125 incandescent equivalent watts.

The selection of Lumapro from the brand attribute module impacted a previous selection from the incandescent equivalent watts attribute module.

The selection summary for the incandescent equivalent watts module has been updated to reflect that no 125 watts lamps are now available in the results set.

If the Customer would click to expand the incandescent equivalent watts attribute module, the system would show 125 watts in a dimmed (grayed out) and disabled (checked but non unselectable) state.


View



GridList

Rating



IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

L3 Event – Single SKU Matches Selected AttributesPage View

Refine by

GO


1 Product Found


Items per page: 16 32 48 1 Next

View



GridList

Base

Lamp Shape

60 (1)


Clear

Length

Special Offers

Price

LUMAPRO (1)

Brand

Clear

Expand All

Refine by

Frost (1)

Lamp Tone

Clear

Interaction Notes

Customer previously selected a value of "60" from the "Incandescent Equivalent Watts" attribute module and collapsed module.

Customer previously selected a value of "Lumapro" from the "Brand" attribute module and collapsed module.

Customer selects a value of "Frost" from the "Lamp Tone" attribute module and collapses module.

System finds a single SKU matching all selected attribute values.

System does not automatically redirect Customer to Item Detail Page when there is a single matching product. The product is instead displayed on the L3 page.

Rating



IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

Refine by

L3 – Conditional Display of ModulePage View

GO



Base

Lamp Shape

Lamp Tone

Length

Brand

Price


View



GridList

210 Products Found


Expand All

Green Certification

ENERGY STAR Rated (85)

RoHS Compliant (16)

Rating

Shop Items By

Green (224)

Online Catalog (77)

New Items (15)

Clearance Items (6)

✔

Interaction Notes

In rare instances, the selection of a value from an attribute module may result in the display of a new attribute module.

Customer selected value of "Green" from the "Shop Items By" Attribute module.

System displays Attribute module titled "Green Certification" in expanded state.

1

2

1

2



IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

Refine by

L3 Default – Authenticated UserPage View

GO



Base

Lamp Shape

Lamp Tone

Length

Brand

Shop Items By

Price

Expand All

368 Products Found


Rating

Previously Purchased ItemsOn click, filter results set by items in Customer purchase history.

1

Previously Purchased Items

1


View



GridList



Search Within Results – Interacted Page View

Base

Lamp Shape

Lamp Tone

Length

60 (29)


Clear

Brand

Shop Items By

Price

Expand All

Refine by

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

GO


Lumapro3


View



GridList

29 Products Found


Rating

Interaction Notes

Customer previously selected a value of "60" from the "Incandescent Equivalent Watts" attribute module and collapsed module.

Customer searches within results for "Lumapro".

On click of "Go" button, System searches for keyword entered in search box within current results set.

2

1

1

2

3



Search Within Results – ResultingPage View


Base

Lamp Shape

Lamp Tone

Length

Shop Items By

Price

Brand

Expand All

Refine by

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

GO


35 Products Found

Lighting / / Lumapro/ Compact Fluorescent LampsLamps

Rating

Interaction Notes

Breadcrumbs moduleRefer to pages 25-27

Current process limitation: The results of a search can not auto select a value from an attribute module.

Note that if the Customer would expand an attribute module such as Brand, the value for "Lumapro" would not be selected.

2

1

2

1


View



GridList



Search Within Results – No MatchesPage View

We didn't find anything matching "Leviton" within your selections.

You should clear some of your selections.

Help with Search

• Check your spelling and try again.• Try another keyword for your item.• View the Catalog No. 402 Index (PDF)• For Repair Parts, try the Repair Parts Search

Base

Lamp Shape

Lamp Tone

Length

60 (0)


Clear

Brand

Shop Items By

Price

Expand All

Refine by

Still can't find what you need?Your local branch has access to millions of products beyond the catalog. Just give them a call.

Customer Service, 24/7

Questions on ordering, products or Repair Parts: • Call 800-323-0620• Contact your local branch

Help with Grainger.com: • Call 888-361-8649 • E-mail us


Rating

There are no changes to existing Search Within Results functionality.

Messaging is for position only and based on, final copy to be determined by copywriter.

If the Customer clicked the clear control to the right of "60", System would display results set unfiltered by that value.

If the Customer clicks on an attribute module header to expand, the list of values would be dimmed and disabled since there are no matches within the results set.



Standard Keyword SearchPage View

GO


Refine by

Shop Items By

Price

Expand All

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

Brand

Lamps (41)

Indoor Fixtures (28)

Task Lights (8)

Ballasts (4)

Hand and Portable Lamps (2)

Browse

Interaction Notes

Customer searches for "Lumapro" from global search box.

System finds matching values in multiple product categories and displays them in Category module.

Current process limitation: The results of a search can not auto select a value from an attribute module.

Note that if the Customer would expand an attribute module such as Brand, the value for "Lumapro" would not be selected.

BreadcrumbsRefer to pages 25-27

83 Products Found

Lumapro

Rating

1

2

1

2

3

3


View



GridList



Keyword Search Results with HierarchyPage View

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

IMG

Compare

Item #D0388


Regular:

Your Price:

$990,000.00

$1,414.00

Qty:

Add to Cart

+ Add to list

Stocked

When can I get it?

Refine by

GO


Corded/Without Cord

Noise Reduction Rating NRR

Plug Color

Size

Brand

Shop Items By

Price

Expand All

97 Products Found

Safety Hearing Protection/ / Earplugs / corded / universal

Rating

1

1Interaction Notes

Customer searches for keyword (e.g. "earplugs") from global search box.

Customer refines results by using Search Within Results.

Breadcrumbs moduleRefer to page 25-27


View



GridList



Attribute Module – Collapsed

Condition A – Default State• Customer has not selected a value from

attribute module• System displays module in collapsed

state

Module Design


Condition BCustomer hovers on attribute module header.


Attribute HeaderDisplays name of product attribute and expand icon. On click of header, module expands resulting in Condition D.

1

1



Attribute Module – Expanded

Condition D• Customer has expanded module on click of

header• System lists all values for attribute ordered

alphanumerically

Module Design

Condition ECustomer selecting values from attribute


420 (1)

650 (2)

800 (1)

850 (2)

500 (2)

30/70/100 (2)

50/100/150 (3)

60/100/150 (1)

90 (19)

125 (8)

135 (1)

120 (4)

75 (50)

100 (46)

150 (27)

200 (7)

250 (19)

300 (5)

15 (10)

40 (45)

60 (89)

65 (1)

25 (21)

✔


420 (1)

650 (2)

800 (1)

850 (2)

500 (2)

30/70/100 (2)

50/100/150 (3)

60/100/150 (1)

90 (19)

125 (8)

135 (1)

120 (4)

75 (50)

100 (46)

150 (27)

200 (7)

250 (19)

300 (5)

15 (10)

40 (45)

60 (89)

65 (1)

25 (21)

✔

Interaction Notes

After the first value (e.g. "60") from the attribute module has been selected:

• The values not selected from the attribute module should remain active and selectable (currently the attribute and its unselected values are no longer displayed)

When two (or more) values from the same attribute module are selected:

• If the user selects a value from an attribute module that already has a selected value, the search should perform an "or" search (e.g. System should return results for "Incandescent Equivalent Watts= 60" or "Incandescent Equivalent Watts=125”)

• This action is likely to increase the number of search results in the results set

Visual Design ConsiderationsTreatment and placement of number of matching SKUs when values in attribute module are numeric (e.g. spacing between attribute value and number of matching SKUs, typeface, and size).



Attribute Module – Selection Summary

Condition C – Selection Summary• Customer selected value(s) from

attribute • Customer clicked attribute header• System collapses module on click and

displays selected values

Module Design

60 (89)

125 (8)


Clear

Clear Selections

Clear

An attribute module does not collapse as a result of a value selection within the same attribute module.

Customer must explicitly collapse an attribute module for System to display Selection Summary

Condition C1 – Clear Single Selected Value• Customer clicked clear control to the

right of "60"• System removes display of selected

value and refreshes results set

Clear125 (8)


Condition C2 – Clear All Selections• Customer clicked "Clear Selections"

control or clicked "Clear" control next to all previously selected attribute value(s)

• System removes display of all previously selected value and refreshes results set


Clear Selections controlIf more than one selected value from attribute module, then display control.On click, remove display of all selected values for attribute and refresh product grid to no longer limit by attribute values. Results in module condition C2.

Clear controlOn click, remove display of selected value and refresh product grid to no longer limit by attribute value. If customer clicks "Clear" control for all selected values in attribute module, same result as "Clear Selections" control.

2

2

3

3



Attribute Module – Event State

Condition F• Customer has expanded second attribute

module after collapsing first module.• System dims and disables attribute values

that no longer have matching SKUs.

Module Design

Brand

GE LIGHTING (65)

TCP (0)

SHAT-R-SHIELD (1)

WOBBLE LIGHT (2)

LUMAPRO (29)

LEVITON (0)

FOSTORIA (0)

60 (89)

125 (0)


Clear

Clear Selections

Clear

Condition G• Customer selects a value from a second

attribute module that results in a value selected from the first module no longer matching

Brand

GE LIGHTING (65)

TCP (0)

SHAT-R-SHIELD (1)

WOBBLE LIGHT (2)

LUMAPRO (29)

LEVITON (0)

FOSTORIA (0)

✔

60 (89)

125 (8)


Clear

Clear Selections

Clear

Interaction Notes

Event States depict relationships between multiple attribute modules and how a Customer interaction in one module impacts a second module.

If the user selects a value from a second attribute module the search will perform an "and" search, and look for the union of SKUs that match all of the selected attribute values (for example, return results that match "Brand=Lumapro" and "Incandescent Equivalent Watts= 60 or 125")

Matching attribute value. Attribute values that continue to have SKUs available in the current navigation state from other attributes should remain active (selectable).

Non-matching attribute value. Attribute values that no longer have SKUs available in the current navigation state become inactive, but continue to display with an inactive visual treatment.

It was a common practice among internet retailers examined in our comparative/competitive study to dim non matching attribute values and is recommended here.

Visual Design ConsiderationsDimmed values (inactive visual treatment) should be differentiated from active values and avoid creating accessibility issues for customers.

1

2

1

2



Attribute Module – Expanding from Selection SummaryModule Design

Condition H2• Customer clicks header of attribute module• System expands from selection summary to

display list of values

✔


90 (19)

125 (0)

135 (1)

120 (4)

75 (50)

100 (46)

15 (10)

40 (45)

60 (89)

65 (1)

25 (21)

✔

Condition H1• Customer hovers on attribute module header• System provides visual indication module can

be expanded


60 (89)

125 (0)

Clear

Clear Selections

Clear


60 (89)

125 (0)

Clear

Clear Selections

Clear

Interaction Notes

Matching selected attribute value. A previously selected attribute value that continues to match one or more SKUs should remain active and display as selected (checked)

Non-matching selected attribute value. A previously selected attribute value that no longer matches at least one SKU should be inactive (dimmed) and display as selected (checked). Unselected the value would remove it from display in the Selection Summary.

1

2

1

2



Attribute Module – Rating

Expanded• Customer has expanded module on click of

header• System displays ratings as stars ordered

highest (5 star) to lowest (1 star)

Module Design

Selection Summary• Customer selected ratings of 5 star and 4 star

and clicked Rating header • System collapses module and displays

selected values

Rating

(4)

(8)

(2)

(1)

(0)

Rating

Clear

Clear Selections

Clear

(4)

(8)



Category Module

Condition A – Default• System displays categories sorted by

descending SKU count • If there are more than ten categories,

System displays "Show All Categories" control

Module Design

Condition B – Expanded• Customer clicked control labeled "Show

All categories" or expand icon• System displays remaining categories

sorted alphabetically




Power Tool Motors (37)

Vector Motors (36)


Small Engine Starter Motors (29)

Steeper Motors (24)

Close-Coupled Pump Motors (JM/JP Shaft) (425)

Washdown Motors (206)


Vacuum Motors (145)


50 Hz Motors (113)

Pool Pump Motors (61)

Crusher Motors (56)

Square Flange Pump Motors (56)


Browse

Show All Categories


Washdown Motors (206)


Vacuum Motors (145)


50 Hz Motors (113)


Crusher Motors (56)



Browse

Show All Categories


Washdown Motors (0)


Vacuum Motors (0)


50 Hz Motors (0)


Crusher Motors (56)



Browse

Show All Categories

Vertical Mount P-Base Pump Motors (43)

Note: Categories are displayed in descending SKU count only on Search Results pages. On all other pages, Categories are displayed in alphabetical order.

Interaction Notes

Product categories within Product Family are displayed as links (single select).

It is recommended the module header be labeled "Browse" and given the same visual treatment and weight as "Refine by" attribute module header to clearly communicate primary Find paths available to the Customer (search, browse, filter) on the page.

Show All Categories controlDisplay control if more than ten categories.On click of control label or icon, display remaining categories and change expand icon (+) to collapse icon (-).

Rationale. The number of categories displayed by default was chosen to assist the Customer in managing information density, ensure the category module and global attribute module would be displayed above the page fold and based on common practices of internet retailers.

1

1

Condition C – Event State• Customer selects a value from an

attribute module that does not match any products in a category.

• System displays category in non matching state (dimmed and disabled).



Breadcrumbs Module – Search

Condition A1 – Keyword Search• Customer enters keyword "T8" into global search box• System finds matching items• System display keyword as refineable breadcrumb

Module Design

Condition A3 – Search Within Refinement• Customer refines results by entering keyword "60DF" into Search Within Results module• System finds matching items within results set• System displays search within keyword as refineable breadcrumb

Condition A2 – Browse Refinement• Customer refines results by clicking category names, "Lighting" > "Ballasts" > "Dimming Ballasts"• System displays category names as refineable breadcrumbs

24 Products Found

T8 Lighting/ / Dimming Ballasts/ Ballasts

767 Products Found

T8

8 Products Found

T8 Lighting/ / Dimming Ballasts / 60DF/ Ballasts

1

2

3

Delete icon – On click, remove associated keyword or category name.

Search keyword– Display keyword(s) entered into global search box.

Category name– Name of category selected from category module in left rail or from center of page on Category page.

Search Within keyword– Display keyword entered into Search Within Results module

No. of Matching ItemsTotal number of products in results set. Note an increase in text size from production is recommended from user testing.

Note: Values selected from Attribute modules are not displayed in this module.

4

2

3

4

1

5

5



Breadcrumbs Module – Search (Cont'd)Module Design

97 Products Found

Safety Hearing Protection/ / Earplugs / corded / universal

Condition B – Keyword Refinement w/Redirect• Customer enters keyword "earplugs" into global searchbox• System redirects based on matching keyword• Customer then refines results by entering keywords "corded" then "universal" into Search Within Results module

1

2

6


Search keyword– Display keyword(s) entered into global search box.



Product hierarchy– System displays product hierarchy matching search keyword entered by Customer when there is a redirect.

No Matching Search Results Messaging

4

6 1

5

5

2 4

We didn't find anything matching "Leviton" within your selections.You should clear some of your selections and search again or try a different keyword.

Event – No Matching Search Results• Customer enters keyword "Leviton" into Search Within Results module• System does not find any matching items within results set


7Rationale – Search results messaging should attempt to humanize the experience by using a conversational language (e.g. refer to refinements made by the Customer as "your selections").

Search results messaging should avoid blaming the Customer and not use phrases such as "your search found no results." Instead the system should accept responsibility (e.g. "We didn't find anything matching <search keyword(s)>").

Search Help textProvide Customer with assistance in recovering from null results.

format "We didn't find anything matching "<search keyword(s)>" "within your selections."

condition Search within null results

8

7

8



Breadcrumbs Module – Browse

Condition C1 – Browse Path• Customer browses home, segment and family (L0, L1, L2)• System displays standard (non refineable) breadcrumbs

Module Design

Condition C2 – Browsing Refinement• Customer refines results by clicking category name, "Compact Fluorescent Lamps"• Upon reaching search results page (L3), System now displays all breadcrumbs as refineable

Condition C3 – Search Within Refinement • Customer refines results by entering keyword "Lumapro" into Search Within Results module• System finds matching items within results set• System displays search within keyword as refineable breadcrumb

Lighting / Lamps

Lamps

368 Products Found


35 Products Found

Lighting / / Lumapro/ Compact Fluorescent LampsLamps

1

2

3

5

Segment link name

Family link name

Category name– Name of category selected from category module in left rail or from center of page




4

43

2

6

5

1

6

2

Thaves Wireframe Sample- Grainger

Documents

Transcript of Thaves Wireframe Sample- Grainger