The elements of Search; Part 2

In the previous article on the Elements of Search (Elements of search- Part 1) I discussed the presentation of search, and the basics of search engine results pages (SERPs). In this article I will continue to discuss SERPs, with particular focus on filtering and sorting.

The ability to filter is an important factor in modern search. The number of search results can be reduced giving the user further control of the search, greater clarity, making it easier for the user to discover information. Amazon shows a good example of facet use, please see Figure 1.

Figure 1: Highlighted filters from Amazon.co.uk

In this post I will be discussing facets and attributes. In filtering facets are groups of attributes. So in the example in Figure 1, a facet would be the heading DVD & Blu-ray format, the attributes would be Blu-ray, DVD or VHS.

Suitability

The attributes of your faceted search should be carefully chosen and designed so that they are relevant and understandable for users. The facets and attributes should be able to adapt to the particular search query, so that for example users cannot apply attributes that have zero results (e.g. “1950-1959” is disabled in the Amazon example above).

Facet presentation

Facets are commonly presented in two different ways: drilldown or parallel. In the drilldown technique only one attribute per facet can be used to filter search results. Parallel techniques allow the user to select one or more attributes per facet, this gives the user greater customisation of the results. An example of this would be to allow the selection of two attributes for price range, £25-£50 and £75-£100, whereas using the drilldown technique only one attribute would be selectable.

Displaying selected filters

There are two main ways that selected attributes can be displayed. These are by providing some sort of highlighting on the individual attribute, as can be seen in the Amazon example (Figure 1), where selection is displayed by tick boxes or by removing the attribute from the list and placing the attribute at the top of the filter menu.

Issues with accessibility

The following section contains examples of features that while adding visual delight create accessibility issues; thereby increasing the difficulty in using the form for many users.

Using visual filters

Filters can appear relatively plain when only text is used. It is possible to make them more attractive, though this comes at the cost of accessibility. I will discuss two of these: the use of sliders and the use of colour boxes to denote colour, both examples are visible in Figure 2.

Figure 2: The filters on shopstyle.co.uk may have accessibility issues

The use of colour boxes as a filtering technique is used on a variety of websites ranging from shopping websites to google image search. On Shopstyle (Figure 2) this allows users to select the colour of the garment they wish to purchase by clicking on a square of colour. This could be problematic for users that have difficulty with colours, and for screen reader users who would have to rely on the alternative description provided for each  of the colour swatches. A heavily visual interface can make it more difficult for some users to retrieve information, it is important to  be careful that no meaning is lost, for example when using only alt text. 

Sliders can be used to filter a numerical facet such as the cost of a product, allowing the user to select their own range, instead of having to select from a predefined list. This is hard to use on touchscreen devices as it is difficult to select and move the slider accurately due to the small size of the element. Incorrectly implemented sliders can also be impossible to use for people with motor impairments and those using screen readers,  and for many users it is more trouble than the simpler ‘maximum’ and ‘minimum’ fields.

Auto Update

The use of the auto-update (results automatically update depending on the attributes selected) causes issues with screen readers – and potentially screen magnifiers – because the page is changing with no indication other than visual. This occurs when the page is reloaded each time a new attribute is selected; causing the screen reader to restart on the page. This makes facet selection a tedious process. Provision of an update button allows the selection of multiple filters with only one page refresh.

Figure 3: Update buttons for each facet

Filtering on mobile

Due to the reduced screen size available on mobile devices, other methods are required  to present users with facets. Trends are still emerging with patterns and techniques continually developing. The most common pattern is having the facets initially hidden; and only visible when required by the user. One technique is the use of a drawer, as used on on the BBC mobile website where the filters are initially hidden but can be made visible on the same page as the results, moving the results further down the page. Another technique that gives a cleaner appearance is the use of panels; as used by Amazon, where the filters appear in a panel temporarily replacing the search results, and is then hidden when the selections are made. These methods preserve the limited screen space for the most important information (the results) but also allowing easy access to filtering if it is required.

Figure 4: Hiding filters on mobile