The attitude of users toward online shopping can be split into five divisions, as highlighted by Jakob Nielsen in his Alertbox column
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:
John Lewis have used a dark border and dark submit button to entice the user to notice the search.
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:
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:
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 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.
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.