UI Patterns For Mobile Apps: Search, Sort And Filter

Advertisement

As I was waiting for a table at a local restaurant the other day, I flipped through a couple of the free classified papers. I was shocked to realize how dependent I’ve grown on three simple features that just aren’t available in the analog world: search, sort and filter.

AutoDirect and some of the other freebies are organized by category (like trucks, vans, SUVs) but others, like Greensheet, just list page after page of items for sale. I would actually have to read every single ad in the paper to find what I wanted. No thank you, I’ll use Craigslist on my phone instead.

But after taking a look at Craigslist mobile, it became obvious we could all benefit from some best practices around mobile search, sort and filter UI design. This article explores a dozen different ways to surface and refine the data your customers want.

Search Patterns

Before you ever try to design a search interface for any platform, buy and read these two books: Search Patterns: Design for Discovery1 by Peter Morville and Jeffery Callender, and Designing Search: UX Strategies for eCommerce Success2 by Greg Nudelman.

Then take a look at these search patterns specific to mobile applications:

  • Explicit Search
  • Auto-Complete
  • Dynamic Search
  • Scoped Search
  • Saved & Recent
  • Search Form
  • Search Results

Explicit Search

Explicit search relies on an explicit action to perform the search and view results. That action might be to tap a search button on the screen, like Walmart, or on the keyboard, like Target. The results are typically displayed in the area below the search bar. Consider pairing an explicit search pattern with the auto-complete pattern.

3
Walmart4 uses a search button (Go) on the screen, Target uses the Search on the keyboard.

5
Target376 loading and then displaying search results.

Offer a clear button in the field and an option to cancel the search. Use feedback to show the search is being performed.

Auto-Complete

Probably the most useful search pattern that emerged in Web 2.0 is auto-complete. Typing will immediately surface a set of possible results, just tap on one to selected it and the search will be performed. Or continue typing your own criteria and then tap the explicit search button.


Android Marketplace7 (Google Play) and Netflix8 both use auto-complete

Ideally the results will be displayed immediately, but a progress indicator (searching…) should be used for system feedback. Netflix (above) uses an indicator in the search field, whereas Fidelity (below) displays one where the results will eventually be displayed.

9
Fidelity10 shows feedback while loading the auto-complete options.

TripAdvisor provides an enhanced auto-complete, grouping the results by popular destinations, hotels, restaurants. LinkedIn does something similar by showing direct connections first, then other people in LinkedIn.


TripAdvisor5611 and LinkedIn12 group the suggested options.

Provide feedback if there could be a delay in displaying the results. Consider emphasizing the matching search text in the search results.

Dynamic Search

This pattern may also be called dynamic filtering. Entering text in the search field will dynamically (onkeypress) filter the data on the screen. Note, the examples may look similar to auto-complete but there is a different interation model. The dynamic search pattern is used to refine or whittle down a existing and visible list of objects. In these examples from BlackBerry App World and WorldMate on Android, apps and hotels, respectively, were already displayed on the page.


BlackBerry App World13 and WorldMate2414 offer dynamic search for refining a big list of results.

Works well for refining constrained data sets, like an address book or personal media library, but may be impractical for searching large data sets from multiple sources.

Scoped Search

Sometimes it is easier (and faster) to get to the desired result by scoping the search criteria before performing the search. Google and Photobucket use different designs to the same end.


Google4715 uses an overlay to present scope options, whereas Photobucket16 uses a dialog.

AllRecipes also lets you select criteria (or filters) before submitting the search. Dropbox defaults the initial scope to All, but you can switch it to Files or Folders before or after tapping the search button.


AllRecipes17 pushes the limit of scoping options, Dropbox18 keeps it simple with just 3.

Offer reasonable scoping options based on the data set. Three to six scoping options are plenty, consider a search form for advanced searching capabilities.

Saved & Recent

Successful mobile interfaces follow a basic usability maxim: respect the users effort. Saved and recent searches do this by making it easy to select from previous searches, instead of retyping the same keywords or search criteria.


eBay19 lets customers explicity save searches. Both eBay and Walmart implicity save customers’ most recent searches.

Other options to respect the users’ effort involve location based searching options like Trulia, and bar code searching, like PriceCheck by Amazon.


Trulia20 offers location based searching, Amazon21 offers 4 ways to search.

22
Google Shopper23 offers scan and speak search options and a full search history grouped by search date.

Saved searches typically require additional steps to name a search for later use, whereas recent searches are implicitly saved and surfaced. Consider which one will best serve your customers’ needs.

