Design Patterns for Mobile Faceted Search: Part I
In my previous Search Matters column, â€œMobile Finding: Turning Limitations into Opportunity,â€ I discussed how mobile search user experiences differ from those on the Web. In this and my next column, Iâ€ll look specifically at the challenges and opportunities of mobile faceted search. This column covers design patterns for maximizing the real estate available for search results, while the next will cover strategies for making people aware of filtering options.
Faceted search is extremely helpful for certain kinds of findingâ€”particularly for ecommerce apps. Unfortunately, the designers of mobile applications do not have established user interface paradigms they can follow or abundant screen real estate for presenting facets and filters in a separate area on the left or at the top of a screen. To implement faceted search on mobile devices, we need to get creative rather than following established Web design patterns. Join me in exploring the Four Corners, Modal Overlay, Watermark, and Refinement Options design patterns for mobile devices. Following these patterns can move us one step closer to making faceted search a usable reality on mobile devices.
But first, letâ€s take a look at the challenges of designing mobile faceted search, which include navigational elements that use up precious screen real estate, limited search-refinement options, and the general lack of an iterative refinement flow.
Mobile Faceted Search Challenges
Recall that one of the mobile applications I discussed in my last column was Amazonâ€s iPhone app. Figure 1 shows its search results screen.
Figure 1â€”Faceted search in Amazonâ€s iPhone app
On the Web, Amazonâ€s faceted search is nothing short of gold standard, so comparing their Web faceted-search experience to that of their iPhone app is instructive. Looking at the Amazon iPhone app in Figure 1, the first thing to note is the amount of screen real estate Amazon has devoted to things other than search results. Their fairly standard iPhone page layout has a navigation bar at the top and a tab bar at the bottom, which together take up about 74 pixels. In all, Amazon has permanently devoted almost 22% of their precious screen real estate to navigation and other features. As a consequence, they can display only three search results at a time. And Amazon is actually fairly frugal with its screen real estateâ€”at least in comparison to other mobile ecommerce applications.
Another interesting issue is that the userâ€s keyword queryâ€”in this case, green lanternâ€”does not appear in its entirety in the applicationâ€s navigation barâ€”both because the user interface displays the query in a really large font and because the query text has to compete with a large search refinement button that is also on the navigation bar. With the screenâ€˜s limited real estate, the query gets cut off, allowing only greenâ€¦ to appear there.
Last, but not least, the only search refinement Amazon presents to customers is By Categoryâ€”a button that takes a customer to a different category-selection screen. While category is definitely one of the most useful and frequently applied facets, offering category selection alone hardly compares to the rich array of search-refinement options that is available on Amazonâ€s Web site, as shown in Figure 2. Conspicuously absent are various sorting options, as well as filtering by price.
Figure 2â€”Search on Amazonâ€s Web site presents many refinement options
However, in these screenshots, you cannot see one of the most important and striking differences between search on the Web and on mobile devices, which you can understand only in terms of the appâ€s search-refinement flow. Figure 3 illustrates the differences between Amazonâ€s Web and mobile search-refinement flows.
Figure 3â€”The differences between the Web and mobile search-refinement flows
On the Web, Amazonâ€s search supports progressive, faceted search refinement and exploration as one of its primary goals for the search process. As Peter Morville said in his brilliant book, Search Patterns, â€œFaceted navigation â€¦ helps us learn. Search becomes an iterative, interactive experience where what we find changes what we seek.â€ For example, on the Web, a customer who starts with the keyword query Nike can narrow down the search results by category (Shoes), additional keywords (Nike Air), product type (Cross Training), and size (12).
In contrast, Amazonâ€s iPhone app does not preserve search refinement as part of its finding flow. The customer who starts with the keyword query Nike, then refines the results By Category (Shoes) is unable to refine the results further. If a customer attempts to refine a query by adding more keywords (Nike Air), the app removes the customerâ€s prior category selection (Shoes), doing a completely new search for the query Nike Air and searching all categories. This behavior has the unfortunate effect of interrupting the flow of step-wise exploration and discovery that is central to the faceted search experience. Obviously, there is a real need for better patterns for the step-wise narrowing, expanding, and refining of faceted search results on mobile devices.
Mobile faceted search needs to balance customersâ€ needs to both refine results and maintain their search-refinement flows against the limited screen real estate and fat-finger issues. We must especially guard against introducing false simple-mindedness in the name of simplicity. Simplicity is a great goal, but as John Maeda said in his masterful book, The Laws of Simplicity, â€œSome things can never be made simple.â€ Using the words of Albert Einstein, we have to strive to make the most of the tools available to us and make user interfaces â€œas simple as possible, but not simpler.â€ The four design patterns that follow make the most of the available screen real estate, while providing intuitive and useful search-results refinement capabilities and improving the mobile faceted-search experience.
Four Corners and Modal Overlay Patterns
As I described in my column â€œSearch Results Satori: Balancing Pogosticking and Page Relevance,â€ maximizing the number of results on a search results screen is key to improving information scent and overall finding efficiency. One of the most successful design patterns for maximizing the use of screen real estate is the Four Corners pattern, shown in Figure 4.
Figure 4â€”Four Corners and Modal Overlay patterns
The Four Corners pattern devotes almost the entire mobile screen to search results. Users can display particular functions by tapping the semitransparent corners, which provide access to filters, the home page, and two additional menus. This pattern includes a thin, persistent status bar across the top of the screen, which displays an entire search query, plus any applied filters, rather than just the few characters Amazon Mobile displays in a large font. Displaying an entire query is highly beneficial, given usersâ€ mobile context of use and the frequent interruptions inherent in the mobile finding experience.
Although the design pattern is called Four Corners and triangles are the most effective shape for the corners, they donâ€t necessarily have to be triangles. Other alternatives include semitransparent buttons or floating icons. However, for transparent buttons, itâ€s best to keep icons simple and avoid text labels.
Another pattern that works really well with Four Corners is the Modal Overlay pattern, shown on the right in Figure 4. A modal overlay can display various search-refinement options such as filtering and sorting. As I wrote in â€œThe Mystery of Filtering by Sorting,â€ it is not necessary to place filtering and sorting in two different areas of a screen. Most people have, at best, just a vague idea of the differences between the two features. This is particularly true for the mobile experience, where screen real estate is at a premium and minimizing the number of taps necessary to achieving a goal is key.
The Four Corners and Modal Overlay patterns work particularly well in combination. In Figure 4, each user interaction on the modal overlay refines the search results interactively. This dynamic interaction model works great, because users can always see where they are and what filters they have applied, and they have easy access to further refinement options, all without ever leaving the context of the search results screen.
Some touch phonesâ€”like the iPhoneâ€”do not provide an API (Application Programming Interface) for modal overlays, but instead deliver content one screen at a time, with transitions between screens. On such devices, youâ€ll need to fake modal overlays. You can achieve this effect by rendering the same search results on a new screenâ€”this time with a slightly darkened backgroundâ€”with a modal overlay over the results. When displaying this new screen, an application should minimize any transition to help to preserve the illusion of maintaining the search results context.
Watermark Pattern with the Full-Page Refinement Options Pattern
The latest generation of smartphonesâ€”including the Apple iPhone, Palm Pre, and Google Androidâ€”provides designers with a whole bevy of novel interaction models. Some of the ways in which people must interact with new smartphones may not be obvious to them, because they may not match their existing mental models or the affordances of devices with which theyâ€re familiar. Nevertheless, once people discover these interactions, they seem surprisingly intuitive and fun, and people do not easily forget them.
In mobile computer games, it is common practice to teach players by allowing them to manipulate their mobile devices through various gestures, including tilting, turning, and shaking themâ€”or even using a deviceâ€s accelerometer to mimic the way one would use a magic wand: â€œIncendio!â€
Figure 5â€”Fun ways of employing the iPhoneâ€s accelerometer in the Harry Potter game
In ecommerce applications, customersâ€ object in interacting with a mobile device is not typically entertainment, but the efficient acquisition of goods, services, or informationâ€”so necessity typically shortens their learning curve. If we want people to be able to perform a nonstandard interaction to use a deviceâ€s essential features, the interaction must be fairly obviousâ€”and it must not require them to read instructions they would perceive as obnoxious or distracting. This is where careful use of the Watermark design pattern can be especially powerful.
A watermark is a transparent outline that appears either over or behind the primary content on a screen. In some ways, a watermark is similar to a splash screen, but it is considerably less distracting because watermarks let users see the content on the screen at the same time. Figure 6 shows two variations of the Watermark pattern, plus a full-screen example of a Refinement Options pattern.
Figure 6â€”Two variations of the Watermark pattern and a Refinement Options pattern
The two examples of the Watermark pattern, shown in Figure 6, demonstrate a circular swiping gesture and a shaking gesture on a multitouch device. In both cases, once a user launches an application, each watermark appears just once or twice, gently dissolving to let the user view the screenâ€s main content. Watermarks can also use animationâ€”for example, to demonstrate the motion of the circular swipe by displaying one arrow at a time on the screen. However, animation greatly increases a watermarkâ€s visibility, so you should use it with care. Circular swiping emulates the motion of digging into a pile of puzzle pieces to find the right one, while shaking recalls the action of shaking up small, loose objects in a bag or a box.
In each case, the idea behind the watermark is to educate or remind people about the gesture or interaction that is necessary to view a screen containing additional search-refinement features. Once people decide to dig in further or shake up their search results, the application displays a full screen of refinement options, as shown at the bottom of Figure 6. This screen provides an example of the Refinement Options pattern. Again, the thin, persistent status bar across the top of the screen shows the query. Together with the watermark, this helps maximize the real estate the screen can devote to search results, while making exploration intuitive.
With a full screen of refinement options, a user can view four or five of the most popular values for each of the facets and select a facet value with a single tap. This is almost like having the entire array of refinement options on a typical faceted search results Web page. Having the search box integrated into the refinement options page also re-enforces the idea of applying search query terms and facets together as a set, just as they are on a Web page. Together, these patterns let us duplicate the intuitive and efficient step-wise refinement and expansion flow our customers expect from a faceted search results page on an ecommerce site. Using a scrollable screen of facets rather than a modal overlay like that shown in Figure 4 allows us to devote the full screen width to the search results, sprucing them up with icons for popular refinement options and letting customers refine the results with fewer taps.
Does this mean presenting a full page of refinement options is better than a modal overlay? Not at all. A modal overlay displays its refinement options within the context of the search results, while displaying a separate results-refinement screen, along with its associated transition, yanks customers out of the search-results context and presents what some people might think is an overwhelming variety of refinement options.
When discussing design patterns, avoid getting caught up in judging one pattern to be better than another. Each pattern is useful in specific contexts and applications and for particular purposes and types of customers. Design patterns are like a language we can use to communicate with our customers. It helps to have a vocabulary of patterns that is as complete and varied as possible, as well as to use each pattern appropriately to communicate your design message with clarity and precision.