×
Namespaces

Variants
Actions
Revision as of 06:19, 10 February 2012 by hamishwillee (Talk | contribs)

Mobile Design Pattern: Auto Complete

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: kalki (14 May 2009)
Last edited: hamishwillee (10 Feb 2012)


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.

Auto Complete 2.png

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.

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.


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

Additional Resources

MicroSoft help

Jquery autocomplete

Google blogs on auto complete

Auto complete demo’ed

Wikipedia

Yahoo developr’s page

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

125 page views in the last 30 days.