What:
Set of tabs where the inactive tabs are represented as index numbers / icons and active tab shows the full tab title by expanding in width.
Set of tabs where the inactive tabs are represented as index numbers / icons and active tab shows the full tab title by expanding in width.
Use When:
The problem with typical tabs pattern is that when the tab titles are longer there will be less number of tabs that can be placed in a fixed width real estate and this create a problem in smaller devices such as a iphone, where the width is limited.
See the video in the following:
Typical tabs pattern -- taking a lot of horizontal space.
To avoid this issue, you can use a new tabs pattern(I call it"Indexed Tabs" pattern ) shown here It can relatively adjust more tabs in the same available width. Specially useful in case of applications designed for mobile devices (iphones/androids etc.)
How:
The inactive tabs show the indexed numbers (1-indexed) or can show icons which will take less horizontal space than if a complete tab title is shown in those tabs.
The mouse-over tool-tip can always display the complete title (on the devices where mouseover is supported).
On touch- enabled mobiles/tablets, due to the absense of rollover event, the icons are used instead of index numbers to suggest the kind of information the tab view contains.
The active tab will shows the complete tab title there by clearly indicating that the corresponding tab view is served.
Whiteboard concept: To minimize the tabs eating up your horizontal space, a new approach can be used - indexed tabs
Wireframes of the Indexed Tabs
On touch enabled mobiles/tablets, due to the absense of rollover event, the icons are used instead of index numbers to suggest the kind of information the tab view contains.
"Indexed Tabs" is in action
Sample screenshots showing indexed tabs on a desktop where mouse is supported.
In this example the width of the tabs area varies depending on the tab title length that effects the total horizontal real estate.
In this example the selected tab width is set to a default value, that prevents the variation in the total tab area width.
