Mobile Design Pattern: Auto Complete
Article Metadata
Contents |
Introduction
There are lot of times when the user is supposed to enter in information which might be confusing/complicated to remember/understand and hence the chances of making an error are quite high. In those cases it would be nice to pre-empt the user or possibly give them a helping hand thereby reducing the chances of making errors. One such mechanism is known as auto complete.
What is auto complete
Auto complete is a mechanism provided by many websites, email clients, integrated development environment(IDE), interpreters etc. It involves a mechanism of completing the word/content based on the limited entry the user has made, it obviates the need for entering the entire content. It speeds up the overall interaction between the system and the user thereby leading to a more satisfied/impressed user.
Use When
Some potential user scenarios where it can be used are:-
- The possible suggestions/completion choices are finite and easily manageable from a user’s point of view.
- Speed and accuracy of data entry is important for instance on reservation sites etc.
- The choices can be validated against either earlier entered user information or can be queried from the backend libraries/database etc.
How
When users have entered the first character, the application starts creating matches with the whole set available in the database and its get it through AJAX xmlhttprequest. Those matches are then directly shown underneath the edit box. The user can select the desired value once it has been spotted by using the cursor.
Usability guidelines
Some usability guidelines to follow while implementing auto complete are:-
- Highlight the part of the possible matches displayed with the actual string the user has entered
- Display the auto-complete information in a drop down/fly out menu, in place right below the field which has auto complete functionality enabled.
- Allow the user to edit/delete the search string from the main field which in turn should modify the auto-complete options available to them
- The user should be able to dismiss the auto-complete menu/drop down, in case they don’t want to make use of the suggestions provided.
- Auto complete should always happen on the entire search string and not parts of it.
Additional Resources
--- Edited by Mayank on 30/06/2009 ---
21 Sep
2009
This article discusses auto-complete, a useful design solution for situations where users must enter text information. Auto-complete can improve efficiency in such tasks by looking at what the user has already typed and trying to infer the rest of the string they wish to enter. These options can then be presented to the user, rather than him/her having to complete entering the full text. Because text entry is fairly difficult given the small, unergonimic keypads and touch-screen input provided by mobile devices, the use of auto-complete can be very useful.
The article also includes useful advice for improving the usability of auto-complete implementations. It is important that auto-complete implementations are as accurate and non-intrusive as possible. It should be just as easy to ignore the options provided as to select one of them. Auto-complete is widely used in mobile browser applications, because the punctuation and URLs in web addresses often makes it awkward and time-consuming for users to enter web addresses on their mobile device. Implementing auto-complete in mobile applications will usually mean that the programmer will have to create custom UI components to implement this functionality. But in cases where text entry is lengthy and repetitive or long lists of options can be filtered, the efficiency gains for the user should be well worth it. A well-written article about a design pattern which is probably even more useful on mobile devices than it is in the desktop environment.