reading-notes

张俊的读书笔记

View project on GitHub

cover

作者: Tony Russell-Rose / Tyler Tate
出版社: Morgan Kaufmann
副标题: The Information Architecture of Discovery
出版年: 2013-1-2
页数: 320
定价: USD 39.95
装帧: Paperback
ISBN: 9780123969811

1.A Framework for Search and Discovery

The most fundamental step is to recognize that the opinions are themselves based on a set of assumptions—in particular, assumptions about who is doing the searching, what they are trying to achieve and under what circumstances, and how they are going about it. Each of these assumptions corresponds to a separate dimension by which we can define the search experience.

The Dimensions of Search User Experience

The first of these dimensions is the type of user, in particular his or her level of knowledge and expertise. For example, consider the users of an online retail store: are they knowledgeable enthusiasts or novice shoppers? Likewise, for an electronic component supplier: are the users expert engineers or purchasing agents with limited domain knowledge?

Once we understand the user, we can move on to the second dimension: his or her goal. This goal can vary from simple fact checking to more complex explorations and analyses. For example, are users searching for a specific item such as the latest Harry Potter book? Or are they looking to choose from a broader range of possibilities, such as finding shoes to match a business suit? Or are they unsure of what they are looking for in the first place, knowing only that they would like to find a suitable gift?

Knowing the users and their goals, we can now consider the third dimension: the context. Context includes a range of influences, from the physical to the intangible. For example, is the user at the workplace, where the task and the organizational setting dominate? Or is the user at home, where social context might become more important? Perhaps he or she is using a mobile device while travelling, during which physical context shapes the search experience.

Finally, based on our understanding of the users, their task and the wider context, we can consider the fourth dimension: their search mode. Search isn’t just about finding things—on the contrary, most finding tasks are but a small part of a much larger overall task. Consequently, our focus must be on understanding the complete task life cycle and helping users complete their overall information goals. This includes activities such as comparing, exploring, evaluating, analyzing, and much more.

1.The User

Novices and Experts

Expertise plays a significant role in how people seek information. Understanding the differences between novices and experts will enable us to design better search experiences for everyone. But first, it’s worth distinguishing between two dimensions of expertise.

Domain expertise versus technical expertise

Domain expertise defines one’s familiarity with a given subject matter; a professional photographer, for instance, has substantial domain expertise in the field of photography. Technical expertise, on the other hand, indicates one’s proficiency at using computers, the Internet, search engines, and the like.

In combination, the domain and technical dimensions of expertise describe four types of users (Figure 1.1):

  • Double experts
  • Domain expert/technical novices
  • Domain novice/technical experts
  • Double novices

Figure 1.1 Two dimensions of expertise: domain and technical.

Double novices orienteer

Double novices share three main characteristics (Hölscher and Strube, 2000):

  1. Frequent query reformulation. Novices perform more queries than experts but look at fewer pages. Although they frequently reformulate their query, double novices often make only small, inconsequential changes to their search phrase.
  2. Going back. When novices do click on a search result, they are much more likely than experts to then navigate back to the search page. With a fear of venturing too far from safety, double novices practice a hub-and-spoke pattern of information seeking with the search page firmly at the center.
  3. More time spent. The many queries and frequent backward-oriented behavior of double novices causes them to spend more time on a given search task than would an expert.

Because novices frequently refine their original query but often don’t make radical enough changes, showing a list of related searches (as demonstrated by Foodily in Figure 1.2) can help users make more successful query reformulations. In addition, breadcrumbs accomplish the dual purpose of communicating the user’s current location, while also providing a path to go back (Figure 1.3).

Figure 1.2 Foodily’s iPhone application places related searches at the bottom of the page, after the search results.

Figure 1.3 The breadcrumbs on Zappos.com indicate which filters the user has applied and provide the means to remove them.

Double experts teleport

Double experts are characterized by three tendencies (Hölscher and Strube, 2000):

  1. More pages examined. Double experts click on more search results than do novices.
  2. Going deeper. Double novices tend to retreat from the pages they examine; double experts rarely go back. Instead, experts follow links from one page to the next, progressing deeper into the information space with each step.
  3. Less time spent. Double experts are time-efficient in their search tasks. Not only do they reformulate their queries less often, but they can also determine the relevancy of a given page more rapidly than novices.

Expert-friendly search user interfaces should support advanced syntax and filtering to help users quickly narrow their search. Although the Boolean operators AND, OR, and NOT are certainly worth supporting, Wolfram Alpha (shown in Figure 1.4) goes a step further and allows users to input domain-specific terminology and retrieve computed answers. Similarly, a faceted search interface for filtering by format, selecting ranges, or excluding certain categories—such as Getty’s Moodstream, shown in Figure 1.5—can help users pinpoint content that’s relevant to their information needs.

Figure 1.4 Wolfram Alpha is designed to return computed answers using advanced syntax and domain-specific terminology.

Figure 1.5 Getty Image’s Moodstream lets users search for stock photos using slider controls.

The in-betweeners

Domain expert/technical novices, for instance, use their knowledge to enter effective queries and quickly evaluate pages, but they lack the technical confidence to explore unknown territory (Jenkins et al., 2003). Their traits include:

  1. Advanced terminology. Domain experts are able to rely on their extensive vocabulary to construct more topical queries than are domain novices.
  2. Effective evaluation. Similarly, high domain knowledge makes the process of evaluating a page more meaningful and timely.
  3. Going back. A lack of technical expertise, however, contributes to a sense of disorientation, preventing users from venturing too far away from the search page.

Domain novice/technical experts, on the other hand, brim with confidence, but have trouble discerning relevant content (Hölscher and Strube, 2000). They are characterized by:

  1. Advanced formatting. Technical experts are much more likely to use query formatting techniques—such as double quotes and Boolean operators—than are technical novices.
  2. Confident exploration. Despite their lack of domain expertise, technical experts exude confidence and never worry about becoming disoriented.
  3. Difficulty with evaluation. Technical expertise doesn’t compensate for a lack of domain knowledge when it comes to evaluating the relevance of a page.

Serial and holistic thinkers

Psychologists call these cognitive styles—the stable attitudes, preferences, and habits that determine how an individual processes and represents information. We’ll begin by looking at the serial-holistic style of information processing.

The rod-and-frame test

Here it is: draw a vertical line inside the rectangle.

Figure 1.6 Complete a simplified version of the rod-and-frame test by drawing a vertical line in the rectangle.

Figure 1.7 Serialists complete the rod-and-frame test by drawing the line aligned with the edges of the rectangle (left). Holists, on the other hand, draw the line along the global north–south axis (right).

Serialists: brick-by-brick craftsmen

Like skilled craftsmen, serialists are highly attuned to the details. When learning, serialists tend to drill down to narrow subtopics and follow a logical progression from one to the next. Despite being skilled at analyzing the component parts (Figure 1.8), serialists have greater difficulty combining the parts into a whole (Kim, 2001).

Figure 1.8 Serialists concentrate on the individual parts rather than the whole.

Holists: big-picture visionaries

Holists are visionaries with a bird’s-eye view (Figure 1.9). Operating with an intrinsic motivation that is independent of their surroundings, holists flourish in flexible environments where they are free to pursue their own interests at the pace of their choice. When approaching a topic, they immediately set out to comprehend the big picture, giving holists a more balanced view and helping them put situations into context. However, holists are also prone to oversimplification, sometimes glossing over important details (Ford et al., 2002).

Figure 1.9 Holists focus on the cohesive whole rather than on component parts.

The performance gap

Holists are more efficient at satisfying their information needs. Serialists, by comparison, find it more difficult to discern the relevance of information and consequently spend more time searching for the same answers.

Although there is a wide gap in performance between serialists and holists who are technical novices, the gap all but disappears between the two cognitive styles when technical expertise is high. In other words, user interfaces can become more effective by helping serialist novices—or all novices, for that matter—increase their level of technical expertise.

Designing for learnability

Learnability—the ease with which users gain awareness of available software functions and comprehend how to act on them—can be accomplished using contextual instructions, immersive overlays, and subtle visual design.

A simple contextual instruction, for example, can be achieved by adding descriptive placeholder text to the search box (Figure 1.10). The text can inform users about the type of query that the system expects—whether it’s the name of a restaurant, an area of a city, or a postal code.

Figure 1.10 Toptable’s iPhone application combines the use of placeholder text and a three-option segmented control to clearly indicate the type of input that the application expects from the user.

Contextual popovers, like the ones used by Foodily in Figure 1.11, can augment a well-designed interface and reduce the guesswork required by the user. Immersive, full-screen overlays —such as the welcome screen to the TapTu iPad app shown in Figure 1.12—can serve a similar purpose. Caution is required in both situations, however; providing tips for new users must be balanced with concern for more experienced users (both Foodily and TapTu, for instance, show the “getting started” advice only on a user’s first visit).

Figure 1.11 Foodily, a recipe search site, uses small popovers to introduce first-time users to a few of the features unique to Foodily’s website.

Figure 1.12 TapTu, a news-reading application, uses an overlay to provide a tutorial for new users.

A more nuanced method for enhancing learnability is to use subtle animation and tactile textures to suggest gestures, hint at off-screen content, and indicate which elements on the screen are interactive. When a user first views a list of search results using Airbnb’s iPhone application (shown in Figure 1.13), for instance, an animation reveals a star behind each result before quickly disappearing, hinting that a swipe from left to right will “favorite” that particular item. Such tactics are especially useful on mobile devices where screen space is scarce.

Figure 1.13 On the first use, Airbnb’s iPhone application reveals a star behind each search result before quickly sliding away, training users to use a left-to-right gesture to “favorite” a result.

Verbal and Visual Learners

Figure 1.14 Two dimensions of cognitive style: serial–holistic and verbal–visual.

From five senses to three modalities

We experience the world through five senses, distilled by psychologists into three “sensory modalities” relevant to learning: verbal, visual, and kinesthetic (Denig, 2004). Though everyone learns through all three modes, we each favor one over the others, resulting in three different styles of learning:

  1. Verbal learners absorb written and spoken information more readily than visual concepts. Because most learning is either text-based (reading a book, searching online) or auditory (a classroom lecture or personal conversation), verbal learners have ready access to content in their preferred medium.
  2. Visual learners, on the other hand, digest information from charts, diagrams, timelines, maps, and other concrete images more easily than from the written or spoken word. Visual learners have less access to appropriate content than their verbal counterparts.
  3. Kinesthetic learners enjoy hands-on activities involving movement, from dancing to woodwork. Although kinesthetic learning is minimally involved in desktop computing, it plays a much more significant role in gestural and touch-based interfaces.

Dual coding theory

In the 1970s, psychologist Allan Paivio made an important observation: people learn best when information is presented in two modalities at the same time, which is now known as the Dual-Coding Theory.

Designing with overviews and previews

Although dual coding theory has significant implications for website content, it’s also important for the search experience. In particular, visual overviews and previews can augment text-based lists to both describe the result set as a whole, as well as the individual result itself (Greene et al., 2000).

Mapumental, for example, distills transit times, house prices, and “scenicness” ratings into a composite map overlay that helps its users choose where to live. Crunching these numbers oneself would be an enormous task, yet the map in Figure 1.15 instantly shows which areas of London are no farther than a 45-minute commute from Waterloo Station, have an average house price of less than £400,000, and score at least 2 out of 10 in scenicness.

Figure 1.15 Mapumental visualizes a synthesis of transit times, house prices, and “scenicness” ratings to help users choose where to live.

Google Finance’s stock screener, for example (shown in Figure 1.16), efficiently combines dual sliders with a histogram to provide contextual feedback for users searching for companies by financial criteria.

Figure 1.16 Histograms, such as these from Google Finance’s stock screener, instantly convey the distribution of results.

While overviews provide a visual depiction of the result set as a whole, previews help the user examine an individual result in greater detail—augmenting verbal information with a visual component to help the user make better relevance judgments. In some cases—such as ecommerce—visual thumbnails can even be more important than the text (Figure 1.17).

Figure 1.17 For many ecommerce websites, such as NorthFace.com, visual thumbnails are more important than textual descriptions.

Larger previews, rather than help the user quickly skim the results, gives the user a chance to verify the relevance of a result before committing to viewing the full item. Apple’s Spotlight search, for example (shown in Figure 1.18), previews a document as the user hovers over its title, reducing the inconvenience of opening a new document only to discover that it’s irrelevant.

Figure 1.18 Apple’s Spotlight search shows document previews as the user interacts with the search results.

Summary

The domain and technical dimensions of expertise, combined with the serial–holistic and verbal–visual dimensions of cognitive style—though certainly not an exhaustive list of individual differences—do unequivocally demonstrate the true multiplicity of users, even at a purely psychological level. As designers, this rich cognitive diversity reminds us once again that we must go out of our way to identify our users, understand them, and design to meet their needs.

2.Information Seeking

Mankind is an endless pursuer of knowledge.

We bridge this knowledge gap by asking those around us for advice, turning to books and encyclopedias, and, increasingly, searching the Internet. This journey between need and fulfillment is called information seeking.

Models of Information Seeking

The classic model

The classic model is one of the first models of information retrieval, widely used in information science research for over 30 years (Robertson, 1977).

Figure 2.1 The classic model of information retrieval.

The standard model

In contrast with the classic model, the standard model places greater emphasis on the user. It portrays information seeking as a type of problem solving (Marchionini, 1995) involving a cycle of four activities (Sutcliffe & Ennis, 1998):

  1. Identifying the problem
  2. Articulating the information need
  3. Formulating the query
  4. Evaluating the results

Figure 2.2 The standard model of the search process.

The cognitive model

Like the standard model, Don Norman’s cognitive model of task performance (shown in Figure 2.3) also views search as a form of problem solving driven by an explicit user goal (Norman, 1988). But in this case, users apply a mental model—an internal representation of the problem situation and its context—to develop a plan of action to achieve that goal. These actions lead to changes in the external world that are evaluated to determine whether the goal has been achieved.

Figure 2.3 Don Norman’s cognitive model of task performance.

A key insight of Norman’s model over the previous two is that it recognizes the importance of domain knowledge (as discussed in Chapter 1): the greater the users’ knowledge, the more likely they are to articulate effective queries and accurately determine the relevance of results.

The dynamic model

Both the standard and cognitive models share an underlying assumption that the user’s information need remains unchanged throughout a given session. They view the process of information seeking as one of iteratively refining a given query until the ideal set of results is found. However, numerous studies have found that users’ information needs evolve as they interact with information and that they formulate new goals as they acquire domain knowledge. Far from being static, search is an interactive, iterative process in which the answer can change the question. As Peter Morville puts it, “what we find changes what we seek” (Morville, 2009).

