On the desktop Web, ecommerce landing pages get a bum rap—sometimes well deserved. Laden with ads and gimmicks, pushing items with higher markups, and confusing customers with complicated information architectures, these marketing monstrosities typically strongly underperform the search results pages from a simple keyword search. However, passing a death sentence on all landing pages may be premature. On the small screens of mobile devices, well-designed landing pages can provide a much better experience than keyword search results. Currently, few mobile sites use landing pages, which makes them the next big mobile ecommerce opportunity.

Introducing Landing Pages

Landing pages are simply pages a system serves up in place of search results pages—typically as a result of a keyword search query.

Landing pages were originally Web developers’ response to the deep links search engines started delivering, causing customers to land deep within their sites when they clicked an ad or link in an external search engine’s results. Although many different types of landing pages exist, I find it useful to differentiate between the following six types—from the standpoints of both design and information architecture:

• brand—brand name keywords, like Apple
• product—specific product names, like iPhone
• product family—broader keyword queries that cover more than one product, such as Mac
• category—keywords that signify broad category navigation, like laptop
• event—keywords that point to a specific event, such as Super Bowl
• item—keywords that are specific enough to narrow search results down to a single product, like iPhone 4G 32GB

Each type of landing page has its own purpose and design considerations, and you should consider each type on its own merits. In this column, I’ll cover some UX design guidelines for brand landing pages on mobile devices, leaving other types of landing pages for future columns.

Defined loosely, you can create brand landing pages to cover a great diversity of subjects that enjoy instant name recognition:

• major manufacturers—such as Canon and Nike
• music bands—like The Beatles and Madonna
• hero franchises—like Spiderman and Harry Potter
• sports teams—such as the SF Giants and NY Yankees
• cities—including San Francisco and New York
• and many more categories of brands

Brand landing pages typically fulfill one of the following four goals:

• disambiguate—When the same query could mean vastly different things—for example, Canon, which could mean either a Canon Camera or Pachebel’s Canon—a landing page can help customers convey a more precise meaning for their query.
• narrow—Some brand-name keyword queries could cover a lot of different products. A landing page can help customers do some preliminary filtering by category or by suggesting additional search keywords.
• introduce—Sometimes customers are really interested in just browsing the merchandise. A landing page can quickly show a variety of items from a particular brand, providing a brand catalog that shows the breadth of the available inventory and perhaps introducing some new or in-season products.
• entertain—Many people have strong emotional connections to certain brands. Landing pages can provide themed graphics and social media elements—such as discussions, gossip, editorial, or Twitter feeds—to engage customers.

Be ruthless when it comes to introducing landing-page features. Remember, landing pages will almost certainly catch your customers’ attention, but the impression they make depends, in part, on how focused they are—and this is especially true on mobile devices. Determine your primary and secondary goals for a landing page, then choose the best user-interface devices to implement solutions that meet those goals. Consider removing anything that does not directly contribute to satisfying a landing page’s primary goals. Customers’ attention is a limited and precious resource. Use it wisely.

Design Guidelines for Brand Landing Pages on Mobile Devices

“Brand landing pages may well present today’s biggest sleeper opportunity for mobile ecommerce. People love to search by brand names.”

Currently, none of the mobile Web sites I’ve examined use brand landing pages that I can present as examples. This is unfortunate, because according to my research, well-designed landing pages can provide a better experience than a simple set of search results from a keyword query.

In fact, my data indicates that brand landing pages may well present today’s biggest sleeper opportunity for mobile ecommerce. People love to search by brand names. And brand names make up the lion’s share of the top 100 keyword searches on a typical ecommerce site. This is hardly surprising. The companies that build brands invest billions in advertising and promotion to ensure this is the case. Yet, on most mobile sites, simply entering a keyword query often results in a subpar experience. Figure 1 shows search results for the query Dockers on the JC Penny mobile Web site. This represents a typical example of a brand-centered shopping experience on the mobile Web.

Figure 1—Results for Dockers query on JC Penny mobile site

The site sorts the results by Best Match, which, in the case of a basic brand-name query, is pretty much meaningless, because anything Dockers makes is as good a match as any other Dockers product. The top results happen to be a woven belt and two micro-suede slippers of exactly the same model, but in different colors. It is telling that the customer would have to scroll down by two screenfuls to see the most popular Dockers item: the classic khaki pant.

The paginated search results continue over eight more pages, showing, among other items, over 30 different khaki Dockers brand pants JC Penny offers for sale. This is certainly a user experience that leaves a lot to be desired, yet it remains a fairly typical one for mobile ecommerce customers. It is easy to see how a customized Dockers brand landing page that specifically addresses the primary landing-page goal Narrow and the secondary goal Introduce, with a clean, visually appealing navigation scheme, would offer a much better experience and likely result in customers buying more Dockers products, as well as coming back to shop more often.

How should you go about designing such a brand landing page? Here is a set of general guidelines, which cover both things that do not work and things that do. I’ve based these guidelines, in part, on a triangulation of my findings from qualitative usability and field studies, with key performance indicators I have obtained from search metrics I‘ve collected over the past seven years. Unfortunately, I cannot discuss specific designs I’ve tested, because of their confidentiality. However, I can present some general design guidelines. Of course, these guidelines are limited somewhat by their lack of specificity that would tie them to a specific brand and use case. Please keep this in mind, and rather than taking the guidelines I provide here as gospel, use them to guide, inform, and inspire your own creative designs. Above all, test your brand landing page designs thoroughly against keyword search results to determine which perform better, according to your own key performance metrics—such as conversion, item views, time on site, and customer loyalty.

Don’t Make All Brands Sing the Same Tune

“One of the most important guidelines for designing brand landing pages is to individualize them.”

That means using your information architecture, categories, layout, graphics, and the products themselves as tools that let you create a specific experience that is highly customized for the specific brand a customer is interested in.

Does this mean you can’t follow a “write code once, use everywhere” paradigm? Absolutely. I realize this goes against the conventional Web wisdom of building a single Web page template you can customize for different brands, but my data shows that making all brands sing the same tune is about the biggest mistake you can make. Invariably, when companies try this approach, a subpar and confusing experience always results, as shown in Figure 2.

Figure 2—Brands shouldn’t all sing the same tune

