×
Namespaces

Variants
Actions
(Difference between revisions)

Ergonomic Design

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata etc)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(2 intermediate revisions by one user not shown)
Line 1: Line 1:
 +
[[Category:Usability]]
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
Line 14: Line 15:
 
|translated-from-title= <!-- Title only -->
 
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by= <!-- After re-review: [[User:username]] -->
+
|review-by= [[User:SannaH]]
|review-timestamp= <!-- After re-review: YYYYMMDD -->
+
|review-timestamp= 20120507
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
Line 21: Line 22:
 
|author= [[User:Aadhar14b]]
 
|author= [[User:Aadhar14b]]
 
}}
 
}}
[[Category:Mobile Design]][[Category:Usability]]
+
 
 
==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. Do not 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.'''
[[File: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.'''
[[File: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]]
[[File: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.'''
[[File: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>
+
[[File: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;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>
+
 
+
<B>8. In case of a sequential flow of actions, use the same soft key.</B><BR>
+
&nbsp;&nbsp;&nbsp;&nbsp;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.
+
 
+
<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 06: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 06:42.
213 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.

×