As internet connections and servers get faster, we’re seeing more and more sites using autocomplete to assist their visitors in making complex searches in a snap. Unfortunately, a lot of these sites are styling their autocomplete results in a less-than-optimal fashion. Here’s three guidelines for how to style autocomplete results:

 

Google is a poster child for designing autocomplete results.

1) Highlight the differences, not the commonalities

You should always highlight the differences in your autocomplete results since your visitor will already be aware of what he has searched for. Also, when given a list of results with commonalities, it’s the differences in the results that are meaningful, not the elements that are being repeated (typically the search term).

Unfortunately, many sites highlight the search term – the commonality – as opposed to the differences. The popular jQuery autocomplete plugin even has this as its default styling, which could be the reason why so many people highlight their results this way. (Whenever you use open source plugins, take a second to think about the default styling and see if it actually makes sense.)

Guideline #1: highlight the differences in your results (preferably by making it bold).

2) Avoid visual clutter if results are simple

Unless your typical search result is going to extend over multiple lines, you should keep your results as clean as possible. Just highlight the differences (see the above guideline) and the active row.

Many sites use all sorts of different visual clues to separate even simple results, alternating row colors and horizontal lines being the two worst sinners. This is unnecessary clutter, which makes it difficult for your visitors to quickly scan the results you’re presenting them.

Guideline #2: don’t use alternating row colors and horizontal lines, unless your typical result is very lengthy (longer than a single line).

3) Only show a few results at a time

Don’t show anymore than 10 results, you can show more results on your actual search page, and if your your typical result is more than a single line you should probably show even less results in the autocomplete.

Autocomplete results are for quickly making a complex search query or selecting a specific item from a list of possible options. It shouldn’t be considered a replacement for an actual search page. Also, a visitor looking for very specific results will have no trouble finding them since she can quickly filter out everything that’s irrelevant by typing in a few extra characters.

Guideline #3: only show 10 or less results at a time (use a dedicated search page if you need to display more).

Show me the meaning

All of the above guidelines are about emphasizing the meaningful data. You want to put that in the spotlight and have everything else fade into the background (or not appear at all).

When getting back a list of suggestions for better search queries, it’s the differences in those results that are meaningful. When reading a list of search results or suggestions, it’s the text of each result that’s meaningful. And of course, when searching a huge database, it’s only the 10 most relevant results that are meaningful.

Good design is about emphasizing the meaningful data. This goes for styling autocomplete results too.