Google Suggest’s interface has an added line of text trying to explain and to make it easier to discover the _hidden_ functionality: “As you type, Google will offer suggestions. Use the arrow keys to navigate the results. Learn more”:
And as soon as you start typing, the results will appear as shown below:
Another example is Amazon’s “tag this product feature”. As I wrote previously, it has affordance as to which keyboard shortcut can show the dialog. But as you type in the field, there is no hints to make it obvious that this field can magically help the user by autocompleting.
(totally unrelated, i suddenly feel very curious about what products are tagged with “cannibalism”…)
Kayak.com also has autocomplete fields in case you foroget that airport code. Which is actually cool, but again not hints before you start.
Yahoo!s Design Pattern Library has one autocomplete example from the recent Yahoo! Mail beta:
The screenshot used for example has no affordance to hint the hidden functionality. There is also nothing describing the availability of automplete functionality.
Outlook and Excel have sort of autocomplete as well. But compared to the examples above (where suggestions appear if you hesitate typically a second), then the suggestions appear immediately.
Is it good enough to have no visual indication? Hardly. I would like to see a general consensus around how to visually indicate autocomplete fields in a way that makes it intuitively clear what functionality is hidden in the field.
Back in January last year, I wrote about “live search” in user interfaces, with examples from Google Suggest, GMail, Apple Spotlight, Windows Vista and more. But neither of the ones I looked at had any visual indication of the fields that could indicate that the field was different from an ordinary text field.
Problems related to unhinted functionality
The problem with this approach where the functionality is not hinted is that I believe that it will change your behaviour and usage pattern. An ordinary text field is just a field and you need to fill it in exactly as it’s needed. That usually requires that you stop and think before filling in the field.
The autocomplete field can help you — but only if you hesitate after writing something for a start. I would say that this behaviour requires less brain activity and perhaps a quicker fill in of the form fields.
But the efficiency can only be achieved after you have learned that this is an autocomplete field. In some of the above examples, users would typically discover the autocomplete functionality with some sort of surprise. Suddently the field gives you suggestions.
But surprise and confusion are closely related. So I’d guess that it might confuse less trained users. My point here, i guess, is that there is no reason to confuse people. Just make sure that the functionality is properly hinted.
So we need more than just text for the autocomplete fields to stand out.
In a couple of days, I’ll continue this post with some guidelines for autocomplete fields. (I wanted to write “tomorrow”, but I’m afraid to make a promise I cannot keep — like I did in last post).
Please post your comments about good and bad examples, as I desperately need more examples for how to make these. Any usability testing results that you heard of? Any other thoughts?
- IxDA Discuss: Affordance on autocomplete input boxes
- Justaddwater.dk: Hidden Functionality — Hints And Affordance
- Justaddwater.dk: Live search explained
- Wikipedia: Hidden Find
- Bill Scott: Distracting or Narrowing: Looking a Little More At Live SearchD
- Yahoo! Design Pattern Library: Autocomplete pattern