On the other hand, simple customizations can go a long way—for example, using elements such as whitespace between items to create an upscale feel on a page for luxury brands. For your Star Wars fans, a brand landing page is where it’s appropriate to use a dark background with star clusters. However, customization should reach deeper than just graphics. You need to customize a brand’s information architecture as well.

Most brands have a natural organizational model that requires a different information architecture—that is what makes them unique. It is silly to try to fit a landing page for the Star Wars brand—which should probably be organized by episodes 1–6 in order of their storylines, not the years in which the movies came out, and includes a massive toys and merchandise section—into the same information architecture as The Beatles landing page—which likely centers around music albums or their #1 hits and might be organized on a historical timeline, covering the band’s body of work.

For Brand Landing Pages, Fewer Are More

“Trying to create a landing page for each brand on your site is a mistake. Instead, … analyze the top 100 brand keywords on your site, realistically assessing what brand keywords are the best candidates for landing pages.”

Because brand landing pages require total customization, fewer are often more effective. Trying to create a landing page for each brand on your site is a mistake. Instead, a much more effective strategy is to analyze the top 100 brand keywords on your site, realistically assessing what brand keywords are the best candidates for landing pages.

Here is an example of how to use metrics to help you determine whether a particular brand (Brand X) is a good candidate for a landing page:

• Brand X has more inventory, and the inventory is more variable than that of other brands.
• People starting a search with the keyword brand X do more search refinements than average before starting to look at item details.
• People starting a search with the keyword brand X view a greater than average number of pages.
• Brand X has a lower conversion rate—as measured by searches per purchase or page views per purchase—for searches starting with the keyword brand X than other brands on the site.

Once you’ve determined which brands might benefit from having custom landing pages, pick one or two brands that are most familiar to your team and create a pilot landing page design, fitting each particular brand perfectly. Test your new design using A/B testing, initially letting only a small percentage of your customers view the landing page. Be sure to collect detailed metrics that let you determine whether the new design works better than a corresponding set of search results. If the landing page works better, you are in luck. Tackle the rest of the promising brands, one at a time, while continuously getting feedback from your customers, in the form of metrics and findings from field studies. It is important not to rush the process. Remember, when it comes to landing pages, fewer are more effective.

Make Your Information Architecture Simple and Easy to Grasp

“Simple, straightforward page organizations are the key to brand landing page success.”

Simple, straightforward page organizations are the key to brand landing page success. Remember, your customers are expecting to see a search results page. When, instead of getting search results, they find themselves on a brand landing page, you have approximately 3–5 seconds to communicate to them how the page is organized and enable them to use it effectively. If you’ve tried to make the page too clever, the effort it would take to understand the page would be too great, and people would become frustrated and leave your site.

Where should you start designing your information architecture? In his books Information Anxiety and Information Anxiety 2, Richard Saul Wurman wrote about LATCH, an acronym for five ways of organizing information. LATCH stands for:

• Location
• Alphabet
• Time
• Category
• Hierarchy

Wurman had this to say in his IA Summit 2010 Keynote:

“I’ve always said … I thought there was a huge number of ways of organizing things. I was surprised that I could only come up with five. Let’s say there [are] no more than ten. I don’t care if there [are] five or six or seven, but, if after 20 some years, nobody has come up with a sixth, I feel safe to say there [are] no more than ten, and there [are] probably not more than five. And it works, because you can decide when you start a project how you get into it.”—Richard Saul Wurman

In designing your brand landing pages, LATCH is certainly a great place to start. Remember, the same information architecture will not fit every single brand. For example, for clothing brands, it would make sense to separate accessories like belts from articles of clothing such as pants and shirts—an example of a hierarchical organization. Doing this simple categorization would do wonders in improving the seemingly random results of the Dockers query on the JC Penny mobile site in Figure 1. However, the same organization would not work well for a Harry Potter brand. Instead, an information architecture based on simple categories like Books, Movies, Toys, and More might be a better fit.

Regardless of which information architecture you choose, it is important to make sure your page design communicates it effectively. Your customers are expecting to see search results, so naturally, they’ll expect the page that appears to be a long list of products with facet filters. Because of their strong existing mental model, you’ll be fighting an uphill battle in communicating your page design. If your landing page is organized differently from search results, make sure the page’s layout and visual design communicate this difference clearly. The sooner customers understand that they are looking at a special kind of page—a brand landing page, not a search results page—the faster they can start navigating the new information architecture and succeed in their primary goals.

Avoid Tag Clouds

“The bottom line is that many people do not understand tag clouds, regardless of how they are organized on a landing page, and have trouble operating them effectively on mobile devices for several reasons.”

Tag clouds are aggregations of keywords that have different font weights and sizes—usually based on popularity or inventory. I’ve already discussed the popularity versus inventory, or demand versus supply, disambiguation strategy in a previous UXmatters column, “Cameras, Music, and Mattresses: Designing Query Disambiguation Solutions for the Real World,” so I won’t repeat that information here.

Based on my research, the bottom line is that many people do not understand tag clouds, regardless of how they are organized on a landing page, and have trouble operating them effectively on mobile devices for several reasons.

First, a giant collection of keywords is simply not that useful for narrowing down a query. Second, many people do not understand the order of keywords in a tag cloud or the logic behind the font weights and sizes. This finding was a bit counterintuitive for me, because I am a fan of tag clouds and use them to show the breadth of topics I cover in my DesignCaffeine blog. Unfortunately, as Figure 3 shows, tag clouds leave a lot to be desired when narrowing down the results for a query, within the context of brand landing pages on mobile devices.

Figure 3—Mockup of a category tag cloud for the Dockers query on JC Penny

Tag clouds introduce additional issues on mobile devices. Because of the narrow screens on most mobile devices, links in tag clouds often wrap and every link runs into the next, making it difficult to separate one link from another when glancing at a tag cloud, while being bounced around in a bus or metro. As I described in a previous column on UXmatters, “Designing Mobile Search: Turning Limitations into Opportunities,” people have trouble tapping links that are placed too close together. The phenomenon known as the fat-finger problem causes people to accidentally tap the wrong link in a tag cloud. This finding underscores the importance of testing. Remember, you are not your customer. It does not matter that you understand how something works on your site. It matters only that customers understand it and find it effective.

