Tab Dialogs

Problem

Too much information on one page can make it difficult to find and focus on a specific content.

Solution

Break up related chunks of information on individual tabs that can be accessed one at a time.

Context

• You have multiple, only loosely related groups of content, where each group relates to different types of tasks.
• Users would likely want to only interact with one of these groups of content at a time (e.g., to accomplish very specific tasks at different times).
• All of the groups of content will either not fit on one page or screen, or would be overwhelming if shown all at once.

Rationale

A tab-based approach leverages understanding that many users will have from real world tabbed folders, usually used to group related documents.

By separating each chunk of related content onto individual tabs, users can quickly and easily get to each group of content. Rather than having to scroll (assuming you don’t put too much on each tab), users can quickly glance at the content on a single tab and quickly make sense of the information.

Beyond the value of placing related info together on one tab, you can now also order the tabs in a way that will make sense to users (similar to using a wizard to step users through tasks). If you use informative labels for the tabs, users can jump to the tab they need and focus on a single activity. Therefore in many cases tabs serve as navigational controls across a group of related content.

Implementation

You will need to have an understanding of how to split up the content across the tabs. You want each tab to hold related information, usually related in terms of completing one or more related tasks. For example, a user should be able to accomplish a specific task all on one tab, without having to go back and forth between tabs. Conducting user research and having an Information Architecture plan will lead to this type of understanding.

It is probably best to use one set of tabs presented horizontally; i.e. don’t have multiple rows of tabs. If you can’t fit all of the tabs you are considering into one horizontal row, consider having using additional tabbed windows to further split up all of the tabs (i.e. each tabbed window has just one set of horizontal tabs).

If the tabbed window will tend to be fixed (as opposed to a floating window), you may consider presenting the tabs vertically, for example along the left side of the screen. This approach is used in many cases for secondary navigation for web sites, with the primary navigation along the top of the page.

Use a consistent size for tabs, and try to match the style of the language used for the tab labels. For example if tabs are grouped by actions, you can use action verbs such as “Connect.” If instead the grouping is based more on content, then use a consistent set of content related appropriate labels.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

You can implement Tab Dialogs using combination of the following ASP.NET controls: WebTab, WebDialogWindow. Check out the samples browser to see it in action.

Windows Forms

You can use the NetAdvantage for Windows Forms WinTab control to implement this pattern.

WPF

You can implement this pattern using the NetAdvantage for WPF xamTabControl control to implement this pattern.

Sources

Jennifer Tidwell, Card Stack

Yahoo Design Pattern Library, Module Tabs

Tags

Page Layout.