Consequently, we need a model that accounts for changes in users’ information needs as they learn and respond to the information they encounter. The dynamic model proposed by Marcia Bates (1989) accomplishes just that (Figure 2.4).

Figure 2.4 Marcia Bates’ dynamic model.

The information journey model

Ann Blandford and Simon Attfield (2010) have further explored the unfolding journey of information seeking. Like the dynamic model, their information journey model (shown in Figure 2.5) has been derived from empirical studies of user behavior. The main activities in their framework are:

  1. Recognizing an information need
  2. Acquiring information
  3. Interpreting and validating the information
  4. Using the information

Figure 2.5 The information journey model.

These information encounters are what we commonly label serendipity. The information journey model, with its multiple entry points, acknowledges serendipity as part of the information seeking experience.

Information Foraging

Information foraging, an instinct closely related to that found in animals hunting for food, interacts with sensemaking, the cognitive process for deriving meaning from new information. Together, information foraging and sensemaking form a feedback loop (Pirolli & Card, 2005) that underpins the information seeking process.

A biological foundation

Biologists in the 1960s observed that animals often eat a particular type of food in one environment but ignore the same food in other places. Ecologists Robert MacArthur and Eric Pianka set out to discover how animals decide what to eat. Their research, and their accompanying optimal foraging theory (MacArthur & Pianka, 1966), provides a foundation for understanding our own behavior when searching for information.

According to optimal foraging theory, animals live in environments consisting of many “patches,” each with a unique blend of potential food sources.

This principle of diminishing returns is known in ecology as the marginal value theorem (Charnov, 1976). The theory asserts that animals perform a cost/benefit analysis on staying in the current patch versus traveling to a new one—considering both current and potential food supplies as well as the transit time between the two patches (Figure 2.6).

Figure 2.6 Charnov’s marginal value theorem states that a forager should leave a given patch when the rate of gain within that patch drops below the rate of gain that could be achieved by traveling to a new patch.

Man the informavore

George Miller portrayed our species as informavores: creatures hungry for information (Miller, 1983). But just like the bear must be selective in its diet (digging all day for a few measly ants would hardly be worthwhile), so must informavores carefully navigate the glut of information in our modern environment. Herbert Simon spoke of this perilous balance in 1971:

What information consumes is rather obvious: it consumes the attention of its recipients. Hence a wealth of information creates a poverty of attention, and a need to allocate that attention efficiently among the over-abundance of information sources that might consume it. (p. 40)

Although information is what we seek, our limited supply of attention forces us to make a tradeoff between comprehensiveness and timeliness. Simon coined the term satisficing—a combination of the words “satisfy” and “suffice”—to describe this pragmatic decision-making strategy that pervades human behavior (Simon, 1956).

Information foraging theory

Peter Pirolli and Stuart Card, researchers at the Palo Alto Research Center (PARC), began applying the principles of optimal foraging theory to information seeking in the early 1990s, establishing a new framework called information foraging theory (Pirolli & Card, 1999). Pirolli and Card drew a connection between users moving from one website to the next and animals traveling from patch to patch. They observed that users, in an effort to satisfice, heavily rely on certain cues known as information scent to guide them toward their destination.

As users traverse the Web, they encounter information scent when “trigger words”—terms they perceive as meaningful to their task—are used in the text of a hyperlink, as words in a heading, or in a search result’s description. The more trigger words that are present, the stronger the information scent (Spool et al., 2004). When information scent grows stronger from page to page, users are confident that they’re headed in the right direction. But when it’s weak, they may be uncertain about what to do or even give up.

In addition to information scent, Pirolli and Card’s research also helps explain information snacking (Nielsen, 2003). According to the marginal value theorem, the amount of time a user spends on a given website is proportional to the travel time between sites. As between-patch time decreases—thanks to Google and fast Internet connections—users spend less time on any one site. The result is that information seeking has become less of a sit-down banquet and more of an opportunistic buffet.

Designing with information scent

Descriptive titles

Before clicking on a search result—or even reading its two-line description—the title must first be deemed relevant. Obvious though it is, the presentation of clear, descriptive titles is the surest method for providing strong information scent when displaying search results.

Jared Spool found that reasonably long titles tend to work better than shorter ones, with links of 7 to 12 words being most likely to lead to a successful outcome (Figure 2.7).

Figure 2.7 Jared Spool found that 7- to 12-word links yield the greatest likelihood of a user finding what he or she is looking for.

Hit highlighting

When the user performs a query, he or she inputs the most important terms to his or her search—that is, the query’s trigger words. Hit highlighting (Figure 2.8) is the technique of emphasizing the words included in the query wherever they appear on the search results page. Using a bold font weight helps to draw the user’s eye to the trigger words, increasing information scent.

Figure 2.8 Bing uses a bold font weight to highlight the user’s query terms whenever they appear in the search result list, for both exact phrase matches (e.g., “artificial intelligence”) and partial matches (e.g., “intelligence”).

Clear labeling

When searching through online content, for instance, the user might be looking for business news and wish to skip over sport and entertainment articles (Figure 2.9). Clearly identifying which category a given result belongs to can help users ignore unwanted documents and focus on their genre of choice (Drori, 2002).

Figure 2.9 The BBC labels each news story with a category, such as “Europe” or “Business.”

Sensemaking

Sensemaking—a concept developed in the information science field by Brenda Dervin (1983) and in human–computer interaction by PARC researchers Daniel Russell and colleagues—describes the process through which people assimilate new knowledge into their existing understanding (Russell et al., 1993). Just as the study of information foraging behavior has led to techniques for designing more fluid search experiences, so can an appreciation of how people make sense of information help us design tools that facilitate comprehension, analysis, and insight.

Human memory

Most relevant for our purpose, however, is long-term semantic memory, which is responsible for keeping track of our ever-growing conceptual knowledge (Tulving, 1985). Semantic memory organizes knowledge into a schema of interconnected nodes that our minds can manipulate and explore at will (Miller, 1987), a simplistic visualization of which can be represented by mind map diagrams such as the one in Figure 2.10.

Figure 2.10 This mind map created on MindMeister.com visualizes one person’s understanding of western philosophy.

This internal semantic schema is constantly in flux. New information may require our semantic memory to add new nodes to the existing schema, reorganize the links between nodes, or discard concepts that are no longer pertinent. This is the realm of sensemaking: growing, rearranging, and pruning the semantic tree of knowledge.

Four stages of the sensemaking process

  1. Search
  2. Extract
  3. Encode
  4. Analyze

From internal to external schemas

Thus far, we’ve treated the semantic schema as the internal model of an individual’s knowledge. However, the finite capacity of the human mind ensures that one’s own understanding is only a subset of reality. In the same way that a map is a compact representation of a much larger landscape, so our internal semantic schema is a simplified sketch of a much broader body of knowledge.

Sophisticated information tasks demand that one’s internal semantic model be disseminated into an external schema. External schemas can not only store a greater amount of information than an internal schema, but can also serve as a conduit for collaboration.

Designing for sensemaking

The shoebox

The first step in many investigations is to gather potentially relevant documents into a single collection—what could be coined the shoebox (a term that recollects putting something away for later). At this stage, the analyst isn’t concerned with a close examination of each document; the top priority is to populate the shoebox as quickly as possible with anything that might be relevant to the investigation. The analyst heavily relies on information scent to make rapid judgments about which documents should and should not be included. To support this behavior, the user interface should enable the analyst to add documents to the shoebox as rapidly as possible. For instance a text link, checkbox, or icon (Figure 2.11) could be provided for quickly saving a given search result.

Figure 2.11 Airbnb.com places a star icon next to each search result. Clicking on the star saves that result to the user’s “favorites list.”

The evidence file

Once the shoebox has been populated with potentially relevant documents, the analyst often then begins a more thorough examination of the curated collection. This time around, the analyst spends significantly more time scrutinizing the text and images when looking for possible leads. When the analyst spots a striking sentence or meaningful image, he or she extracts that snippet and saves it to a more cogent collection of relevant information: the evidence file.

A simple example of an evidence file is Mendeley, a tool that helps academics manage their research. Mendeley provides a special bookmark that users can add to their web browsers (Figure 2.12). When clicked, a popup window appears and prompts the user to save a title, keywords, tags, and meaningful notes extracted from the current page.

Figure 2.12 Mendeley’s document import tool.

The schema

The external schema provides an even bigger picture of how the extracted evidence fits together. It may be constructed of the people, places, and events surrounding a crime or the causes and symptoms of a disease (Figure 2.13). Also known as an ontology—a specification of a shared conceptualization—the external schema enables analysts to continually explore, gain insights from, and test hypotheses against the model as it is constructed.

Figure 2.13 The “conditions and diseases” node of a much larger external semantic schema on the NHS Evidence website.

Stages of Information Seeking

The six-stage funnel

Carol Kuhlthau, a professor at Rutgers University, performed a series of studies during the 1980s to better understand how people seek information to satisfy long-term goals (Kuhlthau, 1991). Kuhlthau identified distinct phases in what she called the information search process but is best described as stages of information seeking (Figure 2.14). She observed both the tasks and emotions unique to each of six phases:

  1. Initiation
  2. Selection
  3. Exploration
  4. Formulation
  5. Collection
  6. Action

Figure 2.14 Kuhlthau’s six stages of information seeking can be represented as a funnel that begins open-ended and ends with a resolution.

Designing for the journey

Open-ended exploration

Whether the task is looking for a place to live, finding the perfect car, or planning a vacation, it’s unlikely that the user knows exactly which house is best, what car is ideal, or precisely where to go on holiday at the outset. Yet these are often the first questions that real estate, automotive, and travel sites ask us (Figure 2.15).

Figure 2.15 Autotrader.co.uk asks the user to specify an exact make and model of car up front.

In order to engage users earlier in their journey, we must help them explore (Marchionini, 2006). Flexible filtering controls can facilitate browsing without the need for an initial query, helping the user survey the information landscape and potentially make serendipitous discoveries along the way. Although automotive sites AutoTrader and Motors.co.uk both allow users to choose specific makes and models, the latter (Figure 2.16) also caters to those who haven’t yet formulated an exact specification, allowing them to filter by body style, color, number of doors, number of seats, and many other factors.

Figure 2.16 Motors.co.uk provides flexible filtering options, making it easy for users to look for cars even before deciding on a particular make and model.

Information management

Equipping users to bookmark, categorize, and annotate findings can greatly streamline the long-term information seeking process.

Bookmarking can help users refind items of interest at a later date. What’s more, grouping bookmarks into meaningful sets—like placing recipes into “meal plans” on Foodily (Figure 2.17)—can help users organize large collections of information. Ratings and annotations—such as the personal notes and one- to five-star rankings that can be added to saved properties on Globrix (Figure 2.18)—can further extend the user’s memory by making it easier to compare and differentiate saved items.

Figure 2.17 Foodily, a recipe search engine, allows users to save their favorite recipes and organize them into meal plans.

Figure 2.18 Property search site Globrix allows users to assign a rating and write notes on each property that they’ve bookmarked.

Monitoring

Applications can facilitate monitoring in two ways: on demand or automatically. Enabling the user to save a search query along with any applied filters provides a means for returning to that query on demand at a later date. Often, however, users may prefer to be automatically notified by email when a new match to their criteria appears, reducing the need to continually check back (eBay, pictured in Figure 2.19, provides both).

Figure 2.19 eBay allows users to save searches and, by checking a box, to be notified by email when new items are added.

Summary

Information seeking is, as we described it at the beginning of the chapter, the journey between the surfacing of an information need and its fulfillment. But it is also an iterative, dynamic activity in which what we find changes what we seek; it is a long-term process spread across distinct stages, each with unique tasks and corresponding emotions. Information foraging keeps the journey moving in the right direction; sensemaking helps us understand what we find along the way.

3.Context

A Framework for Context

Context can also be defined in terms of its constituent parts. Myrhaug and Goker (2003), for instance, propose a framework of five key components:

  • Task. Any goals, tasks, actions or activities associated with what the user is doing.
  • Spatiotemporal. Attributes relating to the current time, location, direction, and so on.
  • Personal. The user’s physiological context, mental state, preferences, and so on.
  • Social. The user’s role, status, and relationships with other individuals.
  • Environmental. Factors including temperature, light, humidity, and, on a slightly different note, the information resources accessed by the user.

Frameworks such as this help us understand the role of context in search and form the basis for a principled approach to design. As Lieberman and Selker (2000) put it:

A considerable portion of what we call…good design in human computer interaction actually amounts to being sensitive to the context in which the artifacts are used. Doing the “right thing” entails that it be right given the user’s current context. (p. 617)

Four layers of context

Figure 3.1 presents an example of this influence based on the work of Jarvelin and Ingwersen (2004). This model represents the task context as a set of layers that start at the micro level (information retrieval) and extend outward to the macro level (culture).

Figure 3.1 A context-based model of search.

The information retrieval layer

At the most granular level of the model is information retrieval. This layer is typified by simple, focused tasks such as finding a specific document related to a keyword query.

These tasks are often referred to as known item searches. They may involve a number of iterations but are usually confined to a single session.

The success of tasks at this level is commonly evaluated using system-oriented metrics such as precision and recall.

The information seeking layer

At the next level is information seeking. This layer is associated with broader, more complex tasks that attempt to satisfy an information need or problem (Marchionini, 1995).

In this context, users need to exercise judgment regarding which strategies to adopt, such as where, how, and when to look for information (Wilson et al., 2010).

The work task layer

The information need that precipitates information seeking is itself motivated by a further level: the work task. This layer is characterized by higher-level tasks that are created when the user recognizes an information need based on either an organizational need or a personal motive (Marchionini, 1995).

Work tasks situated in an organizational setting are likely to reflect local resources, constraints, and working practices (Wilson et al., 2010). This list can include which resources are available to satisfy a given information need, such as reference materials, libraries, human experts, and others. Evaluation at this level focuses on assessing performance of the overall task.

The cultural layer

This level influences not only the overall task requirements but also the collective importance attached to meeting them.

Designing across layers

Unfortunately, tasks at this level are often poorly supported by online retailers, and a query for “home entertainment” returns an opaque list of product categories that relies on the user understanding the terminology and knowing which category to select (Figure 3.2).

Figure 3.2 Limited support for the work task level at Comet.

