×
Namespaces

Variants
Actions
(Difference between revisions)

TouchScreen Usability

From Nokia Developer Wiki
Jump to: navigation, search
Rahulsingh1m (Talk | contribs)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Mobile_Design]][[Category:Usability]]
+
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090622
 +
|author= [[User:Naresh99]]
 +
}}
 +
 
 +
[[Category:Usability]]
  
 
==Description==
 
==Description==
Line 10: Line 33:
 
* Minimise the steps to access the basic functions such as answering a call, instant messaging, viewing messages, accessing the internet etc.<br/>
 
* Minimise the steps to access the basic functions such as answering a call, instant messaging, viewing messages, accessing the internet etc.<br/>
 
* The touch response lag should be minimum.<br/>
 
* The touch response lag should be minimum.<br/>
 +
* Ensure that the locking mechanism is intuitive, Provide an automatic lock facility.<br/>
 +
* If devices is having only the virtual keypad, try to match the speed and accuracy offered by traditional keypads as far as feasible.<br/>
 +
* For the user input, its better to provide a virtual QWERTY keyboard.<br/>
 +
* Make use of familiar icons so that the users can associate with them.<br/>
 
* In a designs for touch screen interface, UI elements used for interaction must be large enough for users to easily select with their thumbs. if UI elements is very small then user may feel inconvinience in using application.
 
* In a designs for touch screen interface, UI elements used for interaction must be large enough for users to easily select with their thumbs. if UI elements is very small then user may feel inconvinience in using application.
 
<br>
 
<br>
Line 16: Line 43:
 
     <td align="left">
 
     <td align="left">
 
'''Good UI element example with large<br> menu items  '''<br>
 
'''Good UI element example with large<br> menu items  '''<br>
[[Image:Touch1Good.JPG]]
+
[[File:Touch1Good.JPG]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
 
'''Bad UI element example with small<br> menu items '''<br>
 
'''Bad UI element example with small<br> menu items '''<br>
[[Image:Touch1Bad.JPG]]  
+
[[File:Touch1Bad.JPG]]  
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 32: Line 59:
 
     <td align="left">
 
     <td align="left">
 
'''Good example with virtual keypads<br> for large data entry  '''<br>
 
'''Good example with virtual keypads<br> for large data entry  '''<br>
[[Image:Touch2Good.JPG]]
+
[[File:Touch2Good.JPG]]
 
   </td>
 
   </td>
 
   </tr>
 
   </tr>

Latest revision as of 06:42, 9 May 2012

Article Metadata
Article
Created: naresh99 (22 Jun 2009)
Last edited: hamishwillee (09 May 2012)

[edit] Description

Touchscreens are replacing keypads because of their intuitive operation, software flexibility, and space and cost savings. This change offers many benefits and solves many human-device interface problems. But the loss of tactile feedback that users experience when pressing a mechanical button creates other human-device interface problems. Moreover, some users like to use systems that provide tactile response.

[edit] Some usability guidelines

  • There should be clear and direct navigation to return to the Home and the Main menu.
  • Minimise the steps to access the basic functions such as answering a call, instant messaging, viewing messages, accessing the internet etc.
  • The touch response lag should be minimum.
  • Ensure that the locking mechanism is intuitive, Provide an automatic lock facility.
  • If devices is having only the virtual keypad, try to match the speed and accuracy offered by traditional keypads as far as feasible.
  • For the user input, its better to provide a virtual QWERTY keyboard.
  • Make use of familiar icons so that the users can associate with them.
  • In a designs for touch screen interface, UI elements used for interaction must be large enough for users to easily select with their thumbs. if UI elements is very small then user may feel inconvinience in using application.


Good UI element example with large
menu items

Touch1Good.JPG

Bad UI element example with small
menu items

Touch1Bad.JPG


  • Touchscreens are not well suited for data entry. So provides a virtual keypads for large data entry, for example the application which take feed back from users.


Good example with virtual keypads
for large data entry

Touch2Good.JPG


  • Make sure the activation area for each interaction element is as large as its corresponding visual representation.
  • Entering values can become very tedious on touchscreens. Value entry should be restricted to few values. The basic interaction modes are: Clicking repeatedly on certain controls (e.g. to increment or decrement volume control), Dragging sliders or similar controls.
  • keep small items far enough apart so that they are as easy as possible to select accurately.
This page was last modified on 9 May 2012, at 06:42.
113 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×