×
Namespaces

Variants
Actions
(Difference between revisions)

Ergonomic Design

From Nokia Developer Wiki
Jump to: navigation, search
Aadhar14b (Talk | contribs)
Aadhar14b (Talk | contribs)
Line 10: Line 10:
 
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. Avoid using fixed font sizes and small font sizes.</B><BR><BR>
+
<B>1. Dont use fixed font sizes to ensure readability and avoid using small font sizes.</B><BR><BR>
 
[[Image:Ergo_-font.gif]]<BR>
 
[[Image:Ergo_-font.gif]]<BR>
 
&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
 
&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>2. Ensure effective and easy-to-read color combinations, use contrast to improve readability.</B><BR><BR>
+
<B>2. Use 'easy to read' color combinations, use contrast effects to improve readability.</B><BR><BR>
 
[[Image:Ergo_color.gif]]<BR>
 
[[Image:Ergo_color.gif]]<BR>
 
&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
 
&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>3. Group related objects on the screen.</B><BR><BR>
+
<B>3. Group functionally related elements on the user interface.</B><BR><BR>
 
[[Image:Ergo_group1.gif]]<BR>
 
[[Image:Ergo_group1.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
 
&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>4. Ensure that the tap region and size of the user interface element are ergonomic.</B><BR>
+
<B>4. Ensure that the tap/clickable region is ergonomic.</B><BR>
 
&nbsp;&nbsp;&nbsp;&nbsp;Especially in case of Touch UI, proper spacing must be available for selection of UI elements.
 
&nbsp;&nbsp;&nbsp;&nbsp;Especially in case of Touch UI, proper spacing must be available for selection of UI elements.
 
<BR><BR>
 
<BR><BR>
Line 28: Line 28:
 
&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
 
&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 are clearly visible in low light.</B>
+
<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>
 
<B>6. In case of touch screen UI, the size of the user interface elements should be optimized.</B><BR>
The following table lists the optimal sizes for user interface elements on a .24 dot pitch display, depending on whether a stylus or finger is used to interact with user interface elements.<BR>
+
&nbsp;&nbsp;&nbsp;&nbsp;Selection of an UI element must also be possible in absence of stylus.<BR><BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<B>Method of interaction &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;User interface element size</B><BR>
+
[[Image:Ergo_size.gif]]<BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stylus
+
&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
&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;
+
5.04mm or 21 x 21 pixels<BR>
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Finger &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;
+
9.12mm or 38 x 38 pixels
+
 
+
<B>7. Use the same soft key for sequential commands.</B>
+
  
<B>8. Because a color can appear differently on different device displays, do not use color to convey the meaning of critical features.</B>
+
<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>
 
<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>

Revision as of 19:06, 22 June 2009

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.

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. Dont use fixed font sizes to ensure readability and avoid using small font sizes.

Ergo -font.gif
      Incorrect Design                              Correct Design

2. Use 'easy to read' color combinations, use contrast effects to improve readability.

Ergo color.gif
      Incorrect Design                              Correct Design

3. Group functionally related elements on the user interface.

Ergo group1.gif
          Incorrect Design                                      Correct Design

4. Ensure that the tap/clickable region is ergonomic.
    Especially in case of Touch UI, proper spacing must be available for selection of UI elements.

Ergo touch.gif
      Incorrect Design                              Correct Design

5. Ensure that the user interface elements/objects and the text are clearly visible in presence of low light.

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

Ergo size.gif
          Incorrect Design                                      Correct Design

7. As colors can appear differently on different mobiles according to there displays, do not use color conventions to specify critical features.


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

101 page views in the last 30 days.
×