$30 off During Our Annual Pro Sale. View Details »

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

Fabienne Gafner
September 02, 2016

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!

Fabienne Gafner

September 02, 2016
Tweet

Other Decks in 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
  16. None
  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!