Use Popular Keyword Suggestions

“People find suggestions for popular search keywords very useful, particularly for query disambiguation….”

In contrast to tag clouds, people find suggestions for popular search keywords very useful, particularly for query disambiguation, as I described in my column “Cameras, Music, and Mattresses: Designing Query Disambiguation Solutions for the Real World.” Search user interfaces on mobile devices often use auto-suggest to display suggestions for search keywords, as shown in Figure 4.

Figure 4—Amazon iPhone app’s suggestions for the query Harry Potter

Because of a mobile device’s limited screen real estate, auto-suggest is the most effective design solution. However, if an auto-suggest capability is not available, you can provide suggestions for popular keyword as links. These are most effective when they appear just below the search box.

Be Careful with Best Bets

“Although Best Bets is a standard, well-developed UX design pattern …, designers often use this pattern incorrectly on landing pages.”

Although Best Bets is a standard, well-developed UX design pattern that Peter Morville describes in his book Search Patterns, designers often use this pattern incorrectly on landing pages. While certain categories of Best Bets such as New Arrivals and On Sale usually work well, companies too often create nebulous categories like Featured Items instead. Unfortunately, customers’ perception of a Featured Items category is often that it is pushing a collection of items that are overstocked, badly made, or overpriced—and thus, that a Featured Items category is essentially a large advertisement that it is best to ignore, in favor of browsing other items that might offer better features and value.

Even if people do browse Featured Items, nothing can change the fact that a typical mobile landing page can display only a very small number of items, usually considerably fewer than the number of items that appear in keyword search results. The likelihood that a smaller number of random Featured Items on a landing page would outperform the larger number of items in search results that are optimized for scrolling is actually quite low. As shown in Figure 5, a random grab bag of Featured Items in a gallery view is almost always inferior to the same collection of items presented as search results.

Figure 5—A gallery page underperforms keyword search results

The smaller number of items appearing in a gallery-page format almost always underperforms a similar collection of items in a search-results format. There are two reasons for this: First, it takes time and effort for the brain to adjust to an unfamiliar gallery layout. Second, on a mobile device, a gallery presents even less information and fewer items than keyword search results do.

Instead of hoping to hit it right with a random sampling of items, help people to navigate quickly and efficiently to the items they want by using the 2D More Like This pattern I described in my column “More Like This: A Design Pattern.” This pattern is very effective, and you can easily adapt it for use on mobile devices.

Let Your Interns Design Landing Pages

“Look for people who are passionate about the brands for which you are designing landing pages. They can help you design brand landing pages that perform extremely well.”

Look for people who are passionate about the brands for which you are designing landing pages. They can help you design brand landing pages that perform extremely well. One excellent strategy is to use customer input that you obtain during a participatory design exercise to elucidate important brand attributes and get ideas about how to express them using elements on a landing page.

Another effective strategy is to get ideas from mobile sites put together by the brands themselves. For example, Figure 6 shows the excellent home page on the mobile Web site for the Gap brand.

Figure 6—Gap mobile Web site’s home page

Keep in mind that, for many young brands, your design team is unlikely to understand the brand and relate to it in the same way younger folks would. That means they are less likely to be able to create an inspired page design that would resonate with younger customers who are passionate about the brand.

In such cases, design interns may provide a perfect solution. They are also more likely to create inspired designs that skirt the very edges of the official design guidelines, while keeping the important elements of your site intact. Most important, interns are inexpensive to hire, are often very creative, and have everything to prove, ensuring you’ll get the best landing page design. Try splitting your interns into teams and letting each of the teams own one of the brand landing pages. Have them design and develop the individual landing pages, then set up a sort of friendly competition to learn which team’s page outperforms or outsells the keyword search results by the greatest amount.

Parting Words

“Each brand is unique, so each brand landing page must be a unique reflection of a brand. Not every design strategy is appropriate or works for every brand.”

In this column, I have presented some strategies for improving the user experience of your brand landing pages. Each brand is unique, so each brand landing page must be a unique reflection of a brand. Not every design strategy is appropriate or works for every brand. So, remember to use these design strategies only as guidelines. They are not absolutes, but merely starting points for exploration and experimentation. Good design often means coloring outside the lines. Set a primary goal for each brand landing page and stick to it, trying multiple creative solutions, if necessary. Creating custom landing pages is certainly one area where experimentation and testing trumps the application of any general guidelines.

Designing Resourceful Mobile E-Commerce Search

Long viewed as Web search’s poor sister, Mobile search presents a compelling story in its own right, with it’s own experience considerations and tremendous opportunities. To help illustrate what creates a resourceful and intuitive mobile search experience, I will present the best material from my upcoming book, Designing Search: UX Strategies for eCommerce Success due out from Wiley in Spring 2011:

• The right way to approach the mobile search design challenge
• Using Augmented Reality and mobile device GPS location
• Local personal ecommerce & product bar-code scanners
• Re-engaging the customer after constant interruptions
• The UX differences between smart phones and tablet (iPad)
• Faceted Search Design patterns for mobile and iPad
• Mobile search Information Architecture patterns
• The best ways to approach zero search results conditions

This is a straight-forward, practical talk about mobile e-commerce search UI design, so there will be lots of examples and very few bullet points.

Presentation on Slideshare ⇒
Design4Mobile website ⇒

In Part I of “Design Patterns for Mobile Faceted Search,” I looked at the challenges and opportunities of mobile faceted search. To address the well-known challenge of limited screen real estate on mobile devices, I covered the Four Corners, Modal Overlay, Watermark, and Full-Page Refinement Options design patterns, which maximize the real estate available for search results on a mobile device. This month’s column covers strategies for making people more aware of the filtering options that are available to them, as well as methods of improving transitions between the various states a user encounters in a search user interface.

Teaser Mobile Design Pattern

Teasers are nothing new on mobile phones. Most mobile user interfaces implement this pattern in some manner or another. Consider, for example, the Yelp iPhone application, shown in Figure 1.

Figure 1—Teaser design pattern in Yelp’s mobile app

