Editor’s Note: Smashing Magazine is happy to present this sample chapter from Theresa Neil’s new book Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More, which provides solutions to common design challenges. We’re certain you’ll find the information useful for your next mobile project.
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 chapter explores a dozen different ways to surface and refine the data your customers want.
Before you ever try to design a search interface for any platform, buy and read these two books: Search Patterns: Design for Discovery by Peter Morevill and Jeffery Callendar, and Designing Search: UX Strategies for eCommerce Success by Greg Nudelman.
Then take a look at these search patterns specific to mobile applications:
- Explicit Search
- Dynamic Search
- Scoped Search
- Saved & Recent
- Search Form
- Search Results
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.
Walmart uses a search button (Go) on the screen, Target uses the Search on the keyboard.
Target 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.
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.
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.
Fidelity 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.
Provide feedback if there could be a delay in displaying the results. Consider emphasizing the matching search text in the search results.
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.
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.
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.
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.
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.
eBay 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.
Google Shopper 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.
This pattern is characterized by a separate form for entering search criteria, and an explicit search button.
WholeFood’s 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).
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.
airbnb shows the results in a list and offers a map view toggle.
Zappos 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.
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.
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
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.
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).
Walmart 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.
Kayak 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.
Follow OS design conventions for choosing the selector control, or choose an OS neutral implementation. Clearly show which sort option is applied.
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”).
Consider the more efficient sort option toggle or sort order selector patterns before choosing this design.
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.
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.
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.
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.
Filter options should be clearly worded and easy to understand. Show the filters that are applied or “on”.
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.
Expedia’s new filter drawer.
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.
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.
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.
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.
Free-Time 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.
Predicate editor in the Wufoo web application.
Creating a conditional filtering a mobile application can be challenging in a mobile form factor but Roambi has accomplished it.
Roambi’s 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.
Learn more about designing usable and effective mobile apps in Mobile Design Pattern Gallery: UI Patterns for iOS, Android, and More:
- Feedback & Affordance
© Theresa Neil for Smashing Magazine, 2012.
The truly great consumer technology companies of the past 25 years have all had one thing in common: They created habits. This is what separates world-changing businesses from the rest. Apple, Facebook, Amazon, Google, Microsoft, and Twitter are used daily by a high proportion of their users and their products are so compelling that many of us struggle to imagine life before they existed.
But creating habits is easier said than done. Though I’ve written extensively about behavior engineering and the importance of habits to the future of the web, few resources give entrepreneurs the tools they need to design and measure user habits. It’s not that these techniques don’t exist — in fact, they’re quite familiar to people in all the companies named above. However, to the new entrepreneur, they largely remain a mystery.
I’ve learned these methods from some of the best in the business and put together an amalgamation of them that I call “Habit Testing.” It can be used by consumer web companies to build products that users not only love, but are hooked to.
Habit Testing fits hand-in-glove with the build, measure, learn methodology espoused by the lean startup movement and offers a new way to make data actionable. Habit Testing helps clarify three things: 1) who your devotees are; 2) what part of your product is habit forming, if any; and 3) why those aspects of your product are habit forming.
A prerequisite to Habit Testing is having some kind of product up and running. Of course, before launching even a minimal viable product, it’s a good idea to take a stab at your business model hypotheses and how your product will create user desire.
Once you have a site or app live, you can begin collecting data. Habit Testing does not necessitate collecting data about everything — just the right things — so setting up the appropriate analytics is critical. In order for Habit Testing to be successful, you need to date stamp the path users take while using your site.
Step 1 — Identity
Now that you have the requisite site and stats, you need to answer the first question of Habit Testing: “Who are the habitual users?” First, define what it means to be a devoted user. Ask yourself how often a user “should” use the site. That is to say, assuming that some day all the bugs are worked out and the product is perfectly “lickable,” how often would you expect a habitual user to be on the site?
Be realistic and honest. If your company builds a mobile social networking app like Foursquare or Instagram, you’d expect habitual users to be on the app several times per day. However, if you’re building a movie recommendation site, a la Flixster, you wouldn’t expect users to be on the site more than once or twice a week. Don’t come up with an overly aggressive prediction that only accounts for uber-addicts; you’re just looking for a realistic guess to calibrate how often users will interact with your site.
A good short-cut might be to take an average of how often you and the people in your office use your own product. Of course, more is better. Twitter was born within Odeo, the company Biz Stone and Jack Dorsey originally founded, because the engineers couldn’t stop playing with it.
One thing to note: the more frequently your product is used, the more likely it is to form a user habit. That’s not to say that web products that are used rarely can’t be good business, they just aren’t habit forming and thus have different characteristics. Viable, though non-habit forming businesses tend to be more transactional and require constant outreach to customers to stay top-of mind.
For example, think of the travel industry’s relentless war to convince us to use one site over another. Expedia, Travelocity, and the rest, are used too infrequently by their average customers to form a habit, so they constantly compete for attention. These are viable, even profitable companies, but since they are non-habit forming products they are open to greater competitive threat. Products used daily naturally create barriers to entry in their markets.
Who’s Got The Habit?
Now that you know how often a user “should” be using the site, it’s time to crunch through the numbers and identify how many of your users actually meet that bar. This is where hiring a stats wiz can prove exceedingly helpful. Instead of pulling your engineers away from their crucial jobs building the product or even worse, getting your business people to do it, consider hiring a grad student fluent in statistics to help you quantify how many of your users are hooked. The best practice here is to get create a cohort analysis to provide a baseline by which to measure future product iterations.
Step 2 — Codify
Hopefully, you’ll have at least a few users who interact frequently enough for you to call them devotees. But how many devotees is enough? My rule of thumb is 5%. Though your rate of active users will need to be much higher to sustain your business, 5% is a good benchmark to being Habit Testing.
However, if at least 5% of your users don’t find your product valuable enough to use as much as you predicted they should, you have a problem. It may be time to go back to the drawing board and rework your vision. But assuming you’ve exceeded that bar and you’ve identified your habitual users, the next step is to codify the steps they took using your product so you can understand what hooked them.
Each user interacts with your product in a slightly different way. Even if you have a standard user flow, how users engage with your site creates a unique data fingerprint which can be analyzed to find patterns. Sift through the data to determine if there are similar behaviors that emerge. What you’ll hopefully discover is a “Habit Path”, a series of similar behaviors shared by your most loyal users.
For example, in its early days, Twitter discovered that once new users followed enough other members, they hit a tipping point which dramatically increased the odds they would keep using the site. Every company has a different set of actions that devoted users take; the goal of finding the Habit Path is to determine which of those steps were critical for creating devoted users.
Get In Their Heads
Now that you know the Habit Path, the next step is to create hypotheses about what it was along that path that tipped users from passers-bye to devotees. Granted, this step can look a little like assuming causation from correlation; but in the murky fog of launching a new product, it’s often the best thing we’ve got.
This phase is also a good time to talk to users in person to learn more about why and how they use the product. Habit Testing is meant to illuminate what is unique about these “earlyvangelists” and find insights that can be generalized to the rest of your users.
Step 3 — Modify
With new hypotheses in mind, it’s time to get back inside the build, measure, learn loop and take new users down the same Habit Path the devotees took. For example, leveraging their Habit Path, Twitter’s onboarding process now guides new users to start following others immediately.
Habit Testing is a continual process companies can implement with every new feature and product iteration. Tracking users by cohort and comparing their activity to habitual users should guide how products evolve, improve, and foster habit formation.
Too often tech entrepreneurs find themselves alone with their vision because they fail to realize the importance of creating user habits. And unfortunately, when it comes to consumer web and the ever-increasing distractions we all face daily, if the product doesn’t create a habit, it may as well not exist. By using Habit Testing to determine what is most valuable and habit-forming about a product, entrepreneurs can better serve their users and increase the odds of creating world-changing companies.
Josh Elman, Max Ogles, and Mark Williamson collaborated on this essay.
In last week’s Get Rich or Die Trying article, I mentioned that “tech is a zero-sum, winner takes all game”. A reader objected, arguing: “I think that may be an inappropriate use of the term ‘zero-sum’ – one company’s increase in profits (or revenue) does not mean a competitor must see declining profits (or revenue)”.
History suggests that Jack Welch’s philosophy that “a company should be #1 or #2 in a particular industry or else leave it completely” is even more applicable to the tech industry, where the top player can build a sustainable and ever-growing business but everyone else is practically better off getting out.
Examples of market dominance by the #1 that come to mind include:
- Google in search,
- Facebook in social networking,
- Groupon in daily deals, and
- Amazon in e-Commerce.
This doesn’t mean that the:
- #1 player isn’t susceptible to the Innovator’s Dilemma, or
- #2 competitor can’t build a massive business.
Indeed, Microsoft’s Bing or LivingSocial are meaningful #2’s in search and daily deals respectively, but clearly the network effects and economies of scale that come with market share dominance make it nearly impossible for challengers to remain relevant over-time. Monopolies are nothing new and come and go: Google is the evolution of Standard Oil, AT&T and Microsoft in search, you can argue that Apple is next in line in mobile.
What is Zero-Sum Game Anyway?
First, the definition:
“In game theory and economic theory, a zero-sum game is a mathematical representation of a situation in which a participant’s gain (or loss) of utility is exactly balanced by the losses (or gains) of the utility of the other participant(s). If the total gains of the participants are added up, and the total losses are subtracted, they will sum to zero.”
Indeed, while the tech sector is huge, within each segment, you see a zero-sum game from each individual purchasing decision out. For example,
- a consumer will buy a Mac or PC; an iPhone or Android device, etc.
- a business will adopt a solution from Oracle or Siebel, for example,
But it’s rare for a consumer to buy or a company to adopt both.
If you repeat this binary-like decision process throughout the industry and economy, you get a zero-sum situation where one competitor’s gains come at the expense of others’ in the industry: Apple’s iPhone sales obviously put a dent in the Blackberry; and its iPads are evidently going to affect PC sales – no matter how much some want to deny it.
It’s Like This in Most Industries, The Only Difference Is Severity
I run an online video content company and categorize video companies into four quadrants:
- Content (creators),
- Distribution (search, distribution),
- Technology (content management systems, content delivery networks), and
- Advertising (ad networks, servers)
Clearly there’s a lot of overlap and how those four interact with one another merits an article in of itself (or hundreds). While technology (with a lower case) enables Content companies, it increasingly underpins Distribution, Technology and Advertising companies.
As such, I see this zero-sum phenomenon every day with the latter three. When TechCrunch’s parent AOL bought 5Min for example, it was a matter of time before AOL stopped licensing Brightcove’s Online Video Platform and instead use 5Min’s player. Seeing how AOL and 5Min were my distribution partners, I kept that thought to myself, but it was a matter of time. Today AOL’s main platform for video is indeed 5Min (note: I am not an AOL/5Min employee).
Content Isn’t a Zero-Sum Game: “I’m Your Pusher”
In content, it’s not really like that. ABC, CBS, FOX, NBC all have meaningful franchises. Sure, if you watch FOX on Sunday at 6pm then you may not watch ABC at that time, increasingly with cord-cutting and time shifting that isn’t the case anymore. In fact, content is so not a zero-sum game that a company like Viacom has multiple brands to address that reality.
Indeed, if you want to travel to Barcelona, you won’t watch one video or read an article, you will read/watch many and I’d argue that content consumption – like a drug – just creates more demand.
But if you want to book a ticket to Barcelona, you will either use Travelocity or Expedia, for example.
Place Your Bets
That makes content a less-risky endeavor, and, with digital media and digital distribution reducing the marginal cost of production and distribution, then content has become a better risk-adjusted bet, though arguably not as scalable and certainly not a winner-takes-all gamble.
It will take an entire generation before investors realize this; though some argue that it’s already started. According to media guru Jack Myers, “VC funds are being redirected away from tech and toward content. Technology-based venture opportunities in the media and advertising space have been largely played out. Bottom line, venture capital funds will be shifting from technology to content, context, commerce and research.”
I’m not holding my breath, even though digital content is effectively the new software.
In Tech, Competition Becomes Blurry Over Time
The same way that the Internet has changed content, it has also changed technology. For one, with consumer-focused technology companies being free, advertising-supported businesses, the prevailing asset isn’t necessarily the underlying hardware or software, but rather, the audience.
This is why tech companies are all seemingly fighting one another:
- Facebook vs Google in search and social networking,
- Google vs Apple in mobile,
- Amazon vs Apple in tablets and entertainment,
- Microsoft vs Google in search.
You get the idea: in tech, everyone morphs into everyone’s competitor… and since the main asset – the audience or consumer base – is so fleeting, tech becomes an even riskier bet.
The Four Horsemen
Whereas initially the Web pitted “content vs. tech”, as the Web matures, it becomes “tech vs. tech” with Content becoming Switzerland amongst Distribution, Technology and Advertising companies.
In the real world, there is no perfect example of a zero-sum game – granted. But whereas Jack Welch argued that a business ought to be #1 or #2 or get out, the network effects that the web has unleashed over time force technology (lower case) businesses to either be #1 or get the hell out.
Deception is entwined with life on this planet. Insects deceive, animals deceive, and of course, we human beings use deception to manipulate, control, and profit from each other. It’s no surprise, then, that deception appears in web user interfaces; what is surprising is how little we talk about it. All the guidelines, principles, and methods ethical designers employ to design usable websites can be subverted to benefit business owners at the expense of users. Study the dark side so you can take a stand against unethical web design practices and banish them from your work.