Recently, a few big brands have introduced a new method for displayed facet controls on mobile devices, by placing them in a ‘tray’ overlay on top of the actual results. This new design approach addresses a major shortcoming typical of many faceted search displays on mobile devices: the placement of facet controls on a separate screen, which forces users to work harder to understand how the facet controls affect the results set. But before understanding why this is the case, let’s go back to the basics of faceted search.

What Makes Faceted Search Special?

Faceted search lets users refine a set of results by applying filters that comprehensively describe the search space. Such narrowing is invaluable for users who need to find something specific within a large content set. This type of search has become common for ecommerce and travel websites, as well as many different types of document and media collections. A faceted system includes two critical elements:

  1. Simple controls to construct sophisticated searches: Providing familiar controls like drop-down menus and checkboxes with natural-language labels empowers ordinary users to narrow down a large set of results to a small set that meets their exact criteria—without any special knowledge of Boolean logic or query syntax.
  2. Simultaneous display of the facet controls and the results: Showing both the filters and the results at the same time makes it easier for users to understand the relationship between the two; ideally, this is reinforced by dynamically updating the results set as soon as the user selects a filter criteria.

The simple filter controls are the most obvious component of a faceted system. However, the importance of simultaneous display should not be underestimated. Long before faceted search became popular, we had ‘advanced search’ screens with similar controls for creating complex search queries. The big difference introduced with the first faceted navigation system was in displaying the facet controls and the results at the same time, which makes the effects of each filter instantly visible. This innovation embodies 2 of the 10 usability heuristics: provide rapid system feedback, and offer users control and freedom.

Challenges of Displaying Search Facets on Mobile Devices

Faceted search was originally designed for desktop and laptop users. Translating this experience onto a mobile device is difficult, because the very thing that makes faceted search so helpful to users – being able to see the filters and the results at the same time – is difficult to achieve on a small screen. There simply isn't enough space to show a full set of facets and a decent number of detailed results simultaneously.

Until recently, most mobile designers haven’t even tried to display facets and results at the same time, instead opting to place them on separate screens. But this solution forces users to navigate to the facet-control screen, make their selections, then navigate back to the results set to see the effects of their selections. The istockphoto.com mobile website illustrates the typical approach to providing faceted search to mobile users. The results page includes an icon that users can tap to open the facet controls (assuming they can figure out what the icon means). Once the facet controls are displayed, users can select different filtering criteria, but it’s not obvious how the results will be affected by the facet selection because:

  • None of the results are shown on this screen.
  • The number of files, displayed in the page header updates too slowly.
  • The header showing the number of files may not even be visible once a user has scrolled down to expand and select the facets below.

Due to these limitations, users have to return to the previous screen in order to find out whether their filter selections were effective at targeting the best results and whether they have narrowed the results set down to a manageable size— or if perhaps they've applied such restrictive criteria that no results match.

Mobile search results and facet controls on iStockphoto.com
Left: Like many mobile search designs, iStockphoto.com does not display faceted search controls on the actual search results page. Instead it requires users to navigate to the facet controls, in this case via a cryptic icon composed of lines and circles on the right edge of the Search bar. Right: The facet controls take up the entire screen, and in order to see the effects of their selections, users must navigate back to the results screen.

New Solution: ‘Tray’ Overlay to Display Facet Controls

Recently a new approach to providing faceted search for mobile users has appeared: showing the facet controls as a ‘push-out’ style tray on top of the search results. This design allows for continuous visibility of results: even while the facet controls are open, some information about the results is visible in the background. The Amazon iPhone application and eBay’s mobile website both now use an overlay to display facet controls on the same screen as the search results.

Mobile Facet Tray Overlay Examples
Amazon’s iPhone application (left) and eBay’s mobile website (right) both recently introduced an overlay to display search facet controls on the same screen as the search results. 

Design Pattern Elements

Both the Amazon and eBay designs include several details that combine to create a good user experience:

  • Once activated, facet controls appear in a vertical panel overlaid on top of the results screen.
  • The results are always visible in the background, and can be seen to change as the user makes her facet selections.  (However, in the case of eBay, users can hardly make out what the results are. Amazon’s design is better because users actually get useful information from the background.)
  • The total number of results is always visible, even if the user has scrolled down a long list of facets. (Amazon accomplishes this by fixing the header at the top of the screen so that it remains visible even as the list of facets scrolls up or down).
  • A translucent gray shadow slightly obscures the underlying results and ensures that the facet controls stand out.
  • The facet panel appears at the right edge of the screen, leaving the left edge of the results visible. (This is helpful because the left edge is more likely to have meaningful content; with Amazon you can actually see the product images.)

(You may also notice that both Amazon and eBay use actual words – Filter and Refine – as the commands to access facets, rather than a special symbol.  Any of the labels commonly used for faceted navigation – narrow your results, refine, and filter – are far more understandable than cryptic icons, and definitely worth the extra space. )

Why Is Simultaneous Display of Results and Facet Controls Important?

In usability testing, I am always amazed at how successful people are at immediately understanding and using faceted search screens, which tend to include many different elements and controls. As long as the controls are displayed properly, most people jump right in to creating and refining their queries. Instant results are an important part of the process because they allow users to see right away if they have applied the wrong filter, or applied overly narrow criteria that eliminates too many options. Both of those errors are very easy to recover from if you can instantly see the effects of your actions, but without this visibility users can end up in a tedious cycle of pogo-sticking between the results and the filters. 

The facet ‘tray’ approach illustrated by Amazon and Ebay doesn’t provide complete visibility, since only a small part of the results screen is visible. But these creative solutions offer at least some visibility into the effects of applying a filter. Users may still find that they need to close and re-open the facet controls, but this approach feels more like expanding a part of the current page, rather than jumping back and forth between different pages.

Find out more about the best approaches for visual displays on smaller screens in our full-day courses about Visual Design for Mobile and Tablet.