Yelp displays five complete search results, plus a teaser at the bottom of the page that shows a partial view of the next result set. The Teaser design pattern is very useful in showing that there are more search results below the fold. As I mentioned in a previous column, “Choosing the Right Search Results Page Layout: Make the Most of Your Width,” my usability testing has shown that Amazon is an absolute master of this pattern. Regardless of a screen’s resolution, they always display partial product descriptions and pictures just above the fold. Showing part of what is at the fold is a very effective means of inviting visitors to scroll down and see more content.

Recently, when Microsoft came out with Windows 7 Mobile, they extended the Teaser pattern well beyond just showing the availability of search results below the fold. In Figure 2, an excellent video from Luke Wroblewski’s blog entry “Windows Phone: User Interface Teases & Transitions” effectively demonstrates this concept. As you can see, Windows 7 Mobile shows there is more content available on the left, right, above, and below what’s currently visible on the screen.

Figure 2—Teasers and transitions in Windows 7 Mobile (Compiled by Luke Wroblewski)

In its implementation of the Teaser pattern, Windows 7 Mobile uses lots of very obvious cues, including screen titles that are cut off in midword, partially visible screen widgets, image fragments, and abundant use of animated transitions.

A teaser is a specific application of the more general design principle: fixing imperfection, in which a design immediately engages people by having them fix something that is intentionally not quite right with a user interface or object. In the process of fixing an imperfection, people learn the user interface’s interaction model. Studies have shown that this process of fixing imperfection, or seeking symmetry, is very natural to humans and quite immersive, even to the point of alleviating anxiety and pain in burn trauma.

The problem some may see with the Windows 7 Mobile design is that people cannot win at this particular game of fixing imperfection. There is absolutely no way to fix the user interface to simultaneously show all of a title, widget, or image that exceeds the size of the screen. It’s kind of like a blanket that is intentionally made too small: if you cover your legs, your chest is exposed; pull the blanket up to your chin and your legs get cold. As UX designers, we often seek a kind of minimalistic, authentic beauty and symmetry in our designs, so some designers might find this kind of user interface profoundly disturbing. However, one cannot argue against the effectiveness of this design approach.

The wireframe shown in Figure 3 takes advantage of the Teaser design pattern to show a partial view of some faceted search filters on the right and, thus, expand the available virtual screen real estate.

Figure 3—Teaser design pattern facilitates the discovery of faceted search filters

The search results are on the left in this wireframe; filters, on the right. Following a basic convention of mobile user interfaces, buttons on the right let people drill down deeper into the application’s information architecture (IA) space, while tapping buttons on the left moves them closer to the top of the IA or to the home page. In this example of what Microsoft calls panoramic applications, the mobile device acts as a sort of viewfinder that displays only a small part of a much larger virtual space.

The Teaser design pattern very effectively facilitates discovery through its use of partially exposed screen elements—in my example, faceted search results filters. This pattern also enables people to make rapid transitions from looking at search results to narrowing down the search results, so it is highly suitable for applications in which it is advantageous for people to discover a set of filters quickly and use them often.

Basic/Advanced Parallel Architecture Pattern

Another good design pattern for efficient discovery and use of filters is the Basic/Advanced Parallel Architecture design pattern, depicted in Figure 4. This design pattern is especially effective in applications that offer a fixed set of filters—for instance, booking air travel.

Figure 4—Basic/Advanced Parallel Architecture design pattern

The idea behind the Basic/Advanced Parallel Architecture design pattern is that there are two modes of interacting with filters: basic and advanced. The basic mode lets customers easily engage with your application and dramatically shortens their learning curve. However, people who want an advanced mode of filtering can easily obtain this functionality—in the example shown in Figure 4, by returning to the filter page and tapping the Advanced Search tab.

The parallel architecture part of this pattern comes in when a customer needs to adjust the filter values. For customers who started their query from the Basic Search tab, tapping Back returns them to that tab. For customers who started from the Advanced Search tab, tapping Back returns them to that tab, where they can adjust the expanded set of filters. While the relationships between these three contexts—Basic Search, Advanced Search, and Search Results—are a bit difficult to explain, they offer a very natural interaction model that most people have found very intuitive to use during testing.

The Basic/Advanced Parallel Architecture design pattern offers the added advantage of a flatter architecture. Instead of an advanced mode that requires people to go deeper into an application’s IA, the advanced flow sits in parallel with the basic flow, so both are equally accessible with a single tap.

It is important to note that, in both cases, the search results page has a persistent status bar across the top of the screen, displaying an entire search query, plus any applied filters. Recall that a persistent status bar was one of the features I described in Part I of “Design Patterns for Mobile Faceted Search.”

One application that successfully implements the Basic/Advanced Parallel Architecture design pattern is the Thirsty Pocket iPhone app, shown in Figure 5.

Figure 5—Basic/Advanced Parallel Architecture design pattern in Thirsty Pocket

Notice that, instead of labeling this feature Advanced, Thirsty Pocket uses the label More Search Options. In Thirsty Pocket, the purpose of the advanced search page is to provide options for searching outside the device’s current GPS location, as well as narrowing a search by price. Most people would not use the location filter, and the price filter might, in fact, severely limit the effectiveness of search by too frequently narrowing a search to zero search results. The price filter is a great example of the “ejector seat lever” Alan Cooper so eloquently describes in his book About Face 3. Therefore, this price filter is best hidden on a separate page. In the Thirsty Pocket app, the label More Search Options describes the purpose of the advanced search page perfectly and has the added bonus of being less intimidating.

In another variation on the Basic/Advanced Parallel Architecture design pattern, instead of Basic Search and Advanced Search tabs, Thirsty Pocket presents two buttons on its home page: a prominent Search Near Me button for basic search and a de-emphasized More Search Options button for advanced search options. Tapping More Search Options lets you set filters, then tap Advanced Search to see the filtered search results. Nevertheless, the Thirsty Pocket user interface still preserves the essential features of this pattern, because tapping Modify Search on the search results page takes you back to the appropriate search page—basic or advanced—depending on how you initiated a search.

In Conclusion

A lot of people have asked me about these design patterns and the best ways to use them. Thank you all for your questions. Unfortunately, the answer would go well beyond the scope of even a two-part article. The best recommendation I can make is that you learn as many design patterns as possible; understand why these patterns have emerged, what customer and business goals they support, and what limitations they have. Then, once you understand the unique goals of your own customers and business leaders, you can either choose the right design pattern or combination of patterns or develop your own design patterns that fit the task at hand. Our understanding of user interfaces is still evolving—and for mobile design, still in its infancy. Mobile design patterns and paradigms are just beginning to emerge, but they represent the beginning of something magnificent.