Search Form

This pattern is characterized by a separate form for entering search criteria, and an explicit search button.


Search forms on WorldMate2414 and airbnb3125.

26
WholeFood’s27 recipe search allows customers to add multiple criteria, course, category, special diets and keywords.

Minimize the number of input fields. Implement OS specific input controls properly. Follow form design best practices (alignment, labels, size).

Search Results

Once a search is performed the results can be displayed in the same screen or on a dedicate results screen. Results may be displayed in a table or list, on a map or satellite, or as thumbnail images. Multiple view options can be used depending on the type of results and user preferences.


Kayak4128 and Foursquare29 (webOS) show the results in a table.

30
airbnb3125 shows the results in a list and offers a map view toggle.

32
Zappos33 offers a list view and alternate carousel view for browsing search results.

Lazy loading is a common technique to use so that some results will be displayed while the rest are being loaded. Many applications offer either a button to explicitly “view more results” or will automatically load more results when the screen is flicked.


eBay Motors34 and Best Buy35.

Label the results with the number returned. Use lazy loading instead of paging. Apply a reasonable default sort order. Avoid paging tables, they break the natural interaction model for viewing information on a mobile device.

Sort

It is important to choose a reasonable default sort for displaying search results. A little common sense plus user validation is the best way to choose the default sort order. These patterns offer options for changing the default sort:

  • Onscreen Sort
  • Sort Selector
  • Sort Form

Onscreen Sort

When there are only a few sort options, an onscreen sort can provide a simple one tap solution. Placing the sort toggle at the top or bottom of the screen will depend on the other screen elements.

Target provides four sort options with a three toggle button. For the price sort option, they offer two choices: sort by price ascending and sort by price descending.


Expedia36 (older version) and Target376 iOS use onscreen sort.

Clearly show which option is selected or “on”. Consider the Sort Order Selector pattern if the option labels don’t fit nicely in a toggle button bar.

Sort Order Selector

The selector pattern is a good alternative to the onscreen sort. There are a number of different UI controls that can be used for selection, but consider the design guidelines for the OS you are designing for (ex. the menu is common for Android app, and the picker and actionsheet are common in iOS apps).

38
Walmart39 on Android uses the common menu control.

The option titles can be longer (more explicit) and more options can be displayed. Walmart places the sort button in proximity with the search field, wheras Kayak offers sort and filter options at the bottom of the screen.

40
Kayak4128 on iOS uses the standard selector control.

OS neutral solutions include a simple combobox, like Target on Android, or an overlay menu, like Awesome Note.


Target42 on Android just uses a combobox. AwesomeNote43 uses an overlay.

Follow OS design conventions for choosing the selector control, or choose an OS neutral implementation. Clearly show which sort option is applied.

Sort Form

Some applications have consolidated the sort and filter options into one screen, typically titled “Refine”. This is the most effort intensive sort pattern requiring the user to open the form, select an option, and then apply the selection (by tapping “done” or “apply”).


Cars.com44 and eBay Classifieds45.

Consider the more efficient sort option toggle or sort order selector patterns before choosing this design.

Filter

Large sets of data can require additional filtering, also called refining. Filtering relies on the user selecting criteria by which to refine the set of search results or a large set of objects. Common filtering patterns include:

  • Onscreen Filter
  • Filter Drawer
  • Filter Dialog
  • Filter Form

Also see the earlier search pattern, Scoped Search, for an optional pre-filtering technique.

Onscreen filter

Similar to the onscreen sort, the onscreen filter is displayed with the results or list of objects. With one tap, the filter is applied. HeyZap uses the standard toggle button bar, whereas Google uses vertical tabs.


HeyZap46 and Google4715.

CBS News and the ACL Festival app uses a scrolling filter bar as a way to let users quickly hone in on certain types of articles and bands, respectively.


CBS News48 (single filter bar) and Austin City Limits Music Festival49 (double filter bar).

Don’t use this filter pattern for primary navigation within your app, but instead use it to group and filter related content.

SXSW offers a filter button bar combined with a second row of filtering options. Feed a Fever news reader uses a super simple stylized set of comboboxes for filtering news feeds.


SXSW Conference50 app and Feed a Fever51.

Filter options should be clearly worded and easy to understand. Show the filters that are applied or “on”.

Filter Drawer