But behind the tab labeled “Videos and Advice” lies a resource (pluggedin.co.uk) that is much more appropriate for this level of task. Instead of product categories, a query for “home entertainment” here returns content much better suited to the immediate goal (Figure 3.3). This content includes tutorials in the form of buyer’s guides and how-to guides alongside product reviews and user-generated content from specialist forums. In contrast to the product category listing seen previously, this material provides far greater support for activities associated with the work task level, such as exploration and learning. In addition, it supports discovery of latent needs through the provision of aspirational articles and expert reviews.

Figure 3.3 Support for the work task level at pluggedin.co.uk.

Amazon, for example, supports iterative information seeking via a personalized history panel that includes recent searches and recently viewed items (Figure 3.4). This information is augmented by a facility for users to create, organize, and share their own lists.

Figure 3.4 Support for the information seeking level at Amazon.

As the user gets a clearer idea of his or her needs and identifies suitable products, he or she may wish to verify the price and quality of these particular items on independent sites. In this context, the focus shifts from information seeking to a set of specific information retrieval subtasks. This is the level that traditionally has been best supported by online retailers. One notable example of design support for information retrieval can be found at Samsung.com (Figure 3.5), which provides a particularly immersive style of instant results and autocomplete.

Figure 3.5 Support for the information retrieval level at Samsung.com.

Physical Context

Here and now

Mobile user needs are driven by the spatiotemporal context: they seek results that are not just relevant to their immediate information need (i.e., topically relevant) but also timely and relevant to their physical location (Goker et al., 2004). These influences, coupled with an increased emphasis on precision over recall, suggest an approach in which these factors are combined to deliver the most contextually relevant results (Figure 3.6).

Figure 3.6 Topical, spatial, and temporal filters can be combined to increase the relevance of search results.

Spatial context

Spatial context can be modeled in a number of ways. One of the simplest approaches is to equate relevance with physical distance; that is, the closer the spatial footprint of a given item, the more relevant it is (Mountain and MacFarlane, 2007). This approach is offered by many directory services such as Yelp (Figure 3.7).

Figure 3.7 Physical distance as a measure of relevance.

Alternatively, spatial relevance could be based on physical accessibility, that is, the amount of time it takes to reach a particular location.

Moreover, spatial context of mobile users is rarely static; often the user is in transit during the interaction itself. In this case, it may be more appropriate to consider the user’s current trajectory and determine relevance based on the user’s predicted location at any point in time.

Temporal filters

Temporal context can be also modeled in a number of ways. One of the most intuitive approaches is to equate relevance with “freshness”; This approach could be combined with the spatial footprint to provide a feed of breaking news specific to the user’s current locality (Figure 3.8).

Figure 3.8 The Associated Press combines temporal relevance with spatial relevance.

Some types of information have a predictable schedule associated with them, such as the timetables for public transport or the opening hours for shops and services. There is little value in finding restaurants that are currently closed or trains that are no longer running. In order to utilize this type of context, it is necessary to filter results according to the time when the user wishes to travel or partake of the particular service.

Push versus pull

Information doesn’t always have to be pulled by users in this way. Given knowledge of their preferences, it is possible to push information to users whenever it becomes relevant to their physical context. For example, Foursquare, a location-based social network for mobile users, provides real-time push notifications when friends “check in” at various locations (Figure 3.9).

Figure 3.9 Foursquare provides push notification of location-based updates.

Location-based advertising is the ultimate example: from a marketing perspective, it offers almost unlimited potential for presenting contextually relevant promotions to consumers based on their current location. However, this type of service will be tolerated only if the relevance and value of the information outweighs the cost of the intrusion and the associated lack of privacy (Figure 3.10).

Figure 3.10 Location-based promotions employed by Groupon.

The Information Landscape

Content frameworks

Cool and Belkin (2002) suggest an approach in which content is defined by three dimensions:

  • Level: information, meta-information
  • Medium: image, written text, speech, and so on
  • Quantity: one object, set of objects, database of objects

Unstructured information

At the simplest level, this experience means making the unstructured content searchable alongside the product records they support and presenting the results in a coordinated manner. By selecting the appropriate tab, the user can pivot to a “Reviews View” that shows those same products displayed in list view with their associated customer reviews and ratings (Figure 3.11).

Figure 3.11 Moosejaw allows browsing of both product results and reviews.

A search for “fridge freezers” on electronics retailer Comet, for instance, returns a set of 273 products with 79 associated reviews. But this time, the user can filter the product results using the review metadata. For example, he or she can choose to see just those products that received five-star reviews from 25- to 34-year-old males in a “small family” (Figure 3.12).

Figure 3.12 Comet allows users to navigate products by review rating and reviewer profile.

Unstructured content can lend itself to a more visual treatment, ranging from simple keyword tag clouds to more sophisticated charts and graphs. Newssift (now closed) extracted named entities such as people, places, and organizations (shown in the middle three columns in Figure 3.13) and used various text analysis techniques to measure sentiment of the content, which it rendered using the pie chart on the left.

Figure 3.13 Newssift used natural language processing to identify named entities and sentiment.

Another way to improve the experience of searching unstructured content is to organize the results into thematic clusters. For example, the query “genesis” on the Metasearch engine Yippy returns a number of clusters based around themes such as religion, music, cars, and so on (shown in the left-hand panel of Figure 3.14).

Figure 3.14 Concept clusters for the query “genesis” on Yippy.

Aggregate information

In business intelligence and other analytics applications, for example, the goal is not so much to find individual records but to identify patterns of distribution across the collection as a whole.

In these and other analytic applications, the focus of the search experience shifts from finding and evaluating individual results to standing back and gaining a more holistic understanding.

Our visual system is hard-wired to perceive certain visual attributes without any conscious effort. These preattentive attributes include shape and color.

We can use this knowledge to our advantage in designing complex search applications, particularly those that involve the display of quantitative information (such as the Newssift example mentioned earlier). If we want to communicate certain patterns visually, or make them stand out from the background, we should use preattentive attributes. Figure 3.17 shows a more comprehensive list of such attributes that can be used in this manner (Few, 2004).

Figure 3.17 Preattentive attributes of visual perception.

However, not all attributes are created equal: some are more suited to the display of quantitative information than others (Cleveland and McGill, 1984). The relative strengths of the various preattentive attributes are indicated in Figure 3.18.

Figure 3.18 The accuracy of quantitative perception for various preattentive attributes.

Summary

Search is a conversation: a dialogue between user and system that can be every bit as rich as human conversation. And like human dialogue, search works best when the exchange is based on a shared understanding of the context.

A key element of that is the task context: information retrieval, information seeking, work task, and culture. Each of these layers provides a unique lens through which to view the search process. Conversely, for mobile search, the physical context is the primary influence: users want information that is not just on topic but also timely and relevant to their location. We’ve also reviewed the environmental context thru the lens of the information landscape, exploring the challenges involved in dealing with unstructured content and aggregated data.

Search engines may be capable of many things, but they cannot read minds. They cannot determine intent from a query alone. Instead, we must understand the context, for that is the basis of the information seeking dialogue and the foundation of the search experience.

4.Modes of Search and Discovery

Figure 4.1 Search involves the activities of information retrieval, analysis, and sensemaking.

Search Modes and Frameworks

One of the key insights of Marcia Bates’ dynamic model (introduced in Chapter 2) is that information seeking is essentially a nonlinear process in which information needs are not satisfied by a single, ideal set of documents but by an aggregation of learning and insight gathered along the way. In subsequent work, Bates extended this framework to accommodate a more sophisticated set of activities, which she referred to as moves, tactics, stratagems and strategies (Bates, 1990), defined as follows:

  • Move: an atomic thought or action, such as entering a particular keyword
  • Tactic: a collection of moves, such as broadening a search through the use of a more generic keyword
  • Stratagem: a composite of moves and/or tactics, such as identifying a promising information resource and scanning it for further relevant items
  • Strategy: a plan for an entire search, consisting of moves, tactics and/or stratagems

O’Day and Jeffries, for example, examined the information seeking strategies employed by clients of information professionals, and identified three primary categories of search behavior (1993):

  1. Monitoring a known topic or set of variables over time
  2. Following a specific plan for information gathering
  3. Exploring a topic in an undirected fashion

O’Day and Jeffries investigated search as a holistic process, integrating findability with analysis and sensemaking (as illustrated in Figure 4.1). As part of this research, they studied the analysis techniques employed by searchers in interpreting their results and identified six categories:

  1. Looking for trends or correlations
  2. Making comparisons
  3. Experimenting with different aggregations/scaling
  4. Identifying critical subsets
  5. Making assessments
  6. Interpreting data to find meaning

A further influential framework is that proposed by Gary Marchionini (2006), who developed a model consisting of three major categories of search activity: Lookup, Learn, and Investigate (Figure 4.2).

Figure 4.2 Marchionini’s taxonomy of search activities.

Joe Lamantia, for example, analyzed the behaviors of subscribers to a complex financial information service, and identified four primary modes of interaction (Lamantia, 2006):

  • Seeking information: conventional keyword search, plus related activities such as faceted navigation
  • Visiting stable destinations: accessing persistent resources or locations within the information space
  • Monitoring notifications: maintaining awareness of events, activity, status, and so on
  • Receiving delivered assets: accepting content via various channels, such as email, RSS, and others

Donna Spencer undertook a similar analysis (Spencer, 2006), inspired by the observation that the traditional information science framing of known item versus exploratory search did not adequately account for the behaviors she was witnessing in her work on designing intranets and complex websites. She observed that in many practical situations, “people didn’t necessarily know what they needed to know” and that much of the search behavior she was observing was actually concerned with trying to refind resources that had previously been discovered. From this observation, she proposed the following set of four search modes:

  1. Known item: in which users know what they want, how to articulate it, and where to look
  2. Exploratory: in which users have some idea of what they want, but not necessarily how to articulate it or where to look
  3. Don’t know what you need to know: in which users may start with one particular goal in mind, but need to replace it with another if and when they discover some key insight
  4. Refinding: in which users know what they want when they see it, but not necessarily how to articulate it or where to look

Item 3 suggests an intriguing possibility, encapsulating the activities and outcomes associated with the elusive quality we commonly refer to as serendipity.

In particular, we have studied user scenarios gathered during the development of numerous search and business intelligence applications (Russell-Rose, Lamantia, and Burrell, 2011), and from this derived a set of nine search modes.

These modes are shown in the following list, grouped according to the three top-level categories proposed by Marchionini (2006):

  • Lookup
    • 1 Locate: To find a specific (possibly known) item
    • 2 Verify: To confirm that an item meets some specific, objective criterion
    • 3 Monitor: To maintain awareness of the status of an item for the purposes of management or control
  • Learn
    • 4 Compare: To examine two or more items to identify similarities and differences
    • 5 Comprehend: To generate independent insight by interpreting patterns within a data set
    • 6 Explore: To investigate an item or data set for the purpose of knowledge discovery
  • Investigate
    • 7 Analyze: To examine an item or data set to identify patterns and relationships
    • 8 Evaluate: To use judgement to determine the value of an item with respect to a specific goal
    • 9 Synthesize: To create a novel or composite artefact from diverse inputs

Designing for Search Modes

Lookup: verify

In this mode, the user is inspecting a particular item and wishing to confirm that it meets some specific criterion. Google’s image results page provides a good example of this mode (Figure 4.3).

Figure 4.3 Google’s image results page supports verification of a specific item.

On mouse hover, the image is zoomed in to show a magnified version along with key metadata, such as filename, image size, caption, and source, which allows the user to verify the suitability of a specific result and either retrieve it there and then or rapidly switch to alternatives.

A similar example is provided by Netflix (Figure 4.4), which also supports a mouse rollover interaction on its result page. In this case, a dialog overlay is used to verify the film’s title and provide further key metadata in the form of a summary, credits, rating, and so on.

Figure 4.4 Netflix’s results page supports verification of specific film choices.

Alternatively, there may be cases in which the user needs to verify specific queries rather than search results. With its real-time feedback after every key press, Google Instant provides verification of the interpretation of the current query and the results that will be returned (Figure 4.5).

Figure 4.5 Google Instant provides support for verification of queries and results.

Learn: explore

A key part of exploring is being able to distinguish between where you are going and where you have already been.

Figure 4.6 Differentiating between visited and unvisited links aids exploration.

Amazon takes support for exploration a step further, through the use of components specifically designed to provide information regarding the user’s current location and previous navigational history. These include a Recent History panel, which shows the items recently viewed by the user (Figure 4.7) and a Recent Searches panel, in which the user can view or invoke any the queries previously issued in the current session (Figure 4.8). Along with the wishlist functionality, these components provide support for the “refinding” behavior identified by Donna Spencer.

Figure 4.7 Amazon supports exploration by showing recently viewed items.

Figure 4.8 Amazon supports exploration by showing recent searches.

Another simple technique for encouraging exploration is through the use of “see also” panels. An example of this usage can be seen at Food Network, where a query for “ice cream” returns featured videos and products from the Food Network store alongside the primary search results (Figure 4.9).

Figure 4.9 “See Also” panels support serendipitous browsing and exploration.

Beyond the page level, there is a further approach we can apply: changing the search paradigm itself. Consider the library site illustrated in Figure 4.10: it uses a parametric interface in which users are invited to enter values for each of the attributes in the dropdown menus, then click the search button.

Figure 4.10 Parametric search inhibits exploration.

Consider the library site shown in Figure 4.11. In this instance, they have adopted a faceted approach, in which the attributes are not hidden behind dropdown menus but displayed as links in a navigational menu. This approach enables users to intuitively explore by progressively refining their choices in each dimension.

Figure 4.11 Faceted search facilitates exploration.

Investigate: analyze

A simple example of support for this can be found at Google patents (Figures 4.12a and 4.12b). The alternate views (Grid View and List View) allow the user to switch between rapid exploration (scanning titles, browsing thumbnails, looking for information scent) and a more detailed analysis of each record and its metadata.

Figure 4.12a, b Alternate views at Google Patents support mode switching between exploration and analysis.

He now wishes to analyze some of the prior art associated with a particular technology and understand how it has been reported in the media. He may turn to a news aggregator site such as the now-defunct Newssift.com (which was in its time a unique resource—see Figure 4.13).

Figure 4.13 Support for analysis at Newssift.com.

Mode Chains and Patterns

