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. Thanks for all your past and future contributions.

Revision as of 03:23, 23 June 2009 by naresh99 (Talk | contribs)

Tabs Usability

From Wiki
Jump to: navigation, search


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.


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

Bad tab example

  • 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

Bad tab example

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

Good tab example

Bad tab example

  • Connect the active tab to content area.

Good tab example

Bad tab example

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

Good tab example with tooltips

Bad tab example without tooltips

  • 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.

56 page views in the last 30 days.