References

Bucolo, Sam et al. “The Design of a Tangible Interaction Device to Alleviate Anxiety and Pain in Pediatric Burns Patients.” CHI ’06 Extended Abstracts on Human Factors in Computing Systems, Montreal, Quebec, Canada, April 22–27, 2006.

Cooper, Alan, Robert Reimann, and David Cronin. About Face 3: The Essentials of Interaction Design. 3rd ed. Indianapolis, IN: John Wiley & Sons, Inc., 2007.

Nudelman, Greg. “Design Caffeine for Search and Browse UI.” Information Architecture Summit 2010, Phoenix, Arizona, April 9–11, 2010. Retrieved April 30, 2010.

—— “Design Patterns for Mobile Faceted Search.” UXmatters, March 8, 2010. Retrieved April 30, 2010.

—— “Experience Design for a Viral Mobile Community.” Net Squared Conference, San Jose, CA, May 2009. Retrieved April 30, 2010.

—— “Choosing the Right Search Results Page Layout: Make the Most of Your Width.” UXmatters, March 9, 2009. Retrieved April 30, 2010.

Wroblewski, Luke. “Windows Phone: User Interface Teases & Transitions.” LukeW Ideation + Design, February 17, 2010. Retrieved April 30, 2010.

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.

Thinking of porting your Web finding experience to iPhone, Android, or Windows Mobile? Just forget about the fact that these devices are basically full-featured computers with tiny screens. Having gone through this design exercise a few times, I have realized that designing a great mobile finding experience requires a way of thinking that is quite different from our typical approach to designing search for Web or desktop applications. To put it simply, designing a mobile finding experience requires thinking in terms of turning limitations into opportunities. In this column, I’ll discuss some of the limitations of mobile platforms, as well as the opportunities they afford, and share a few design ideas that might come in handy for your own projects.

Understanding Mobile Platforms

One of the challenges of mobile application design is understanding both the capabilities and limitations of each platform. Let’s use the iPhone finding experience as an example. On the plus side, the iPhone has a high-resolution screen, Multi-Touch controls, accelerometer, persistent data storage, cool video transitions, push content delivery, GPS, and a device ID. The benefits of these features have been pretty much beaten to death in advertisements, so I will not discuss them here. On the other hand, the problem constraints and limitations of mobile devices are much more interesting. I have found few sources that discuss these in detail, so in this column, I’ll attempt to describe the most important challenges of designing for the new generation of smartphones – at least as they pertain to finding:

• the difficulty of typing
• the small amount of screen real estate
• awkward touch controls
• the so-called fat-finger problem

The Difficulty of Typing

Searching requires users to type a search string, and typing on a mobile phone is difficult – partly because of the size of the device. In a July 2009 blog post on Alertbox, Jakob Nielsen called the mobile experience “miserable” and reported, “Text entry is particularly slow and littered with typos, even on devices with dedicated mini-keyboards.”

For many users, touch devices like the iPhone exacerbate this problem. Their screens display a virtual keyboard and other buttons. One issue with touch devices is poor visibility, because a user’s fingers must, by necessity, cover buttons on the screen when a user is pushing them. Thus, when pushing a button on a virtual keyboard, a user’s hand obscures his view of the keyboard.

The lack of tactile response on touch devices presents a particular problem when a user is multitasking – whether riding in taxi, using public transportation, or walking down a city street. On any mobile device, it’s very difficult to type when a person is crammed into a bus or subway car and being jostled around. A user’s desire to avoid typing becomes a necessity when using a mobile device while driving.

Another challenge users encounter when searching on smartphones is that they’re likely to lose anything they’ve laboriously typed into a search box if a device receives an incoming phone call, because mobile applications cannot block phone functions. Nor should an application, however useful, be able to prevent a user from receiving incoming calls.

The Small Amount of Screen Real Estate

Mobile screens are, by necessity, small, because a mobile device has to fit into a person’s pocket or purse. The small size of mobile screens limits the number of controls and the amount of content that can appear on them. In that Alertbox post I mentioned earlier, Jakob Nielsen reported, “Unsurprisingly, the bigger the screen, the better the user experience.” According to Nielsen, users’ success rates with touch phones like the iPhone are about double their success rates with feature phones.

Awkward Touch Controls

One of the consequences of mobile devices having smaller screens and controls that users must manipulate through touch interfaces is that some controls no longer look like their Web and desktop counterparts. For example, rather than the usual drop-down list or set of option buttons, the selection control on an iPhone is instead a spinning control called a picker, shown in Figure 1.

Figure 1: Three pickers in the Urban Spoon iPhone app

A picker that a user can quickly manipulate with a finger eats up precious real estate, so it’s not possible to show users much outside the picker. Large pickers also place limitations on how users can filter search results on mobile devices. Similar size restrictions exist for all of an application’s touch controls.

The Fat-Finger Problem

The high-resolution screens on better mobile devices – like the iPhone, Android, and Palm Pre – can accommodate fairly high information density. Unfortunately, at the same time, touchscreens limit the on-screen density of controls that users can accurately manipulate with a finger. Thus, placing multiple controls close together on a touchscreen mobile device presents difficulties. This challenge is known as the fat-finger problem.

Typically, an iPhone touchscreen can comfortably support a maximum of only three to five clickable buttons or tabs across a screen. More than this leads to frequent frustrations due to users’ inadvertently pressing the wrong control. While five controls across a screen is the absolute limit for relatively frustration-free mobile computing for people with relatively small fingers, I highly recommend a limit of four or fewer controls. Of course, if one control is bigger than the others, you’ll have to reduce the overall number of controls accordingly. For example, Figure 2 shows the Yelp mobile application, which has only three controls across the navigation bar at top of the screen, but four controls across tab bar at the bottom.

Figure 2: Yelp iPhone app

Because Yelp’s search box takes up a large part of the navigation bar, the designers had to reduce the overall number of controls to three to ensure users’ wouldn’t press the wrong controls with their fingers too often.