Five example mode chains from the domain of enterprise search are listed here, with an associated example scenario (Russell-Rose, Lamantia, & Burrell, 2011):

  1. Comparison-Driven Search (Analyze-Compare-Evaluate): “Replace a problematic part with an equivalent or better part without compromising quality and cost”
  2. Exploration-Driven Search (Explore-Analyze-Evaluate): “Identify opportunities to optimize use of tooling capacity for my commodity/parts”
  3. Strategic Insight (Analyze-Comprehend-Evaluate): “Understand a lead’s underlying positions so that I can assess the quality of the investment opportunity”
  4. Strategic Oversight (Monitor-Analyze-Evaluate): “Monitor and assess commodity status against strategy/target”
  5. Comparison-Driven Synthesis (Analyze-Compare-Synthesize): “Analyze and understand market trends to inform brand strategy and communications plan”

We can represent this grammar visually, as in Figure 4.14, which shows how the various sequences combine to form a “mode network.”

Figure 4.14 A network of search modes.

Designing for Mode Chains

Our experience suggests both the existence of repeatable patterns in information seeking behavior and the potential to apply these patterns as a framework for the design of search experiences (Russell-Rose, Lamantia, & Burrell, 2011). The implications of such a grammar could be considered at three levels of abstraction:

  • A single functional element
  • A complete screen composed of multiple functional elements
  • An integrated application composed of multiple screens

Summary

Though it’s common practice, thinking of search exclusively as information retrieval is an arbitrarily narrow view that unnecessarily constrains our ability to recognize and understand broader patterns of information seeking behavior. Search, in the holistic sense, is a complex cognitive activity that integrates information retrieval with higher-level problem-solving activities such as analysis and sensemaking. Together, these activities form an iterative loop that underpins the information seeking process.

Framing search as a holistic experience helps us understand and interpret broader patterns of behavior and more varied modes of interaction. In defining these modes, we have developed a lens through which we can recognize common types of information seeking behavior that are independent of any particular context or user. And by studying the behaviors associated with individual modes, we learn how to apply them in the design of more effective search experiences.

We have also explored how modes occur in naturalistic settings, observing the formation of distinct patterns and chains. These patterns offer an expressive language for describing information seeking in which individual modes can be combined to form composite elements. This perspective provides a unique insight into information seeking behavior and a framework for the design of more holistic search experiences.

2.Design Solutions

5.Formulating the Query

Entering the Query

One of the fundamental concepts in human–computer interaction (HCI) is the notion of affordance: the idea that an object’s design should suggest the interactions that its function supports.

Likewise, the design of the search box should follow its function. If its purpose is to allow the user to enter queries in the form of keywords, then it should look like it will accept textual input and have an associated button that clearly indicates its function, as in Figure 5.1. The examples in Figure 5.2, by contrast, are less functional. The search box should also be wide enough to avoid obscuring parts of the query: Jakob Nielsen suggests that a minimum of 27 characters is required to accommodate 90 percent of queries (Nielsen & Loranger 2006).

Figure 5.1 A match between form and function at eBags.com.

Figure 5.2 Less conventional search box designs.

On the web, users can search for almost anything, with few constraints over topic or medium. By contrast, in site search (i.e., search of a specific website), the choices are usually much more restricted, which presents an opportunity to provide further support in the form of “placeholder” text and other prompts to help users construct meaningful queries.

Figure 5.7 Pipl search box guides users toward meaningful queries.

Figure 5.8 Search can be restricted to a specific category on eBay.

Figure 5.9 Scoped search at classified advertisement site Craigslist.

Users with high domain expertise (see Chapter 1) can therefore benefit greatly from scoped search, particularly if they are seeking known items.

Search within

By allowing users to search within an existing set of results, the query acts as a kind of refinement, narrowing down the results in a manner similar to that of faceted navigation (see Chapter 7).

For this reason, search within is often presented as a dedicated search box within the faceted navigation menu (Figure 5.11).

Figure 5.11 Search within is part of the faceted navigation menu at dabs.com.

Alternatively, search within can be integrated with the standard search box, using a radio button or checkbox to toggle between the two different types of input (Figure 5.12).

Figure 5.12 Search within is invoked using a checkbox at bulbs.com.

When parametric search was originally conceived, its interaction was based around the notion of selecting parameters on an extended form. In this context, it may have made sense to withhold some choices from the default view and present them instead as an advanced option (Figure 5.14).

Figure 5.14 Advanced search form at WARC.

Beyond keywords

Natural language

One of the most intuitive is to express the query as you would to another human being, that is, as a natural language question or request. This kind of interaction was popularized by search engines such as Ask (formerly Ask Jeeves), which uses a combination of text analytics and human moderation to produce a question-answering search experience (Figure 5.15).

Figure 5.15 Natural language question answering at Ask.

Wolfram Alpha uses NLP to answer factual queries by computing answers and relevant visualizations from a knowledge base of curated, structured data (Figure 5.16).

Figure 5.16 Natural language question answering at Wolfram Alpha.

Nontext queries

Figure 5.17 Search by example using images at Google.

Each of these services represents a type of search known as query by example.

Figure 5.18 Search by color at Etsy.

Refining the Query

Autocomplete

One of the key principles in human–computer interaction is recognition over recall: the notion that people are better at recognizing things they have previously experienced than they are at recalling them from memory.

Autocomplete transforms a recall problem into one of recognition.

The UK’s National Rail website in Figure 5.19, for example, recalls the railway stations that match a handful of characters.

Figure 5.19 Autocomplete at the UK National Rail Enquiries website.

Autocomplete does its best to remain unobtrusive: we can still enter a query in full if we choose. But by selecting the completions, we save time and keystrokes. Moreover, they help us avoid spelling mistakes. On smartphones and tablets, autocomplete is applied to all manner of applications from text messaging to email (Figure 5.20).

Figure 5.20 Autocomplete is used for SMS and email on the iPhone.

Autocomplete makes the most sense when the choices are based on a controlled vocabulary—that is, a finite list of items, such as a directory of names, locations, organizations, and so on.

Autosuggest

The purpose of autocomplete is to search within a controlled vocabulary for entries matching a partial character string. By contrast, the purpose of autosuggest is to search within a virtually unbounded list for related keywords and phrases (which need not match the exact query string). Autocomplete helps us get an idea out of our head and into the search box; autosuggest actually throws new ideas into the mix. In this respect, autosuggest operates at a more conceptual level, offering choices where the relationship to the query may go beyond simple string matching. Both techniques save keystrokes and help us avoid spelling mistakes, but autosuggest can also help us construct a more useful query than we might otherwise have thought of on our own. eBay, for example, provides a variety of different suggestions related to the query “guitar,” highlighting the matching terms in blue (Figure 5.21).

Figure 5.21 Autosuggest at eBay.

Home Depot, for example, provides a particularly extensive autosuggest function, consisting of product categories, buying guides, project guides, and more (Figure 5.22). Not only do these suggestions facilitate known-item search, but they also support exploratory search behavior, encouraging the user to discover new product ideas and specialist content.

Figure 5.22 Autosuggest supports known-item and exploratory search at Home Depot.

In contrast to eBay, Yahoo emphasizes the ways in which the query may be extended by highlighting the nonmatching terms (Figure 5.23).

Figure 5.23 Autosuggest offers query refinements and content suggestions at Yahoo.

A further technique to optimize the value of query suggestions is to display them in the context of recent searches. One approach, which Safari utilizes, is to simply present two adjacent groups: one for query suggestions and another for the browser’s search history (Figure 5.24).

Figure 5.24 Query suggestions are presented alongside recent searches in Safari on the iPad.

Instant results

Autocomplete and autosuggest are both valuable techniques to help us conceive and articulate more effective queries. They differ in approach but share the principle that as-you-type suggestions provide a shortcut from query to search results. But in some cases, it is possible to go even further by offering actual results rather than just query reformulations. For example, if we type the characters “ip” into the search box at Apple.com, six items appear (Figure 5.25). However, if we select one of these, it bypasses the search results page entirely and takes us directly to a product-specific landing page. Rather than suggesting alternative queries, the search box provides “instant results” in the form of a set of matching “best bets” for products and resources.

Figure 5.25 Instant results at Apple.com.

In Windows 7, for example, a keyword search invokes a panel of recommended results grouped into popular categories (Figure 5.26). We can either select one directly to open it, or choose the “See more results” option to open a regular search results page.

Figure 5.26 Instant results in Windows 7 desktop search.

Google provides its own type of “instant results,” which complement their autosuggest function to provide a highly responsive search experience. Instead of presenting a static page of results after each query, Google Instant updates the search results in real time as each character is entered. If we don’t see the results we want, we can just keep typing and watch the results update (Figure 5.27).

Figure 5.27 Instant results when searching via Google.

Keeping on Track

Did you mean

One of the simplest is to use spell checking algorithms to compare queries against common spellings of each word. For example, Figure 5.28 shows the results on Google for the query “expolsion.” This isn’t necessarily a “failed” search (it does return results), but the more common spelling “explosion” would return a more productive result set.

Figure 5.28 Potential spelling mistakes are addressed by a “Did you mean” suggestion at Google.

Amazon and eBay both conservatively apply “did you mean” to queries such as “guitr,” faithfully passing on the results for this query but offering the alternative as a highlighted suggestion immediately above the search results (Figures 5.29 and 5.30). And in Amazon’s case, the results for the corrected spelling are appended immediately below those of the original query.

Figure 5.29 “Did you mean” at Amazon.

Figure 5.30 “Did you mean” at eBay.

Autocorrect

However, there are times when it is possible to be more certain that a spelling mistake has occurred.

For example, consider a query for “expolson” on Google: this time, instead of applying a “did you mean,” it is autocorrected to “explosion” (Figure 5.31). As before, a message appears above the results (“Showing results for”), but this time the choice has been made for them.

Figure 5.31 Autocorrect at Google.

Partial matches

Amazon provides a particularly effective implementation of this strategy. For example, a keyword search for “fender strat maple 1976 USA” finds no matching results. However, rather than returning a zero results page, Amazon returns a number of partial matches based on various keyword permutations (Figure 5.33). Moreover, by communicating the nonmatching elements of the query (using strikethrough text), it gently guides us along the path to more informed query reformulation.

Figure 5.33 Partial matches at Amazon.

A similar strategy can be seen at eBay, which also finds no results for the same query we tried on Amazon. Instead of a zero results page, we see a list of the partial matches with an invitation to select one of them (or to “try the search again with fewer keywords”). These are ordered using what’s known as quorum-level ranking (Salton, 1989), which sorts results according to the number of matching keywords (Figure 5.34). Thus products matching four keywords (such as “fender strat maple USA”) are ranked above those containing three or fewer (such as “fender strat USA”).

Figure 5.34 Partial matches using quorum-level ranking at eBay.

Figure 5.35 Related searches at Bing.

Google, by contrast, shows them on demand (via a link in the sidebar) as a panel above the main search results (Figure 5.36).

Figure 5.36 Related searches at Google.

Apart from providing inspiration, related searches can be used to help clarify an ambiguous query (see Chapter 7 for the significance of this within faceted search). For example, query on Bing for “apple” returns results associated mainly with the computer manufacturer, but the related searches clearly indicate a number of other interpretations (Figure 5.37).

Figure 5.37 Query disambiguation via related searches at Bing.

Related searches can also be used to articulate associated concepts in a taxonomy. At eBay, for example, a query for “acoustic guitar” returns a number of related searches at varying levels of specificity. These include subordinate (child) concepts, such as “yamaha acoustic guitar” and “fender acoustic guitar,” along with sibling concepts such as “electric guitar,” and superordinate (parent) concepts such as “guitar.” These taxonomic signposts offer a subtle form of guidance, helping us understand better the conceptual space in which our query belongs (Figure 5.38).

Figure 5.38 Taxonomic signposting via related searches at eBay.

Sometimes it is the results themselves that provide the stimulus. When we find a particularly good match for our information need, we try to find more of the same: a process that Peter Morville refers to as “pearl growing” (Morville, 2010). Google’s image search, for example, offers us the opportunity to find images similar to a particular result (Figure 5.39).

Figure 5.39 Find similar images at Google.

Recommender systems such as Last.fm and Netflix rely heavily on attributes, ratings, and collaborative filtering data to suggest content we’re likely to enjoy. And from just a single item in our music collection, iTunes Genius can recommend many more for us to listen to as part of a playlist (Figure 5.40).

Figure 5.40 Genius playlist creates “more like this” from a single item.

Summary and Best Practices

We began this chapter where so many information journeys begin: in the expression of a query. Through search boxes, scoped search, advanced search and beyond, we’ve seen the many ways in which an information need can be articulated.

But we’ve also seen how search tasks of any complexity require an iterative approach, involving the creation and reformulation of queries. In this context, as-you-type suggestions have become invaluable. Autocomplete is best suited to known-item search and simple information retrieval tasks; autosuggest works well for exploratory search and complex information seeking tasks; and instant results provide a direct channel from query to answers.

But there are times when we need more explicit guidance, in the form of spell-checking strategies such as “did you mean” and autocorrect. Likewise, partial matching strategies can provide signposts to guide us toward more productive keyword combinations. And related searches can inspire us to consider new directions and grow our own pearls. Together, these techniques keep us on track throughout our information journey.

The Search Box

  • Form should follow function; apply the principles of affordance to interactive design elements.
  • Reserve a consistent location for the search box, and make it wide enough to comfortably accommodate the majority of queries.
  • Place the cursor within the search box upon page load and allow the user to press the Enter or return key to submit the query.
  • Provide direction in the form of placeholder text and other prompts to help users construct meaningful queries (but remove these prompts as soon as the search box receives focus).
  • Display the query in the search box after submission.

Scoped Search

  • Consider scoped search for applications where users have high domain expertise, but avoid forcing this function on users with low domain expertise. Ensure that it defaults to “all categories.”
  • Apply a fallback strategy that searches across all categories if searching within one category produces zero results.
  • Clearly display the scope of the search as part of the results.

Search Within

  • If presented as part of a faceted menu, clearly indicate the function through the use of placeholder text and other textual labels. Ensure that keyword refinements appear as mementos in the breadbox.
  • If presented as an option to the global search box, ensure that the toggle control is sensitive to the application context. In addition, selecting the “search within” checkbox should remove the current query from the search box.

Advanced Search

  • Review the rationale for advanced search, in particular whether it is better to customize the whole experience (i.e., content, navigation, transactional functionality, etc.) for a specialist audience, rather than assume that search alone deserves special treatment.

Beyond Keywords

Sometimes our information needs go beyond words. Choose input methods that match the medium.

Use autocomplete to:

  • Facilitate accurate and efficient data entry.
  • Select from a finite list of names or symbols.

Use autosuggest to:

  • Facilitate novel query reformulations.
  • Select from an open-ended list of terms or phrases.
  • Encourage exploratory search (with a degree of complexity and mental effort that is appropriate to the task). Where appropriate, complement search suggestions with recent searches.

