Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.
Mobile Design Pattern: Auto Complete
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.
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.
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.
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.
--- Edited by Mayank on 30/06/2009 ---