Almost as efficient as the onscreen filter, a drawer can be used to reveal filter options. Flicking or tapping a handle will open the drawer. Audible’s drawer reveals a simple filter toggle bar, whereas Sam’s offers a host of filter options that can be applied to the map of club locations. A better design for Sam’s would be to leave the map visible and allow for dynamic filtering instead of the explicit “filter” button.


Audible52 and Sam’s Club53.

54
Expedia’s55 new filter drawer.

Filter Dialog

Like a pop-up on in a web app, the filter dialog is modal in nature. It requires the user to select a filter option, or cancel the action. TripAdvisor on iOS has a custom filter dialog, whereas USPS Mobile on Android relies on the default selector control.


TripAdvisor5611 and Due Today57 Lite.

While the Filter Dialog may get the job done, the first two patterns provide more freedom for users to experiment with and apply filters directly in context.

Keep the options list short, avoid scrolling. Consider a Filter Form for lengthier or multi-select filter options.

Filter Form

Large data sets can benefit from more advanced filter/refinement options. For example, WorldMate uses a form to filter hotels based on price, brand and stars. Zappos uses a similar approach, using the iOS standard drill down for selection, and the clear/done buttons in the title bar.


WorldMate’s58 filter form (looks very similar to Kayak’s design) and Zappos59 filter form for iOS.

Freetime uses custom controls in their filter form. First you pick the filter category, then choose the filter criteria, then apply the filter to the calendar.

60
Free-Time61 filter form.

Conditional filters, also called predicate editors or expression builders, are an advanced filtering feature typically found in reporting tools. Here’s the standard layout used on the web and desktop.

62
Predicate editor in the Wufoo63 web application.

Creating a conditional filtering a mobile application can be challenging in a mobile form factor but Roambi has accomplished it.

64
Roambi’s65 predicate editor.

Don’t over-design the filters, a simple onscreen filter or drawer will usually suffice. If a filter form is necessary, follow form design best practices.

More Resources

Learn more about designing usable and effective mobile apps in Mobile Design Pattern Gallery: UI Patterns for iOS, Android, and More66:

  • Navigation
  • Forms
  • Tables
  • Tools
  • Charts
  • Invitations
  • Feedback & Affordance
  • Help

Also check out the Mobile Design Pattern Gallery website67, blog68 and Flickr photostream69 with +600 screenshots.

Editor’s Note: please notice that this article is a chapter from Theresa Neil’s new book Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More70, which provides solutions to common design challenges.

(fi)

