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. Thanks for all your past and future contributions.

(Difference between revisions)

Mobile Design Pattern: Auto Complete

From Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
Line 22: Line 22:
|author= [[User:Kalki]]
|author= [[User:Kalki]]
[[Category:Mobile Design Patterns]][[Category:Mobile Web]][[Category:Mobile Design]][[Category:Mobile Web Design]]
[[Category:Mobile Design Patterns]][[Category:Mobile Web]][[Category:Mobile Web Design]]

Latest revision as of 06:06, 16 April 2012

Article Metadata
Created: kalki (14 May 2009)
Last edited: hamishwillee (16 Apr 2012)


[edit] 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.

[edit] 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.

Auto Complete 2.png

[edit] 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.

Auto Complete 1.jpg

  • Speed and accuracy of data entry is important for instance on reservation sites etc.

Auto Complete 4.jpg

  • The choices can be validated against either earlier entered user information or can be queried from the backend libraries/database etc.

[edit] 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.

[edit] 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.

Auto Complete 3.gif

  • 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

Auto Complete 4.jpg

Auto Complete 5.jpg

  • 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.

Auto Complete 6.jpg

[edit] Additional Resources

MicroSoft help

Jquery autocomplete

Google blogs on auto complete

Auto complete demo’ed


Yahoo developr’s page

--- Edited by Mayank on 30/06/2009 ---

This page was last modified on 16 April 2012, at 06:06.
93 page views in the last 30 days.