“Autocomplete” is one of those words that modern web designers and programmers sometimes use and then wave their hands like that one word actually describes a complete user interaction without saying anything further: “They get to the message window, then there’s an autocomplete box.” But that’s actually a pretty broad category these days.
Polihood's message autocomplete - a Boxed Build-A-List.
There are a few distinct autocompleter mechanisms popular on the Web. While they look similar at first glance, their UI function is actually completely different, and they each meet totally different user interaction needs. Since there hasn’t been a lot of explicit talk about the differences in these types of autocompletes, it can be a source of confusion when the folks on a project have different assumptions. Make sure you’re on the same page as the other designers and/or programmers when you talk about autocompletes.
Here are the three main types of popular autocompleters:
-
The Search Helper
Google's autocomplete.
The most generic autocomplete, like Google’s or Amazon’s. When a user first sees it, it looks like a normal search box. If you type something and hit enter, you get to a search results page. If you choose an item off the suggestions list, you also get to a search results page. It’s just a supplement to an normal form, and keeps the basic interaction of “fill out a search term, then show me results” intact. This lets users continue to use the input the way they’re used to, while giving “power users” some immediate feedback to help them form their search. This is the most common type of autocompleter to find for the major Javascript toolkits; Pengowork’s jQuery autocompleter is a popular straightforward example.
-
The Navigational Autocomplete with Search Fallback
Facebook's main search box.
While it looks and acts like the Google-style search box in the beginning of the interaction, when you choose an item off the list you’re performing an action of navigation to a specific object, not a search: On Facebook, you’re brought to the appropriate friend’s page. You’re only brought to a search results page if you hit “enter” or click the search button. In this case, clicking a suggestion from the list is a substitute for navigating a drilldown menu or a shortcut for going through a results page to find an object, whereas on Google or Amazon it’s simply another way to get to a search results page. The functionality difference: A search autocomplete acts like you just filled out the text input and clicked “submit,” while a navigational autocomplete selection action bypasses the form altogether and redirects to the URL of the specified object.
-
The Build-A-List
The build-a-list is frequenty used as a replacement for a multi-select, at least in situations where users need hints but not a constant on-screen list of their options. It can also be a less error-prone way to let users enter freehand data like lists of email addresses or tags.
There are two different types of build-a-list:
-
Suggestions in Text
del.icio.us's autocomplete.
If you don’t like what you see, keep typing. If you do, choose something and it’s exactly the same as if you just typed it: a box full of text. Example: del.icio.us tagging. GMail’s “To” box works in a similar way. Bassistance.de’s jQuery autocomplete plugin can function this way.
-
Boxed Objects
Polihood's autocomplete.
A fancier looking method, popularized on the desktop by Apple’s Mail.app, and brought to the web most famously by Facebook. Some of these also allow you to type arbitrary text like an email address, in the case of Facebook’s message composition window, but its primary function is to choose one or more items from a set of non-text objects — like your friends on Facebook, who are represented as their name in a box but are actually passed along as a Facebook ID number. Ajaxian discusses MooTools and Prototype implementations, and there’s a similar jQuery implementation.
-
I hope this spares some designers and programmers some friction when they’re speccing out designs. With the rise in reasonably cooperative web browsers, ever-increasing maturity of UI toolkits like jQuery UI and the increased acceptance of the doctrine of progressive enhancement, there has been increasing drive to add dynamic features to form controls that would have been made static-only a year or two ago. Autocompleting text inputs are being used to augment and replace everything from normal text inputs to single select dropdowns and multi-selects — and with good reason. A knowledgeable user can use the predictive input to get things done faster, and the “instant feedback” of autocompletes can save a user from dead-end searches and typoed names and email addresses. Just be sure you know the tools in your toolbox!
Bookly's Navigational autocomplete.
In a later post I’ll be writing a bit about the navigational autocomplete search box and how it’s used on Bookly to make things easier for the user.
Think I missed a major distinction here, or have better examples? Post a comment and let us know.
Tags: autocomplete, ui