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)

Theme usability design guidelines

From Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix ArticleMetaData and RevieweApproval)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(3 intermediate revisions by one user not shown)
Line 1: Line 1:
{{ArticleMetaData <!-- v1.1 -->
+
[[Category:Usability]]
 +
{{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]] -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
Line 10: Line 11:
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
|id= <!-- Article Id (Knowledge base articles only) -->
 
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
Line 22: Line 22:
 
|author= [[User:Kamaljaiswal]]
 
|author= [[User:Kamaljaiswal]]
 
}}
 
}}
{{ ReviewerApproved }}
 
[[Category:Mobile Design]][[Category:Usability]]
 
  
==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 33: 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 45: 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 64: 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 79: 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 95: Line 92:
  
 
==Common Mistakes To Avoid==
 
==Common Mistakes To Avoid==
1. Text not clearly visible or not visible at all.<BR>
+
# Text not clearly visible or not visible at all.<BR>
2. Improper icons; icons represents the functioning. Improper usage of icons can be misleading.<BR>
+
# Improper icons; icons represents the functioning. Improper usage of icons can be misleading.<BR>
3. Keep in mind both landscape and regular view.<BR>
+
# Keep in mind both landscape and regular view.<BR>
4. Explicit distinction should be possible for users for the selected and not selected items.
+
# 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.
137 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.

×