Humans began using pigments such as ochres and iron oxides for colorful body decoration around 400,000 BCE. It took us a bit longer to invent written language (about 5,500 years ago). Since then, we've been creating and combining images, symbols, and words to communicate ideas and meaning. We've had time to practice design.
Of course, time is the last thing we have when users visit a search interface. In the first 250 milliseconds, the preattentive variables of size, shape, position, alignment, orientation, color, and texture have already worked their magic. A well-crafted interface reveals its core features and layout to our subconscious before we have time to think.
This magic doesn't occur naturally. Great interfaces require talented designers who know how to use visual hierarchy to organize information and guide action, and who appreciate the importance of detail. For instance, early versions of Google's spellcheck stated, "If you didn't find what you were looking for…" at the top of the page, along with the suggested spelling. Nobody noticed it, so Google tested shorter variations such as, "Did you mean:" above and below the results—and use increased dramatically.
Designers must also be sensitive to context. In music, for instance, the animated 3D interface of Cover Flow makes sense. It's fun to flip through colorful covers while listening to and searching for our favorite songs and albums. But this sexy design enjoys limited play in other categories. It certainly doesn't belong in web search, where simplicity and speed are so vital. As Google's user experience director, Irene Au, explains:
"A lot of designers want to increase the line height or padding in order to make the interface 'breathe.' We deliberately don't do that. We want to squeeze in as much information as possible above the fold. We recognize that information density is part of what makes the experience great and efficient. Our goal is to get users in and out really quickly. All our design decisions are based on that strategy."[12]
This statement reveals an important dimension of design. We can't be concerned solely with how an interface looks. As Steve Jobs famously remarked, "Design is how it works." Visual design shapes the first impression and has a lasting impact, but the halo effect carries the tune only so far. Interaction design is the missing link that lets the rough edges between user and system dissolve in behavior. It's a discipline essential to flow. And it's a practice that's relatively new—although we've made tools for over a million years, we've been making interactive software for less than a century. That said, we've made a good start at defining first principles, and many of them apply directly to search.
We can accomplish amazing feats once we overcome fear and inertia at the start line. But oftentimes we don't start. We're overwhelmed by the enormity of a task or confused by the complexity of an interface. These feelings are so widespread that we collect idioms for inspiration. Get the ball rolling. Rome wasn't built in a day. A journey of a thousand miles begins with a single step. Don't make me think! Designers should heed these words, because search is a terribly common place to stop. A complex interface hits like a brick wall. Not only does it make users think, but it also makes them feel stupid, and that's the kiss of death. So, we must recall the paradox of the active user and allow users to start small, with a keyword or two. Input hints or prompts near or within the box should show the what and the how of search, and the box should boast autocomplete and a forgiving format. Why should users worry about spelling and syntax when that's our job?
Let's get them started with good defaults and keep them moving with facets, filters, and intriguing branches. We must also support safe exploration by enabling undo, so users can modify parameters, step back, or start over. We must work hard to lower search costs and reduce barriers to entry, because search isn't iterative and interactive when users stop before they begin. People will build great queries incrementally, one click at a time, if we can get them past the start line and always offer at least one next step.
Experience with a tool or task often shifts the optimal balance of power and simplicity. To begin, users don't want to be overwhelmed with features. But with time, more advanced options may be desirable. So, progressive disclosure defers these powerful or specialized features to a secondary screen, making software easier to use and learn. We must design applications that require the least amount of physical and mental effort, using contextual tools like hover-reveal to offer an invitation without cluttering the interface.
Google Maps offers a good example of progressive disclosure and careful adherence to the user dictate: "Show me only what I want." The initial interface is a basic map with an overlay for popular tasks like getting directions. A click adds a colorful traffic layer and a hover reveals more options. Google designs disclosures that are responsive to users.
Faceted navigation is a similarly progressive design pattern. Users can begin with a few keywords and end with a few results. They can ignore the facets if they choose, but the power of incremental query refinement is available, plus the quantity and specificity of metadata fields often snowballs helpfully as they go. Facets allow people to learn search on gentle slopes rather than being forced into the big step from the bunny hills of the basic interface to the black diamond mode of advanced search.
In general, even though progressive disclosure may suggest the use of modes to prevent specialized features from cluttering the basic interface, we must take great care when introducing distinct system states like advanced search. Modes often lead to mode errors in which users forget the current state, attempt an action belonging in another mode, and get an unexpected result. These are not insurmountable problems, but it's often easiest for everyone to rally around a modeless interface. Similarly, it's best to add flexibility with support for deferred choices. Let the user search and then log in without losing results. Offering many paths to the same destination effectively supports both incremental construction and progressive disclosure. We get two principles for the price of one.
Poor performance will turn any interface into a train wreck. Flow requires feedback, early and often. A few years ago, results were the only reply. Our goal was a subsecond response. Now, with autocomplete and autosuggest, the results may precede the query. How's that for timely feedback? Of course, our systems can't always deliver, in which case we rely on animations, cinematic effects, and other visual transitions to indicate progress and enhance engagement. But while transitions advance the perception of performance, they're no substitute for speed, which can improve even a mediocre system by enabling iterative, interactive query refinement in response to results.
Volkswagen UK employs a wonderfully subtle form of feedback. During active control of a slider, the options to be excluded from the results fade to gray. Then, upon release of the mouse button, the faded options disappear, and the remaining cars gracefully shift into position within the smaller result set. It takes a while for this rich Internet application to load, but once running, it's a smooth ride with great performance and quick response.
For many applications, the optimal view differs by user and task. One size does not fit all. This is certainly true in search, where the ideal mix of metadata depends upon user intent. A linear list of results rendered in text may work for quick lookup, but comparison shopping merits a tabular presentation with images. Conversely, the search for cooccurrence invites a geographic map with symbolic data overlays. Since we can't always employ the query to accurately interpret intent, it's important to provide the user with choices.
Viewzi takes alternate views to the extreme. This intriguing application provides the basic choice between small and large images, but it doesn't stop there. Viewzi offers more than 18 different ways to view search results. Options include simple text, image grid, timeline, tag cloud, and a fashionable cover flow interface for browsing web screenshots. It's not a model that most should emulate, but it does get us thinking about the layouts and lenses we might offer our users.
Sort order also provides users with the choice of alternate views. Since users rarely explore beyond the first page of results, sorts act much like filters. When we sort by most popular or best rated, we effectively limit our view by that criteria. On the other hand, we sometimes sort by date or title so we can quickly scan the list for a known item. Sort order is a relatively easy way to provide users with flexibility and control.
Another alternate view worth reflection is that of those who can't see. As with other features of an application, search should be universally accessible. Clearly, this means that search and result interfaces must be easy to navigate with text-to-speech and Braille output screen readers. It's also worth considering the content. Google's Accessible Search, for instance, relies upon signals in HTML markup to identify and prioritize search results that are easier for blind and visually impaired users to use. As designers, we must make content and functionality accessible by adhering to the layered strategy of progressive enhancement (or the inverse principle of graceful degradation). It's our responsibility to offer multiple paths to the same information to provide all users with freedom and to serve those who lack the basic options many of us take for granted.
For most applications, predictability assures usability. Effectiveness, efficiency, and satisfaction generally follow when users can accurately predict what will happen next. In search, we need predictable features and results. Controls must be easy to discover and understand. The Gap, for instance, uses a simple hover invitation to feed-forward the Quick Look feature, which leads to an overlay instead of the detailed product page. Since the invite appears in the natural flow of result selection, it's impossible to miss.
In contrast, Bloomberg's rotate-to-view feature is less discoverable, but once found it works well, because it's simple and consistent. When a gesture works the same way throughout an application, habituation improves efficiency. Users become comfortable with that gesture and know what to expect.
Consistency of placement is also important. When people use controls, they find and recognize them by location. So, in designing search and result interfaces, we must respect the power of spatial memory and position controls and widgets consistently.
Of course, search only works well when results are predictable. First, the box must do what's expected by responding with the right results in good order. Second, each result must offer sufficient scent through the right mix of metadata so that users can sense its aboutness. We can't have people wondering what's hidden behind door number one.
Recognition is triggered by context. We're quite good at it. With the radio on, we can sing the lyrics to thousands of songs. Recall works without context. At this, we're terribly bad. With the radio off, our memories fade to black. This imbalance is shared across our senses, and it's a huge factor in design. It's a major reason why we shifted from CLI to GUI. Users couldn't recall commands, but they could easily recognize buttons and links.
In search, the first step is to make valuable options visible. Otherwise, users forget what they can do. This requires compromise with progressive disclosure. We need just the right balance between show and hide. Second, we must offer tools that reduce users' short-term memory load. Amazon is the best in this department. While searching, users can use a shopping cart, shopping list, and wish list as their personal memory managers.
But Amazon further boosts our memories by thinking outside the box. Users can drag the universal wish list button to their browsers' toolbars, and then add items to wish lists while exploring any online store. Even better, while out and about in the physical world, users can tap the Remembers feature of Amazon's mobile application to snap photos of anything they wish to remember. If the object is a product, Amazon will try to find it and send an email alert with a link, then show it on the home page the next time the user visits. It's a truly amazing feature that makes it almost impossible to forget what we intended to buy.
Of course, sometimes the path to better recognition in search is browse. Search requires that we know what we want and have the words to describe our needs. In contrast, browse illustrates what's available, shows the vocabulary, and reminds us of things we might need.
In mobile, browse is especially useful, because it takes time to type and we're unsure what to search for. Applications like Where and AroundMe don't require users to remember the types of things to be found. Instead, we can browse the map or a traditional taxonomy. We may not recall what we want, but we'll recognize it when we see it.
In light of our feeble memories, not to mention our general impatience and intolerance for change, it's often best (when possible) to stay on the page. Modern applications usually offer such conveniences as same page error messages, edit in place, and contextual help. Overlays, inlays, tabs, virtual scrolling and panning, and inline paging are all creative ways to bring additional content and controls into the picture without shifting the frame.
Netflix takes convenience a step further. In addition to a detail overlay, Netflix serves up actionable results, so we can add items to the Instant Queue or start playing a movie, all without leaving the results page. The controls and features move so we don't have to.
Yet another factor in the success of GUI is the principle of direct manipulation. Interfaces that enable users to interact directly with visible objects are more easily learned and used. Sometimes we rely on real-world metaphors. We sort files on the desktop and drag them into the trash can. Other times, our idioms have no analog, yet direct manipulation drives them into our muscle memory. Our bodies remember what our minds forget.
At first blush, search has little room for direct manipulation. After all, isn't the box ground zero for the triumphant rebirth of the command line? But upon reflection, we find opportunities for tangible results. For instance, Searchme lets users drag results into custom search stacks for later review or for sharing with friends and colleagues. There's also an Add to Stack link, but it lacks the visual and tactile gratification of drag-and-drop.
However, the link also lacks the problems of drag-and-drop. The perceived affordance of the link is clear. Predictability is high, and it favors recognition over recall. In contrast, there's no perceived affordance to indicate the results are draggable. Searchme fails to provide a self-describing drag handle. It does a better job with the transition and drop zone. Upon result selection, the stack area lights up and the result spins and shrinks until it's dropped into place. But this introduces another challenge. The use of drag-and-drop invokes Fitts' Law: the time to acquire a target is a function of the distance to and size of the target. This means we must think carefully about the size and placement of the drop zone. Many users have a hard time getting the mouse (and cursor or drag handle) into just the right place, especially while holding down the mouse button.
The pie menu (also known as a radial menu) is an interesting alternative. A music search engine named Songza illustrates the benefits. First, it's self-revealing. When a user clicks on a result, the menu appears. Second, it plays well with Fitts' Law. The options, including those within the nested menus, are near the original point of interaction. Third, it's a gestural interface with the advantages of direct manipulation. Expert users can rely on muscle memory to select options without glancing at menus.
Of course, we must consider how these principles of design interact. For instance, the pursuit of direct manipulation may compromise accessibility, or our basic controls may simply fail the power user. It's a constant balancing act that can only be done in context.
In design, context is a seven-letter word that means everything. It's not enough for our applications to work great in the lab; they must succeed in the real world. This means we must consider users, goals, content, features, platform, and environment. An elderly man with fat fingers may have a hard time using the tiny touch targets of a soft keyboard to search for a nearby restaurant while bouncing on a bus. That's why the iPhone employs iceberg tips and adaptive targets to make writing a little easier. It's also why Google Mobile uses search history, autosuggest, and voice search to let us type a little less.
Of course, we're all making it up as we go along. There's no sheet music for what we do, since each context requires a new song. Interaction elements and design principles afford us a basic grammar and vocabulary. We can even string together a lick here and there by drawing upon established patterns of design. But, at the end of the day, innovation requires improvisation. We won't find flow, get in the groove, or create designs that dissolve in behavior without embracing the risk of new rhythms. As Louis Armstrong once noted, "Never play a thing the same way twice." It's time we put the jazz in design.
[12] "Google's Irene Au: On Design Challenges," Business Week (March 18, 2009), www.businessweek.com/innovate/content/mar2009/id20090318_786470.htm.