
Short labels are more scannable if you need longer labels, it’s a sign that the choices are too complicated for a tab control.
Write short tab labels and use plain language, rather than made-up terms. This design reinforces the connection between the tab and its associated content, and is a reason to support the use of reverse highlighting Travelers’ tab control uses the same color for the selected tab and the panel area. This emphasizes which panel is being shown, and also tells users which tab is selected when there are only 2 tabs. Connect the current tab to the content area, just as if you were shuffling several physical index cards with tabs stuck to them. If the nonhighlighted tabs are faded too much into the background, there's a risk that users will never click them and never discover the many hidden features. The unselected tabs should be clearly visible and readable, reminding the user of the additional options. As shown in the above example, such additional signaling is important if there are only two tabs. In addition to highlighting, you can mark the current tab by size, a boldfaced label, an icon, or by making it appear to be in front of the other tabs. With only 2 tabs, it is hard to tell which one is selected. Ticketmaster’s tab controls highlight the currently selected tab (Just Announced ) by its lack of color, which would work fine if there were at least 3 tabs. Make sure that the highlighting is prominent enough so people can tell which tab is selected. It would be better to remove the About Workday tab to keep the tabs parallel. The first tab About Workday provides an overview of the company, while the other tabs describe the services that the company provides. Workday’s homepage uses tab controls to feature its services and applications. If the tabs are significantly dissimilar, users will interpret them as site navigation. Design tabs that are parallel in nature. If people do need to compare the info behind different tabs, then having to switch back and forth puts an added burden on their short-term memory, increases cognitive load and interaction cost, and lowers usability compared to a design that puts everything on one big page. Use tabs only when users don't need to see content from multiple tabs simultaneously.
If you don't find clearly distinct groupings, then tabs are likely the wrong interface control for managing your content.) ( Card sorting is one option for researching this “ mini-IA” problem.
Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab. This is the single most important point, because staying in place while alternating views is the reason we have tabs in the first place. Use tabs to alternate between views within the same context, not to navigate to different areas. Here are 12 design guidelines for using tabs: I'm not discussing browser tabs in this article.) Tab-Usability Guidelines A different kind of tabs is used as browser chrome to allow users to keep multiple pages open in the browser at the same time. These are the tabs you might design yourself, as part of your website or web-based application. (Here, I'm talking about in-page tabs, as shown in the several example screenshots below.
This article talks about another design element that gets frequently misused: tabs. And let's not even get started on drop-down menus, which are horribly abused. Even something as simple as radio buttons and checkboxes are incorrectly used half the time.
Simplest GUI widgets are the building blocks for most functionality on the web, but it's rare to find sites that use all the dialog controls correctly.