Footnotes

  1. 1 http://amzn.com/0596802277
  2. 2 http://amzn.com/0470942231
  3. 3 http://www.walmart.com/cp/Walmart-Mobile-App/1087865
  4. 4 http://www.walmart.com/cp/Walmart-Mobile-App/1087865
  5. 5 http://sites.target.com/site/en/spot/page.jsp?title=iphone_app
  6. 6 http://sites.target.com/site/en/spot/page.jsp?title=iphone_app
  7. 7 https://play.google.com/store/apps
  8. 8 http://blog.netflix.com/2010/08/netflix-now-available-on-your-iphone.html
  9. 9 http://personal.fidelity.com/products/trading/mobile/android.shtml
  10. 10 http://personal.fidelity.com/products/trading/mobile/android.shtml
  11. 11 http://itunes.apple.com/us/app/tripadvisor-hotels-flights/id284876795?mt=8
  12. 12 https://play.google.com/store/apps/details?id=com.linkedin.android
  13. 13 http://appworld.blackberry.com/webstore/?
  14. 14 http://www.worldmate.com/android/
  15. 15 http://www.google.com/mobile/android/
  16. 16 http://photobucket.com/mobile/apps/android/#android
  17. 17 http://allrecipes.com/features/applications/dinner-spinner/
  18. 18 https://www.dropbox.com/iphoneapp
  19. 19 http://mobile.ebay.com/iphone/ebay
  20. 20 http://www.trulia.com/agents/mobile/
  21. 21 http://www.amazon.com/gp/feature.html?docId=aw_ppricecheck_iphone_mobile
  22. 22 http://www.google.com/mobile/shopper/
  23. 23 http://www.google.com/mobile/shopper/
  24. 24 http://www.worldmate.com/android/
  25. 25 http://www.airbnb.com/mobile
  26. 26 http://www.wholefoodsmarket.com/apps/index.php
  27. 27 http://www.wholefoodsmarket.com/apps/index.php
  28. 28 http://www.kayak.com/iphone
  29. 29 https://foursquare.com/apps/
  30. 30 http://www.airbnb.com/mobile
  31. 31 http://www.airbnb.com/mobile
  32. 32 http://www.zappos.com/android-app
  33. 33 http://www.zappos.com/android-app
  34. 34 http://mobile.ebay.com/iphone/motors
  35. 35 https://play.google.com/store/apps/details?id=com.bestbuy.android&hl=en
  36. 36 http://www.expedia.com/
  37. 37 http://sites.target.com/site/en/spot/page.jsp?title=iphone_app
  38. 38 https://play.google.com/store/apps/details?id=com.walmart.android&hl=en
  39. 39 https://play.google.com/store/apps/details?id=com.walmart.android&hl=en
  40. 40 http://www.kayak.com/iphone
  41. 41 http://www.kayak.com/iphone
  42. 42 http://sites.target.com/site/en/spot/page.jsp?title=android_app
  43. 43 http://www.bridworks.com/anote/en/main/index.php
  44. 44 http://itunes.apple.com/us/app/cars-com/id353263352?mt=8
  45. 45 http://mobile.ebay.com/android/classifieds
  46. 46 https://play.google.com/store/apps/details?id=com.heyzap.android&referrer=utm_campaign%3Dc95eb443adbbd441cce5e415e1ffa2a3%26utm_medium%3Dblank%26utm_source%3Dheyzap_track
  47. 47 http://www.google.com/mobile/android/
  48. 48 https://play.google.com/store/apps/details?id=com.treemolabs.apps.cbsnews&hl=en
  49. 49 http://www.aclfestival.com/acl-news/2011-apps/
  50. 50 http://itunes.apple.com/us/app/sxsw-go/id418450665?mt=8
  51. 51 http://feedafever.com/
  52. 52 http://www.audible.com/wireless/android
  53. 53 http://www3.samsclub.com/mobile
  54. 54 http://www.expedia.com/
  55. 55 http://www.expedia.com/
  56. 56 http://itunes.apple.com/us/app/tripadvisor-hotels-flights/id284876795?mt=8
  57. 57 https://play.google.com/store/apps/details?id=com.lakeridge.DueToday&hl=en
  58. 58 http://www.worldmate.com/
  59. 59 http://www.zappos.com/iphone-app
  60. 60 http://itunes.apple.com/us/app/free-time/id429232593?mt=8
  61. 61 http://itunes.apple.com/us/app/free-time/id429232593?mt=8
  62. 62 http://wufoo.com/
  63. 63 http://wufoo.com/
  64. 64 http://www.roambi.com/
  65. 65 http://www.roambi.com/
  66. 66 http://www.amazon.com/Mobile-Design-Pattern-Gallery-Applications/dp/1449314325
  67. 67 http://www.mobiledesignpatterngallery.com
  68. 68 http://mobiledesignpatterngallery.com/blog/
  69. 69 http://www.flickr.com/photos/mobiledesignpatterngallery/collections/
  70. 70 http://www.mobiledesignpatterngallery.com

↑ Back to topShare on Twitter

Theresa Neil is an internationally recognized UX designer, author and speaker. Her most recent book is the second edition of the Mobile Design Pattern Gallery, O'Reilly Media 2014. Theresa and her team are currently working on a series of sensor based apps. Rich Malley is a freelance interactive writer, humorist and musician living in Austin, TX. A creator of online content for over 15 years, he has been a tireless advocate for users through his work. His client practice focuses on collaborating with UX designers to develop great experiences that meld quality design with smarter semiotics.

