More Like This: A Design Pattern

Originally Published on UXMatters.com January 4, 2010 ⇒

In my last installment of Search Matters, “Cameras, Music, and Mattresses: Designing Query Disambiguation Solutions for the Real World,†I presented several design strategies for query disambiguation.

Unfortunately, most sites do not make sufficient use of this pattern and some that do use it design and implement it incorrectly.

Show Me More

The idea behind the More Like This pattern is very simple: within each group of items representing a particular category from a catalog or accompanying each item in search results, provide a prominent link or button with a label that is some variation of More Like This ». Of course, the devil, as they say, is in the details. Figure 1 shows one of the more successful implementations of this pattern, the Amazon.com home page.

Figure 1—Amazonâ€s successful implementation of More Like This

On close examination, this design yields a few important lessons:

• Make group organization simple and obvious. Each group title should be prominent and simple, not inviting deep thought or much examination. The words and the color treatment of group titles should flow in a way that lets customers easily skim groups. Their titles exist to clearly separate various groups and direct the eye to the items they contain.

• Focus on helping customers make decisions. Although the items in each group are themselves fairly relevant, the subtle focus of the whole page is not on finding exactly the right item on the current page, but instead on displaying some relevant entry points to an unfathomable cornucopia of relevant choices on Amazon.com that each group exemplifies.

• Format groups differently from search results. The items in each group have a horizontal layout, in a gallery format, so itâ€s easy to differentiate them from the search results, which typically appear in a vertical list.

The most important thing to keep in mind is that all of these design features support a single key goal: to help customers find what they want by providing the information scent and motivation that makes their navigational decisions easy and intuitive. Letâ€s examine what happens when sites ignore these lessons by looking at some other implementations of the More Like This design pattern.

Make Group Organization Simple and Obvious

Any cognitive friction around the organization and format of different groups makes navigational decisions more difficult. Instead of making decisions primarily on the basis of the information scent embedded in each groupâ€s content, customers must try to understand why certain groups have a different format—a confusing and usually futile endeavor. Figure 2 shows one example of such an over-designed More Like This page, displaying search results for the query Thai Restaurant San Francisco on Yelp.com.

Figure 2—Yelpâ€s over-designed More Like This page

The aim of this page is not to present all possible choices, but to help customers make a quick choice of the method that would best let them explore a bevy of Thai-food restaurant recommendations. Unfortunately, the purpose of the page is far from obvious. Observe that the page has no fewer than seven different groups, each with its own branding and formatting, in an overly complex, nonstandard layout. Together, all of these differences create a cacophony of results, making it very hard to compare the different groups without studying them in detail. Too much fancy formatting and too varied a layout hinders customers†ability to make navigational decisions quickly, which should be the pageâ€s primary aim.

Contrast this page with the Amazon home page in Figure 1, in which each group has the same simple format, drawing the eye to the content. On Amazon, with the aim of making customers†navigational decisions quick and easy, groups†simple, intuitive organization lets customers easily scan them and decide whether to explore a particular group further.

Last, but not least, the first section, Best of Yelp, does not even look like the other groups. It is the only one that contains breadcrumbs. As a rule of thumb, on More Like This pages, breadcrumbs should appear above all of the More Like This groups, not within any of them.

Focus on Helping Customers Make Decisions

To help customers make navigational decisions within More Like This groups, is more content better? The answer is: it depends. Amazonâ€s More Like This pattern includes one subtle, but very powerful feature: if a customer increases the page width, the number of items in each horizontal group in this liquid layout increases, so higher resolution screens and wider windows show more items in each group. Iâ€ve already discussed the benefits of liquid screen layouts in my column “Choosing the Right Search Results Page Layout: Make the Most of Your Width,†so I will not cover that topic in detail here. Be aware that this kind of horizontal expansion is no simple trick, so donâ€t expect it to work out of the box, as it were. Though, if you can afford the labor that developing the right CSS stylesheet involves, this is one feature well worth implementing.

On Amazon, more content is better. Partly, this is because every additional item a wider screen shows might be the one that catches the interest of a prospective buyer. But most important, showing a greater number of items presumably creates better information scent for each group, helping to motivate customers to explore a group in more detail.

