×
Namespaces

Variants
Actions
(Difference between revisions)

Screen Layout Usability

From Nokia Developer Wiki
Jump to: navigation, search
Rahulsingh1m (Talk | contribs)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(3 intermediate revisions by 2 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= 20090625
 +
|author= [[User:Naresh99]]
 +
}}
 +
[[Category:Usability]]
  
 
==Description==
 
==Description==
  
One of the most frequently asked questions is "for what screen resolution should we design our app?" Also most of the mobile devices enables user to switch between portrait and landscape orientation. Also the testing criteria UNI-10 says: The application should function and render its display as specified, regardless of the device screen resolution and format. Thus design application in such a way that it match the display resolution.  
+
One of the most frequently asked questions is "for what screen resolution should we design our app?" Also most of the mobile devices enables user to switch between portrait and landscape orientation. Also the testing criteria [[How to conform with Symbian Signed criteria#Scalable UI .28UNI-10.29|UNI-10]] says: <b>The application should function and render its display as specified, regardless of the device screen resolution and format.</b> Thus design application in such a way that it match the display resolution.  
  
 
==Some usability guideline==
 
==Some usability guideline==
Line 16: Line 38:
 
     <td align="left">
 
     <td align="left">
 
'''Showing proper message if aplication does not support current screen mode '''<br>                     
 
'''Showing proper message if aplication does not support current screen mode '''<br>                     
[[Image:goodscreenlay3.JPG]]
+
[[File:goodscreenlay3.JPG]]
 
   </td>
 
   </td>
 
   </tr>
 
   </tr>
Line 30: Line 52:
 
     <td align="left">
 
     <td align="left">
 
'''Good screen example which show<br> UI element properly'''<br>                     
 
'''Good screen example which show<br> UI element properly'''<br>                     
[[Image:goodscreenlay1.JPG]]
+
[[File:Item visible.jpg]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
 
'''Bad screen example which not showing<br> UI element properly'''<br>
 
'''Bad screen example which not showing<br> UI element properly'''<br>
[[Image:badscreenlay1.JPG]]  
+
[[File:Item not scaled.jpg]]
 +
    </td>
 +
  </tr>
 +
</table>
 +
<br>
 +
Contrast this with the below implementation where the display scales well for the mode changes.
 +
<br>
 +
<table>
 +
<tr>
 +
    <td align="left">
 +
'''UI Visible in portrait mode'''<br>                   
 +
[[File:Item visible 1.jpg]]
 +
  </td>
 +
    <td align="left">
 +
''' UI Visible in landscape mode '''<br>
 +
[[File:Item scaled.jpg]]  
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>

Latest revision as of 06:42, 9 May 2012

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

[edit] Description

One of the most frequently asked questions is "for what screen resolution should we design our app?" Also most of the mobile devices enables user to switch between portrait and landscape orientation. Also the testing criteria UNI-10 says: The application should function and render its display as specified, regardless of the device screen resolution and format. Thus design application in such a way that it match the display resolution.

[edit] Some usability guideline

  • Make sure that the application's content is easy to view and interact with when displayed in either resolution.
  • Display a proper message if user switch to the mode which is not supported by your application.


Showing proper message if aplication does not support current screen mode
Goodscreenlay3.JPG


  • Design each control of application in such a way that it will resize itself when user change resolution.



Good screen example which show
UI element properly

Item visible.jpg

Bad screen example which not showing
UI element properly

Item not scaled.jpg


Contrast this with the below implementation where the display scales well for the mode changes.

UI Visible in portrait mode
Item visible 1.jpg

UI Visible in landscape mode
Item scaled.jpg


  • You should take care of menu, dialogs also if you are creating a custom menu & dialogs.
  • While switching from portrait to landscape mode and vice versa, the number of lines or items may change. So a generic UI design should not assume a certain fixed number of items.
  • The placement of popup windows should be adjusted in the landscape mode so that they remain in close proximity to the softkey texts.
  • In the landscape mode, the placement of status pane components should be consistent with other applications.
This page was last modified on 9 May 2012, at 06:42.
78 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.

×