Despite the ubiquity of search behavior, and well-established conventions for presenting search results, I still see plenty of cumbersome, confusing search tools out there. The most egregious tend to be from B2B rather than B2C sites — because usability isn’t directly tied to the bottom line — but they still cost the company in lost productivity and employee morale. (After all, who can really enjoy a job that requires them to endlessly interact with hostile software.)

This article is my attempt to collect the most important elements of a successful search UI. There are certainly more than 10 guidelines — add yours in the comments!

First, a point of clarification. The word “Search” is used pretty loosely these days to refer to any aspect of looking for something on a site. Technically, there are two components of looking for something: search, in which the user types in a phrase in their own words; and browse, in which the user opens links to product categories or uses a faceted search interface to sculpt their own set of search results. This article addresses the most common scenario, which is a search results page that shows search and/or browse results together.

Smart keyword search

1 For keyword search, offer autocomplete. By looking up the user’s query as she types it, this approach guides her to the right terminology and increases her chances of success. Everyone’s familiar with the most basic version…

…but a drop-down isn’t the only way to do it. The Home Depot has taken autocomplete to the next level by combining it with a mega-menu to show not just a list of suggestions, but also their context.

2 Keyword searches are a fantastic resource, so make use of it! Look at search logs to find what people are struggling with. This applies to incoming traffic from search engines as well as site search. List the most common search terms and investigate why people are not finding those items right away.

Integrate search form + results

3 Display the search form, filters for refining results, and results data on the same page. This is a convention for most shopping sites, but I still see plenty of sites that present only a search form, with results on a separate page. This forces the searcher to pogostick back and forth between the search form and the results, which makes the task infinitely more time-consuming and irritating. Note that this rule doesn’t apply to a quick-search form (typically located on the site’s home page), which serves as an entry path to the search/browse functionality.

Make search results page more informative

4 At the top of the results list, state how the results list was created. Show how many results there are, and exactly which filters are applied to the list. This includes keyword search terms as well as browse categories.

5 For faceted search/browsing, provide an obvious way to remove a filter once it has been applied (thus broadening the search results again). My favorite approach is to group all filters at the top of the “Narrow Results” panel, with a button for removing them, as in this example from Diapers.com:

6 Pagination tools typically appear at the top and/or bottom of the search results list. Make it very clear how many results are on each page, and how many pages there are altogether. Many sites also allow the visitor to “view all” or at least change the number of results that display per page.

7 Sorting options should be logical and designed to help the searcher understand the results. The labels should relate to the content being searched. For example, it’s not very valuable for the default sort order to be by customer rating if there are no ratings available for the results shown. Most sites offer a combination algorithm as the default sort order (i.e. “Best Match”, “Most Relevant”), which combines keyword relevance, customer ratings, manually adjusted search rankings, etc. Here’s a creative example from Hipmunk, which uses “Agony” as the default sort order:

8 Provide a “new search” or “search again” link that is distinct from refining the current search (see Hipmunk example above).

The product detail page is still part of the search process

9 On the detail page for the product or item, add a “Return to search results” link at the top of the page. Ensure that both this button and the browser’s Back button will return the visitor to the same search results she left! This means that if she was viewing page 3, it returns her to page 3 — with the same sorting, pagination and filtering settings. The surest way to destroy the search/browse experience is to reset the search results every time the user views a product page.

No Results. Go Home.

10 The “no results” message is the most overlooked part of a typical search project, but it can be a very helpful tool to keep visitors engaged and help them find the right product. The best examples use it as a platform to suggest different search terms, and even cross-sell related items.

When the user is in “browse” mode (using filters to refine results), she should never reach a “no results” page. Ensure that all lists of filters contain a result. There should never be a case when a user clicks a category that contains “0 results”.

For keyword search, however, it’s always possible that the index will not recognize the user’s query, even with autocomplete. “No results” is not the end of the conversation … it’s an awkward pause that needs to be dealt with. At the very least, offer a chance to search again, and a few alternate next steps (tech support phone number; links to top categories so the user can try browsing instead).

I hope this was helpful! Read on for a few more resources on creating effective search experiences, and I welcome your comments.

Resources:

• Best Practices for Designing Faceted Search Filters / Greg Nudelman / UX Matters
• Site search best practices / Louis Rosenfeld / Bloug (especially the comments)
• Search Patterns / Peter Morville / Searchpatterns.org
• Advancing Advanced Search / Stephen Turbek / Boxes & Arrows
• Designing for Faceted Search / Stephanie Lemieux / UIE

From IDEO.

Prototyping for Elmo’s Monster Maker iPhone App. from IDEO on Vimeo.

Share/Bookmark

In the case of spaghetti sauce, at least, we cannot always explain what we want. Especially when asked about our preferences, we are more likely to list what is currently known and popular than ask for something that hasn’t yet been done or isn’t widely available (even if that is what we would prefer).

How do you like your spaghetti sauce? Thin, spicy, chunky, traditional …

