×
Namespaces

Variants
Actions
Revision as of 13:46, 19 June 2009 by naresh99 (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Tabs Usability

From Nokia Developer Wiki
Jump to: navigation, search


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.

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
Tab3Good.JPG

Bad tab example
Tab3Bad.JPG


  • Connect the active tab to content area.


Good tab example
Tab4Good.JPG

Bad tab example
Tab4Bad.JPG



  • If title of tab is 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.
116 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.

×