Tabs Usability
Article Metadata
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 |
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 tab is an 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.
- 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.
I would add that comprehensive icons are always better: takes less room, does not need to be read, give consistency between application. when using icons, be sure to be coherent, and to use well known metaphors.
27 Sep
2009
The main function of Tabs is to move between different views. Tab is one of the basic element for User interface in Symbian.
This article describes general and simple rules that should be kept in mind during designing tabs in your application. The rules are very well-explained with image implementations. This article is specially meant for beginners. Beginners can also refer Custom tabs to make the tabs more attractive in their application.