Site stand-off: How Topshop, Zara and Next handle on-site search

Search, Site stand-off, User experience, User journey

It is crucial that users can quickly and conveniently navigate around a site whether that be through the main navigational menu or through the on-site search. It may seem obvious that having a great on-site search not only leads to a better user experience but also to more sales, yet it has become increasingly apparent by analysing the user experience of several websites through our Site spotlight feature that many businesses aren’t using their on-site search to its full potential.

For this week’s Site stand-off we will look at three large fashion e-commerce websites to see how they handle on-site search and where it can be improved.

Design and placement

The search box should have an obvious and consistent placement with no serious usability problems to help guide the user directly to the product they are looking for to quickly convert into sales.

Topshop use a flat design for their search box. It remains in the same place across pages and whilst it doesn’t particularly stand out, the large search icon helps to draw the user’s eye to it. The search icon also doubles up as the “Submit” button but its placement on the left-hand side, rather that on the right where a call to action would typically sit, means some users may not immediately realise it’s a button and thus their only option would be to press the “Return” key to display results.

Site stand-off: How Topshop handle on-site search with the search box

The box is small but it does expand when the user clicks in it.

Site stand-off: How Topshop handle on-site search expanded search box

Zara has a very minimalist design with a vertical main navigational menu which runs along the left-hand side of the page. This means that the search box is consistently positioned at the top of the page away from other elements. Whilst this works as there is no clutter distracting the user, the search box is almost so minimal that it is easy to miss altogether.

Site stand-off: How Zara handle on-site search with the search box

That said, once the user clicks in it the page removes all other elements and the user can focus on their search term.

Site stand-off: How Zara handle on-site search with the search box expanded

Next arguably has the most obvious search box of the three sites as the white box contrasts well against a black background.

Site stand-off: How Next handle on-site search with the search box

Autosuggest and misspellings

The user experience can be greatly improved through the use of autosuggest which displays terms as the user starts typing. This can speed up the search process and can even prompt impulse sales if, for example, popular products are also displayed under the suggested products.

It is also important for searches to account for users misspelling terms and understand what they are trying to search for.

Topshop don’t offer autosuggest as the user types but they do handle misspellings well. A search for “Dres” diverts the user to a dresses category page with relevant results.

Site stand-off: How Topshop handle on-site search with misspellings dresses

Similarly, the misspelling “Sandles” returns pages of sandals.

Site stand-off: How Topshop handle on-site search with misspellings sandals

Zara offers autosuggest as the user types and the products appear and change continually below the search area as the term changes.

As “dres” is typed it suggests adding an extra “s” on the end but still returns dresses regardless.

Site stand-off: How Zara handle on-site search with misspellings dresses

Like Topshop the incorrect spelling of sandals is also recognised and relevant results are displayed but with the added benefit of predictive text displaying the correct spelling as the user begins typing.

Site stand-off: How Zara handle on-site search with misspellings sandals

Next on the other hand does not offer any suggested products as the user types and it does not handle misspellings well.

The term “Dres” gives the error “We found no results that closely match your search for ‘dres'”. A search for “Dress” is likely to be popular so it is poor that misspellings for this word are not recognised.

Site stand-off: How Next handle on-site search with misspellings dresses

They manage to redeem themselves though by successfully displaying sandals for the term “sandles”.

Site stand-off: How Next handle on-site search with misspellings sandals

All three e-commerce sites manage to handle single and plural alternatives to the search terms tested. A search for “shirt” and “shirts”, for example, returned the same results.

Presentation of on-site search results page

The products, number of items and the search term used should be laid out clearly for the user to easily scan through the page.

Topshop presents their results very clearly with the search term standing out at the top of the page in a large font size. The total number of items is a little lost though.

Site stand-off: How Topshop handle on-site search results page

A nice feature is the ability to see what the clothes looks like on a model when the user hovers over the product or if they swift the viewing mode from “product view” to “outfit view”.

The user is also presented with the price of the product and the number of stars if it has been rated.

Zara boldly displays the search term but there is no total number of items returned. Unlike Topshop the user cannot see the items front-on as they are only pictured on a model. Whilst this is visually appealing and gives the page an editorial view it can be hard to determine what the products look like if they are obscured by other clothing or shot from the side. Helpfully the user can change the grid to display larger product images.

Site stand-off: How Zara handle on-site search results page

When the smaller grid is selected the product price and name are revealed upon hover which reduces clutter on the page but makes it difficult to scan based on price. When the user switches to the second grid though the price and name are displayed underneath the product image.

Site stand-off: How Topshop handle on-site search results page alternative grid

Next shows the user the search term and the number of results at the top of the page. The product images are varied between simply showing the items front-on, on a model with a coloured background, or on a model with a lifestyle background.

Site stand-off: How Next handle on-site search results page

The product price, name, rating and colour options are clearly presented under the product image. When the user hovers over a different colour the product image and accompanying details also change. It is odd then that for the search term “shirts” the first 4 results shown are 2 products in different colours. This means that the user can hover over a colour option for a product and be shown exactly the same item as is displayed next to it. It seems to be a wasted opportunity as other styles could be presented to the user in this space.

Site stand-off: How Next handle on-site search results page hover

Filter on-site search results page

The products should be easily filtered and sorted to make it easy for the user to find what they want matching their criteria.

Topshop offers a number of useful filters plus the ability to sort by price, rating, newest and best match. It is a little strange though to see filters for accessories and shoe size for the search term “shirts” and suggests that the search results may be less relevant on successional pages.

Site stand-off: How Topshop handle on-site search results page filters

Zara has very poor filters with the user only able to view products by selecting the category and subsequent subcategory. It would be expected in this case for the subcategories to be ordered by the number of items within them but they aren’t which only adds to the confusion trying to filter the results.

Site stand-off: How Zara handle on-site search results page filters

There is also no way to sort the results, and as previously mentioned, when the products are displayed in the default grid the price is only visible upon hover which makes it frustratingly difficult to locate a specific item matching a criteria.

Next by far has the most useful filters with a long list of options which remain fixed on the left-hand side when the user scrolls down the page. One nice addition is “benefit” where results which are machine washable or in a multipack can be selected.

Site stand-off: How Next handle on-site search results page filters

The results can also be sorted by price, relevance, popularity, rating and alphabetical. It would be expected for the ability to sort by newly added here too but instead this option is located as a tick box above the filters which can make it hard to miss.

In conclusion…

On-site search is a crucial step in the user journey and e-commerce websites should certainly be using that to their advantage. Many users might initially use the main navigational menu in order to locate their desired product, but with sites continuously adding new content it is easy for the information architecture to become unstructured over time and it become difficult to navigate. Frustrated users will either abandon the site entirely or turn to the on-site search functionality so the user journey must be optimised and efficient.

Of the three analysed it is clear that Topshop has the most consistently efficient on-site search functionality and overall the better user experience. They could improve on this by making the search box stand out more, adding more detailed filters and improving the relevance of the results.

Zara has a great predictive text feature and nicely remove distractions when the user is typing in their search term but the results pages suffer from a lack of filters and ability to sort. It is evident that a distinct visual style has been favoured over delivering a strong user journey and whilst this is appropriate to showcase new collections in a different part of the site it is a hinderance to the practicality of the on-site search.

Next has the clearest search box design, an excellent set of filters, and whilst there are some faults, a good search results page. It is let down however with the lack of autosuggest and an inability to correct the obvious misspelling of popular search terms.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>