Use instant results to:

  • Promote specific items or products.

Use “did you mean” when:

  • An alternative spelling of a short query would return a more productive result set.

Use autocorrect when:

  • An alternative spelling of a short query would avoid a zero result set.

Use partial matches to:

  • Find productive permutations of keywords within a longer keyword query.
  • Present a subset of those matches to reflect the diversity of the result set.

Use related searches to:

  • Provide inspiration and new ideas for extending and refining a query.
  • Clarify an ambiguous or generic information need.
  • Present associated concepts in a taxonomy.

6.Displaying and Manipulating Results

Displaying Search Results

Basic principles

To illustrate, suppose you’re looking for a new job role, and you browse to the 40 or so open positions listed on UsabilityNews (Figure 6.1). 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 sound 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 (see Chapter 2) that forces us to continually jump back and forth between the individual results and the list to see the information we need. Some degree of movement like this may be inevitable with any design, but when it becomes chronic, it is referred to as pogosticking (Spool, 2005).

Figure 6.1 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 such as location, remuneration, role description, and so on. A similar search on recruitment agency Reed offers all of these, along with associated tools and controls (Figure 6.2).

Figure 6.2 More informative 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). This setup increases the likelihood that potentially valuable results will be overlooked, particularly if relevance appears to be weaker further down the list. An acute example can be found at electrical retailer Comet, where each individual result extends to over 300 pixels in height (Figure 6.3). 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 users’ characteristics (Chapter 1), their information seeking behavior (Chapter 2), and the broader search context (see Chapter 3).

Figure 6.3 Highly detailed product listings at Comet.

The anatomy of a search result

The three major web search engines are remarkably consistent (Figure 6.4). By default, each displays the page title, the URL (in abbreviated form), and an informative summary of the content (known as a “snippet”).

Figure 6.4 Commonality of design for the major web search engines.

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 (Schwarz & Morris, 2011). But one feature they all share is the use of query-oriented summaries: snippets that show the query terms in context (Tombros & Sanderson, 1998). In addition, these summaries highlight the matching terms (using boldface), which has the effect of drawing attention to key fragments in the text and communicating how closely the query terms appear to one another (Marchionini, 1995). This is known to be a strong indicator of relevance (Muramatsu & Pratt, 2001).

And for mobile, almost everything changes. First, it is important to keep the snippets short. But more important, we need results that reflect our spatial location (see Chapter 3). Here, maps become the natural medium for search results, placing each result in its geospatial context (Figure 6.5).

Figure 6.5 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 refind a previously known item, it may be quicker for us to view them as a set of thumbnails, flicking through them in sequence (Figure 6.6). When we know exactly what our target looks like, we can rely on recognition rather than recall to find it (see Chapter 5).

Figure 6.6 Search results displayed as thumbnails on Google mobile web.

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 (Figure 6.7).

Figure 6.7 Deep links in search results at Yahoo.

Search result previews

Previews allow us to see the detail of an individual item within the context of the search results page.

Figure 6.8 Search result previews at Bing.

In providing a convenient, lightweight method for verifying individual items, previews offer direct support for one of the key search modes discussed in Chapter 3.

Answers and shortcuts

Google, for example, allows us to ask direct questions in a variety of forms. When it recognizes the presence of certain trigger words, it responds with weather forecasts, stock quotes, maps, and sports scores (Figure 6.9). 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).

Figure 6.9 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 (Figure 6.10). This type of interaction extends the concept of search beyond findability and into a new territory of computational knowledge and inference.

Figure 6.10 Beyond traditional search results at Wolfram Alpha.

At Google, for example, we can recommend a particular result and share it with colleagues by using the “+1” button (Figure 6.11).

Figure 6.11 Recommending a search result at Google.

At the BBC, we can play video and audio clips with a single click (Figure 6.12).

Figure 6.12 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 (Figure 6.13). 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.

Figure 6.13 Spotlight search provides actionable objects as results.

Search Results Pages

Basic principles

Even Google, with its minimalist home page design, manages to pack more than a dozen separate features into its default search results page (Figure 6.14). These can be grouped according their function, such as input, informational, control, or personalization (Wilson, 2011):

  • Input features
    • Search box including auto-suggest and instant results (on character input)
  • Informational features
    • Number of results found
    • Support for query reformulation (“did you mean” and autocorrect)
    • Individual results consisting of:
      • Hyperlinked titles with snippets and URLs
      • Page preview (available on hover)
      • Related metadata, such as previous visits, citations, related articles, and social data (such as page sharing by colleagues)
    • Related searches
    • Sponsored links (advertisements)
  • Control features
    • Faceted navigation menu (for content type, date, etc.)
    • Search tools menu (sites with images, visited pages, etc.)
    • Pagination
    • Options for advanced search and help
  • Personalization features (when logged in)
    • Profile, settings, notifications, etc.

Figure 6.14 Minimalist design belies feature-rich complexity in Google’s SERPs.

As shown in Chapter 5, query reformulation is a critical step in many information journeys. In fact, this principle is so fundamental that we often take it for granted, and it becomes conspicuous only by its absence: faced with the response shown in Figure 6.15, can you work out what the query was or how best to reformulate it? In this instance, the user is forced to rely on recall rather than recognition, contrary to the principles outlined in Chapter 5.

Figure 6.15 Smashing Magazine’s SERP lacks the context necessary for effective query reformulation.

A second, related principle is to maintain the context of the current search by displaying the number of matching results. This deceptively simple measure plays a vital role in the information seeking dialogue, as it communicates the magnitude of the current information space and helps the user make more informed query reformulations.

Figure 6.16 The iTunes app shows the number of matching results in context.

Web search engine DuckDuckGo makes a virtue of this: a search for “apple,” for example, returns results for all the major senses in the first few results (Figure 6.17). Moreover, it also displays an explicit clarification panel, showing the alternative meanings and offering users the opportunity to clarify their intent. As we will see in Chapter 7, this is a pivotal point in the search experience, when users are invited to explore the subtleties of their information need, and engage in a dialogue that allows them to build their own mental map of the information landscape.

Figure 6.17 Clarifying our information need at DuckDuckGo.

Amazon uses this concept to good effect, presenting several alternative interpretations on the first page for an ambiguous query such as “washer” (Figure 6.18).

Figure 6.18 Diversity of search results at Amazon.

Page layouts

In fact, in some environments, it makes more sense to allow users to browse products visually, laying out the results in a two-dimensional grid. This type of “gallery” layout is commonly seen in online retail, with each result displayed in a more concise, pictorial form facilitating rapid visual scanning (Figure 6.19). This type of view supports the search modes of exploring and locating that were discussed in Chapter 4.

Figure 6.19 Gallery view at eBay.

The ideal layout will depend on the particular result set: those items for which appearance is important (e.g., cars, clothing) are naturally suited to a visually oriented layout, whereas others (e.g., computers, electrical goods) may be better suited to a detail-oriented layout. For this reason, it is common to see a control allowing users to switch between views (see top left of Figure 6.19).

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 (Figure 6.20). This type of view supports key search modes such as analyzing and comparing (see Chapter 4).

Figure 6.20 Parametric view at RS Components.

In some search contexts, the results may have a geospatial element to them. In this case, the most natural layout is to present them as a two-dimensional map.

Figure 6.21 Search results are shown in map view on Google mobile.

Carrot2 takes the concept further still, offering a choice of visualizations (Figure 6.22). This approach allows users to gain an impression of the overall themes within the results and explore similar results together within a single group.

Figure 6.22 Search results are clustered by topic at Carrot2.

Blended results

The Guardian newspaper, for example, shows results laid out in vertical list (Figure 6.23) but grouped according to category (editor’s picks, tags, most recent articles, etc.).

Figure 6.23 Search results are grouped vertically by type at the Guardian.

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 (Figure 6.24).

Figure 6.24 Blended search results and media types at Google.

By contrast, business information provider Reuters groups search results according to medium (news, blogs, video, or pictures), which it displays in separate panels (Figure 6.25). News items take precedence as the default shown in the main panel, but this display can be replaced by another content type by selecting the appropriate tab.

Figure 6.25 Search results are grouped by medium at Reuters.

Apple’s iTunes store (Figure 6.26) takes the structured approach a step further, displaying a variety of content types on the SERP as actionable objects (see “Displaying Search Results” earlier in this chapter) in individual panels with custom controls (see “Manipulating Search Results” later in this chapter).

Figure 6.26 Varied content types displayed in individual panels with custom controls at the iTunes Store.

At the Food Network, for example, the primary content consists of recipes, but the SERP also promotes related content in the form of videos and products from the Food Network store, using a sidebar on the right-hand side (Figure 6.27).

Figure 6.27 Promotion of related content and products at the Food Network.

Zero results pages

Apple Store, which provides basic advice but misses the opportunity to provide direct support (Figure 6.28).

Figure 6.28 Limited support for query reformulation on the Apple Store zero results page.

Classified ad site Carzone, by contrast, gives clear messaging and useful advice and also provides the means to address the issue by removing the nonmatching search criteria (Figure 6.29).

Figure 6.29 Direct support for query reformulation on the Carzone zero results page.

Manipulating Search Results

Pagination

Pagination confers several benefits: it limits load time (by dividing the results into manageable ‘chunks’); it provides a measure of how far through the set the user has progressed; and it shows how much further they can go. Implementations vary considerably, with Google, Bing, and Yahoo all offering their own distinctive interpretations (Figure 6.30).

Figure 6.30 Varying implementations of pagination at Google, Bing, and Yahoo (desktop).

These implementations differ further when applied to the mobile context (Figure 6.31). Google, for example, maintains consistency with the desktop by using a control that differs little in behavior; loading a further ten results each time. Bing, by contrast, offers a link to “more results,” which returns a further page of results that load on demand. This design means that the user can simply scroll to the bottom and the next set of results will be appended, without reloading the page. A similar approach is seen at Yahoo, in which ten additional results are appended to the current set on each invocation of the “Show more web results …” button.

Figure 6.31 Varying implementations of pagination at Google, Bing, and Yahoo (mobile).

Sorting and filtering

Sort options such as these are commonly implemented using a dropdown control, which allows the user to apply different sort keys (Figure 6.33).

Figure 6.33a, b, and c Drop down controls for sorting at Walmart, Amazon, and Littlewoods.

A kind of hybrid example of sorting and filtering (and pagination) can be seen at the iPhone App Store (Figure 6.36). Here, content is grouped into various default categories to facilitate browsing along various popular dimensions (such as Top Paid, Top Free, etc.).

Figure 6.36 Button controls for sorting on the iPhone App Store.

A more mainstream use of filtering is to allow users to refine their results by one or more independent dimensions or facets. This approach, known as faceted search, has become the dominant paradigm among online retail and many other commercial search applications.

Query clarification

There are a number of approaches to query clarification. One of the most common is to display the alternative interpretations in the form of matching categories and invite users to choose a more precise category for their information need. Amazon, for example, does this is in a subtle manner. A query here for “mp3” returns several million results, including players, accessories, and content on the first page (along with best bets such as a promotion for the Amazon MP3 store and featured results for the Electronics Store). However, the primary navigation option in the left hand menu is a category selector (Figure 6.37).

Figure 6.37 Query clarification by category selection at Amazon.

A more conspicuous variant can be seen at electrical retailer Comet. As expected, an ambiguous query here such as “washer” returns a mixed set of results. However, this time the category selector is displayed much more prominently, directly above the search results (Figure 6.38).

Figure 6.38 Prominent category selection at Amazon.

Comparing

A common approach is to provide access to what is popularly known as a comparison view. Computing equipment retailer Dabs, for example, provides a column of checkboxes next to each search result, which marks items for comparison (Figure 6.42).

Figure 6.42 Selecting items for comparison at Dabs.

Selecting a “Compare” button at the head of the column opens a separate view that shows the full detail of each item in a separate column, enabling easy comparison of the individual product attributes (Figure 6.43).

Figure 6.43 Product comparison at Dabs.

Online retailer Best Buy, for example, shows both the size limit and the current state of the comparison view using a dynamically updating preview (Figure 6.44).

Figure 6.44 Selecting items for comparison at Best Buy.

The goal of the comparison page is, of course, to support analyzing and comparing individual products. Best Buy offers further support for these search modes by organizing the attributes into logical groups and providing an option to automatically highlight the differences between products (Figure 6.45).

Figure 6.45 Highlighting differences between products at Best Buy.

Summary and Best Practices

Results pages play a crucial role in the search experience, conveying to users a response to their information needs and engaging them in a dialogue that guides them along their information journey. By drawing on a broad repertoire of layouts, views, and configurations, results pages can support a variety of search modes and contexts. And even when there are no results to return, these pages can still be used to facilitate productive exploration and discovery.

Search results pages should also guide users in clarifying their query and broader information needs. Pagination, sorting, and filtering can then provide the means to explore the results and find promising directions. And in subsequent stages, comparison views can support the detailed analysis of individual items. In the next chapter, we’ll add a further layer of depth and refinement, exploring the types of dialogue that can be facilitated by faceted search.

Displaying search results

  • 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 the users’ characteristics, their tasks and the broader context
  • 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; Customize the presentation according to the search context
  • Use previews to provide access to further detail

Search results pages

  • Consider search results not as competing alternatives, but as an aggregate response to an information need
  • Maintain context by displaying:
    • The current query (and allow it to be edited in place)
    • The state of any other navigational context such as current facet selections
    • The number of matching results
    • Present an appropriate level of diversity, particularly for vague or ambiguous queries
  • Apply a layout that matches the result set:
    • Gallery view for items whose appearance is important
    • List or detail view for complex or highly attributed items
    • Map view for geospatial data
    • Allow the user to switch between layouts

Blended results

  • Use sidebars or complementary panels to promote related items
  • Distinguish featured results using layout and/or visual highlighting
  • Use best bets to provide effective matches for popular queries

Zero results pages

  • Provide an explicit message when zero results are returned
  • Provide support in the form of advice and tools for query reformulation
  • Display other navigation options such as top searches, featured products, popular items, and so on

Pagination

  • Display the page range using large target areas and a hover effect where appropriate
  • Identify the current page, and provide Previous and Next options
  • Consider an infinite scroll approach where contextually appropriate, such as in mobile contexts
  • For limited collections, provide options to navigate directly to the first and last pages
  • Allow users to change the default pagination setting (number of results)

