Best Practice for eCommerce – Site Search

blog-site-search

The attitude of users toward online shopping can be split into five divisions, as highlighted by Jakob Nielsen in his Alertbox column

  • Known-item purchases
  • Category Research, where users identify and buy products that best match their needs
  • Bargain hunting
  • Browsing for inspiration
  • One time shoppers, e.g. users who have received a gift card, followed a discount link and not likely to return to the site
eCommerce stores must support all different types of shoppers.

Product findability is essential to the success of an eCommerce store and the site search is a crucial feature which enables users to find specific products; search box placement should not be neglected as it is one of the main interactions users have with a site.

Search boxes should be in prominent positions, high up in the layout to encourage the user to search. The header area has become a conventional placement for the search box with lots of sites locating it on the top right corner or top centre of the page.

Some live examples:

Tesco Search

Target Search
M&S Search

Tesco, Target and M&S all enhance their search box by allowing users to set some narrowing filters before beginning their search e.g. “Groceries”.

John Lewis have used a dark border and dark submit button to entice the user to notice the search.

John Lewis Search

boohooSearch

Boohoo’s white search box is set on a black background, which accompanied with the highlighted submit button helps their search to stand out.

The magnifying glass has also become a conventional icon for search:

asos Search

boden Search

Asos and Boden both use white space to ensure their search box is easy to locate.

Faceted Search – The results page.

Faceted search has become the de facto standard for eCommerce websites and users have come to expect navigation to be located on the left-hand side of the page. Users need to be able to narrow through the search results easily.

The success of faceted search relies on how easy it is for a user to break down a large set of results into smaller, personal selections. In todays online world users want the power to navigate through the search results in their own way. The facets should be there to subtly guide and help users customise the search.

Looking at different ways faceted navigation has been executed:

John Lewis

johnlewis-left

The John Lewis faceted navigation is usable and helpful. They have identified the top five facet themes and have these expanded at the top and any additional facets that may assist the user are collapsed further down the page with the option to expand.

When a user hovers over the plus or minus icons which expand and collapse the facets, tool tips come up to tell the user that this will happen. The plus and minus icons have come to be standard icons used for show/hide features, used by a lot of sites both transactional and non transactional. John Lewis have found the tool tips are beneficial to their target market, they are not offensive to users who are familiar with the icons and a good visual aid to those who don’t how the navigation works.

The facet links are clearly labelled and relevant to the product. The facets have numbers next to them clearly telling the user how many products are available under that refinement.

The colour blocks are a good visual aid which bring the navigation to life.

It is easy to select multiple facets and allows users to bypass the links they don’t need saving time.

There is pagination at the top and bottom of the results page allowing users to customise the order the results are displayed.

If the user drills down the refinement so that no results are available then a message appears giving the user the choice whether to go back to their previous selection or start a new search.

asos-left1

Asos faceted navigation works slightly different to John Lewis but is still a clean usable navigation, easily customisable by the user. In this example they have nine facet options all expanded on page load, with the option to minimise. Asos use left aligned arrow icons, another popular icon used for show and hide functionality.

Asos have used scroll bars to save space on the page when a facet group has a lot of options.

Asos opt not to tell the user how many products are available per facet. The decision to show or not show the numbers is not black and white, it should be decided per store and should be based on how their target audience shop. If a store does not know whether displaying the numbers will enhance the users search then they should look into Multivariate Testing.

If a selection effects any other option in the navigation then that facet becomes greyed out and not selectable.

Asos use an aesthetically pleasing price selector tool that easily allows the user to set there own price brackets, the user doesn’t have to select from a formulated list and can create their own price restrictions. This also is a good space saver.

The results refine quickly after making a selection and the page doesn’t reload. Everything works nicely and it is a comforting experience.

Do’s and Don’ts: 
  • Put the search box in a prominent place on every page, don’t make it hard for the user to find it.
  • Don’t have lots of facets, information overload presents the users with too many facets and contradicts the idea of narrowing. Here is a good blog post I have read on faceted overload.
  • Style your faceted navigation so it does not look crowded
  • Do research to identify what facets you should offer ensuring your facets are focused and helpful, these will change per product type and may change over time e.g. over the last few years customer reviews have been integral to high value user purchases on the web with many stores offering review ratings as a facet
  • Choose clear labels
  • Order the facets based on importance, which research will help pinpoint
  • If budget allows, use a sophisticated solution which allows a user to select multiple options per facet theme
  • Do build trust with the user. Users need to be reassured that they can undo any option and not lose their results or settings
  • Don’t be restrictive – Check box selection is a good solution so users can select more than one choice
  • Do try and use faceted minimisation (expand/collapse). If a list is long when expanded either use a scroll like Asos or use the ‘more…’ link which only presents the most popular items to the user until the user specifically requests to see them.
  • Facet selections should be easy to refine and alternate between
  • Do show the results pagination at the top and bottom of the results, giving the user the choice to show how many results they want to see and in what order
  • Do clearly show the user that they are on a search results page if they have landed on that page as a direct result from typing into the search box
  • On page load order the results by relevance and interest to the user

Faceted search requires a lot of thought to be executed properly and should not be added impulsively to an online store just because sites think they should have it. A successful faceted search considers usability principles carefully and looks at the navigation from the user perspective. Testing and research should be conducted to understand how users look for information, if not it risks adding complexity to the user experience.

Congratulations Jeetly Petite :) exciting news & great achievement!
introduces the ‘time machine’ feature in Street View to show ‘then’ & ‘now’ shots. Read more here >