Mobile Design Pattern Gallery, 2nd Edition

Chapter 4. Search, Sort, and Filter

Search Patterns

Implicit Search; Explicit Search; Auto-Complete; Scoped Search; Dynamic Search; Saved, Recent, and Popular; Search Form; Search Results

Sort Patterns

Onscreen Sort, Sort Overlay, Sort Form

Filter Patterns

Onscreen Filter, Filter Overlay, Filter Form, Filter Drawer, Gesture-Based Filter

Have you looked at AutoDirect, Greensheet, or a similar freebie print ad circular lately? You’ll see page after page of classified ads organized in very broad categories, like Trucks, Cars, and Appliances. You practically have to read the whole rag from beginning to end to see if there are any ads that interest you. This should give you a new appreciation for three basic online tools: search, sort, and filter.

We take them for granted in our digital world. But there are some nuances to getting search, sort, and filter right in a mobile application. This chapter explores more than a dozen different approaches.

Search Patterns

Josh Clark, author of Tapworthy: Designing Great iPhone Apps (O’Reilly, 2010), says that in touch interface design, “buttons are a hack.” That’s because touch gives us more direct ways of interacting with content, like pull to refresh and pinch to zoom. Why use an abstract button when a physical gesture would be more intuitive?

We should think of mobile search the same way. As our apps become more “aware” of our individual needs, they can reduce instances where we have to explicitly search for what’s relevant to us.

For instance, Google “knows” that I have a meeting downtown and tells me when to leave and how to get there. It also knows that I often take the kids to the movies on Saturday, so it “suggests” some shows at our favorite theater. And when I am near a mall that has some of my favorite stores, RetailMeNot shows me all the deals they are running.

This emerging pattern is called Implicit Search. We’ll explore it further, and take a fresh look at the classic search, sort, and filter techniques covered in the earlier edition.

In this section we’ll look at search patterns specific to mobile applications, including patterns for Implicit Search; Explicit Search; Auto-Complete; Scoped Search; Dynamic Search; Saved, Recent, and Popular; Search Forms; and Search Results.

Implicit Search

One night before I had a meeting with a new client, I Googled the client’s address on my PC. As I prepared to leave the next morning, I opened the new version of Google Maps and typed in the first number of the address, and Maps immediately knew where I wanted to go.

Figure 4-1. Google Maps: cross-platform integration

With the new app, Google synchronized my information across channels and performed an Implicit Search for me. Wow, I thought, that was helpful. But then Google Now really took Implicit Search to a new level, showing me where my following meeting was located, when I should leave, and how to get there. I rarely ever need to explicitly search in Google Maps now.

Figure 4-2. Google Now: taking Implicit Search to a new level

I had a similar delightful experience with the RetailMeNot application: as I was driving around running errands, I heard a “cha-ching” from my purse. Wondering why my phone sounded like a cash register, I saw a RetailMeNot notification telling me that my favorite stores at the mall nearby were running some great deals. Once I was in a store, the app surfaced in-store coupons I could use to save on my purchase. This relevant information found me, without my having to look for it.

Figure 4-3. RetailMeNot for iOS: proximity-driven Implicit Search

For me, this is a much more efficient way to find deals than explicitly searching for a store and then searching to see if it is running any special offers. And it is definitely working for RetailMeNot, who saw a fourfold increase in engagement with the introduction of this “geofencing” feature.

There are many other examples of Implicit Search. If location-based services are enabled in Zillow and similar real estate apps, the apps immediately reveal all the properties for sale or rent in the area. Badoo, a social meetup tool, uses the same technique to show nearby people looking to connect.

Foodspotting and Hungry Now highlight nearby restaurants on their landing pages. The former uses a carousel to show pictures and details about each restaurant, encouraging the user to start rating her dining experiences, whereas the latter shows the restaurants on a map.

Note

Consider the possibilities of Implicit Search before choosing another search pattern. It could introduce an element of delight to the user experience.

