Not wishing to sound too astoundingly obvious right off the bat, but your on-site search tool is a key way in which visitors look for products on your website, especially if you carry a huge range of items.
The surprising thing is how easy it is to get on-onsite search wrong: bad placement, lack of auto-suggest, poorly displayed search results, and so on.
Here we’ll be looking at three top UK retailers, using specific criteria to gauge the effectiveness of their on-site search tools.
There is also a US version of this post looking at Walmart, Costco and Target.
Search box design
The search box should be consistent across all pages of the site, avoiding significant usability problems and be positioned away from any other text-boxes.
The John Lewis search box is kept dead central at the top of the page and remains throughout. The top navigation is fairly minimalist, but it’s not so subtle as to be lost.
M&S keeps its search tool on the left hand-side, which is a more typical place for it to appear.
It remains here throughout the journey, and although it is rather small, it does expand when you click inside.
Debenhams’ search bar is more obvious purely because it’s in direct contrast with the solid black.
The design perhaps feels a little dated, but a visitor would have no trouble finding it, which is the main thing.
Automatic suggestions should appear after a visitor types several letters into a search box based on commonly searched key-phrases including common misspellings and abbreviations.
John Lewis provides me with automatic suggestions based on its most popular items, although the results displayed are only ones found that begin with the letters I type.
John Lewis also has an excellent ‘recent searches’ drop-down, which appears as soon as you click.
And although it doesn’t provide automatic suggestions if I make a misspelling, if I hit ‘search’ I am still presented with results for the correct spelling of bedding.
Perhaps a live “do you mean ‘bedding’?” suggestion would help in reassuring searchers that it does indeed stock that item.
M&S also provides the same functionality as John Lewis (predictive text with lack of live misspelling options) but again it does provide the correct results when you click search on a misspelling.
I would suggest the text is too small here.
Debenhams’ search tool doesn’t have any kind of predictive suggestions, the text is incredibly faint when you type.
The only positive here is that, again, misspellings are accounted for on the results page.
The search box should adapt to work on any mobile device and screen size, and remain easily accessible throughout the journey.
None of the retailers have either a responsive or adaptive website. Instead each operates a separate mobile set.
John Lewis shows its full search box on the home page, then places within the confines of a clearly labelled symbol on the top navigation elsewhere on the site.
M&S keeps its search tool hidden behind the magnifying glass. The mobile-web savvy of us wouldn’t have a problem finding it.
Debenhams however keeps its search field visible throughout the entire mobile journey.
Effective synonym management
Search boxes should have the ability to manage alternate terms so that several different keyphrases can trigger the same set of search results (for instance: singular & plurals, earphones/headphones).
All three retailers have no problem dealing with this. I’m returned the same results for every pluralised or singular term entered in all three.
Presentation of search results
The total number of results are shown along with the search term and product images.
Everything is present and correct, with nice clear product images neatly spaced out.
M&S has some fantastic large images in its results, and the search term and number of items are boldly highlighted.
Debenhams has a very neatly laid out results page, with everything expected present. Here you get to see actual models wearing the clothes.
This is helpful as it shows how they’ll look in the real world, but it does mean the size of the product itself is reduced.
Going back to the M&S example though, the retailer has come up with a good ‘best of both worlds’ solution, by changing the image when you hover your mouse over it.
Filter search results
Search results can be sorted and filtered by category, product, price etc.
John Lewis has plenty of options for refining by brand or category, and even has a tabbed section for most popular filters.
M&S however wins this one with a wider array of filters, a neat colour chart and the ability to show only in-stock items.
Debenhams has effective filters too, which although not as detailed as M&S, I like the way the filter links are coloured differently from the header text.
All relevant products are shown in the search results along with any other relevant content or help pages.
M&S delivers all possible results here, however it is John Lewis that goes above and beyond by also providing a link to additional content.
Which takes you directly to the bottom of the page where you can find the following articles.
Over at Debenhams it’s a slightly different story. You have to be more specific than usual when searching for an item to be served a page of results. For instance ‘red shoes’ or ‘black jumper’.
However when you search for ‘jumpers’ you’re presented with a generic knitwear product page.
I then have to either click on a link on the left to access jumpers, or click one of the images to filter my results. It’s not the worst hoop I’ve had to jump through, as if I was presented with a straight results page I would still have to filter, but it feels like a barrier nonetheless.
A solution to this would be if Debenhams provided me with the option to look at a specific subset of products or a landing page within the search tool. Unfortunately it doesn’t provide automated suggestions, so it’s an impossibility.
John Lewis and M&S have excellent search results pages, although M&S pulls in front with its easier to use filter options. John Lewis on the other hand has a much better positioned search box with slightly clearer automated suggestions.
Debenhams however is lagging behind. It needs to include predicted suggestions in its search, much more dynamic images in otherwise fine results pages and perhaps ultimately a refresh of its whole design.
Econsultancy’s Digital Transformation team helps companies identify the gaps between where they are now and where they need to be, and then closes them. Whether you need to re-engineer every process and skillset, or simply move to a new technology platform, we’ll work closely with you to develop a completely bespoke programme, addressing on the way.