Sorting and filtering

  • Provide sort options that are specific to the category of results
  • Offer a tabular style where sorting is a key user need (e.g., for highly attributed data)
  • Be aware that sorting and filtering are often misunderstood by users

Query clarification

  • Provide support to clarify vague or ambiguous queries, such as through an explicit category selector; Choose a location and configuration that is consistent with the users, their tasks and the broader search context
  • Consider a “best bets” approach for popular queries

Comparing

  • Communicate the maximum size of the comparison view; Provide a dynamic preview where possible
  • Allow users to highlight the differences between individual results
  • Maintain independent comparison lists for different result categories

Definitions

Facets are essentially independent properties or dimensions by which we can classify an object. For instance, a book might be classified using an Author facet, a Subject facet, and a Date facet. Faceted navigation enables users to explore information spaces by progressively refining their choices in each dimension. For example, we could explore a collection of books by selecting a specific author, subject, or date range. Selections are made by applying facet values, which determine the current results set. The set of selections active at any given time is known as the navigational context, which corresponds to the user’s current location in the information space. Faceted search is then the combination of faceted navigation with other forms of search (such as those discussed in Chapter 5).

A key principle of faceted search is to minimize the likelihood of zero results by guiding users toward productive navigational choices.

Facet semantics

Facets can be either single-select or multi-select.

Multi-select facets can either be multi-select OR or multi-select AND.

Facet states and behaviors

By convention, values applied across different facets are normally applied conjunctively (e.g., Author = Russell-Rose AND Subject = Search AND Date = 2012) whereas values applied within a given facet are normally applied disjunctively (e.g., Date = 2010 OR Date = 2011 OR Date = 2012).

Layout

Vertical layout

An example of this configuration (from eBay) is shown in Figure 7.1.

Figure 7.1 Vertical stack faceted navigation at eBay.

However, a number of sites have chosen to locate the facets on the right, including Edinburgh University’s library catalogue (Figure 7.2), although the motivation for placing the facets on the right in this case may simply be to direct attention to the “concept browser” control on the left.

Figure 7.2 Facets on the right at Edinburgh University Library.

Horizontal layout

An alternative to vertical layout is to arrange the facets horizontally, usually across the top of the page as shown at Yelp in Figure 7.3.

Figure 7.3 Horizontal facets at Yelp.

Figure 7.4 shows a search for “connectors” that returns 25 facets displayed in alphabetically ordered, scrollable containers (with the results pushed below the fold).

Figure 7.4 Facets wrap across the page at Amphenol.

Hybrid layout

A few, however, adopt a hybrid approach, such as TravelMatch (Figure 7.5).

Figure 7.5 Hybrid layout at TravelMatch.

Default State

Closed by default

The first option is to display all facets as closed by default, which is the approach adopted by TravelMatch in the left-hand menu in Figure 7.5. The advantage is that it uses minimal screen space, and for sites with a large number of facets (such as this), the visibility of that breadth of choice is maximized. The disadvantage is that the information scent offered by each facet is weaker than if they were shown in their open state, with sample facet values clearly visible. As a result, adoption and usage of the facets may be compromised. To mitigate this, the invitation or control to open (and close) each of the facets should be clearly visible and unambiguous.

Open by default

The second option is to display all facets in their open state by default, which maximizes the information scent by exposing example values for each of the facets and helps encourage adoption and usage of the faceted menu. An example of this approach can be seen at the job site Monster (Figure 7.6).

Figure 7.6 Facets open by default at Monster.

Open/closed hybrid

This option is becoming increasingly popular, as it makes efficient use of screen space and provides a stronger information scent for the first few facets (which should ideally be sorted by priority). An example of this can be seen below at NCSU Libraries (Figure 7.7).

Figure 7.7 Open and closed facets at NCSU Libraries.

For more complex search scenarios, a mixed initiative approach may be adopted. For example, a search on eBay using the query “golf” returns a query clarification dialogue (see Chapter 6), as shown in Figure 7.8.

Figure 7.8 Facets open for query disambiguation at eBay.

But once a selection has been made, a different approach is adopted. For example, if we select Category=“Cars, Motorcycles & Vehicles”, we are presented with a refined set of results and further facets, as shown in Figure 7.9.

Figure 7.9 Facets now open and closed at eBay.

Display Formats

They represent textual values simply and directly and afford interaction through direct selection (e.g., a single mouse click). When combined with record counts (i.e., the number of items matching each facet value), they provide a simple but effective summary of the information space (Yee et al., 2003).

The example from the Food Network shows a typical faceted navigation menu, with ten facets containing textual values that are displayed as hyperlinks (Figure 7.10).

Figure 7.10 Hyperlink facets at the Food Network.

We see such an example at NCSU libraries (Figure 7.11). In this example, the user can select multiple Subjects, Genres, Formats, and so on, and these are added to the navigational context each time.

Figure 7.11 Hyperlink facets at NCSU Libraries.

Checkboxes

Checkboxes are an ideal format for the display of multi-select facets. An example of their use can be found at many sites, including eBay (Figure 7.12).

Figure 7.12 Checkbox facets at eBay.

Range sliders

In the previous examples, the facet values are categorical in nature—qualitative data organized on a nominal or ordinal scale. But facets often need to display quantitative data, such as price ranges, product sizes, date ranges, and so on. In such cases, a range slider is often a more suitable display mechanism. An example can be found at Molecular’s Wine Store (Figure 7.13).

Figure 7.13 Range sliders at Molecular.

Input boxes

An example of this can be seen at Glimpse.com, where specifying an exact price range for shoes is much easier using the input boxes than the slider (Figure 7.14).

Figure 7.14 Input boxes at Glimpse.

For example, quantitative data can be transformed into an interval scale by subdividing the range into a sequence of smaller ranges and giving each a label. This is the approach taken by Amazon in their treatment of price ranges (Figure 7.15).

Figure 7.15 Interval scales at Amazon.

Color pickers

Littlewoods, for example, displays a color swatch with corresponding text labels and shows only values that are specific to the current result set (Figure 7.16).

Figure 7.16 Color picker at Littlewoods.

Artist Rising, by contrast, uses a generic color picker, offering a choice across the entire color spectrum (Figure 7.17).

Figure 7.17 Color picker at Artist Rising.

Tag clouds

An example can be found at Artist Rising, which displays a tag cloud as an overlay within a horizontal faceted menu (Figure 7.18).

Figure 7.18 Tag clouds at Artist Rising.

A somewhat different treatment can be found at PC Authority, which uses tag clouds to present terms extracted from unstructured content (i.e., text documents). These are displayed in a separate container that is disconnected (conceptually and physically) from the left-hand faceted navigation menu. As tags are selected, they are added to the breadbox alongside other refinements (Figure 7.19).

Figure 7.19 Tag clouds at PC Authority.

Data visualizations

Applications such as these are designed to aggregate, organize, and summarize data from numerous quantitative and qualitative sources by using data visualizations to communicate key metrics, patterns, and overall status. An example of such a visualization could be found at Newssift, in which pie charts were used to communicate the distribution of article sources and associated sentiment (Figure 7.20).

Figure 7.20 Data visualizations at Newssift.

Another use of data visualization in faceted search is to communicate patterns in geospatial data. An example of this can be found at WITS (the Worldwide Incidents Tracking System), which uses various forms of visualization to display terrorist incidents overlaid on a map of the world (Figure 7.21).

Figure 7.21 Data visualization at WITS.

Showing Additional Values

Displaying all values by default

One such example can be found at Carzone, which by default displays facets in a vertical configuration using scrollable containers for lists of facet values such as Makes & Models (Figure 7.22).

Figure 7.22 Scrollable containers for lists of facet values at Carzone.

A variation on this approach can be seen at Farnell, which displays facets in a horizontal configuration. This arrangement applies the scalability principle along both axes: the facets themselves are displayed within a horizontal scrollable panel and the values within each of the facets are displayed within vertically scrollable containers (Figure 7.23).

Figure 7.23 Scrollable containers for lists of facet values at Farnell.

Extensible containers

One method is to present an option to expand the facet inline, that is, to extend its size to accommodate a larger set of values. An example of this approach can be found at the NCSU Libraries site, which displays the top 5 values by default, but extends this to the top 30 when the “Show More” link is selected (as illustrated by the Subject facet in Figure 7.24).

Figure 7.24 Extensible containers for showing additional facet values at NCSU Libraries.

One flaw in this particular execution is that there is no option to show fewer values once a facet is expanded except by closing it completely.

A second variant can be seen at Hoovers, whose option to see more values results in a vertical scroll bar appearing within each facet (as illustrated by the Location and Employees facets in Figure 7.25).

Figure 7.25 Extensible containers for showing additional facet values at Hoovers.

Separate containers

Perhaps the most lightweight variation on this approach is to use an overlay to display the full set of facet values adjacent to the original set. Artist Rising’s “More Choices” link, for instance, displays the remaining facet values as an extended list, preserving the original sort order (Figure 7.26).

Figure 7.26 A separate container for showing additional facet values at Artist Rising.

A variation on this approach can be seen at the Food Network, which shows a maximum of three values by default, with an option to view more. This approach uses also an overlay, but instead of displaying just the additional values, it displays the entire list sorted alphabetically (Figure 7.27).

Figure 7.27 A separate container for showing additional facet values at the Food Network.

A somewhat heavier approach is to use a modal overlay to display the full set of facet values. An example of this design can be seen at eBay, which uses the overlay to present the complete list of values for each facet in its own pane (Figure 7.28).

Figure 7.28 A separate container for showing additional facet values at eBay.

A more disruptive approach is to present the list of values on a separate page, which is the approach adopted by Amazon on certain sections of their site such as footwear. This shows the use of multi-select facets, with options to “See More” for both Brand and Seller (Figure 7.29).

Figure 7.29 Options to see additional facet values at Amazon.

Selecting “See More” for Brands loads a new page displaying the entire set of values for that facet (Figure 7.30).

Figure 7.30 A separate page for showing additional facet values at Amazon.

Hybrid approaches

These approaches allow the user to browse a longer list of values to make further selections. However, there is an alternative approach that allows the user to search for specific values rather than browse. An example of this design can be seen at LinkedIn in Figure 7.31.

Figure 7.31 Support for both search and browse of facet values at LinkedIn.

Communicating the Navigational State

One of the simplest techniques by which navigational state is communicated is through the use of breadcrumbs.

Inline breadcrumbs

Perhaps the simplest example of such a mechanism is the use of multiple inline breadcrumbs, as shown on Amazon (Figure 7.32). Looking closely at the faceted navigation menus, we can see that each contains the current selection (e.g., Format = paperback, language = English) and the means by which the user may remove the current selection for any given facet (e.g., Any Format, Any Language). Note the use of boldface to indicate the currently selected facet value, the use of indentation to indicate hierarchy, and the use of chevrons to imply going “back” to a previous state.

Figure 7.32 Inline breadcrumbs at Amazon.

An extension to the above approach is to maintain the principle of displaying current facet selections inline (i.e., within the facet menu itself), but allow the facet values to be multi-selectable. An example of this can be seen at eBay (Figure 7.33). In this example, we can select multiple models (e.g., Golf OR Jetta) and multiple model years (2009 OR 2008 OR 2007) and these choices are displayed inline as selected checkboxes.

Figure 7.33 Inline breadcrumbs at eBay.

Breadboxes

The fundamental principle of the previous examples is that they display the selected refinements within the facets themselves. An alternative, however, is to display all currently selected facet values in their own dedicated container. In the context of faceted search, this container is often referred to as a breadbox. An example of the breadbox can be seen in the box labeled “Your Selections” at the Food Network (Figure 7.34).

Figure 7.34 Simple breadbox at the Food Network.

In the example from University of Toronto Libraries, we see a similar navigational state laid out in a horizontal arrangement (Figure 7.36).

Figure 7.36 Horizontal breadbox at University of Toronto Libraries.

Interaction Patterns

Interaction models

There are of course circumstances under which an empty result set can become unavoidable, such as the use of search within (see Chapter 5). However, one of the strengths of faceted search is the support for flexible query modification, which reduces the need for extensive keyword reformulation (English et al., 2002).

In the example from computer manufacturer Dell (Figure 7.37), we can see that there are seven laptop products that match the specification Screen=“small” AND price=£400–800. At this point, users can widen their search to include other screen sizes, such as Standard, Large, or other price ranges, such as Up to £400. Like the earlier Monster.com example, this design uses smart dead ends to communicate values that would have been available had the initial selections not been made, that is, the other Processor options (shown here in pale gray).

Figure 7.37 Faceted search at Dell.

Another such example is the travel site Kayak, which combines traditional facet selection options in the form of categorical values (rendered using hyperlinks and check boxes) with quantitative values that are rendered using sliders (Figure 7.38).

Figure 7.38 “Instant update” interaction model at Kayak.

In Figure 7.39, computer equipment supplier CDW allows the users to cherry-pick multiple facet values in a single iteration and then submit them en masse via the View Results button.

Figure 7.39 Two-stage facet selection at CDW.

Indeed, it is possible to offer both approaches and let users decide which they prefer. Electronic component distributor Farnell does exactly this, offering a checkbox to “Auto Apply filters to update results dynamically,” which applies the instant update model to the facets, and a “Show Results” button to refresh the results pane with the currently selected values (Figure 7.41).

Figure 7.41 User-selectable interaction model at Farnell.

Summary and Best Practices

Faceted search offers a unique potential to transform the search experience. It provides a flexible framework by which users can satisfy a wide variety of information needs, ranging from simple lookup and fact retrieval to complex exploratory search and discovery. Summarized here are the key principles for designing effective faceted search experiences.

Definitions

  • Facets are independent properties or dimensions by which we can classify an object.
  • Selections are made by applying facet values that determine the set of matching records returned. The set of selections active at any given time is known as the navigational context.
  • Faceted search should minimize the likelihood of zero results by displaying only currently available facet values.
  • Facets can be either single-select or multi-select. Single-select values are mutually exclusive.
  • Multi-select facets can either be multi-select OR or multi-select AND:
    • Multi-select OR values are combined disjunctively.
    • Multi-select AND values are combined conjunctively.
  • Values applied across different facets are normally applied conjunctively, whereas values applied within a given facet are normally applied disjunctively.

Layout and State

  • There are three main choices of layout: vertical, horizontal, and hybrid:
    • Vertical faceted menus are usually placed on the left, and scale well to variations in the number of facets displayed.
    • Horizontal configurations can present a more visible invitation for interaction, but scale less well to variations in the number of facets.
    • Hybrid configurations can use a combination of vertical and horizontal.
  • There are three main choices of default state: closed by default, open by default, or a combination of the two:
    • Closed by default minimizes screen space and maximizes the visibility of the full range of facets.
    • Open by default maximizes the information scent of the individual facet values.
    • A combination of open and closed can be used to reflect users’ search strategies and mental models.

