×
Namespaces

Variants
Actions
(Difference between revisions)

Tabs Usability

From Nokia Developer Wiki
Jump to: navigation, search
Rahulsingh1m (Talk | contribs)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(6 intermediate revisions by 4 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= 20090619
 +
|author= [[User:Naresh99]]
 +
}}
 +
 
 +
[[Category:Usability]]
  
 
==Description==
 
==Description==
Line 14: Line 37:
 
     <td align="left">
 
     <td align="left">
 
'''Good tab example'''<br>                     
 
'''Good tab example'''<br>                     
[[Image:Tab1Good.JPG]]
+
[[File:Tab1Good.JPG]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
 
'''Bad tab example'''<br>
 
'''Bad tab example'''<br>
[[Image:Tab1Bad.JPG]]  
+
[[File:Tab1Bad.JPG]]  
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 30: Line 53:
 
     <td align="left">
 
     <td align="left">
 
'''Good tab example'''<br>                     
 
'''Good tab example'''<br>                     
[[Image:Tab2Good.JPG]]
+
[[File:Tab2Good.JPG]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
 
'''Bad tab example'''<br>
 
'''Bad tab example'''<br>
[[Image:Tab2Bad.JPG]]  
+
[[File:Tab2Bad.JPG]]  
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 46: Line 69:
 
     <td align="left">
 
     <td align="left">
 
'''Good tab example'''<br>                     
 
'''Good tab example'''<br>                     
[[Image:Tab3Good.JPG]]
+
[[File:Nav available.jpg]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
 
'''Bad tab example'''<br>
 
'''Bad tab example'''<br>
[[Image:Tab3Bad.JPG]]  
+
[[File:Nav unavailable.jpg]]  
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 62: Line 85:
 
     <td align="left">
 
     <td align="left">
 
'''Good tab example'''<br>                     
 
'''Good tab example'''<br>                     
[[Image:Tab4Good.JPG]]
+
[[File:Tab4Good.JPG]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
 
'''Bad tab example'''<br>
 
'''Bad tab example'''<br>
[[Image:Tab4Bad.JPG]]  
+
[[File:Tab4Bad.JPG]]  
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 79: Line 102:
 
     <td align="left">
 
     <td align="left">
 
'''Good tab example with tooltips'''<br>                     
 
'''Good tab example with tooltips'''<br>                     
[[Image:Tab5Good.JPG]]
+
[[File:Tab5Good.JPG]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
 
'''Bad tab example without tooltips'''<br>
 
'''Bad tab example without tooltips'''<br>
[[Image:Tab5Bad.JPG]]  
+
[[File:Tab5Bad.JPG]]  
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 101: Line 124:
 
* '''Try to limit the number of tabs if possible, so that the users need not scroll.'''
 
* '''Try to limit the number of tabs if possible, so that the users need not scroll.'''
  
* '''For a full screen application or if there is a user's requirement, customized tabs could also be provided.''' [http://wiki.forum.nokia.com/index.php/Custom_tabs Read more on custom tabs]
+
* '''For a full screen application or if there is a user's requirement, customized tabs could also be provided.'''
 +
 
 +
==Related Links==
 +
* [[Custom tabs]]

Latest revision as of 06:42, 9 May 2012

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

[edit] Description

Tabs provides navigation between different views/controls. Each tabs show name of open controls in rectangular box with its top borders rounded. User can navigate between different tabs using arrow keys. Usually active tabs highlighted to distinguish it from other inactive tabs.

[edit] Example

Keep followings general rules in your mind while designing your application with tabs.

  • The first tab should contain most essential functionality of the application. Underlying tabs can be used to hide advanced functionality.


Good tab example
Tab1Good.JPG

Bad tab example
Tab1Bad.JPG


  • Highlight currently selected/active tab and its title. Set title of others tabs dimmed/faded. Also make sure that the title of unselected tabs are clearly visible and readable.


Good tab example
Tab2Good.JPG

Bad tab example
Tab2Bad.JPG


  • Allow users to switch tabs using left and right arrow keys.


Good tab example
Nav available.jpg

Bad tab example
Nav unavailable.jpg


  • Connect the active tab to content area.


Good tab example
Tab4Good.JPG

Bad tab example
Tab4Bad.JPG



  • If tab is an icon (rather than text) then use tooltips to give description of tab


Good tab example with tooltips
Tab5Good.JPG

Bad tab example without tooltips
Tab5Bad.JPG



  • One row of tabs preferable than multiple rows.
  • The row of tabs preferable on top of the panel.
  • Change the font color of title on the active tab.

Changing the font color will give your active tab even more differentiation, and will allow people to quickly scan the navigation for the other view available to them.

  • Tab Labels should be short usually one or two words.
  • Try to limit the number of tabs if possible, so that the users need not scroll.
  • For a full screen application or if there is a user's requirement, customized tabs could also be provided.

[edit] Related Links

This page was last modified on 9 May 2012, at 06:42.
86 page views in the last 30 days.
×