Figure 4-4. Zillow for iOS and Badoo for Android: location-based Implicit Search

Figure 4-5. Foodspotting for Android and Hungry Now for Windows Phone: more location-based results

Apps like Wikitude and Layar use a combination of the device’s location and the accelerometer to create an “augmented reality” for the user—no search terms necessary.

Figure 4-6. Wikitude World Browser: Implicit Search uses augmented reality

Figure 4-7. Layar for Android: another way to use augmented reality for Implicit Search

Explicit Search

While Implicit Search can create richer user experiences, there are still valid cases for the Explicit Search pattern. As you might guess, Explicit Search relies on explicit user action to perform the search and get results.

The eBay app on Windows Phone 8 is a simple example. Type the search term, then tap on the search icon or hit Return on the keyboard to see the results. But by being just a little smarter, eBay for Android manages to be a lot more helpful.

Figure 4-8. eBay for Windows Phone and Android

Tapping in the search field in the Android app provides a number of options: scan an item instead of typing it, reuse a recent search, or access saved searches. Once the user starts typing, the app surfaces suggestions that match the text entered. Minimizing the need to type in this way increases search efficiency and reduces the chance of error. Also see the next pattern, Search with Auto-Complete.

As eBay for Android suggests, Explicit Search needn’t be confined to text entry. Amazon and RedLaser offer photo and barcode scanning options for quick in-store lookups. These mobile-friendly search features have helped drive the showrooming phenomenon (http://en.wikipedia.org/wiki/Showrooming) that has changed the retail shopping dynamic in recent years.

Figure 4-9. Amazon and RedLaser for Android: Explicit Search via barcode scanning

Voice-based search also can be useful, but it is dependent on the quality of the voice recognition program. We’ve all heard funny stories of Siri wildly misunderstanding user questions (see the screenshots from WhySiriWhy.com), but voice search has already come a long way, and I expect its refinement to continue.

Figure 4-10. WhySiriWhy.com: a site devoted to voice searches gone wrong

Another option for Explicit Search is via direct manipulation. Trulia and Soundwave both offer options to physically draw search boundaries on a map.

Figure 4-11. Trulia for Android and Soundwave for iOS use gestures to draw search boundaries

One more emerging pattern in Explicit Search is Modal Search. In this example from Target, the search field is shown in the navigation drawer, but as soon as it is tapped, “search mode” displays a full search screen with keyboard.

Figure 4-12. Target for iOS: tapping on the search field opens a new search screen

TripAdvisor and RetailMeNot use the same pattern, but in these examples, search lives on the home page instead of in a navigation drawer.

Figure 4-13. TripAdvisor for iOS: Modal Search slides a search screen in from the right

Figure 4-14. RetailMeNot for iOS: the Modal Search screen slides up

The main benefit of Modal Search is the additional real estate the full search screen offers. Just remember to offer a way back (e.g., Cancel) for users who decide not to search after all.

Note

Offer a Clear button and an option to cancel a Modal Search. Use feedback to show that the search is being performed (see Chapter 8).

Search with Auto-Complete

At this stage in mobile design’s maturity, Auto-Complete should be standard for Explicit Search. I was stunned that fewer than 10% of the Windows Phone 8 apps I researched had this functionality, even though these design patterns have been around since 2004 on the Web, and even longer on desktop. Shockingly, even Dictionary.com on Windows Phone doesn’t offer Auto-Complete, and who needs it more than someone using a dictionary app?

Figure 4-15. Dictionary.com for Windows Phone and iOS: Auto-Complete should be standard

Auto-Complete should be implemented so that as text is entered, a set of possible results surfaces. As the user continues to enter text, the search results narrow accordingly. A tap on any result initiates the search. Tapping a button (on the screen or keyboard) should also be an option to initiate search on the currently highlighted result.

Ideally, Auto-Complete results will display immediately, but a progress indicator (“Searching...”) should be used to give feedback. Fidelity displays feedback where the results will eventually be displayed.

Figure 4-16. Newegg and Netflix for Android: Auto-Complete can offer multiple ways to initiate search

Figure 4-17. Fidelity for iOS provides feedback for Auto-Complete progress below the search field

Target’s Android app provides an enhanced Auto-Complete that shows the possible categories for each suggestion. This makes it easier for users to navigate directly to the most relevant search results. Songza also has an enhanced Auto-Complete that shows groupings.

Note

Show a loading indicator if there could be a delay in displaying Auto-Complete results. Consider grouping the suggestions to improve search efficiency.

Figure 4-18. Target and Songza for Android: enhanced Auto-Complete options

Dynamic Search

The Dynamic Search pattern may also be considered dynamic filtering. Here, a blank search field returns all possible category results, and entering a search string dynamically filters down the list. In the Audible example, you can see that my entire audiobook library is shown in the background. When I start to type, only the matching titles remain.

Figure 4-19. Dynamic Search in Audible for iOS narrows results as users type

Figure 4-20. Dynamic Search in Contacts for iOS quickly winnows results of search

Note

Dynamic Search works well for constrained data sets, like an address book or a personal media library, but it should not be used for searching huge data sets, like a retailer’s inventory.

Scoped Search

Sometimes users can get search results faster and easier if you let them narrow the scope of the search before they actually initiate it. Google on Windows Phone 8 offers a menu for specifying a category, while the Google Play Store for Android uses a Spinner control nestled under the search field.

Figure 4-21. Google for Windows Phone and Google Play Store for Android: menus to scope searches

It is common to see a segmented control in iOS for Scoped Search, as in iTunes, but there are other UI options, like Scrolling Tabs or a Pill Bar.

Note

Offer reasonable scoping options based on the data set. Three to five scoping options is plenty. Consider a Search Form to provide advanced search capabilities.

Figure 4-22. iTunes and Amazon Cloud Player for iOS: two options to narrow search scope

Saved, Recent, and Popular Search

Well-designed mobile interfaces follow a basic usability maxim: respect the user’s effort. Saved, Recent, and Popular Searches do this by making it easy to select from previous searches instead of retyping the same keywords or search criteria.

Note

Saved Search typically requires an additional step to name the search for later use, whereas a Recent Search is automatically saved and surfaced. Consider which one will best serve the needs of your users.

Figure 4-23. eBay and Homesnap for iOS: Saved and Recent Searches

Groupon and CheckPay surface users’ most popular searches and most popular search options, respectively.

Figure 4-24. Groupon and CheckPay for Android: surfacing popular searches

Other techniques to respect the user’s effort include location-based searching, as in Airbnb and Foursquare.

Figure 4-25. Airbnb for Android and Foursquare for iOS: location-based searching

Search Form

This pattern is characterized by a separate form for entering multiple criteria, along with an explicit search button. Hipmunk and Skyscanner use Search Forms to set the necessary criteria for searching flights and hotels. See more examples in Chapter 2.

Figure 4-26. Hipmunk for Android and Skyscanner for Windows Phone: Search Form examples

Expedia for both iOS and Android uses an elegant design that animates the origin and destination fields. Both versions also include only the most essential search fields.

Note

Minimize the number of input fields. Use OS-specific input controls properly. Follow form design best practices for alignment, labels, size, and so on.

Figure 4-27. Expedia for Android: a helpful, elegant Search Form design

Search Results/View Results

Once a search is performed, the results can be displayed on the same screen or on a dedicated results screen. Results may be displayed in a table or list, on a map or satellite image, or as thumbnails.

Figure 4-28. Sam’s Club and Saks for iOS: list view and tile view Search Results, respectively

Multiple View Results options are available depending on the type of results and user preferences.

Figure 4-29. Airbnb for iOS: list, photo, and map Search Result views

Another emerging trend for displaying Search Results is to show each result on a card, slide, or tile. Users can navigate these by swiping through them.

Figure 4-30. Google Now’s Search Results on cards; National Geographic’s on slides

Hipmunk has pioneered visualizing flight results with a Gantt chart–style timeline. Expedia’s take on it helps visualize the flight duration in context with the ticket cost and departure time.

Hipmunk also offers an alternative way to view hotel search results. The results are shown on a map—pretty standard, right? But there’s a heat map overlay option for viewing the hotels with respect to area crime, shopping, and nightlife.

Figure 4-31. Hipmunk for iOS and Expedia for Android

Figure 4-32. Hipmunk for iOS: showing a heat map overlay for various statistics

Lazy loading is a common technique for displaying partial results while the rest are being loaded. Many applications, like Allthecooks, automatically load more results when the screen is swiped. Alternatively, the Apple Store provides a link to load more items.

Figure 4-33. Allthecooks and Apple Store for iOS: lazy loading of results

Avoid paged tables—they break the natural interaction model of viewing information on a mobile device.

Note

Label the results with the number of items returned. Use lazy loading instead of paging. Apply a reasonable default sort order.

Sort Patterns

Apple earns praise for some of its user-centric designs, but I’d argue the App Store search function shouldn’t be one of them. Search “finance,” for example, and you’ll get 2,200+ results. As you start flicking through hundreds of apps, you might wonder, are these in any kind of order, like most popular, highest rated, or recently released? There’s no way to tell. Odds are good you’ll need to go elsewhere to research which financial apps will work best for you, and then search for those specific app names.

Figure 4-34. App Store for iOS: 2,200 unsorted results for finance apps

Likewise, having the ability to manipulate search results in Google Maps would be a huge help. I assumed the default result for “gas,” say, would be the gas station closest to my current location, but I found that typically it isn’t.

Instead, I’m forced to open the results list to check the distances of each result. Of course, even this is less than perfect, because distance and drive time are not the same thing. Having the ability to arrange the list by highest rated, distance, or drive time would be super useful. Alas, no such luck.

Figure 4-35. Google Maps for Android: the closest and highest-rated result is hidden on page 2 (Pronto Food Mart)

Although in these instances Apple and Google seem to have forgotten the value of it, the sort pattern can greatly enhance search usability. Consider integrating one of the following patterns with your search results:

• Onscreen Sort

• Sort Overlay

• Sort Form

Onscreen Sort

When you need only a few sort options, an Onscreen Sort can provide a simple one-tap solution. But as we’ll see, many iOS apps have moved away from this pattern in favor of a more space-saving option, like the Sort Overlay.

Figure 4-36. Onscreen Sort examples from the first edition of this book: Expedia and Target for iOS

The email app Boxer reveals Onscreen Sort options only after the sort icon has been tapped, and keeps them visible until the user closes them.

In Android apps, the Spinner control can work nicely for selecting the sort order. Though it doesn’t show all sort options at a glance, it clearly shows which option is active.

Figure 4-37. Boxer for iOS

Figure 4-38. Allthecooks and Evernote for Android: Spinner control for sort options

Sort Overlay

The Sort Overlay pattern is a good alternative to Onscreen Sort. It doesn’t take up valuable screen real estate or force a truncated label when a longer, more explicit one would work better. The user can initiate the overlay by tapping a sort label or icon, and it can be placed at the top, middle, or bottom of the results screen. Audible’s design is one of the most helpful since it shows which sort option is active, even when the overlay is closed.

Figure 4-39. Audible, Dropbox, and eBay for iOS: top-sort overlays

Figure 4-40. Expedia and Hipmunk for Android, and Newegg for Windows Phone: bottom-sort overlays

Figure 4-41. Kobo and Trulia for Android: Sort Overlay dialogs

Wunderlist offers contextual tools, including a sort option, accessible from the bottom-right corner.

Note

Sort options should be located near other tools for manipulating the results list, like filters, view toggles, and the “clear search” button. Clearly show which sort option is active.

Figure 4-42. Wunderlist for iOS

Sort Form

The Sort Form may require more effort from the user, who must open the form, select an option, and potentially tap “done,” “apply,” or “back.”

Figure 4-43. HomeAway for iOS

Hipmunk uses the Sort Overlay pattern for Android, but chose a Sort Form for iOS. The sort selection is applied as soon as it is tapped—no “apply” or “done” button required.

Figure 4-44. Hipmunk for iOS

Figure 4-45. Realtor.com and Kayak for Windows Phone

Unfortunately, in Windows Phone apps the Sort Form seems to be the predominate pattern, with Newegg, which uses a Sort Overlay, being a welcome exception. Another option to consider for Windows Phone apps is the Pivot control, as shown in the Travelocity example.

Figure 4-46. Travelocity for Windows Phone: Pivot control for sort options

Some apps combine sort and filter patterns in a single form. This can seem to make sense, as both are search refinement options. But as with Priceline and Yelp for iOS, it can result in long and crowded screens that veer into anti-pattern territory (see Chapter 11). Yelp for Windows Phone and Foursquare for iOS offer cleaner, single-page designs.

Note

Consider the more efficient Onscreen Sort or Sort Overlay patterns before opting for a Sort Form. If combining Sort and Filter in a single form, keep the screen as short and uncluttered as possible.

Figure 4-47. Priceline and Yelp for iOS

Figure 4-48. Yelp for Windows Phone and Foursquare for iOS

Filter Patterns

Large sets of data can be so unwieldy as to be almost useless. To make sense of them, users often need to filter, or refine, the results. Filters let users select criteria to reduce data sets to their most manageable, relevant results. Common filtering patterns include:

• Onscreen Filter

• Filter Overlay

• Filter Form

• Filter Drawer

• Gesture-Based Filtering

Also see the earlier search pattern, Scoped Search, for more filtering techniques.

Onscreen Filter

Like the Onscreen Sort, the Onscreen Filter is displayed on the Search Results screen. With one tap, the filter is applied.

Figure 4-49. iTunes for iOS and Amazon Cloud Player for Android: Onscreen Filters at top

Google for Android shows its three most common Onscreen Filters across the bottom of the screen. Tapping More reveals other filter options. As a user scrolls the results, the filters hide, so more of the results are visible.

Figure 4-50. Google for Android: Onscreen Filters across the bottom

The Android versions of Groupon and the Play Store use a side-scrolling filter bar to let users quickly find certain types of coupons and apps, respectively. Android calls this control Scrolling Tabs, whereas Windows refers to it as a Pivot Header.

SXSW GO has a two-row filter for selecting the date, session type, and other advanced filter options. You can see when advanced filters are on because the color changes and the text is updated from Filter Off to Filter On.

Figure 4-51. Groupon and Play Store for Android: Scrolling Tabs provide filtering

Figure 4-52. SXSW GO for iOS: double-decker filter

In Android apps, the Spinner control can work nicely for filtering a list. Though it doesn’t show all filter options at a glance, it can clearly show what is selected.

Note

Filtering options should be clearly worded and easy to understand. When possible, provide visual cues to show the filters that are applied or “on,” especially if the filter controls are sometimes hidden.

Figure 4-53. Pocket and Play Store for Android: Spinner control filter

Filter Overlay

The Filter Overlay pattern is a viable alternative to the Onscreen Filter. It doesn’t take up valuable screen real estate or force a short label where a longer, more explicit one would work better. The Overlay may be initiated from a Filter or Refine label, or icons that clearly depict the filtering criteria that can be applied.

Figure 4-54. Airbnb for Android: Filter Overlay

Figure 4-55. National Parks for iOS and Expedia for Android: Filter Overlays

Ness uses icons in the title bar to offer three filtering criteria, with each having its own distinct Overlay. The refined selections display beneath the segmented control.

Note

Filter Overlays are useful for preserving screen real estate and including more advanced filtering options than Onscreen Filters. But they require more user time and effort, so consider the trade-offs before choosing this pattern.

Figure 4-56. Ness for iOS: Filter Overlays for each filtering option

Filter Form

The Filter Form also requires more effort from the user, who must open the form, select one or more options, and explicitly “apply” them. Filter Forms might be the best fit where you have a large number of filter options that lend themselves to being grouped visually.

By necessity, Filter Forms momentarily hide the results being acted on. Note how Zillow for iOS dynamically updates the number of results as selections are made—this helps the user determine when the results list is manageable.

Figure 4-57. Airbnb for iOS, Skyscanner for Windows Phone, and Zillow for iOS 7: Filter Forms

The Filter Form also works well for nested, or hierarchal, selections, as illustrated in the Walmart app for iOS 7.

Figure 4-58. Walmart for iOS 7: nested/hierarchal Filter Form

Allrecipes for Windows Phone offers a Filter Form in context with the search field, similar to the Scoped Search pattern illustrated earlier in this chapter.

Note

As with Search Forms, keep Filter Forms as spare as possible and follow OS guidelines for form design. Resist the urge to innovate new, “clever” types of filter controls to avoid creating an anti-pattern (see Chapter 11).

Figure 4-59. Allrecipes for Windows Phone: Filter Form in context with search field

Filter Drawer

The Filter Drawer is very similar in some ways to both the Filter Overlay and the Filter Form. Like the Overlay and Form, it requires an extra tap of “apply” or “done” to get the filtered results. Its main distinction is that it appears to slide out from the current screen, thus allowing the user to stay in context with the search results being refined. Ideally, the Filter Drawer will reveal a glimpse of the results behind it.

In the Target app for iOS, the Filter Drawer slides down, completely obscuring the search results. Once the drawer is closed, there is no indication which filters have been applied. The only feedback that filtering is active is that the label “filter” is now blue.

Figure 4-60. Target for iOS: Filter Drawer

Here’s an example of a redesign that follows best practices for a Filter Drawer:

• Symmetrical actions to open and close the drawer

• Dynamic update of the number of search results

• Search results still visible in the background

• Explicit feedback when filters are applied

Figure 4-61. Target for iOS: Filter Drawer, redesigned

ToDo for iOS offers filtering in the Navigation Drawer. This will work only for simple filtering, and should be user tested. It could introduce inefficiencies if users would rather open a list and filter it directly.

Figure 4-62. ToDo for iOS: filters in the Navigation Drawer

eBay for iOS has a robust, multilevel Filter Drawer. Tapping Refine on the Search Results screen slides in the Filter Drawer from the right, showing all the possible refinement options.

From the Search Results screen, you can also directly refine specific options—like Category, Platform, and Buying Format—by tapping on those labels, which will reveal the Filter Drawer open at the appropriate level.

The number of results is always displayed at the top of the drawer, and when it closes, the control bar indicates which filters are currently applied. Take a look at the video to see exactly how the interaction design works.

Note

The Filter Drawer can help users stay in context with the results being refined. Show the updated number of results as options are applied, and provide a visual indication of whether filtering is active in the drawer’s closed state.

Figure 4-63. eBay for iOS: multilevel Filter Drawer (http://www.youtube.com/watch?v=M_R3eSFcML0)

Gesture-Based Filtering

Pinch, zoom, and pan gestures can be used for filtering results whose relevance is dependent on location, as on a map, chart, or graph. HomeAway for iOS shows a default view of a certain radius. Pinch–zoom in to reduce the radius and thus the results shown; pinch–zoom out to widen the radius and show more results. Kayak for Windows offers the same functionality.

Figure 4-64. HomeAway for iOS: Gesture-Based Filtering

Figure 4-65. Kayak for Windows Phone: Gesture-Based Filtering

Note

Gesture-Based Filtering provides an intuitive way to refine results whose relevance to the user depends on their location. Consider combining it with other filtering options, since location may be only one of the user’s criteria.