Namespaces

Variants
Actions

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.

(Difference between revisions)

Ergonomic Design

From Wiki
Jump to: navigation, search
Aadhar14b (Talk | contribs)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(11 intermediate revisions by 4 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= [[User:SannaH]]
 +
|review-timestamp= 20120507
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090621
 +
|author= [[User:Aadhar14b]]
 +
}}
 +
 
 
==What is Ergonomic Design in context of mobile?==
 
==What is Ergonomic Design in context of mobile?==
<UL>
+
* Ergonomics is the science of designing the job, equipment, and workplace to fit the user.
<LI>Ergonomics is the science of designing the job, equipment, and workplace to fit the user.</LI>
+
* Ergonomic Design in context of mobile applications means designing the applications so that the user can use the application comfortably without being visually, mentally or physically stressed.
<LI>Ergonomic Design in context of mobile applications means designing the applications so that the user can use the application comfortably without being visually, mentally or physically stressed.</LI>
+
* It takes account of the user’s capabilities and limitations in seeking to ensure that tasks and information suit the user.
<LI>It takes account of the user’s capabilities and limitations in seeking to ensure that tasks and information suit the user.</LI>
+
 
</UL>
+
  
 
==Guidelines for Ergonomic Mobile Design==
 
==Guidelines for Ergonomic Mobile Design==
 
Ergonomic Design for mobile applications mainly deals with the proper design of UI (User Interface).Let us look at some key points that must be kept in mind while designing UI.
 
Ergonomic Design for mobile applications mainly deals with the proper design of UI (User Interface).Let us look at some key points that must be kept in mind while designing UI.
  
<B>1. Dont use fixed font sizes to ensure readability and avoid using small font sizes.</B><BR><BR>
+
# '''Do not use fixed font sizes to ensure readability and avoid using small font sizes.'''
[[Image:Ergo_-font.gif]]<BR>
+
#: [[File:Ergo -font.gif|frame|none|Incorrect Design/Correct Design]]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Incorrect Design &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Correct Design
+
# '''Use 'easy to read' color combinations, use contrast effects to improve readability.'''
 
+
#: [[File:Ergo color.gif|frame|none|Incorrect Design/Correct Design]]
<B>2. Use 'easy to read' color combinations, use contrast effects to improve readability.</B><BR><BR>
+
#: '''Group functionally related elements on the user interface.'''
[[Image:Ergo_color.gif]]<BR>
+
#: [[File:Ergo group1.gif|frame|none|Incorrect Design/Correct Design]]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Incorrect Design &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Correct Design
+
# '''Ensure that the tap/clickable region is ergonomic.'''
 
+
#: Especially in case of Touch UI, proper spacing must be available for selection of UI elements.
<B>3. Group functionally related elements on the user interface.</B><BR><BR>
+
#: [[File:Ergo touch.gif|frame|none|Incorrect Design/Correct Design]]
[[Image:Ergo_group1.gif]]<BR>
+
# '''Ensure that the user interface elements/objects and the text are clearly visible in presence of low light.'''
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Incorrect Design &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Correct Design
+
# '''In case of touch screen UI, the size of the user interface elements should be optimized.'''
 
+
#: Selection of an UI element must also be possible in absence of stylus.
<B>4. Ensure that the tap/clickable region is ergonomic.</B><BR>
+
#: [[File:Ergo size.gif|frame|none|Incorrect Design/Correct Design]]
&nbsp;&nbsp;&nbsp;&nbsp;Especially in case of Touch UI, proper spacing must be available for selection of UI elements.
+
# '''As colors can appear differently on different mobiles according to there displays, do not use color conventions to specify critical features.'''
<BR><BR>
+
# ''' In case of a sequential flow of actions, use the same soft key.'''
[[Image:Ergo_touch.gif]]<BR>
+
#:This helps the user to carry on with the continuity of application flow without getting distracted to locate the position of the soft key for the next course of &nbsp;&nbsp;&nbsp;&nbsp;action to happen in that flow.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Incorrect Design &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Correct Design
+
 
+
<B>5. Ensure that the user interface elements/objects and the text are clearly visible in presence of low light.</B>
+
 
+
<B>6. In case of touch screen UI, the size of the user interface elements should be optimized.</B><BR>
+
&nbsp;&nbsp;&nbsp;&nbsp;Selection of an UI element must also be possible in absence of stylus.<BR><BR>
+
[[Image:Ergo_size.gif]]<BR>
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Incorrect Design &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Correct Design
+
 
+
<B>7. As colors can appear differently on different mobiles according to there displays, do not use color conventions to specify critical features.</B>
+
 
+
<BR><B>Keeping in mind above mentioned points can help in making mobile application design 'Ergonomic' and thus will add value to the application.</B>
+
  
----
+
Keeping in mind above mentioned points can help in making mobile application design 'Ergonomic' and thus will add value to the application.
--Submitted by - Aadhar14b, 21 June 2009
+

Latest revision as of 03:42, 9 May 2012

Article Metadata
Article
Created: User:Aadhar14b (21 Jun 2009)
Reviewed: SannaH (07 May 2012)
Last edited: hamishwillee (09 May 2012)

[edit] What is Ergonomic Design in context of mobile?

  • Ergonomics is the science of designing the job, equipment, and workplace to fit the user.
  • Ergonomic Design in context of mobile applications means designing the applications so that the user can use the application comfortably without being visually, mentally or physically stressed.
  • It takes account of the user’s capabilities and limitations in seeking to ensure that tasks and information suit the user.


[edit] Guidelines for Ergonomic Mobile Design

Ergonomic Design for mobile applications mainly deals with the proper design of UI (User Interface).Let us look at some key points that must be kept in mind while designing UI.

  1. Do not use fixed font sizes to ensure readability and avoid using small font sizes.
    Incorrect Design/Correct Design
  2. Use 'easy to read' color combinations, use contrast effects to improve readability.
    Incorrect Design/Correct Design
    Group functionally related elements on the user interface.
    Incorrect Design/Correct Design
  3. Ensure that the tap/clickable region is ergonomic.
    Especially in case of Touch UI, proper spacing must be available for selection of UI elements.
    Incorrect Design/Correct Design
  4. Ensure that the user interface elements/objects and the text are clearly visible in presence of low light.
  5. In case of touch screen UI, the size of the user interface elements should be optimized.
    Selection of an UI element must also be possible in absence of stylus.
    Incorrect Design/Correct Design
  6. As colors can appear differently on different mobiles according to there displays, do not use color conventions to specify critical features.
  7. In case of a sequential flow of actions, use the same soft key.
    This helps the user to carry on with the continuity of application flow without getting distracted to locate the position of the soft key for the next course of     action to happen in that flow.

Keeping in mind above mentioned points can help in making mobile application design 'Ergonomic' and thus will add value to the application.

This page was last modified on 9 May 2012, at 03:42.
142 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.

×