<img height="1" width="1" style="display:none" src="https://q.quora.com/_/ad/ad9bc6b5b2de42fb9d7cd993ebb80066/pixel?tag=ViewContent&amp;noscript=1">

50 Tips for Designing a Better Search and Navigation Experience

December 8 2016

A great search and navigation experience requires both relevancy and design. We compiled a short list of the best tips for designing a frictionless shopping experience.  

Design a frictionless shopping experience for your users. Download our 'Search  and Navigation UX Design Guide'.

We've spent hours helping our retail clients optimise their site-search and category navigation experience. And we've also read every piece of research possible on the subject. 

We decided we want to share what we've learnt so far. Download our Search and Navigation User Experience (UX) Guide and receive over 50 design tips you can put into action immediately. 

The UX guide includes:

  • 4 tips for designing category structure
  • 8 tips for designing autocomplete
  • 13 tips for designing filters and facets
  • 10 tips for designing product lists
  • 4 tips for designing hover and hit thumbnails
  • 6 tips for loading products
  • 11 tips for designing a search box
  • 4 tips for designing related results

Here's a sneak peek... 

4 tips for designing hover and hit thumbnails

  1. Synchronise and group all elements which lead to the same path. This will help users understand where the interactive element will lead them
  2. Consider separating elements by their path and functionality so that related paths and features are grouped together. For example:
    • product thumbnail and title follow immediately after each other as they both link to the product page
    • then have elements with other functionality, such as an ‘Add to Cart’ button or the ‘favourite’ heart appear elsewhere.
  3. Use the thumbnail for the primary path only: the product page. ‘Quick Look’ button – if used – should not be placed in the middle of the list item thumbnail
  4. Use ‘Quick Look’ button or hover to present secondary thumbnail images

Hover_and_hit_thumbnails.png

 Search Design Guide 

Topics:

eCommerce Site-Search

Subscribe to our newsletter

Subscribe to our newsletter