×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: Auto Complete

From Nokia Developer Wiki
Jump to: navigation, search
kalki (Talk | contribs)
mayankkedia (Talk | contribs)
(Added images/content, streamlined the layout)
Line 1: Line 1:
[[Category:Mobile_Design]]
+
[[Category:Mobile_Design_Patterns]][[Category:Mobile Web]][[Category:Mobile Design]][[Category:Mobile_Web_Design]]
[[Category:Mobile_Design_Patterns]]
+
[[Image:More_work_needed.gif]]
+
  
 
== Introduction ==
 
== Introduction ==
  
We can have auto complete facility available to us in Widgets design. But To enable auto complete we have to use AJAX Technology. it Suggest possible label names as users are typing.
+
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 <b>auto complete</b>.
  
 +
==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.
  
[[Image:autocomplete.jpg]]
+
[[Image:Auto Complete 2.png]]
  
 
== Use When==
 
== Use When==
Auto complete is always part of a Form. It is also often used by Railway booking pages where the destination needs to be selected. Indian Railway Mobile Application uses this functionality. In all cases, the set of possible values and the potential values can help the user to do their task quicker.
 
  
 +
Some potential user scenarios where it can be used are:-
 +
 +
*<b>The possible suggestions/completion choices are finite and easily manageable from a user’s point of view.</b>
 +
 +
 +
[[Image:Auto Complete 1.jpg]]
 +
 +
*<b>Speed and accuracy of data entry is important for instance on reservation sites etc.</b>
 +
 +
 +
[[Image:Auto Complete 4.jpg]]
 +
 +
*<b>The choices can be validated against either earlier entered user information or can be queried from the backend libraries/database etc.</b>
  
 
== How ==
 
== 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.  
 
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.  
  
  
== Why ==
+
== Usability guidelines ==
Auto complete helps users to locate the desired item in less steps than would be needed to enter the entire label.
+
 
 +
Some usability guidelines to follow while implementing auto complete are:-
 +
 
 +
*<b>Highlight the part of the possible matches displayed with the actual string the user has entered</b>
 +
 
 +
*<b>Display the auto-complete information in a drop down/fly out menu, in place right below the field which has auto complete functionality enabled.</b>
 +
 
 +
 
 +
 
 +
[[Image:Auto Complete 3.gif]]
 +
 
 +
*<b>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</b>
 +
 
 +
 
 +
[[Image:Auto Complete 4.jpg]]
 +
 
 +
 
 +
[[Image:Auto Complete 5.jpg]]
 +
 
 +
*<b>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.</b>
 +
 
 +
*<b>Auto complete should always happen on the entire search string and not parts of it.</b>
 +
 
 +
 
 +
[[Image:Auto Complete 6.jpg]]
 +
 
 +
==Additional Resources==
 +
 
 +
[http://support.microsoft.com/kb/217148 MicroSoft help]
 +
 
 +
[http://www.pengoworks.com/workshop/jquery/autocomplete.htm Jquery autocomplete]
 +
 
 +
[http://blogsearch.google.co.in/blogsearch?source=ig&hl=en&rlz=1G1GGLQ_ENIN332&q=auto+complete&lr=&um=1&ie=UTF-8&ei=49VJStjjPM-dkAWw4bj5CQ&sa=X&oi=blogsearch_group&ct=title&resnum=866877793 Google blogs on auto complete]
 +
 
 +
[http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AutoComplete/AutoComplete.aspx Auto complete demo’ed]
 +
 
 +
[http://en.wikipedia.org/wiki/Autocomplete Wikipedia]
 +
 
 +
[http://developer.yahoo.com/ypatterns/pattern.php?pattern=autocomplete Yahoo developr’s page]
 +
 
 +
<b>--- Edited by Mayank on 30/06/2009 ---</b>

Revision as of 12:49, 30 June 2009


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

113 page views in the last 30 days.
×