What if there were a way to show even more content in each horizontal group on a page? One way to do that would be with a carousel widget that scrolls from side to side like that shown in Figure 3, on a category page on Netflix.com.

Figure 3—Netflixâ€s More Like This carousel pattern

In many ways, the Netflix implementation of a More Like This carousel is very similar to the Amazon implementation of More Like This. The page organization is simple and obvious, and the groups look different from the search results. There is, however, one important difference: clicking an arrow at either side of each group scrolls the contents of the group to the right or left, displaying an additional four items. Does the addition of this carousel widget help or hinder the primary goal of the page?

Well, the jury is still out on that. However, I can tell you that the carousel takes a customerâ€s focus away from making a decision about which group to explore and instead invites the customer to linger on the page a bit longer, while exploring each of the groups. This is not necessarily a bad thing. But keep in mind that, even though a carousel can show customers twice as many items in a group, it still shows them only 8 to 10 items in total. This is in contrast to the hundreds, if not thousands of items a customer could see in a complete list of search results by clicking the See all > link for a group. Providing larger secondary targets—the left- and right-pointing arrows—also makes people think they should click them. If customers do click the arrows, there is a pretty good chance they might become mesmerized by the fancy scrolling interaction and miss the fact that this page is supposed to help them choose a subcategory to explore. A customer might look at the eight items the widget presents, find none of them relevant, and leave the site, thinking those eight items are all there were to see in a particular subcategory.

A carousel might seem like a fun, beneficial feature, but remember that the main purpose of the More Like This design pattern is to direct customers to explore the entire cornucopia of items under each category—that is, to select a category to explore—not to find exactly the item they want among the 8 to 10 items each carousel displays. To drive people to explore, the overall design of each group must be fairly Spartan, so customers can make their decisions quickly and move on to exploring the main body of the search results. If fancy group formatting or Ajax carousels make customers disregard the more important More Like This buttons, such a page fails to meet its primary objective.

If you are still thinking about using carousels for your More Like This groups, consider that Netflix has one of the best recommendation engines in the world and can usually select very relevant items to include among the 8 to 10 options their carousels display. Amazon, which also has an exceptional recommendation engine, tried incorporating carousels for all of their groups, but now uses the carousel feature more sparingly, presumably because the results underperformed the Spartan group design, which is optimized for quick scanning.

Although a typical More Like This page does not warrant the use of carousels, in some circumstances they can be appropriate. One place where a carousel widget might come in handy is in the Two-Dimensional More Like This design pattern Iâ€ll discuss later. But first, letâ€s take a quick look at what happens when groups look just like the actual search results.

Format Groups Differently from Search Results

So far, weâ€ve covered More Like This pages that, for the most part, look pretty different from search results pages. What happens if you apply the More Like This pattern to subgroups containing vertical lists of results?

The query disambiguation page on TripAdvisor.com, shown in Figure 4, does a particularly poor job of helping customers choose either a means of exploring or a category of items to explore.

Figure 4—Search results for the query San Francisco on TripAdvisor

This is clearly a page that does not inspire or invite further exploration. There is much that really does not work on this page, including the bevy of no less than ten generic, monochrome icons; intermixed, ungrouped results that seemingly show up in random order; the small number and poor quality of results; and the absence of any pictures. My list could go on and on. However, as bad as all of these problems are, customers might actually overlook them, if the page did not also commit the cardinal sin of any grouping presentation: making the groups on the page look like actual search results.

In all of my user research, I have found that nothing is more confusing to participants or generates more sheer exasperation in customers than dealing with a page that looks and feels like a search results page, but is actually some kind of fancy, special-purpose page containing groups, whose aim is to take customers to actual search results. TripAdvisorâ€s query disambiguation page for San Francisco, shown in Figure 4, is exactly such a page. Take care to avoid this approach in your designs.

Two-Dimensional More Like This Pattern

How could we improve TripAdvisorâ€s query disambiguation page for San Francisco? In my user research, Iâ€ve discovered that precisely because it is possible to show only a very small number of items for each topic—typically 4–5—customers†do not expect to discover specific items of interest on this kind of page, but instead to see a representative set of items in each specific subcategory.

