Pinterest
Search Results Design: Best Practices and Design Patterns

Search Results Design: Best Practices and Design Patterns

Design Guidelines, Ux Design, Design Patterns, Best Practice

Content can be played directly from the results page at BBC    at major online retailers such as Sainsbury’s or Tesco, it is possible to add items to the shopping basket directly from the search results page. And at the BBC, we can play video and audio clips with a single click.

Content can be played directly from the results page at BBC at major online retailers such as Sainsbury’s or Tesco, it is possible to add items to the shopping basket directly from the search results page. And at the BBC, we can play video and audio clips with a single click.

Recommending a search result at Google    search results aren’t restricted to being passive vessels for communicating information. Quite the contrary: they can become active elements, inviting interaction and direct manipulation. At Google, for example, we can recommend a particular result and share it with colleagues by using the ‘+1’ button.

Displaying search results in a way that rewards users requires a consistent approach, balancing detail and diversity.

Deep links in search results at Yahoo!    if we know what type of page we are looking for, we can take other types of shortcuts. By offering deep links to key pages within   popular sites, the major web search engines invite us to skip home pages and navigate direct to content that would otherwise be buried deep within a site’s structure.

Deep links in search results at Yahoo! if we know what type of page we are looking for, we can take other types of shortcuts. By offering deep links to key pages within popular sites, the major web search engines invite us to skip home pages and navigate direct to content that would otherwise be buried deep within a site’s structure.

Search result previews at Bing     Bing, for example, uses previews to provide further detail in the form of extended snippets, popular links, contact information, and so on. Google provides a snapshot of the page with key passages highlighted and displayed in callouts. By being accessible on hover, they provide on-demand access to further detail without interrupting our flow. With previews, we get to see the trees without leaving the woods.

Search result previews at Bing Bing, for example, uses previews to provide further detail in the form of extended snippets, popular links, contact information, and so on. Google provides a snapshot of the page with key passages highlighted and displayed in callouts. By being accessible on hover, they provide on-demand access to further detail without interrupting our flow. With previews, we get to see the trees without leaving the woods.

Search results displayed as thumbnails on Google mobile web    But search results don’t have to be text at all. If our goal is to re-find a previously known item, it may be quicker for us to view them as a set of thumbnails, flicking through them in sequence. When we know exactly what our target looks like, we can rely on recognition rather than recall to find it.

Displaying search results in a way that rewards users requires a consistent approach, balancing detail and diversity.

Search results as map locations in the mobile context    And for mobile, almost everything changes: it’s important to keep the snippets short, but more importantly we need results that reflect our spatial location. Here, maps become the natural medium for search results, placing each result in its geospatial context.

Search results as map locations in the mobile context And for mobile, almost everything changes: it’s important to keep the snippets short, but more importantly we need results that reflect our spatial location. Here, maps become the natural medium for search results, placing each result in its geospatial context.

Highly detailed product listings at Comet    Comet, where each individual result extends to over 300 pixels in height. Consequently, in many cases it is not possible to view more than two or three results at any one time. In practice, we need a balance that addresses the user’s characteristics, their information seeking behavior, and the broader search context.

Displaying search results in a way that rewards users requires a consistent approach, balancing detail and diversity.

More informative job listings at Reed

Displaying search results in a way that rewards users requires a consistent approach, balancing detail and diversity.

Promotion of related content and products at Food Network    Pre-selecting good matches for each of the small number of items in the “short head” can deliver a substantial return on investment.

Promotion of related content and products at Food Network Pre-selecting good matches for each of the small number of items in the “short head” can deliver a substantial return on investment.

Extended support for query reformulation on the Carzone zero results page    Classified ad site Carzone, by contrast, not only provides clear messaging and useful advice, but also the means to directly address the issue by removing the non-matching search criteria:

Extended support for query reformulation on the Carzone zero results page Classified ad site Carzone, by contrast, not only provides clear messaging and useful advice, but also the means to directly address the issue by removing the non-matching search criteria:

Limited support for query reformulation on the Apple store zero results page    Apple store, which provides basic advice but misses the opportunity to provide concrete support:

Limited support for query reformulation on the Apple store zero results page Apple store, which provides basic advice but misses the opportunity to provide concrete support:

Varied content types displayed in individual panels with custom controls at the iTunes store    Apple’s iTunes store takes the structured approach a step further, displaying a variety of content types on the SERP as actionable objects in individual panels with custom controls:

The results page is a crucial piece of the search experience, and presents an opportunity to meet users' information needs and engage a dialogue that guides them.

Search results are grouped by medium at Reuters    business information provider Reuters groups search results according to medium (news, blogs, video, or pictures) and displays them in separate panels. News items take precedence as the default content shown in the main panel, but this can be replaced by another content type by selecting the appropriate tab.

The results page is a crucial piece of the search experience, and presents an opportunity to meet users' information needs and engage a dialogue that guides them.

Blended search results and media types at Google    A query for “jets” on Google, for example, returns sports scores, news items, web pages and more. However, unlike the previous example, these are displayed in an undifferentiated vertical list:

The results page is a crucial piece of the search experience, and presents an opportunity to meet users' information needs and engage a dialogue that guides them.

Parametric view at RS Components    Although list and gallery view are popular configurations, they are by no means the only options. Complex products such as electrical components may be more meaningfully viewed using a display that exposes the full detail of their specification, allowing rapid scanning and comparison of their individual attributes. This type of view supports key search modes such as analyzing and comparing (Russell-Rose & Makri, 2012).

Designing Search: Results Pages