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. Pingback: Indexed Tabs: UX Pattern Experiments

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

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