How using search can capture sales and improve UX

Having a clear, functional and suitable search system on your website is essential as it is one of the main ways that people will find information or products on your site. This article will take the form of the journey though search, highlighting key areas and discussing how your site can capitalise on it.

We will look at ways search can supplement and enhance other available navigation systems, while delivering a better experience to your users. An effective search feature will also help make your site more inclusive by providing multiple ways to get to content (some users may find it much easier to use search than to browse). And, it’s helpful in meeting the WCAG 2.1 Success Criterion 2.4.5: Multiple Ways.

Landing on site

As search is intrinsic to every navigation system, it is important to not only make it easy to find, but keep it in a consistent place. This means that no matter where a user is on a website, if they can’t find  the information they are looking for, they will be able to search from the point that they are at. A good example of this is the BBC, who keep the search in the same location across their website.

The BBC website also makes it clear in the search area if it is narrowed down to a particular section of the site. For example, this is shown when in the iPlayer section the label for the search changes, clearly setting the expectation for the user that the results will be from iPlayer.

The search query box should also be a suitable size for the types of queries that people enter on your site. It should be at a size that allows people to see their full query, permitting them to easily review and fix any possible errors before completing their search. This may be difficult to set initially, but it is an important area where analytics on search terms can guide your website development.

Supporting search intents

When a person is conducting their search, there are several techniques that can be used to assist and guide them. Consider providing possible suggestions when the search area is first selected. This can allow you to provide links to key information or on a e-commerce site to promote additional products, see the example below were Apple are using this to highlight store information at this time.

Providing autocomplete while typing a search query also provides additional assistance by delivering keywords or examples of other searches. Options in the autocomplete list should be selectable so that the participant can quickly choose a new, more appropriate option if they desire. Remember, if you choose to use autosuggestions, then you need to make sure these can be both read out by a screen reader and navigated with a keyboard.

In the example below, Amazon use this technique to highlight what is believed to be the users most likely search, as well as displaying related options.

Displaying search results

Results should be presented differently depending on the information that would assist the person in taking their next step. Next, I’ll discuss the general techniques that could be used for the likes of online stores. A general rule is to retain text after searching, and allow the text to be editable. This enables the user to explore different search patterns and make it more precise. An example of which is on the John Lewis site, where the search box remains populated with the search term that was used, and can be easily updated to refine the search.

It is also important to consider which filters are suitable for the content on your site. Showing relevant fields can help users to narrow their search. But filters must also be able to work with a keyboard and screen reader. And if there are a lot of them, include a mechanism for users to skip them.

To make your search function accessible and compliant with WCAG, you need to meet a range of specifications, such as ensuring the search box is consistent across all of your webpages. The search box and results page should also have good colour contrast (in its text, borders and icons), as well as be navigable with a keyboard and include an obvious keyboard focus indicator. Both should also be easy to scan and comprehend (e.g. using headings to add structure to the search results page).

From a more technical perspective, it should also be coded properly so that people using screen readers can understand it, including where to type their search terms and where to click to perform a search. If the search results load dynamically (rather than a page refresh) you need to make sure that a screen reader announces that new content has loaded.

General search best practice

Search results should come with a clear title link that indicates clearly that it is a search result. In addition to these links – which are usually the page title – a short description should also be provided. This anchoring metadata is not only good for your user, it also helps with rankings on the likes of Google, as it provides indexable context for its bots as they crawl and decipher your site. Learn more about adapting your content to Google’s bots.

See the example below from Now This, an online news site, where in addition to using a title and description to summarise the news story, they have also included additional key information. This includes the date that the story was published, the tagged section of the site that it was published in (News) and imagery that further draws people into the story.

If you are planning for ecommerce sites

Meanwhile, for ecommerce sites, it’s still important to supply results along with content that aides our encourages the user to make the next step in their purchase. This additional content should encourage the person to review the product further, choose a competing product or take the steps towards purchasing the product. This microcopy, while only functional signposting, can be an opportunity to strengthen your relationship with your users.

If you display imagery of the product, make sure that the image matches the product description that is being given e.g. if the search results returns a red product, both the image and product description should match this statement. See the example below from Next where images of multi-coloured products match the textual description requested by the user. There are also small sample swatches in the results informing the customer that the product is available in more colours. Ideally these swatches should also have the colour in text as well so that that are colour blind know what colour the clothing is.

When adding imagery to any search results, make certain that the images are given suitable alternative text. This does not have to only be through the alt text but can include be the title of the image or description next to the image.  If this is done you can give the image an empty alt text value, as you don’t want to duplicate information  as that section could become very verbose for screen reader users.

Achieving this balance is complex as you need to make sure that  information is not lost, but will allow people who have a visual impairment can understand the item that they are being presented with. Over two million people in the UK have sight loss and need to access websites using screen readers, so you need to make it easy as possible for them to navigate your site and make the next step in their purchase.

Provide stock information along with search results, this allows the person to understand the products that you have available, as in the example below from Zwift.com the ‘Elite Suito’ is out of stock, allowing the viewer to know that they are currently unable to purchase that product, but there are others available. Additionally, if low stock numbers are shown, it can push users to make a faster decision about the product.

It is important to remember that while the main purpose of your site may be to showcase your products and encourage purchases, people will still visit your site for additional information relating to your products. An example of this can be seen on the O2 site, where in addition to providing products, they support results for queries such as returns, providing the customer with the support that they may also be looking for.

If your catalogue consists of items that might be more of an impulse purchase, or are commonly bought – for example, Tesco’s tinned soup  below – you should let them add the product to their basket from the search results page. You could go a step further and let them add more than one item, or highlight any additional offers. This may inspire people to look at products that they otherwise wouldn’t.

What happens if there are no results?

If the search returns no results, you should make it clear what they should do next. Make sure that they are provided a path out of the search, as well as visible solutions to their issue. You could also feature other suitable topics that maybe of interest to the searcher.

For ecommerce sites, you could also present additional offers or previously viewed products, allowing them to complete a purchase that they may have previously been considering. This can be seen the B&Q example below where they initially provide assistance to the person, helping them to recover from an unsuccessful search. Then they provide forward paths for the person, allowing them to gain access to their more ‘Support’ focused sections such as their store finder, or to continue their journey by returning to their recently viewed items.

Successful search

A successful search opens your products and services up to your audience. Far from being a purely functional part of your site, your search capacity should be treated as a powerful commercial tool that can may make or break a sale. Investing in these navigation systems and ensuring they support user journeys is integral to connecting with your customers. After all, how can they ‘purchase’ if they can’t even find the product they’re looking for?

If you’d like to read more about how our UX methods for search can support your customers, take a look at the elements of search. Alternatively, you can get in touch to talk directly to our team about your organisation’s unique requirements.