The point of the talk is variability — one product cannot meet the needs of all users. In the food industry that revelation ultimately led to the 500 kinds of sauce we now face at the supermarket. (See Barry Schwartz‘s talk for more on choice overload.)

Gladwell’s talk was a good reminder to me to stray away from open-ended questions when conducting user research. A question like “What kind of features do you want in this system?” is only going to yield a list of features that are already well-established, even bad ones.

Share/Bookmark

Continued… see the whole scary story on Mint.com.

Share/Bookmark

In UI terms, a lightbox draws the user’s attention to a dialog box, error message, or other design element in the middle of the screen by dimming the rest of the screen.

Yes, the lightbox has some benefits. It shows you an Important Message within the context of the page you were just looking at. It doesn’t get blocked by popup killers. And it looks super-cool, especially when used as a slideshow.

But lightboxes are starting to crop up everywhere. In my Yahoo mail (I hope the developer got paid a lot for that), in half the applications I interact with, even in my own website (OK, I put it there, but that was 2 years ago when it was very cool and cutting edge).

Is anyone else starting to suffer from lightbox fatigue?

Share/Bookmark

Share/Bookmark

PDF is ideal for emailing, but it takes a little work to create a clickable PDF prototype in Visio. Here’s what I discovered.

1. Create hyperlinks on the foreground, not background — and use the document stencil to manage revisions

It’s pretty standard practice when wireframing in Visio to put the standard page elements — header, footer, navigation — on a background page so that these elements automatically repeat on every page. However, when you publish a PDF, Visio doesn’t create hyperlinks from the background layer. For an interactive PDF prototype, the hyperlinks have to live on the foreground pages. This means that for a standard page layout, all the navigational elements have to reside on each page in the wireframe.

You could copy and paste the navigational elements onto every page, but that’s a beast to maintain. Instead, use the document stencil (credit to this explanation at User Experience & Design blog).

Here’s how it works:

• Create a navigation panel, using a distinct shape for each link. For example, to create 5 tabs across the top of a page, make each tab a separate text block.
• To add hyperlinks, press CTRL-K to open the hyperlink dialog. Next to Sub-address (not Address), click Browse and find the page within your wireframe that you want to link to. (Or enter a complete URL next to Address.) Click OK.
• Repeat 1 and 2 as needed. Once the navigation area is done, group it (select all the items, then Shift-CTRL-G).
• Open the Document Stencil: File>Shapes>Show Document Stencil.
• Drag the grouped navigation elements onto the document stencil pane.
• Right-click the grouped elements (probably called “Master.16″ or something like that) and rename it (i.e. “NavBar”).
• On each of your wireframe pages, drag this element onto the foreground and position it accordingly.
• If you ever need to make changes to this navigation group, right-click it in the document stencil and choose Edit Master>Edit Master Shape. Any changes you make will automatically be updated in the other pages.

2. Use PDF menu in Visio, not print to Adobe PDF in printer menu

For the hyperlinks in the PDF to work correctly, use the PDF menu in Visio (Adobe PDF>Convert to Adobe PDF). For some reason, if you use File>Print and choose Adobe PDF as the printer, the hyperlinks in the PDF don’t work.

(Don’t ask me why, I’m just happy to have found a workaround.)

The final result will have live links on every page. To change the over states of buttons or create additional interactive elements, you’ll need to edit the file in Acrobat (avoid this step until you are certain the file is finished, otherwise if you regenerate the PDF from Visio, the Acrobat changes are lost).

3. Take it to the next level

This article on Boxes & Arrows provides a fantastic review of how to create clickable PDF prototypes with layers, multimedia and more. It focuses on using Acrobat’s advanced editing tools.

Share/Bookmark

The issue includes my summary of a talk given by Adaptive Path‘s Sarah Nelson and David Verba, entitled “Lessons Learned from Web Applications and User Centered Design“.

In their talk, they defined Ajax and Web 2.0 and then offered insights into how these developments in web application design offer both opportunities and challenges in designing effective user experiences.

Share/Bookmark

As the question of top, right, or left aligned form labels comes up often for designers, here’s a short overview of the pros and cons of each method. For illustrated examples and more details, take a look at the full document: Best Practices for Web Form Design (3.9 MB PDF).

Another recent article related to web forms addresses instructional text in the user interface. Embedded user assistance can quickly become more complicated than you might think. Too much assistance clutters the screen, but if you hide the form field explanations under tooltips, your users might never see them.

Mike Hughes offers up the compelling idea that contrary to the logic of flow, instructions should appear below the form element rather than above it. When completing a form on the web, people tend to go straight to the action–so if the help text comes first, they skip over it:

Users skip static elements, such as instructional text, because they focus immediately on downstream actionable objects. Effective user assistance design accommodates users’ natural workflows by providing instruction immediately beside or following interactive elements that constitute points of need for more information.

Now that average Internet users are more accustomed to interacting with web forms, they have higher expectations for usability. Written best practices like those above help to make these expectations explicit, so we can better understand what makes a form easy vs. annoying.

Share/Bookmark