Advertising
  1. 1

    This is great info. Thanks for sharing!

    3
  2. 2

    Brett Lieberman

    April 10, 2012 9:39 am

    Great article, I would love to see more UI/UX on mobile app articles. Keep up the great work.

    8
  3. 3

    Matthew James Taylor

    April 10, 2012 6:20 pm

    UX design is so important on the small screens of smart phones. There’s no space to waste!

    Nice article. Well researched.

    1
  4. 4

    Nice article. i was on an app design for android. your article really helped. thanks a lot.

    0
  5. 5

    This was a great summary of different approaches to narrowing down data.

    One thing that I find really important (that you didn’t write about) is the fact that when I for example search for “Hockey”, I start to get results that contains “Hockey” after pressing “H” and “o”. In that scenario – I probably want to do one of two things – just accept one of the auto complete suggestion or I want to use the auto complete and continue to add words to that search frase.

    So I recommend a button to the right of each auto complete results that puts that text into the search text area without searching.

    Another thing – please mention why you want to have the users e-mail when entering posts here – or else you some people will hesitate to post things here :)

    7
    • 6

      Can you share the names of some apps that follow this pattern? I would like to see it in action.

      Thanks

      1
  6. 7

    Francis Thibault

    April 12, 2012 11:00 am

    Great article, made me realize how outdated these ui looks now that I use a Windows Phone, sadly no example have been showed using this platform.

    0
    • 8

      @Francis
      Thanks for you comment. At the time I was writing the book I could not take screen shots on my Windows phone. I will be updating the Flicker photostream and website with Windows mobile examples now that we can finally take screen shots. Hopefully you have found some value in the patterns even without Windows specific examples.

      0
      • 9

        Francis Thibault

        April 13, 2012 5:43 am

        I did, I did, and I understand the screenshot problem (I had to solve it using screen capturer).
        I forgot that not everyone has that app installed since it needs to on a dev unlocked phone.

        0
    • 10

      Totally agreed.

      1
  7. 11

    Just in time… I’m working on an iOS/Android prototype for a verification/validation app and your article popped out from my feeds. Thanks a lot!

    0
  8. 12

    Very valuable… would love to see more patterns… these can be real life savers for developers also. Thanks for sharing…

    0
  9. 13

    Matthew Jansick

    July 24, 2012 5:23 pm

    Awesome stuff here. I’d love to see an article similar to this for desktop websites (Yes, they are still relevant).

    1
  10. 14

    I really valued your book and this chapter share in the Smashing Mag Blog.
    I was a bit confused as to why the new UI patterns that are finally embracing the split-second interaction impact, appeared not to have been discussed. Maybe I missed them in your book. I do apologise if that is the case.

    I try and explain by sharing example.

    FILTER DRAWER:
    i really like FLIPboards, where they pull down from the top (rather than bottom tray)
    I find pull down more relaxing for search etc…
    and the transparent filter overlay for bottom pops.

    I was comparing 3 top tray actions. All trigger quite a different experience. I am zeroing on the split-second… reaction
    > FLIPboard ribbon symbol (pull down tray from top)
    > GROOVE music player 3 line icon to pop-out the selection tray (its funky with the orange higlight colour)
    > Readability swipe action, to clear your workspace (or reverse to go back to your reading list)

    all three are alternatives to filter drawer.
    —-
    I definitely find the placement of the drawer ( TOP v BOTTOM) key in matching the user mindset
    TOP = starting mindset BOTTOM = extending, or next action, so going to … mindset
    —-
    I personally experience, tap, pull-down and swipe — result in a very different experience in the split-second.
    > tap (the 3 line slider in groove) (user still has context as does not take up all the space)
    > pulling down something, quite a different “emphasis” = “says I want to focus on this now… “, one feels very in control. like the hide/seek game we learn as very young ones. same delight feel.
    >where-as swiping (swipe workspace away), keeps the immersion (does not interrupt’s users flow). also nice feeling of “clearing ones workspace”
    —-
    I came up with just 3 three. There are likely more. I was looking for filtering, searching that is not the old-web based thinking.
    As human beings we search, filter, every moment of every day. So I was wondering what UI patterns are truelly embracing how we more naturally do this in “touch” context.

    This is key for me, as the old methods (e.g. sort filters etc..) force a user to move from their intuitive side of brain to the cognitive processing side of the brain. The impact, even though most users will not be able to articulate it, is the experience is “less enjoyable”, as that split-second requires longer processing time (cognitive processing).

    This logic, is the same, for why some movies you just go wow! you in, absorbed. And some… never even stood a chance. This is the standard that is possible for apps now.
    ——
    Thankyou for you book and great post.

    0
  11. 15

    This article is flagrantly plagiarizing your article:
    http://www.discussmarket.com/mobile-apps-u-i-design/

    0
  12. 16

    try Instafusion app…..it has a very easy and beautiful interface…..i just love this app..

    0
  13. 17

    Excellent article! The UX is still relevant although the UI has progressed significantly.

    0
  14. 18

    Great article and thank you for the references. I made an different filter in my app which one could be considered as a cascade filter. I could send you a couple of screenshots if you like. JG

    0
  15. 19

    Excellent Post! Interesting to know more patterns discussed here. Flat UI designs based on color, palette, grid and typography is more considerable these days. As most mobile app developers concentrate such filters now-a-days. UI is responsible to generate a good UX. According to me I could say the single color palette on most mobile apps turns more downloads and conversions.

    Read the most recent post here: http://blog.contus.com/versatile-app-ui-interface-challenges-we-face-to-compete-recent-trends/

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top