Understanding User Experience within a Mobile Context of Use

The challenge in designing mobile applications is the need to accommodate the design constraints and usability challenges mobile devices impose, while focusing on users’ goals within a mobile context of use. Simply duplicating the functionality of a Web application – while trying to work around the mobile design challenges I’ve described – always results in a subpar mobile application. It’s not enough to think: How can I duplicate our Web application’s user experience within the limitations of the mobile platform? Instead, it’s better to start from scratch, focusing on What experience would work best for mobile users? Putting users’ goals first allows a design team to concentrate on the new opportunities a mobile application presents rather than seeing the challenges of mobile simply as barriers to implementing a Web application’s existing functionality.

Next, I’ll present some ideas about how to approach the design of finding experiences for mobile devices in a way that lends itself to taking full advantage of their capabilities within a mobile context of use. These ideas by no means represent an exhaustive catalog of all possibilities. I merely want to provide a few examples that may inspire further exploration as part of your own finding projects.

Preloading Pertinent Search Results

As I discussed earlier, typing on mobile devices is difficult. Plus, a phone call, a text message, or an opportunity to take a picture is likely to interrupt a user’s finding experience at least once. Saving a user’s previous searches is an obvious and simple way of re-engaging users in a finding task and provides useful context when an application first opens.

Unlike Web applications, native mobile applications are persistent, so it’s easy to cache their search results. Cached results load quickly, users’ re-engagement is immediate, and there is little to compete for a user’s attention – that is, at least until another phone call comes in. Some mobile device APIs even enable native applications to detect whether a phone call interrupted a user’s previous session or the user exited an application normally and determine how much time has elapsed since a user last opened the application. These capabilities present interesting possibilities for fine-tuning an application’s welcome-back screen to re-immerse users in their previous tasks or offer pertinent new content and present new possibilities for interaction.

Providing Local Results

On mobile devices that support GPS, Wi-Fi, or other location-tracking mechanisms, you can determine the current location of another person who is using a mobile device, allowing applications to offer location-aware services. Mobile applications with search capabilities can serve highly relevant, fresh results that perfectly match a user’s current mobile context. For example, Loopt is just one of a whole cadre of social networking mobile applications that allow users to track the locations of their friends who are currently nearby and exchange messages with them, get coupons from local merchants, and discover neighborhood happenings, as Figure 3 shows.

Figure 3: Local search results in the Loopt iPhone app

Offering a Value-Added Interpretation of the Real World

Using mobile devices for sense-making in the real world offers one of the most intriguing possibilities for mobile applications. Luke Wroblewski described some interesting possibilities, including augmented reality applications, in his Smashing Magazine article “Enhancing User Interaction with First Person User Interface.”

When it comes to finding, however, the Amazon Mobile iPhone app offers the Amazon Remembers feature, which is a forerunner of many exciting things to come. Amazon Mobile lets customers take pictures of any real world items and add them to their lists of things to remember. Once a user uploads a photo, Amazon figures out what the item is and, if there is a corresponding item available for sale on Amazon, displays that item and sends the customer an email alert, encouraging her to purchase the item. Customers often get a response in a matter of minutes, but the search can take up to 24 hours. This application lays a solid foundation for the idea of a mobile Internet of objects that I described in one of my previous columns, “Brave New World of Visual Browsing.”

Providing Various Sorting Options

As I previously mentioned in my column The Mystery of Filtering by Sorting,” sorting options are an excellent way of opening up an ecommerce site’s inventory for browsing. One of the best ways of doing this is to provide two or more buttons on a search results screen that allow multiple ways of dissecting an inventory, without ever failing to serve some results. By using sorting options together with geolocation, customers can even avoid having to type in any query at all. As Figure 4 shows, the ThirstyPocket iPhone app lets customers simply press the Search Nearest or Search Newest button to see a sample of local results without having to type anything in the search box.

Figure 4: ThirstyPocket iPhone app

Of course, a customer can always type keywords in a search box to narrow down the results. As I explained in my presentation at the Net Squared Conference in May 2009, using this design pattern lets customers engage with an inventory of items or content immediately, then invest the effort of typing in keywords once they have caught the scent of something that interests them or to refine the search results further. Of course, given the fat-finger problem and a mobile device’s limited screen real estate, we can’t provide more than three to five sort options on the screen at one time. However, as the ThirstyPocket example shows, even a couple of sort options is often enough for customers to begin exploring.

Considering Custom Controls

One consequence of mobile devices’ having a smaller screen is not having the space to create a navigation bar of filters, facets, or categories on the left, providing a key to the properties by which a user can effectively narrow down a result set. Consider, for example, the all-important category filter. If an application were to use the standard iPhone picker, shown in Figure 1, it would obscure most of the search results on the screen. Various applications deal with this challenge in different ways. Some mobile applications have created custom category-filter controls – like those in Amazon Mobile, shown in Figure 5.

Figure 5: Custom category-filter controls in Amazon Mobile

Clicking By Category takes a customer to a different, full-sized screen on which he can select a category. The ThirstyPocket application, shown in Figure 4, uses the same principle for its custom category selector, with an added twist: the visual design of the category selector is reminiscent of the familiar drop-down list, taking full advantage of customers’ existing mental model and helping them understand what behavior to expect.

Changing Search Paradigms

Because of the unique mix of constraints and opportunities that mobile application design presents, this design space is rich with possibilities for changing the existing paradigms for search and finding. Consider speech recognition, for example. While, on the desktop, speech recognition does not yet enjoy widespread popularity and use, mobile represents an entirely different context – where speech recognition can offer an ideal solution. Not interpreting a spoken word correctly on a mobile device might not be quite as big a deal as it is on the desktop, because the accuracy of speech recognition may actually approach, if not exceed, that of typing on a mobile phone’s awkward mini-keyboard. Combine speech recognition with the use of an accelerometer and magnetometer, allowing gestural input, and you have the Google Mobile search application for the iPhone, shown in Figures 6 and 7.

Figure 6: Google Mobile iPhone app

Figure 7: Google Mobile Voice Search on the iPhone

