Having seen the results from some of our Ecommerce clients, we know the crucial importance of site search. But when speaking to new clients, it sometimes helps to use the example of well-known brands when explaining marketing concepts.
This article looks at how site search is being used by some large brands in the UK. The results show many best practice examples to follow. We also unearthed some shocking findings and what you need to AVOID doing.
Site Search Matters
Below are the Ecommerce conversion rates from one of our B2C Ecommerce clients. As you can see, visitors that use site search are almost 5 times as likely to make a purchase than those that do not.
And this is not uncommon. According to a study by WebLinc, shoppers who successfully searched for products resulted in a 216% increase in conversion rate and a 21% increase in order value.
Site Search Position
If you want visitors to use your site search, it must be easy to find. Here we can see an excellent example from John Lewis on the desktop version of their site. The site search is large and centrally placed. The magnifying glass icon and explanatory text ‘Search product or brand’ help the user understand the function.
Screwfix take a similar approach with a centrally placed search box that elegantly fills the space between the logo and navigation items.
Site Search Colour
It’s possible to make the search box even more prominent with the subtle use of colour. Below, Debenhams have used a shade of cyan on their site.
It’s worth noting that they have styled the magnifying glass icon to look like a separate clickable button. Some user experience writers recommend this as superior to just placing the icon in the search box.
Argos have successfully used colour, choosing white to contrast with the light grey of the rest of the header.
ASOS have taken things to the next level with a super-sized search box and reduced product navigation. The white box clearly stands out on the contrasting background.
Open or Closed Search Box
The examples that we have seen so far have been ‘open’ search boxes, where the user just needs to input their search term. An example of a ‘closed’ search box can be seen below from Joules.
In this example, the user must first click on the Search link/magnifier icon and then enter their search term. This presents an extra source of ‘friction’ and is likely to lead to fewer visitors using the box.
Site Search on Mobile
Site search is particularly important for mobile. It’s much easier for visitors to perform a search on their device than going through several layers of navigation. In this study by the Baymard Institute on the ‘State of Mobile Ecommerce Search and Category Navigation’, it was found that:
“Search was generally the preferred product finding strategy of the test subjects during the mobile e-commerce usability study, as they perceived it to be faster than category navigation.”
But an interesting problem arises when optimising your header area for mobile. With the reduced space available, there is increased competition for the all-important area ‘above the fold’.
Do you opt for an ‘open’ search box, as we know that search on mobile is crucial? On the other hand, should you have a ‘closed’ search icon and devote more screen space to your hero image and navigation?
The big brands take different approaches to this dilemma. John Lewis have an elegant solution with an ‘open’ search box spanning the full width (see below).
Next on the other hand, have elected to have a search icon in the navigation. This gives better visibility to their ‘hero’ image before the user needs to scroll. However, users may miss the search functionality.
This is something that is certainly worthy of a conversion optimisation test, if you have sufficient traffic and resources available. Having an ‘open’ search box is almost certain to increase usage, but you will need to test if it increases conversions.
Do what the user expects
‘Don’t make me think’ is as true today in the world of user experience, as it ever was. With something that’s going to affect the bottom line like site search, it’s not worth trying a new design to ‘be different.’
An example is to always use the magnifying glass icon, because users have come to associate this with site search. Although this may sound obvious, there are big high street brands out there that are ignoring what users expect.
Here is an example from Phase Eight. The word ‘Go’ is certainly not as helpful to the user.
Deliver the right results
Again, it may sound obvious, but the results served by your site search should be what the user expects.
Here is an example from the Lush website, when doing a search for arguably their most famous product, a bath bomb.
All the results are articles about bath bombs. Not one visible result takes me to a page where I can see, choose and purchase the product.
Now, maybe Lush have purposely decided to show searchers only content rather than products for sale. But this would be a peculiar decision for an Ecommerce store, and it doesn’t help me as I search for a stocking filler for my Mum!
Let’s look at another example and return to the Joules website, with a search for ‘Mens white t shirt.’
There are some obvious problems here: The results show women’s t-shirts instead of men’s, and the first result is red!
These poor results should have been caught by doing a simple ‘sanity check’ of what users are likely to enter into the search box. Not sure what visitors are typing in? It’s easy to set up tracking in Google Analytics to see the exact terms people are using. Then type these into your search box and see what results you get back.
Having an auto-complete or auto-suggest feature is very useful to users. It makes the process of searching quicker and can help cut down on spelling mistakes.
Here is a good example from Debenhams.
The most appropriate type of auto-complete may be different for different industries. For some Ecommerce stores it may be best to show categories, for others bestselling products. Showing images can also be a useful way to engage the user. The example below from Screwfix shows good use of relevant text searches and images of top selling products.
Here is an overview of recommendations for making your site search work better.
- Make it prominent – Use position and colour to make the search box stand out
- Clarity – Use an ‘open’ search box, together with a magnifying glass icon and explanatory text such as ‘Search product or brand’
- Ensure results are relevant – test your search with typical queries that your visitors would make
- Mobile search – having an ‘open’ search box is likely to increase usage but will take up more of the all-important screen space
- Predictive search – use auto-complete to give better results for users. Consider integrating images.