×
Namespaces

Variants
Actions
(Difference between revisions)

Theme usability design guidelines

From Nokia Developer Wiki
Jump to: navigation, search
kamaljaiswal (Talk | contribs)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(7 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Mobile Design]][[Category:Usability]]
+
[[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= 20090616
 +
|author= [[User:Kamaljaiswal]]
 +
}}
  
==Themes and Usability==
+
==Themes and usability==
 
Creating user-friendly themes is quite straightforward if you keep the following things in your mind:
 
Creating user-friendly themes is quite straightforward if you keep the following things in your mind:
  
Line 9: Line 31:
 
Even the best sketches need revising and require hard-disciplined work to make them really good.
 
Even the best sketches need revising and require hard-disciplined work to make them really good.
  
[[Image:ThemesAndUsability.png]]
+
[[File:ThemesAndUsability.png]]
  
==Theme Components with high Usability==  
+
==Theme Components with high usability==  
  
 
===Idle background===
 
===Idle background===
Line 21: Line 43:
 
     <td width="50%" valign="top">
 
     <td width="50%" valign="top">
 
'''PREFERRED'''<br>                     
 
'''PREFERRED'''<br>                     
[[Image:Preferred_Idle_Bg.jpg]]
+
[[File:Preferred Idle Bg.jpg]]
 
   </td>
 
   </td>
 
     <td width="50%" valign="top">
 
     <td width="50%" valign="top">
 
'''NOT PREFERRED'''<br>
 
'''NOT PREFERRED'''<br>
[[Image:Not_Preferred_Idle.jpg]]
+
[[File:Not Preferred Idle.jpg]]
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 40: Line 62:
 
     <td width="50%" valign="top">
 
     <td width="50%" valign="top">
 
'''PORTRAIT MODE '''<br>                     
 
'''PORTRAIT MODE '''<br>                     
[[Image:Potrait_Mode.jpg]]
+
[[File:Potrait Mode.jpg]]
 
   </td>
 
   </td>
 
     <td width="50%" valign="top">
 
     <td width="50%" valign="top">
 
'''LANDSCAPE MODE'''<br>
 
'''LANDSCAPE MODE'''<br>
[[Image:Lanscape_mode.jpg]]
+
[[File:Lanscape mode.jpg]]
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 55: Line 77:
  
 
==Nokia GuideLines For Creating User Friendly Themes==
 
==Nokia GuideLines For Creating User Friendly Themes==
[[Image:GuideLines_For_Theme.png]]
+
[[File:GuideLines For Theme.png]]
  
 
<br>'''Few SnapShot of Forum Champion Theme'''<br>
 
<br>'''Few SnapShot of Forum Champion Theme'''<br>
  
[[Image:Forum_Champion_Theme.jpg]]
+
[[File:Forum Champion Theme.jpg]]
 
+
  
 
Similar theme could be created for:<br>
 
Similar theme could be created for:<br>
Line 68: Line 89:
 
<br>'''4:Wiki Contributor.'''<br>
 
<br>'''4:Wiki Contributor.'''<br>
  
As they are the important part of the Forum Nokia Community.
+
As they are the important part of the Nokia Developer Community.
 +
 
 +
==Common Mistakes To Avoid==
 +
# Text not clearly visible or not visible at all.<BR>
 +
# Improper icons; icons represents the functioning. Improper usage of icons can be misleading.<BR>
 +
# Keep in mind both landscape and regular view.<BR>
 +
# Explicit distinction should be possible for users for the selected and not selected items.

Latest revision as of 03:42, 9 May 2012

Article Metadata
Article
Created: kamaljaiswal (16 Jun 2009)
Last edited: hamishwillee (09 May 2012)

Contents

[edit] Themes and usability

Creating user-friendly themes is quite straightforward if you keep the following things in your mind:

Style:A theme is more than a background image - a theme should have a unifying idea with a consistent style and balanced colour palette.

Contrast:Mobile devices are small and the text and icons on them are even smaller - a good contrast should be provided throughout the theme, so that the icons, texts, and the focus and scrolling indicators are easy to interpret. Even the best sketches need revising and require hard-disciplined work to make them really good.

ThemesAndUsability.png

[edit] Theme Components with high usability

[edit] Idle background

The idle background is displayed when the device is in idle mode and it can be practically anything you like or think the users of your Theme would like.

Note: There will be things on top of the idle background that have to be readable, such as the date and the time.

PREFERRED
Preferred Idle Bg.jpg

NOT PREFERRED
Not Preferred Idle.jpg

[edit] Active background

[edit] Background for different applications, pop-ups, and fields

[edit] Active standby

[edit] Scalable UI

When screen orientation changes from portrait to landscape and the aspect ratio of the display changes.Theme creator should also consider this effect.

PORTRAIT MODE
Potrait Mode.jpg

LANDSCAPE MODE
Lanscape mode.jpg

[edit] Icons and metaphors

[edit] Usable clocks, signals, and status bars

[edit] Ring Tone GuideLines For Nokia Devices

[edit] Nokia GuideLines For Creating User Friendly Themes

GuideLines For Theme.png


Few SnapShot of Forum Champion Theme

Forum Champion Theme.jpg

Similar theme could be created for:

1:Super Contributor.

2:Regular Contributor.

3:Post Of the Month.

4:Wiki Contributor.

As they are the important part of the Nokia Developer Community.

[edit] Common Mistakes To Avoid

  1. Text not clearly visible or not visible at all.
  2. Improper icons; icons represents the functioning. Improper usage of icons can be misleading.
  3. Keep in mind both landscape and regular view.
  4. Explicit distinction should be possible for users for the selected and not selected items.
This page was last modified on 9 May 2012, at 03:42.
175 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.

×