What if, instead of showing a fairly random sample of 4–5 specific hotels, attractions, or restaurants, we showed 4–5 generic items that represent a more granular subdivision, or aspect, of each category? In other words, instead of getting item details for 4–5 specific hotels, customers could drill down to one of the most popular hotel types—for example, Family, Business, Bed and Breakfast, or Boutique. Clicking one of the 4–5 generic hotels in the Hotels group would take customers to a search results page with results filtered by both the category Hotels and a type of popular hotel, making it possible for them to rapidly perform a visual, two-dimensional drill down into their area of interest. This is the idea behind my Two-Dimensional More Like This pattern. Figure 5 provides an example, showing my suggested redesign for the TripAdvisor query disambiguation page.

Figure 5—Suggested redesign for the query disambiguation page

This Two-Dimensional More Like This pattern is particularly appropriate for cases where the content includes thumbnail images and both the category and aspect are clearly defined—as they are in the case of hotel types, for example. In many cases, brand is another popular search facet that provides an easily recognizable secondary aspect you can apply across a group.

Interestingly, I have found that there is little need for secondary aspects to be consistent across categories. Let me give you an example. In my last column, “Cameras, Music, and Mattresses: Designing Query Disambiguation Solutions for the Real World,†I showed how HomeDepot search results for the query drill fell into three categories: Drills, Drill Bits, and Hammer Drills. If we were to apply the Two-Dimensional More Like This pattern to that example, it would be highly appropriate to use Brand—for example, Black & Decker, Dewalt, and Makita—as a secondary segmentation for the Drills category. On the other hand, it would be best to segment the Drill Bits category by the type of drill bit—for example, Sets, Drill Bits, Philips Screwdrivers, and Flat Screwdrivers.

In my user research, I have found there is little problem with applying different secondary aspects to different More Like This groups on a page, so long as they make some intuitive sense. I have theorized that this is because the customers using a search results page usually quickly narrow the results down to a specific category, by following its information scent. So, they need to figure out the organizational pattern behind a single subcategory in which they are interested rather than to compare different subcategories to one another.

As I mentioned earlier, the Two-Dimensional More Like This pattern is an excellent use case for using a carousel widget. As Figure 5 shows, if there are more aspects—like brands or hotel types—than can fit in the 4–5 thumbnails that can appear on a page at once, you can safely hide the less popular aspects on the carousel. In this case, the expectation would be for customers to first narrow down their search to a specific category, then invest more attention to selecting the appropriate secondary aspect. If customers cannot find the secondary aspect they want by scrolling from side to side with the carousel, they can still click the groupâ€s See All » link to view all of the search results for an entire category.

The Two-Dimensional More Like This pattern works particularly well for resolving ambiguous queries and creating category pages on which customers can clearly express search refinements by clicking a single label or image. However, it would be less appropriate for information categories that are somewhat arbitrary and less clearly defined. In the Netflix example shown in Figure 3, is there really that much difference between the categories Anime Action and Anime Sci-Fi? Applying the Two-Dimensional More Like This pattern to the recommendations on the Amazon home page would also be problematic. What single image could you choose to represent the categories New for You or Recommended for You and their subcategory aspects?

One difficulty in designing a Two-Dimensional More Like This page is selecting which specific items to show as representatives of each aspect. I recommend that you select the first thumbnail in the set of search results that would appear if a customer clicked a subcategory plus an aspect. Selecting the first thumbnail in a list of search results as the representative aspect performs particularly well for sorting a search result set by Best Selling or Best Match, because the first item usually provides an excellent representation of the constrained results set. Sometimes customers click a specific item not to select a subcategory and aspect, but simply because they liked the item in its thumbnail for some reason. Placing the item that represents both a subcategory and an aspect first in a set of search results satisfies both the display criteria and the I-want-this-specific-item mental model perfectly.

What if a specific criterion like price is important in a customerâ€s decision making when selecting an item on a Two-Dimensional More Like This page? In this case, as Figure 5 shows, it is perfectly appropriate to use a sorted list format—for example, Priced from $XX.XX, which shows the lowest-priced item in a given set of search results first—even if the set of search results customers see once they click a link is sorted by Bestselling or Most Popular.