29th February 2016

UX Series: The basic principles for designing search & results

Jenny Goodwin
UX Designer

There are a number of things to think about when designing the UX behind search and results. For ease of reading, I’ve broken this article down into three key areas:

  1. Search form design
  2. Search results design
  3. Search results when no results display

Search form design

1. Don’t make your users search for the search

Most users will expect to find the site search at the top of the page, either to the right hand side or in the middle, so keep your search in a predictable location to avoid users searching for it. If your search acts as the main navigation for the site, consider placing it in the middle of the main area above the fold so there’s no chance of missing it, like Airbnb. 

Airbnb

2. Let your users know what information you need from them

To avoid users searching incorrectly, include a prompt within the search form. For example, if your search relies on users searching by location, you could ask ‘Where would you like to go?’ or ‘Search by location’.

Even for a typical site search, include a prompt such as ‘Search the site…’ so that the purpose of the search is always clear.

Aldi initially hide their search behind a search button, but once clicked the search feature is big, clear and includes all the necessary prompts to let a user know what it is they can search for here.  

Aldi

3.   Have an auto-complete feature

If you have an auto-complete feature, you can speed up the search process for your users. It works by generating a list of search suggestions based on what the user is typing, therefore making the search process more efficient by producing more accurate search results.

A good example of this is shown by Skyscanner, which uses an auto-complete feature on the ‘From’ and ‘To’ fields for airport destinations.

Skyscanner

Search results design

1. Show your users which results are being displayed

Always let your users know what search term their search results are related to.

You could do this by leaving the search term they have used in the search box, or using it as the title for the search results display, for example ‘Showing results for [search term]’.

It’s good to remind users what they’ve searched for, rather than relying on them to recall what they have written. This also makes it very easy for users to tweak their search term if it hasn’t provided the results they were looking for.

When searching for a ‘coffee table’ for example on IKEA, the search term is left in the search input field, but is also repeated in the title of the page, just above where the search results begin.

Ikea

2. Provide filters and sort by options

Provide filters and sort by options so that users can pick and choose how and which results they see.

However, it’s important not to overwhelm users with too many options. If your search requires a lot of filters, then collapse some by default.

Using sort by options such as ‘most popular’ and ‘most relevant’ or allowing users to choose ‘list-view’ or ‘grid-view’ gives your users the ability to choose how they view their results in a way preferable to them.

Finally, don’t forget to show the number of search items available in each item, so that users can make a decision on how long they want to spend looking through results.

3. Help your users choose the right result

Include a title and a link per search item, so that your search results are clear. The title could double up as the link, as long as the title is clearly identifiable as a link.

Including descriptions to help describe the search result and highlighting the user’s search terms in the description can help your user decide whether it is the right result they are looking for.

Adding things like ratings, number of favourites, number of views, extras, prices etc. to each search item may help your user decide which result is best for them.

Including images may also help your users make an informed decision, as images help users scan the page and aid understanding (if the image is relevant to the search result).

Yummly rely heavily on imagery in their search results to capture users, but they have also included additional data like where the recipe is from and how many people have saved the recipe (in the white circle) to help users choose which result is best for them. When the user hovers over an image, a brief description of the recipe also appears, which is a nice touch.

Yummly

Search results when no results display

1. Show a clear ‘no results’ message

When a search returns no results, make sure your users are made aware of this by including a clear message stating that their search term could not return any search results.

Make sure you display the search term they used, so that they can remember what they searched for and change it easily if they want to try again.

2. Correct typos

If a user mistypes a search term and you’re able to detect this, you could show them results for the guessed and ‘corrected’ search term instead. If you do this though, make sure you let the user know that the displayed results are for the guessed search term, rather than their original search term.

asos do a good job of displaying alternative results when a typo occurs without offending the user. Including subtle messaging like ‘we also searched for Shoes’ with the original search term of ‘Shoels’ being displayed next to it allows the user to understand what results they are viewing and also where they went wrong.

asos

3. Show alternative search options

To prompt your users to explore alternatives if their search returns no results, you can show the most popular searched for items instead. Your users are less likely to give up on their search journey if they see a most popular ‘searched for’ list that provides inspiration for their next search.

However, make sure that you clearly state that the displayed results are alternatives and that their original search term returned no results.

 

There’s plenty of creative options when it comes to designing the UX behind search and results, but if you follow these basic guidelines, then you’ll create an efficient and enjoyable search and results experience for your users.

Find out information on Deeson's UX services.