The iPhone application Google Mobile recognizes the gesture of a person’s swinging the phone up to his ear to know when to record a search command. When the user speaks, the search engine accepts and interprets his voice commands, then serves up search results. This user interface implements what is literally a game-changing design paradigm, because its designers have taken the time to truly consider the mobile context of use and map natural interactions like speech and gestures to mobile device functions. As Peter Morville said in his book Search Patterns, “We simply raise our phones to our ears and speak our search, relying on Google Mobile to derive what we want from who we are, where we stand, and what we say”. Like placing your hands under a tap to turn on the water, this is the type of smart design that “dissolves in behavior”.

When it comes to designing for a mobile context, we are just starting to scratch the surface. As Tom Chi of OK/Cancel famously quipped in his interview with Luke Wroblewski, “A well defined-and exciting problem (and its associated constraints) is the catalyst that makes design go.” When we stop thinking about the limitations of mobile platforms and, instead, truly focus on the user goals we are working to support, we might just find those limitations turning into opportunities for redefining how people find, remember, and discover things in their world.

References

Morville, Peter. Search Patterns. Sebastopol, CA: O’Reilly, 2010.

Nielsen, Jakob. “Mobile Usability.” Alertbox, July 20, 2009. Retrieved February 27, 2010.

Wroblewski, Luke. “Enhancing User Interaction With First Person User Interface.” Smashing Magazine, September 21, 2009. Retrieved February 27, 2010.

Wroblewski, Luke. “Defining the Problem: Q&A with Tom Chi.” Functioning Form, April 27, 2006. Retrieved February 27, 2010.

Faceted search has been around for a long time and has become the de facto standard for search on most ecommerce sites. However, filters with numeric values remain among the most confusing, because many sites have not able to design usable numeric filters that people can use in an intuitive manner. Recently, powerful user interface controls called sliders have become all the rage for specifying numeric attributes in finding user interfaces. Unfortunately, in their rush to implement this latest, greatest feature, many companies have not designed easy-to-use sliders. Rather than solving usability problems, poorly designed sliders create even more issues around numeric filter usability. In my experience, the following three usability issues surface most often with numeric filters:

• representing discrete values for aspects as sets of ranges
• inadvertently emphasizing overly constrained filter states
• being parsimonious with inventory information

In this column, I’ll examine each of these issues and present the best practices that solve these problems.

Representing Discrete Values for Aspects as Sets of Ranges

One of the most common pitfalls with numeric aspect filters is their representing discrete values as sets of ranges. What makes a filter value discrete? Certain types of products typically have widely recognized, discrete values—for example, a digital camera might have a 10MP resolution and a lens with 3X zoom—which can often consist of either whole numbers or fractions. These discrete values tend to be consistent across competing brands and models and rarely change from one vendor to the next.

Many sites offering faceted search do not present discrete numeric values for aspect filters in the most useful fashion. Designers are often tempted to present such values to customers as sets of ranges. Presenting discrete filter values as a set of ranges typically results in a user interface similar to that in Figure 1, showing a camera-resolution filter on a major ecommerce site.

Figure 1—Camera-resolution filter with values presented as a set of ranges

My usability studies have shown that many people have trouble finding 10MP within a 9.9MP-11.9MP range and applying the filter correctly. The problem is a mental model mismatch. People don’t think of 10MP as falling within some range. When customers look for discrete values in aspect filters, they are most often looking for a specific value—for example, 10MP—that forms a critical part of the information scent. Most people typically think of a camera resolution as a specific value—not as a numeric value within some range.

When users try to look for the value 10MP within a range, usability problems arise, because the resolutions 9.9MP and 11.9MP simply do not exist as discrete values. While, numerically, it is true that 10MP lies within a 9.9MP-11.9MP range, this range has very poor information scent and requires additional thinking and interpretation on the part of users, which does not make for intuitive and efficient finding. Having to think hard just to find something causes problems for users.

In my user research, I have often observed that people who are in a rush, distracted, or simply not that great at working with fractions in math often select the wrong range of discrete values, wonder why they are not getting the results they expected, get frustrated, and quickly leave a site to navigate to a more usable one.

Instead of providing ranges, it is much more effective to present lists of discrete values, showing all of the possible values for an aspect filter. If doing this results in a filter with too many options, simply rounding off the value to around 10MP works very well, as shown in Figure 2. (Note that the word around is usually implied. Although it sometimes shows up in a short form such as ~10MP or 10+MP. However, this extra precision is usually unnecessary, as I will explain in a future column.)

Figure 2—Recommended redesign of camera-resolution filter

When a customer clicks a link representing a discrete value, one option is to expand a list of subvalues—for example, clicking an around 10MP link would show all of the available subvalues: 10.0MP, 10.2MP, 10.3MP, 10.4MP, as shown in Figure 2A. Should you bother designing and implementing this? Usually not. Unless your customers are professionals who might be looking for a particular value, they typically would not drill down past the around 10MP link. Is there really that much difference between digital-camera resolutions of 10.2MP and 10.3MP to a typical consumer? So, unless your company’s inventory is extremely large or you have a very specialized clientele, it is often much more useful to present an approximate value like 10MP.

Should you support single or multiple selection for displaying discrete filter values? The answer is always: It depends. Up until a few years ago, guidelines generally recommended the simplicity of single-selection links for discrete values. Today, however, I highly recommend that my clients implement multiple selection for discrete filter values—provided the finding user interface also supports multiple selection. Mark Burrell of Endeca echoed this sentiment in the 2010 UIE Webinar, “Leveraging Search & Discovery Patterns for Great Online Experiences,” in which he emphasized that most ecommerce customers no longer find multiple selection hard to use and prefer the flexibility it offers.

Numeric Sliders for Filters

Numeric sliders have recently become the rage for faceted search. Sliders can add a touch of interactive fun to what many business people refer to as a boring finding interface. Note that boring user interfaces usually work extremely well, because they are intuitive and easy to use, and UX powerhouses like Amazon and Netflix do quite well without any sliders whatsoever.

That said, sliders can be helpful in some applications, because they give people tremendous filtering power when they are implemented correctly. With great power, however, comes great responsibility: Sliders deserve special consideration from designers—precisely because they make it so easy for your customers to screw up and overconstrain their queries, leading to search results that are either incorrect or of poor quality. This, in turn, results in frustrated customers who leave your Web site quickly without buying anything. The two issues I see most often with sliders are:

