Indexed Tabs: UX Pattern Experiments

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.

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

5 thoughts on “Indexed Tabs: UX Pattern Experiments

  1. your index tab is available for small device especially mobile phone. but mobile phone has no rollover affordance. how do you think about it?

    1. Thanks mtKim. 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.

Comments are closed.