Display Formats

  • The guiding principle should be to match the display format to the semantics of the facet values.
  • Hyperlinks provide a simple and direct mechanism for representing textual values.
  • Single select facets may be removed from display after being applied, but multi-select facets must remain visible for further selections to be made.
  • Checkboxes should be used to display multi-select facets.
  • Range sliders are usually the most appropriate format for quantitative data; they can be complemented with additional information to communicate the information landscape within each facet.
  • Input boxes allow the entry of precise quantitative values where range sliders would be inappropriate; quantitative data can be transformed into an interval scale by subdividing the range.
  • Color pickers can be configured to show only values that are specific to the current result set or to allow selection from a continuous color spectrum.
  • Tag clouds can be used to present terms extracted from unstructured content.
  • Visualizations are appropriate where the focus is on understanding patterns of distribution at an aggregate level.

Showing Additional Values

  • Facets should offer an appropriate information scent—for example, be open by default and display a representative sample of facet values.
  • There are three main ways to accommodate long lists of values: display all by default, use an extensible container, or use a supplementary container:
    • Display all by default assumes that the list is bounded in some way to a manageable size.
    • Extensible containers present an option to expand the facet inline.
    • Supplementary containers display the full set of facet values adjacent to the original set. The extended list can be ordered to facilitate visual scanning.
    • A text entry box (e.g., one with autocomplete) can be used to locate specific facet values.

Communicating the Navigational State

  • Because faceted search allows navigation along several independent dimensions, it is important to communicate the user’s current location and navigation options.
  • There are three main ways to communicate navigational state: inline breadcrumbs, multi-selectable facets, and breadboxes:
    • Inline breadcrumbs are the simplest way to communicate navigational state, but they do not scale well to accommodate large numbers of facets or multi-select values.
    • Multi-selectable facets use checkboxes to communicate navigational state but do not scale well to accommodate large numbers of facets.
    • Breadboxes communicate navigational state by displaying currently selected facet values in a dedicated container that remains visible no matter how many facets are present.
      • The breadbox should display facet names and values.
      • Vertical breadbox layout makes the structural relationship between the facet:value pairs more apparent.

Interaction Patterns

  • Smart dead ends can be used to communicate values that would have been available had the initial selections not been made.
  • There are two common interaction models: instant update and two-stage:
    • In the instant update model, the result set and facet values are updated immediately following selection of a facet value.
    • In the two-stage model, users can select multiple facet values and then submit them as a group.Inappropriate use of the two-stage model can give rise to inconsistent navigational states that return zero results. To mitigate this problem, the design should ensure that only one facet can be open at any given time.

If the facet values are conjunctive (multi-select AND), then the instant update model should be applied.

Mobile Information Seeking

Mobile users

Table 8.1 The average length of Google queries performed on desktop computers, iPhones, and conventional mobile phones, as reported by Kamvar et al. (2009).

~ Desktop iPhone Feature Phone
Words 2.93 2.93 2.44
Characters 18.72 18.25 15.89

Table 8.2 The average number of queries per Google search session (Kamvar et al., 2009).(A session being defined as a set of queries occurring with less than a five-minute gap between them.)

Desktop iPhone Feature Phone
1.94 1.82 1.7

Information needs

Let us first identify two dimensions by which an information need (mobile or otherwise) may be classified: search motive and search type (Tate & Russell-Rose, 2012).

The search motive dimension describes the sophistication of the information need, including the degree of thinking it involves, and the time commitment required to satisfy it (Figure 8.3). The lookup, learn, and investigate elements of motive are derived from Gary Marchionini’s work on exploratory search (2006); the casual element has been more recently studied by David Elsweiler and colleagues (2011):

  • Casual: Undirected activities with the goal of having fun or killing time rather than completing a task.
  • Lookup: Retrieving a simple fact. It is a short-term motive, with few queries and little time needed to resolve the information need.
  • Learn: Information gathering to gain literacy on a given topic. It is medium term in nature, requiring a greater number of queries and a greater amount of time than the lookup motive.
  • Investigate: Long-term research and planning geared toward becoming a semi-expert in a given topic. It is a long-term commitment that demands a significant investment of time and effort.

Figure 8.3 a, b, c, and d Examples of search motive. (A) The notification screen of Path (a social network) can facilitate the casual motive. (B) Textual search results on Wikibot—a Wikipedia app for iPhone—represent the lookup motive. (C) Product reviews on CNET help satisfy the learn motive. (D) Mendeley’s personalized library of academic papers represents the investigate motive.

The search type dimension, on the other hand, is concerned with the genre of the information being sought (Figure 8.4). Broder (2002) is often cited for recognizing the informational and transactional nature of many needs;1 the geographic and personal information management goals have been identified by Church and Smyth (2009):

  • Informational: Textual information about a topic.
  • Geographic: Points of interest or directions between locations.
  • Personal information management: Private information not publicly available.
  • Transactional: Action-oriented rather than informational goals.

Figure 8.4 Examples of search type. (A) Google excels at meeting informational type needs. (B) Yelp helps users satisfy their geographic type needs. (C) Greplin enables users to search their own personal information. (D) Groupon demonstrates transactional type needs.

Sohn and colleagues (2008) and Church and Smyth (2009) have each conducted diary studies in which smartphone-equipped adults were instructed to record every information need that arose over a period of weeks. This research—along with the motive and type dimensions—enables us to populate a matrix of mobile information needs (Figure 8.5).

Figure 8.5 A matrix of mobile information needs.

  • Informational
    • Window shopping. “I don’t know what I want. Show me stuff.”
    • Trivia. “What did Bob Marley die of, and when?”
    • Information gathering. “How to tie correct knots in rope?”
    • Research. “What is Keynesian economics and is it sustainable?”
  • Geographic
    • Friend check-ins. “Where are Sam and Trevor?”
    • Directions. “I need directions to Sammy’s Pizza.”
    • Local points of interest. “Where is the nearest library or bookstore?”
    • Travel planning. “I need flights, accommodations, and sights for my trip to Italy.”
  • Personal Information Management
    • Checking notifications. “Email update for work.”
    • Checking calendar. “Is there an open date on my family calendar?”
    • Situation analysis. “What is my insurance coverage for CAT scans?”
    • Lifestyle planning. “What should my New Year’s resolutions be this year?”
  • Transactional
    • Act on notifications. Mark as read, delete, respond to, etc.
    • Price comparison. “How much does the Pantech phone cost on AT&T.com?”
    • Online shopping. “I want to buy a watch as a gift. But which one?”
    • Product monitoring. “I know the make and model of used car I want. Alert me when new ones are listed.”

Context

  • Task:This argument still holds true for mobile users, but with a crucial twist; rather than being driven by an intrinsic task, mobile information needs are more likely to emerge from the context of the user’s present activity. Cooking, for instance, is likely to produce a need for recipes or measurement conversions, while repairing a bicycle might trigger a need for how-to information.
  • Physical:The two subcomponents of physical context—time and space—are central to the mobile experience. The available time, for instance, dictates whether an information need can be fulfilled immediately or whether it must be postponed. Though time is often a limitation, it can also provide opportunities: “in between” times, as brief as waiting at a crosswalk for the pedestrian signal to change, can prompt users to engage in micro sessions of casual information seeking such as checking notifications.
  • Social:Mobile devices are often used in the presence of other people. Though sometimes used inappropriately—checking messages at the dinner table, for instance—mobile devices are many times used as conversation enhancers (Cui & Roto, 2008). This usage often precipitates the “trivia” category of information need identified earlier. Although social situations can discourage the use of mobile devices, especially for substantial periods of time, they nevertheless commonly spark new information needs.
  • Environmental:“Dead zones” lacking connectivity such as elevators or metro trains disrupt users’ activities; slow connection speeds force a trade-off between inefficient task completion at present, or more efficient completion later; limited or pay-as-you-go bandwidth incentivizes users to respond only to vital information needs that can be accomplished with limited data transfer. In other words, connectivity is a factor that often prohibits information needs from being satisfied when they arise.

Mobile Design Principles

Content trumps controls

The primary search screen of a mobile application should be focused on the clarity of search results; bells and whistles must take a back seat (Figure 8.7). Mobile users, after all, often use their devices for short bursts of time, enter fewer queries per search session than do desktop users, and often seek answers to simple, lookup-based information needs. These realities suggest that navigation bars should be kept to a minimum, filtering and sorting displaced off-screen, and pagination controls omitted so that the search results receive as much screen space as possible.

Figure 8.7 Kayak.com’s mobile website—with four rows of controls and a large advertisement—clearly fails to adequately prioritize its search results.

Answers over results

In addition to minimizing search controls and emphasizing content, focusing on precision over recall can make search more efficient for mobile users with lookup information needs.

Providing direct answers to users’ lookup queries can make the mobile search experience more efficient still. Rather than force users to click on a search result to discover straightforward facts, such as “director of third man movie” (Figure 8.8), a more desirable approach is to provide a computed answer directly on the search page, eliminating the need for further action.

Figure 8.8 Google sometimes provides direct answers to the user’s query.

Cross-channel continuity

Every business recognizes the value of consistency across channels: customers benefit from a coherent, holistic experience in which the learning from one channel can be applied to all the rest. A user familiar with Amazon on the desktop will instantly recognize the similarity of Amazon’s mobile application, for instance. But although consistency ensures the learnability of each channel, continuity makes it personal. Continuity is adding an item to the shopping cart via a desktop computer and having it appear in the shopping cart on your phone; it’s saving a search on your phone and returning to it later on your tablet.

Continuity between channels can enhance the figure-it-out-later approach often taken by users, as well as reduce the number of information needs that fall through the cracks. For starters, search history should be synchronized across devices so that inconclusive information seeking can be easily completed later. What’s more, facilitating saved searches that can be accessed from every channel enables users to organize and return to important, ongoing information needs (Figure 8.9).

Figure 8.9 Zillow allows users to save searches but fails to synchronize them across devices.

Mobile Design Solutions

But before getting started, it’s helpful to agree on a vocabulary for describing the common layout components of a mobile application.2Figure 8.10 illustrates the following three regions:

  • Status bar. The thin top-most bar indicating signal, time, battery life, and other information.
  • Navigation bar. The dominant bar often containing a title and back button.
  • Toolbar. An optional bar for additional controls, located at either the top or bottom of the screen.

Figure 8.10 Anatomy of a mobile layout.

The search box

There are at least three common approaches to displaying the search box, each with advantages and disadvantages (Figure 8.11):

  • Within the navigation bar. Maximizes space efficiency and places strong emphasis on search. Use when search is the dominant action of the application.
  • n a secondary toolbar. Retains emphasis on search, but leaves less room for content. Consider this approach when search is a dominant action and when placing the search box within the navigation bar is not an option.
  • Via a pull-to-reveal gesture. Because the search box is hidden by default, this approach maximizes the available screen space but makes search more difficult to discover. This method is a good choice when search isn’t the primary action.

Even when the search box is in a secondary toolbar—as in the Pinterest iPhone app (Figure 8.12)—it’s common practice to hide other navigation bars once the user taps the search box. This both provides greater focus on the search task, and allows more space for presenting as-you-type suggestions.

Figure 8.11 Three approaches to displaying the search box: (A) within the navigation bar, (B) in a secondary toolbar, or (C) via a pull-to-reveal gesture.

Users have come to expect as-you-type suggestions as an integral part of the mobile search experience. Small mobile devices typically devote all of the screen space not consumed by the top bars and onscreen keyboard to presenting search suggestions (Figure 8.13), and tablet devices often use a popover for this same purpose (Figure 8.14). All three types of as-you-type suggestions outlined in Chapter 5—autocomplete, autosuggest, and instant results—apply equally well to the mobile environment.

Figure 8.13 Three types of as-you-type suggestions. (A) DB Navigator provides autocomplete on train station names. (B) Google Search provides autosuggest. (C) Nutshell delivers instant results.

Figure 8.14 Tablet applications, such as Thomson Reuter Marketplace app, often present as-you-type suggestions in a popover.

Nontextual input methods

Location is the most obvious form of nontextual input enabled by mobile devices.

Figure 8.15 Example of location input at (A) Zillow, (B)Rightmove.co.uk, and (C) Yelp, which all provide a “Current Location” link within the as-you-type suggestions.

Apple, Google, and Microsoft all provide mobile voice-activated searching in one form or another (Figure 8.16). In addition to spoken input, applications such as SoundHound can listen to music playing in the surrounding environment and retrieve information about the song.

Figure 8.16 (A) Siri on the iPhone and (B) Voice Search on Android both allow users to speak their queries; (C) SoundHound retrieves song information on the music playing in the background.

In addition to location and audio input, connected cameras mean that visual information can also be harnessed for searching (Figure 8.17).

Figure 8.17 (A) QRReader turns QR codes into URLs; (B) Amazon scans barcodes to pull up exact matches; and (C) Google turns images into textual queries.

Drawn shapes, made possible by the advent of touchscreens, provide a final form of non-textual input. The most common use of finger-drawn figures is to add a bounding box around a region on a map, illustrated by Zillow in Figure 8.18. ChemDoodle, also shown in Figure 8.18, allows users to construct molecular diagrams that can then be used as a query, demonstrating the potential of shape input in scientific settings.

Figure 8.18 (A) Zillow allows users to draw an area on the map in which to constrain their search, while (B) ChemDoodle enables users to visually compose molecular compounds that serve as the query.

Viewing search results

Regardless of how the query was originally constructed, the results for that query must be presented in one of several formats (Figure 8.19). The most common display methods are:

  • List. Lists provide the most space for titles, descriptions and metadata, but deemphasize the visual and geographical dimensions of the results. Lists are effective at helping users quickly peruse the textual information of numerous results.
  • Grid. Image grids provide a strong visual emphasis but lack the space to accommodate much textual information. They’re efficient when the content is predominantly visual.
  • Map. Maps are ideal when location is the most important characteristic of the search results, though they’re more difficult to systematically review than are lists or grids.
  • Augmented Reality. Still an immature medium, augmented reality (AR) uses the mobile device’s camera and screen to superimpose information onto a representation of the surrounding environment. AR is especially useful for providing directions.
  • Voice. The other four formats are visual, but it’s not always possible to look at a screen. Activities such as driving, as well as disabilities such as visual impairment, call for a purely verbal rendition of search results.

