Lists, Lists Everywhere! - Or 5 Things to Consider When Designing A List Entry

Lightning Talk @Frontend Conf in Zürich, 2.9.2016

Are our list designs the best they can be?

I love lists. In this lighting talk I share new findings on the usability of list entries to help you create better listing pages.

5 things to consider when designing your next list entries:
1. The Elements of a good list entry
2. Information Hierarchy
3. Placement of Thumbnails
4. Synchronized Hover Effects
5. Always test your list entry design!

Transcript

1. Lists, Lists everywhere 5 Things to Consider When Designing A List Entry @heidi_safran
2. 1. Elements of A List entry 2. Information Hierarchy 3. Placement of Thumbnails 4. Synchronized Hover Effects 5. One more thing… @heidi_safran
3. „Always give users sufficient product information to accurately evaluate their options without overloading the listing page“
4. Thumbnail
5. Product Title
6. Price
7. User Ratings
8. Variations
9. Category Attributes
10. Category Attributes
11. 1. Elements of A List entry 2. Information Hierarchy 3. Placement of Thumbnails 4. Synchronized Hover Effects 5. One more thing… @heidi_safran
12. Priority order
13. Priority order
14. High Priority Areas
15. 1. Elements of A List entry 2. Information Hierarchy 3. Placement of Thumbnails 4. Synchronized Hover Effects 5. One more thing… @heidi_safran
17. Does Every Item Have A Meaningful Image?
18. Does Every Item Have A Meaningful Image? NO
19. Does Every Item Have A Meaningful Image? Right-Aligned Thumbnails NO
20. Does Every Item Have A Meaningful Image? Right-Aligned Thumbnails NO Yes
21. Does Every Item Have A Meaningful Image? Does The Image Carry More Information Than The Text? Right-Aligned Thumbnails NO Yes
22. Does Every Item Have A Meaningful Image? Does The Image Carry More Information Than The Text? Right-Aligned Thumbnails NO NO Yes
23. Does Every Item Have A Meaningful Image? Does The Image Carry More Information Than The Text? Right-Aligned Thumbnails NO NO Right-Aligned Thumbnails Yes
24. Does Every Item Have A Meaningful Image? Does The Image Carry More Information Than The Text? Right-Aligned Thumbnails Yes NO NO Right-Aligned Thumbnails Yes
25. Does Every Item Have A Meaningful Image? Does The Image Carry More Information Than The Text? Right-Aligned Thumbnails Yes Yes NO NO Right-Aligned Thumbnails Left-Aligned Thumbnails
26. 1. Elements of A List entry 2. Information Hierarchy 3. Placement of Thumbnails 4. Synchronized Hover Effects 5. One more thing… @heidi_safran
27. Simple List entry
28. Simple List entry
29. z Simple List entry
30. Complex List entry
31. Complex List entry
32. Complex List entry
33. 1. Elements of A List entry 2. Information Hierarchy 3. Placement of Thumbnails 4. Synchronized Hover Effects 5. One more thing… @heidi_safran
34. Always Test your Design!!
35. @heidi_safran Thank you!