I was recently looking through some free classified papers while waiting for the bus. I was shocked to realize just how dependent I have become on three simple feature that are just not available in the non-digital world: search, sort, and filter.
Autotrader and some other of these freebies are organized by year and category, but many others are just list of page after page of items for sale. Forcing you to read every ad in the paper to find what you were looking for.
This frustration lead me again to craigslist mobile. Where it became exceedingly obvious we can all benefit from some best practices around mobile searches. This article will focus on seven different search patterns that help to surface and refine dada for you customers.
Before you design a search interface for any platform I suggest you buy and read these two books: Search Patterns: Design for Discovery by Peter Morville and Jeffery Callender, and Designing Search: UX Strategies for eCommerce Success by Greg Nudelman.
In this first installment of my Mobile Apps U.I design essentials series: I will focus of the seven search patterns, which are specific to mobile apps and if implemented properly, you will undoubtedly find success:
- Explicit Search
- Dynamic Search
- Scoped Search
- Saved & Recent
- Search Form
- Search Results
Explicit search is dependent upon relies on an definite action of entering text to perform a search and then tapping a search button, like Wal-Mart, or on the Keyboard, like Target. Typically the results are in an area below the search bar. Either way by offering a clear button on the field and an option to cancel the search you can use feedback to show the search is being performed.
Auto complete is by far the most useful search pattern that emerged with web 2.0. By typing in the search bar a set of results will immediately surface, just tap and the search will be performed or continue typing and tap the explicit search button.
The ideal would be to display the results immediately, but progress indication such as ( searching…) can be used for system feedback. The above example (Netflix) uses an indicator button in the search field; while the example below (Fidelity) is one where the results will be displayed eventually.
TripAdvisor is a great example of an enhanced auto-complete, creating groups based on destination, hotels, and restaurants. While LinkedIn does something similar by showing ranking its search showing direct connections first before opening up to the whole of people in LinkedIn. Again, if there could be a delay in displaying results, provide feedback to your user and consider highlighting the matching search text within the search results.
Dynamic search, which may look similar to auto-complete, also called dynamic filtering, is a way of refining an existing and visible list of objects. The examples below from WorldMate on Android and Blackberry App World work well for refining constrained data sets. This pattern has express implication in address books and personal media libraries, but may not be practical for searching large data sets from multiple sources.
Sometimes it is still easier and faster to get to your destination by scoping the search criteria before performing the search. Great examples include Google and also Photobucket. Both of which have the same goal but achieve it in very differnet ways.
Allrecipes is another example of a mobile app that lets you select criteria prior to submitting for search. While Dropbox defaults to all but permits selecting specific folders before or after initiating the search. It may not be practical to offer more than six options for defining your search; it might be wise to consider a search form designated specially to advanced searches, for these instances.
A tried and tested rule is that successful mobile interfaces follow a basic usability code of respecting the users effort. And nothing makes it easier than saved and recent searches. Making it easy for the user to selct from previous searches instead of retyping the same keywords or search criteria. While saved searches require additional steps recent searches are implicate and may better serve your customer’s needs.
The above example is characterized by a separate form for entering search criteria, known as a search form, and is implemented by companies like WorldMate and Airbnb. These search patterns can allow for more customizable searches giving customers the ability to add multiple criteria, course, category, and keywords. But you must minimize the input fields; implement OS specific input controls properly and follow good design principles to make them successful.
Once a search is performed the results can be displayed in the same screen or on a dedicated results screen 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. One successful technique called Lazy loading allows some results to be displayed while others are still being loaded. Many applications offer either button or explicate, “view more results,” or will automatically load more results when the screen is swiped.
Labeling the number of results as well as using lazy loading instead of paging while trying to avoid paging table; they serve only to break the natural interaction model for viewing information on a mobile device.