Product Lists & Filtering |
|---|
List Layout- Use grid view for visually driven products, list view for spec-driven ones - Baymard #533
| Loading Products |
List Items: Product Info & Thumbnails- Provide the Right Amount of Product Information in a List Item - Baymard #440 <<<
- Include Product Attributes Consistently Across List Items - Baymard #443
- Combine SKUs Unless Visually Distinct - Baymard #421 <<<
- Display ‘Price Per Unit’ For Multi-Quantity Items - Baymard #446
- Display the List Item Information Above the Fold on the Product Page - Baymard #422
- Consider Sparsely Highlighting Unique Purchasing Attributes - Baymard #447
- Consider Including Logo Thumbnails When Brands Are of High Importance - Baymard #444
- Thumbnail Sizes Should Reflect the User’s Need for Visual Product Information - Baymard #456
| List Items: Interface & Hit Areas- Different Product Attributes in the List Item Should Be Visually Distinct - Baymard #448 <<< Webdisplaynames
- Display Accurate Availability & Delivery Indicators - Baymard #528 <<< Discontinued, Out of Stock Indicators
- Prices Should Be Easily Scannable - Baymard #452
- Always Indicate Essential Product Variations in the List Item - Baymard #450
- Numeric Product Specs Need Proper Labels and Units - Baymard #449
- Ensure Pathing Is Clear and Consistent on List Items - Baymard #552
- Avoid Quick Views - Baymard #529
- Avoid Repetitive List Item Elements - Baymard #530
- Consider Showing Additional List Item Information on Hover - Baymard #526
|
List Items: Personalization- Include List Item Information Based on Applied Filters and Sorting - Baymard #480
- Consider Indicating Sub-Values of Selected Hierarchical Filters - Baymard #485
- Highlight Any Product Already in the User's Cart - Baymard #484
| Filtering: Available Filters- If You Have Multiple Product Statuses, Allow Users to Filter by Them All - Baymard #417
- Allow User-Defined Ranges for All Numeric Filtering Values - Baymard #416
|
Filtering: Interface & Layout | Sorting |