UI patterns in search refinement

Posted on by jasonbrown

Search refinement is an important part of any website where the user is expected for content. Being able to quickly and effectively refine search results makes for a more positive user experience as the user is able to find the content that they are looking for faster.

The approach I’ve taken with this post is to consider the different elements that can be used to refine search results, then explain what they are, what they do and the situations they can be used in whilst giving examples at the same time.

Common elements for search refinement

There are several common elements websites use for search refinement:

  • Plain text: the user can type in parameters such as postcodes, town names and items they’re looking for in text boxes in plain text.
  • Auto-fill/suggestions: as the user is typing, several search suggestions are displayed that the user can pick from to define their search.
  • Check boxes: the user can select a box by clicking on it to select an option.
  • Drop-down lists/menus: the user can select from a series of items or options in a list.
  • Sliders: the user can move a slider (or two) across a bar to specify a specific value or a range of values.
  • Date pickers/calendars: the user can select a date from a calendar.
  • Category menus: the user can select to search for the term in a selected category.

Refining by using plain text

Searches tend to begin with a key term being searched for, but some searches allow you to refine further by using key terms. A good example is Google’s Advanced Search which uses a mix of elements to refine searches, but plain text is one.

Google Advanced Search allows search refinement by specifying keywords to include and exclude from searches.

Users are able to search Google including and excluding key words and numbers that they must specify. Using plain text to refine searches tends to be fairly uncommon on most websites where search results are typically categorised (so refining by filtering categories tends to be more common), but for search engines it works well because it allows the inclusion and exclusion of user-specific terms.

Some things need to be typed in by a user, for example a postcode as shown here on Autotrader.

Refining by using search suggestions and auto-fill

This could be refining before the search even commences. As the user types in a term, suggestions are made which in a way is refining the possible results that are seen. It’s technically a very basic way of refining, but nonetheless refines a search by initially limiting the number of options available. It’s a very common facility on a a lot of websites and is often used by users to see if a certain term can be searched for before they commit to searching.

The suggestions feature on the BBC site lists news articles and programmes that the user can immediately select before they have even committed to starting a search.

 

Primark’s search suggestions are quite interesting – instead of showing products, categories as the sex for the clothing is shown instead. If the user clicks on ‘women’ for example, the search will only look for women’s jeans. This is helpful for clothing websites where lots of products have the same name but are for different people.

Refining using checkboxes

By far the most common way of search refining is by using checkboxes that the user must check to filter. Typically by clicking on a checkbox, a category is being filtered and anything in- or outside of the filtered category is searched in (depending on how the chekbox filtering has been configured).

They have several advantages:

  • They can be placed almost anywhere on a page and still be easy to find and use.
  • They are quick for the user to check.
  • They are a very common element in multiple digital disciplines (websites, mobile apps, desktop software etc) so everybody knows how to use them.
  • They work well with mouse, keyboard and touch input.
  • They are great for multi-choice options.

They also have some disadvantages:

  • Too many of them can look untidy and it can get difficult to click on the correct box – especially on a mobile device.
  • They can look unsightly if too large or too small.

Almost every website that uses search refinement uses at least one check box as part of the refinement process.

Checkboxes are often displayed on the left side of search results on e-commerce websites to refine search results. Amazon is shown, but eBay and Gumtree have a similar layout.

 

eBay uses a mix of a modal window with checkboxes to make the search refinement tool very obvious to the user. At this stage, the user has clicked ‘show more options’ several times and so at this point they have more options to use which cannot be shown in the panel on the left of the page, so using a model also provides more space.

Refining with drop-down lists

Lists are also very common in search refinement. Most websites utilise these for defining search refinement options if there are a large number of options to select from and checkboxes are not used because they’d look unsightly. The traditional list hides the options from the user making for arguably a cleaner interface, but sometimes it is not obvious to the user which options are available to them. They feature many of the same advantages and disadvantages that checkboxes do, however they are not always the most intuitive to use on mobile devices where screen real estate is low and the potentially small size means that text in the menu is not always legible.

Drop-down menus are good for concealing a long list of options, shown here on Autotrader where the user can specify different things they want to search by, car mileage shown here. These would look ugly and cluttered used as checkboxes, but work well as a list.

 

The Rightmove website employs a similar search refinement design.

 

Google employs the use of menus in their search tools for images. The user is able to filter image results by size, upload date, usage rights and more categories.

Refining with sliders

Sliders are great for selecting ranges. They can be very easy to use on mobile devices as they are easy to slide across with a finger, however on desktop devices using a mouse they can be more fiddly. Sometimes you can click at a point on a bar and the slider will move to that point.

They are not great for selecting multiple options or selecting descriptive terms. However, if you were to define ranges with checkboxes you could have ‘0-20′, ’21-30’ and so on as separate checkboxes, but a slider can allow a user to set their own desired range.

Sliders can be customised to look appealing, usually more so than lists and checkboxes.

However, they are not all that common on desktop websites, possible because designers feel that users are expecting to use checkboxes instead.

Sliders are excellent for defining custom ranges, shown here on StuRents where the rent per person per month can be adjusted by the user to filter results outside of their desired budget.

 

A slider is used on Google Advanced Search to allow the user to select how many results they’d like to see per page. It takes up less space than a row of checkboxes and allows the user to have customisation than a set range of checkboxes would.

Refining using date pickers

Date pickers are ideal for getting the user to select a specific date. Sometimes asking the user to type a date into a text field can be problematic because:

  • The date may not exist, e.g. February 30th.
  • They could type it in the wrong format, e.g. MM/DD/YYYY instead of DD/MM/YY or using words instead.
  • It can take a long time and frustrates users.

The date picker offers search refinement by allowing the user to search between a range of dates quickly and easily. Usually two pickers are used, one for a start date and one for an end date.

The disadvantage is that they obviously have a fairly limited use and sometimes do not work too well on mobile devices as they can be small and fiddly to use on a touchscreen. However, modern mobile browsers are beginning to implement their own pickers that replace ones on websites.

Using StuRents as an example again, users are able to specify start and finish dates of a contract to further filter down results.

 

The Havens Holiday website uses a mix of modals, drop down menus and a calendar to allow the user to initially select the number of nights they wish to stay and then specify specific dates.

Refining using category menus

Category menus can be used to allow the user to search for content that is defined in categories or ‘tagged’, these tend to be used a lot on news websites where the user may search for a term, e.g. ‘Brexit’ and the search facility allows them to find articles listed only in the ‘politics’ or ‘sport’ or ‘entertainment’ category(ies). They are quick and easy to use and tend to work well on mobile sites too, however they don’t offer a deep level of refinement.

The blue buttons at the top of the BBC’s search facility allow the user to change the category that articles are being searched in: all, news, newsbeat, sport and newsround are categories that the user can find results in. It’s simple and helps to filter down results.

 

It’s not quite as clear-cut as the BBC’s, but YouTube’s search filtering also allows the user to search in categories such as videos, channel, playlist and more. Other options such as video resolution are also filterable.

Conclusion

There are so many ways to filter searches, all of which with their advantages and disadvantages. The right tool to use depends on target audience, the platform the site is running on, how many options there are to filter, how the user should filter them and how the aesthetics look! There is no right or wrong answer to ‘which element to use?’ but there are web conventions that can be followed as has been described.