Figure 8.19 Search results presented as (A) a list on Toptable, (B) thumbnails on Etsy, (C) map pinpoints on Yell, and (D) augmented reality on Yelp.

As such, it’s often necessary to provide controls for toggling between display formats (Figure 8.20). Four common solutions to toggling the display format include:

  • A full-width segmented control in a toolbar. This approach allows for the greatest number of labels (three or four) but eats into space that could otherwise be used for content.
  • A compressed segmented control centered in the navigation bar. With room for two or three labels, this method avoids the need for an additional toolbar but demands that the search box be hidden off-screen.
  • A single button in the navigation bar. Though it can only toggle between two display formats, it’s the most concise control of the three.
  • Tabs. Though a ubiquitous pattern on the Web, traditional tabs are rarely seen in native mobile applications (excluding, of course, the bottom “tab bar” convention in iOS). However, it’s still a valid approach, especially for web-based apps that don’t attempt native resemblance.

Figure 8.20 Common approaches to toggling between display methods: (A) a full-width segmented control in a toolbar, (B) a compressed segmented control centered in the navigation bar, and (C) a single button in the navigation bar.

Refining the query

Foodily, as shown in Figure 8.21, actually provides two different types of query suggestions: first suggesting modifier terms to add to the existing query (words like “quick” and “gluten free”), followed by related searches that alter the query more drastically. This method lives up to the criteria of providing support without detracting from content.

Figure 8.21 Foodily provides two forms of query suggestions below the list of search results: modifier terms and related searches.

The first decision that must be made is whether faceted navigation or sorting should be provided on the primary search screen or whether they should have a dedicated view of their own. Adding them to the main screen would typically involve adding a toolbar containing either a segmented control (for either sorting or top-level categories) or horizontally scrollable capsules representing a facet (Figures 8.22 and 8.23).

Figure 8.22 (A) A segmented control for sorting, (B) a segmented control for top-level categories, and (C) scrollable capsules representing a facet.

Figure 8.23 (A) eBay uses a segmented control for choosing between top-level categories, and (B) REI uses scrollable capsules to display filters.

A less crowded approach is to dedicate an entire screen to sorting and faceted navigation (Figure 8.24).

Figure 8.24 A dedicated refinement screen for sorting and filtering.

Reserving an entire screen for faceted navigation can accommodate numerous controls without compromising the search results screen. Such dedicated panels are usually activated by a button on the main screen containing the word “Filter,” “Refine,” or an equivalent icon (Figure 8.26), though gestures can also be used to reveal and hide the controls. TwigKit’s web-based search user interface shown in Figure 8.27, for example, reveals faceted controls in a side panel that can be opened and closed both by tapping a button, as well as through left/right swipe gestures.

Figure 8.26 Filter/Refine buttons on (A) eBay, (B) Yelp, and (C) Airbnb.

Figure 8.27 TwigKit’s faceted navigation sidebar can be accessed with either a button or through a swipe gesture.

Although dedicated control panels are often ideal on smartphones, presenting a full screen of knobs and dials on much larger tablet devices would likely be overwhelming. Instead, tablets often take advantage of popovers (Figure 8.28) to display refinement options (in fact, the popover often contains the very same view presented on phone-sized devices).

Figure 8.28 Toptable’s iPad app uses a popover present refinement options.

Last of all, breadcrumbs help users keep track of their query and applied filters, as usual. Unlike on the desktop, however, mobile breadcrumbs need not be clickable; devoting finger-size touch targets to breadcrumbs could drown out the content. Instead, mobile breadcrumbs should be small, but legible (Figure 8.29). Users can always interact with the refinement panel to remove or alter any unwanted filters.

Figure 8.29 Mobile breadcrumbs should be legible but don’t have to be clickable.

Three Circles of Collaboration

Figure 9.1 Three circles of collaborative search: the inner circle, the social circle, and the outer circle.

The inner circle

The inner circle forms the nucleus of collaboration. It is made up of one or more active participants with a shared work task—that is, a shared personal or organizational goal (Järvelin and Ingwersen, 2004). This shared goal provides the underlying motivation for inner circle collaboration: working together requires less effort from each participant than if he or she were approaching the task alone.

The inner circle is characterized by a shared work task, but the information needs of each participant need not be identical. Collaborators may adopt a divide-and-conquer strategy in which each participant is assigned a subtask and must report his or her findings back to the group (Morris, 2008).

Alternatively, some inner circles may take a brute force approach, with each participant doing his or her own, uncoordinated research and then comparing notes later (Morris, 2008).

Last, collaborators may choose a backseat driver method when physically gathered around a single display (Morris, 2008).

The social circle

Each collaborator within the inner circle is likely also connected with a number of wider social groups. Often organized around a shared interest (e.g., scuba diving), job role (e.g., UX design), or place (e.g., the London office), these social circles can be pictured as layers surrounding the inner circle.

The outer circle

Both the inner and social circles reflect an explicit, intentional form of collaboration between individuals who share some degree of social connectedness. The outer circle, on the other hand, is the realm of implicit, unintentional collaboration, predominantly amongst strangers.

One form of implicit collaboration involves using clickthrough data—the number of times a given search result has been clicked—to influence the ranking of search results, as Fane Tomescu experienced.

Indeed, recommender systems also rely on behavioral cues. One technique they often employ is collaborative filtering (Goldberg et al., 1992), which most often works by grouping together similar users based on the content they’ve viewed, purchased, or rated and then providing a set of recommendations to all the users within that group.

Stepping back

In particular, we should compare this three-circle model with the dimensions of collaboration that have been enumerated by others, namely:

  1. Intent: explicit versus implicit (Morris & Teevan, 2008)
  2. Concurrency: synchronous versus asynchronous (Rodden, 1991)
  3. Location: co-located versus remote (Rodden, 1991)
  4. Means of interaction: human-centric versus document-centric (Hansen & Järvelin, 2005)

Designing for Inner Circle Collaboration

Social objects

A fundamental purpose of the shared workspace is to host collected items meaningful to the inner circle. Transforming these saved web pages, documents, photos, and videos into social objects—by facilitating such interactions as ratings and annotations, for instance—provides an important channel for inner circle collaboration.

Quick add

Of course, in order for a social object to appear in the inner circle’s shared workspace, someone must put it there. Saving an item to the workspace is the most critical action of collaborative search and the greatest barrier to entry. It must be as painless a process as possible, lest users decide it’s not worth their effort.

Instant communication

In addition to collaborating around social objects—the output of search—collaborators also strive to work together during the process of search. Because inner circle collaborators share a common work task, facilitating real-time communication is vital.

Persistence

Often, inner circle collaborators participate at different times, asynchronously searching, communicating, and sharing objects. Collaborative search tools should support this common occurrence by persisting the shared workspace over time.

Designing for Social Circle Collaboration

Direct communication

Identifying precisely the right person to contact leads us back to a classic search application: the staff directory (Figure 9.14).

Figure 9.14 People search in Microsoft SharePoint.

Social networks

Key to their success, however, is the ability to thread—that is, to facilitate multiple groups, each with its own timeline (Figure 9.15). Such threading allows users to efficiently allocate their attention by, for example, vigilantly following the groups most meaningful to them, yet not fretting if they miss a few posts from peripheral threads.

Figure 9.15 A group thread in Yammer, an enterprise social networking tool.

Communities of practice

LinkedIn, the social networking site for professionals, allows its users to set up forum-like groups that others can join (Figure 9.16). Group members can post messages to the group and respond to other people’s posts. With no other constraints or incentives in place, some LinkedIn groups function primarily as venues for self-promotion.

Figure 9.16 The Enterprise Search Engine Professionals Group on LinkedIn.

To begin with, every user’s reputation score—a measure of community trust that increases with participation—is displayed next to his or her name alongside the number of badges he or she has collected (Figure 9.17). What’s more, users unlock a range of “privileges” when their reputation score hits certain thresholds, giving them increased authority in the meritocracy. These elements of gamification—a term that describes making nongame applications feel game-like—can help make communities of practice more engaging and objective while still providing a healthy incentive for participation.

Figure 9.17 A user profile bursting with flare on UX StackExchange, a sister site of Stack Overflow.

Designing for Outer Circle Collaboration

To succeed at outer circle collaboration, companies must earn the trust of users by observing two vital principles: be transparent, and give users control.

Transparency

Figure 9.18 Bing inserts Facebook-influenced results under a clearly labeled heading.

Figure 9.19 Social news site Digg displays numerous social indicators: votes, likes, tweets, and comments.

Control

Figure 9.20 Google’s “search, plus your world” features add greater user control over personalized search results, but don’t go far enough.

Figure 9.21 Amazon allows users to fix inaccurate recommendations.

3.Designing the Future

10.Cross-Channel Information Interaction

The Postdesktop Era

From searching the Web on his desktop to browsing a print catalog, and from asking for advice from a friend via his phone to trying on jackets in the Oxford Street store, Amir’s journey flowed coherently from one channel to the next. The channels were optimized, with each channel playing to its own strengths; they were consistent, following similar organization patterns; and they were continuous, propagating actions from one channel to all the rest (Morville, 2011).

Figure 10.3 While probably a bit shy of the fictional 20-story

Optimization

Figure 10.4 The first iPod embodied a division of labor between the iPod, computer, and iTunes software.

The division of labor between the iPod, iTunes, and the Mac enabled the three to collectively achieve more than they could have on their own. This is the principle of optimization at work. Each channel within the ecosystem should focus on what it does best.

Consistency

The principle of optimization is focused on each component playing to its strengths; yet we must also ensure that the ecosystem as a whole provides the user with the best possible experience across its many parts. To accomplish this goal, local optimization must be paired with global consistency.

The realm of consistency

Let’s consider the EveryWare mobile phone application in Amir’s story. It could be evaluated internally (are the elements within the application consistent with one another?); locally (is the EveryWare application consistent with other applications built for the same mobile operating system?); and externally (is the mobile application consistent with the other channels within the EveryWare ecosystem, such as their catalog, website, and store?).

Figure 10.5 The three realms of consistency are analogous to creature, habitat, and ecosystem.

To summarize, the three realms of consistency we’ve looked at are:

  • Internal consistency. Do the constituent parts of the creature itself (a mobile application, for instance) work together harmoniously?
  • Local consistency. Does the creature live agreeably with its neighbors in the immediate habitat (such as other mobile applications built for the same platform)?
  • External consistency. Does the creature work harmoniously with its allies in the ecosystem (for example, other channels such as the website and store)?

The nature of consistency

To recap, the four natures of consistency that we’ve considered are:

  • Function. The purpose of the object. (The function of a retailer’s Android mobile application, for instance, might be to enable users to shop when they’re away from their computers.)
  • Behavior. How it feels. (The retail app feels like a native Android app rather than a website or iPhone app.)
  • Organization. How it’s organized. (The mobile app’s information architecture.)
  • Aesthetics. How it looks. (The visual style of the application.)

Designing with consistency in mind

It’s a difficult challenge to be sure—the internal, local, and external realms are each in competition for a bigger slice of the functional, behavioral, organizational, and aesthetic pies. Yet coherent cross-channel experiences are contingent on finding the right balance. Although the ideal mix is unique to each situation, there are a few general guidelines:

  • The function of a channel should be optimized for its own comparative advantage; in other words, what it has the potential of doing better than any other channel in the ecosystem. In this way, its function need not be externally consistent, as much as it should be complimentary to the rest of the ecosystem.
  • There is a behavioral tension between the local habitat—be it website conventions or operating system patterns—and the process flows of the ecosystem. Great effort should be exerted to reconcile these differences. Where perfect integration isn’t possible, erring on the side of local consistency is often the more conciliatory approach.
  • Organizational consistency should almost always favor the external ecosystem over the local or internal. Using a consistent organizational scheme across all channels of the ecosystem is one of the most important factors in delivering a coherent cross-channel experience.
  • Aesthetics has major implications across all three realms. It should certainly maintain internal consistency. Yet there is again a tension between the local habitat and external ecosystem that must be carefully negotiated. Although the visual aspects that involve branding (such as color) should be consistent with the ecosystem, the overriding style of the user interface should match its local habitat.

Continuity

Figure 10.6 Amazon’s Kindle ecosystem—consisting of both their own devices, as well as software that runs on third-party devices—puts continuity into practice by delivering the user’s entire library to any device and even synchronizes their current page.

The Cross-Channel Blueprint

Follow these four steps to create your own cross-channel blueprint:

  1. Identify user actions. What are the actions that users desire to perform throughout the ecosystem as a whole? The zoom level can vary: high-level user goals offer a succinct overview, and low-level tasks provide completeness.
  2. List the channels. What channels compose (or will compose) the ecosystem? Think both digital and physical.
  3. Prioritize and describe each channel-action. Once the user actions and channels have been identified and placed on the two axes of the blueprint, determine the priority that each action should receive for a given channel. At the same time as setting priorities, also briefly describe how each action would be achieved.
  4. Identify shared components. As a last step, think about the behind-the-scenes components that will be necessary to empower each user action. Stacking these shared components in the final row of the matrix will help tie the user experience vision to the reality of the underlying technology.

Figure 10.9 A cross-channel blueprint.

The cross-channel blueprint provides several benefits once it has been developed:

  • A global view of important user actions
  • The possible channels through which users might attempt those actions
  • A set of action priorities for each channel
  • A set of channel priorities for each action
  • An overview of which components need to be shared across channels

Experience Maps

Experience maps are the ideal companion to the cross-channel blueprint. The latter is a canonical representation of the system and its parts; the former provide experiential stories of how users interact with the system’s components to accomplish their goals.

Sometimes called a customer journey map—a reflection of the tool’s origin in service design—the experience map helps us put ourselves in the user’s shoes, customer or otherwise. Experience maps visually represent not only a user’s interactions with the system but are also concerned with the emotional state of the user throughout the entire process (Figure 10.10).

Figure 10.10 An experience map.

Follow these three steps to create a map of your own:

  1. Outline the user’s journey. Start by creating a list of all the occurrences that constitute the user’s experience—not just within the ecosystem, but throughout the entire journey from beginning to end. These occurrences can then be arranged horizontally to form a timeline.
  2. List the channel and goal for each step of the user’s journey. “Channel” refers to the medium through which the action is performed. “Goal” describes the underlying motivation for performing the action. These components should be consistent with the channel and actions dimensions of the cross-channel blueprint.
  3. Describe the user’s emotion and rate his or her satisfaction for every step of the process. In order to be useful, however, such reporting should be based on first-hand observation of the user.