Over a million developers have joined DZone.

Designing Search (Part 4): Displaying Results

DZone 's Guide to

Designing Search (Part 4): Displaying Results

· Java Zone ·
Free Resource

In an earlier post we reviewed the various ways in which an information need may be articulated, focusing on its expression via some form of query. In this post we consider ways in which the response can be articulated, focusing on its expression as a set of search results. Together, these two elements lie at the heart of the search experience, defining and shaping much of the information seeking dialogue. We begin therefore by examining the most universal of elements within that response: the search result.

1. Basic principles

Search results play a vital role in the search experience: they communicate the richness and diversity of the overall result set, while at the same time conveying the detail of each individual item. Indeed, it is this dual purpose that creates the primary tension in their design: too detailed and they risk wasting valuable screen space; too succinct and vital information may be omitted.

To illustrate, suppose you’re looking for a new job role, and you browse to the 40 or so open positions listed on UsabilityNews. The results are displayed in concise groups of ten, occupying minimal screen space. But can you tell which particular ones might be worth pursuing? The roles all sounds quite similar (and job titles can be misleading anyway). Closing dates seem largely irrelevant, unless we already have a particular position in mind. The end result is a weak information scent that forces us to continually jump back and forth between the individual items and the list to see the information we need. Some degree of movement like this is inevitable with any design, but when it becomes chronic, it is referred to as ‘pogosticking’.

Weak information scent in the job listings at UsabilityNews

What we need instead is information that allows us to make a more informed judgment regarding the suitability of each position: details like location, remuneration, role description, and so on. A similar search on recruitment agency Reed offers all of these, along with associated tools and controls. Presented like this, the user can easily browse the individual results and verify their suitability without leaving the page.

More detailed job listings at Reed

Of course, the corollary is that each item occupies more screen space, and thus fewer results can be shown above the fold (i.e. in the area that is visible without scrolling). An acute example can be found at electrical retailer Comet, where each individual result extends to over 300 pixels in height (see Figure X). Consequently, in many cases it is not possible to view more than two or three results at any one time. This increases the likelihood that potentially valuable results might be overlooked, particularly if relevance appears to be weaker further down the list. In practice, we need a balance that addresses the user’s characteristics, their information seeking behaviour, and the broader search context.

Highly detailed product listings at Comet

2. The anatomy of a search result

While the above principles may guide us toward the optimal level of detail for the search results, we still need to structure and display them appropriately. In this respect, the three major web search engines are remarkably consistent. By default, each one displays the page title, the URL (in abbreviated form), and an informative summary of the content (known as a “snippet”). Can you tell which is which?

It turns out they are from Google, Bing and Yahoo respectively. (Of course, Yahoo’s results are actually powered by Bing, but that shouldn’t constrain their freedom to apply their own design treatment).

The order of the components is subtly different: Google displays the URL immediately below the title, perhaps reflecting its value to users in making trust and credibility judgments (Wilson, 2011). But one feature they all share is the use of query-oriented summaries, i.e. snippets that show the query terms in context. In addition, these summaries highlight the matching terms (using boldface), which has the effect of drawing the searcher’s attention to key fragments in the text and communicating how closely the query terms appear to one another. This is known to be a strong indicator of relevance (Hearst, 2009).

Of course, one reason these results look similar is that they are all summaries of unstructured documents found on the web. But in a different context, different rules apply. In eCommerce, for example, photos of each product are a vital part of the search results. For news search, publication dates may be essential. And for mobile, almost everything changes. Firstly, it is 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

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.

Search results displayed as thumbnails on Google mobile web

Likewise, if we know what type of page we are looking for, we can take other types of shortcut. 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

3. Search result previews

As we saw earlier, pogosticking occurs when there is insufficient detail for users to make informed judgements about the relevance of individual search results. We can reduce it by adding more information, but at the cost of using more screen space and potentially pushing valuable results out of view. It seems there is no escaping the tension between these opposing forces.

There is, however, an alternative approach. Previews allow us to see the detail of an individual item within the context of the search results page. 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 wood.

Search result previews at Bing

Previews have also been applied to a variety of other contexts, e.g. for viewing user profiles on social networking sites such as Facebook and LinkedIn. And other organisations (such as Snap Technologies) have extended this approach to the web as a whole, offering on demand, interactive previews for any hyperlinked content. In providing a convenient, lightweight method for verifying individual items, previews offer direct support for one of the key search modes discussed in an earlier post.

4. Answers and shortcuts

Search is a conversation in which we articulate information needs through queries, and interpret the responses as matching results. This type of ongoing, iterative dialogue lies at the heart of our information journey. But sometimes our needs can be addressed in a much more direct manner.

Google, for example, allows us to ask direct questions in a variety of forms. When it recognises the presence of certain ‘trigger words’, it responds with weather forecasts, stock quotes, maps, and sports scores. We can even track parcels, convert currencies and ask it to perform all manner of numeric calculations and conversions. In this context, the boundary between search and question answering becomes blurred, with the search box presenting a command-line style of interface to those who can exploit its power and flexibility (Morville, 2010).

Direct answers for focused information needs at Google

Wolfram Alpha extends the concept further still. With graphs, charts, tables and visualizations all within its repertoire, it chooses the right format for our specific information needs. This type of interaction extends of concept of search beyond ‘findability’ and into a new territory of computational knowledge and inference.

Beyond traditional search results at Wolfram Alpha

And 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.

Recommending a search result at Google

Likewise, 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

Similarly, on iPad and iPhone we can use Spotlight to search across all our data. But the results are more than just placeholders for files: they are actionable objects, offering a direct invitation to play content, make phone calls or launch applications. In this respect, actionable results provide a bridge to the broader task context of search, helping us progress from finding information to completing goals.

Spotlight search provides actionable objects as results

5. Summary and best practices

  • Find a balance between richness and diversity: too detailed and screen space is wasted; too succinct and vital information may be omitted
    • Look out for pogosticking and other symptoms of weak information scent
    • Consider your users’ characteristics, their information seeking tasks and the broader context
  • Clearly indicate the current query terms
  • Use query-oriented summaries that show the keywords in context. Highlight matching terms
  • Adopt a consistent approach that clearly indicates the composition of each search result
    • Customise the presentation according to the search context, e.g. short, location-oriented summaries for mobile
  • Use previews to provide on demand access to further detail

6. References

  1. Marti Hearst (2009) Search User Interfaces. Cambridge University Press
  2. Louis Lazaris (2009) Search Results Design: Best Practices and Design Patterns. Smashing Magazine, retrieved 15-May-2012
  3. Peter Morville (2010) Search Patterns. O’Reilly Media
  4. Jared Spool (2005) Galleries: The Hardest Working Page on Your Site. User Interface Engineering, retrieved 13-Jan-2012
  5. Wilson, M. L. (2011) Search User Interface Design. Synthesis Lectures on Information Concepts, Retrieval, and Services (Ed. Marchionini, G.), Morgan & Claypool

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}