• inadvertently emphasizing overconstrained filter states
• being parsimonious with inventory information

Let’s take a closer look at each of these issues and what we can do about them.

Issue: Inadvertently Emphasizing Overconstrained Filter States

To examine the issue of overconstrained filter states, let’s take a look at an example—the slider rating control on TripAdvisor, shown in Figure 3. Ratings seem deceptively simple, yet raise a host of usability issues when they are implemented incorrectly.

Figure 3—Slider rating control on TripAdvisor

TripAdvisor has implemented ratings using a double slider control, which presents a perfect example of inadvertently emphasizing overconstrained filter states. This double slider control allows a wide variety of ranges—some of which are much more useful than others when it comes to finding particular items or content of interest. For example, rating ranges spanning only a single star—such as 0-1 stars, 1-2 stars, or 2-3 stars—are simply not useful, because short ranges do not match the mental model of the people using the system.

Most of the time, people click a rating filter to get all of the merchandise above a certain rating—that is, as a way to find higher-quality items in their search results. However, a double slider control overemphasizes the ability to constrain the range from both sides, making it very easy to get this wrong by overconstraining a query.

A much more useful way of approaching this design problem is to use a single slider or a set of links like those shown in Figure 4, which shows ratings as they are currently implemented on Amazon.

Figure 4—Amazon’s more useful implementation of ratings as links

We could further improve the rating control shown in Figure 4. Since the goal of people using this control is to get better-quality items, it is not actually that useful to show only a single star—the lowest possible rating. Instead, it might be more intuitive to replace the single star with the word Any and make that the default filter state. The filter shown in Figure 4 also has the important added advantage of providing vital inventory information. Item counts following each set of stars help people using the ratings filter to clearly understand the consequences of their actions and builds appropriate expectations. Understanding what to expect from their actions lets people be more efficient and effective, leading to higher customer satisfaction and better usability. Next, we’ll explore how we can use sliders to show inventory information.

Issue: Being Parsimonious with Inventory Information

Do all dual sliders emphasize overconstrained filter states? Not necessarily. For some filters dual sliders are entirely appropriate—for example, for price ranges. However, the problem that I described earlier of overconstraining queries and, as a result, providing inadequate information never really goes away. As Figure 5 shows, the dual slider control for the price range filter on TripAdvisor provides no inventory information, so customers would have no idea what the effect of manipulating the sliders might be. Any action customers take might be a hit or a miss—but it is never clear in advance which it will be, because the system simply does not provide the necessary inventory information.

Figure 5—Dual-slider filter for price range on TripAdvisor

Compare the dual slider for price range on TripAdvisor to the price control on Staples.com, pictured in Figure 6.

Figure 6—Price control on Staples.com with multiple check boxes

As I mentioned in one of my previous columns, “The Mystery of Filtering by Sorting,” overconstraining search results by price is one of the most common human errors we see in usability testing for search user interfaces. Which control would you expect to result in more overconstrained queries: a dual slider or a set of check boxes? The control that makes overconstraining results easier is the dual slider, because it gives no clue as to what to expect from a particular action. On the other hand, the dual slider provides the bling many business people crave as a means of differentiating their user interface from the competition.

In this age of highly interactive Ajax interfaces, clicking links or typing in numbers to specify a price range seems so old-fashioned. Is there a control that would provide the interactivity and fun of the slider, yet offer the inventory information so necessary to helping customers make informed decisions?

One approach would be to use a dual slider for setting a price range, combining it with a sparkline that graphically represents the available inventory information for every price in the range. Figure 7 depicts my suggested redesign of the TripAdvisor price filter, which combines a dual slider with a sparkline, showing the available inventory for each price in the range.

Figure 7—Suggested redesign of the price range filter on TripAdvisor

In his book Beautiful Evidence, Edward Tufte describes sparklines as “data-intense, design-simple, word-sized graphics.” Although I have no idea who first thought of combining a slider with a sparkline, I have been recommending this solution to my clients for over four years, and I can claim to have arrived at this idea independently. Unfortunately, so far, most of my fellow designers and the business people with whom I have worked have remained cold to this idea, stating that a slider with a sparkline would be “above and beyond what an average user could understand.” However, my own experience as a user researcher backs the opposite conclusion. Every usability test participant who has seen the user interface in Figure 7 has confidently stated that he or she understood that the sparkline represented the number of items available, eloquently proving once again that “clarity and simplicity are completely opposite of simple-mindedness,” as Tufte said in his book Envisioning Information.

Recently, during the UIE Webinar I mentioned earlier, I was supremely gratified to hear Mark Burrell of Endeca recommend dual sliders with histograms as one of the best ways of showing price ranges. Burrell’s experience with dual sliders was similar to mine: he said that most people have no trouble understanding that histogram bars—a step-wise variant of a sparkline—represent item inventory for each part of a slider’s range and that histograms clearly help people to avoid overconstraining their queries.

In Conclusion

In our age of rapid development, new ideas and new controls hit the Web almost every day. Even as companies are struggling to overcome the old challenges of numeric faceted filters, designers are innovating interesting new controls with which they can solve those challenges. One such control is the slider, which gives unparalleled power to customers. However, successfully offering this power requires careful UX design in order to avoid potential pitfalls. Again, the following three issues with numeric filters surface most often:

• representing discrete values for aspects as sets of ranges
• emphasizing overconstrained filter states
• being parsimonious with inventory information

Designers’ uninformed use of sliders for filters often exacerbates these issues. In this column, I have presented best practices as well as some novel approaches to help designers overcome these challenges. But there is simply no substitute for empathy and solid qualitative user research. Understanding why customers do certain things is extremely important in designing effective user interfaces. No matter what metrics we have, we cannot improve our user interfaces unless we understand what our customers’ goals are and why people fail to reach them. With every new filtering innovation, it becomes ever more important to stay focused on our customers, with patience, empathy, and understanding.

References

Morville, Peter, and Mark Burrell. “Leveraging Search & Discovery Patterns for Great Online Experiences.” UIE Virtual Seminar, 2010. Retrieved February 7, 2010.

Tufte, Edward. Beautiful Evidence. Cheshire, CT: Graphics Press, 2006.

—— Envisioning Information. 4th ed. Cheshire, CT: Graphics Press, 1990.