Interface Design: How To Design Effective And Usable Navigation Tabs

Sponsored Links

Tabs are one of the most frequently used navigation design solutions for many web pages needing to provide access to a lot of different content modules. Tabs, like in real life, are similar to an always-on minimalist menu, one that allows easy switching to a different view or to an alternate data set, in just one click.

But just like any other interface design component, tabs require lots of detailed design attention to be really effective.

In particular, understanding their nature and use, as well as the typical mistakes done by other web sites and designers, can help a great deal in understanding the major risks one runs into when wanting to adopt tabs inside its navigation design strategy.

Jakob Nielsen, world renowned usability guru, provides here a rich set of guidelines to follow when designing tabbed navigation that wants to be both effective and usable. He focuses on showcasing real-life examples that match all of his requirements while showing also the typical limitations and obstacles that such solutions often run against.

Here his detailed guide to designing highly usable and effective navigation tabs.

Intro by Robin Good

 

Tabs, Used Right

by Jakob Nielsen

Summary:
13 design guidelines for tab controls are all followed by Yahoo Finance, but usability suffers due to AJAX overkill and difficult customization.

Tabbed controls from the upper left and middle right of the Yahoo Finance homepage.

It's a rare pleasure to come across a user interface on the Web that uses dialog controls correctly. Even something as simple as radio buttons and checkboxes are incorrectly used half the time. And let's not even get started on drop-down menus, which are horribly abused, or the homemade scrollbars that deface most Flash sites.

Yahoo Finance recently launched a redesigned homepage that uses tabs correctly, as shown in the following tabbed areas from two different parts of the page:

Tab Usability Guidelines

Top navigation bar for Yahoo Finance's homepage.

This design follows all 13 guidelines for tabs:

1. It uses tabs to alternate between views within the same context (not to navigate to different areas -- a common mistake introduced by Amazon.com).

2. It logically chunks the content behind the tabs so users can easily predict what they'll find when they select a given tab. (Card sorting is one option for researching this "mini-IA" problem. If you don't find clearly distinct groupings, then tabs are likely the wrong interface control for managing your content.)

3. Typically, users don't need to simultaneously see content from multiple tabs. 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 and lowers usability compared to a design that puts everything on one big page.

4. The tabs are roughly parallel in nature, at least for U.S. users (for international users, it would be better to have a tab for "North America" or "Americas" to better parallel "Europe" and "Asia").

5. The currently selected tab is highlighted. Here, it's highlighted by its lack of color, which works fine as long as there are at least 3 tabs. (With only 2 tabs, it would be harder to tell which one was selected.)
   • 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.

6. The unselected tabs are clearly visible and readable, reminding the user of the additional options. If the non-highlighted 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.

7. The current tab is connected to the content area, just as it would be if we were shuffling several physical index cards that had tabs stuck to them. This emphasizes which panel is being shown, and also helps tell users which tab is selected when there are only 2 tabs. Having the same color for the selected tab and the panel area reinforces the connection between the two and is a reason to support the use of reverse highlighting.

8. The labels are short and use plain language, rather than made-up terms. Tab labels should usually be 1-2 words. Short labels are more scannable; if you generally need longer labels, it's a sign that the choices are too complicated for a tab control.

9. The labels in the rightmost example above use Title-Style Capitalization: each word's first letter is uppercased. The leftmost example erroneously uses ALL CAPS, which is rarely a good idea because it's harder to read. Readability doesn't matter so much for single, short words, but -- as guideline #20 for homepage usability states -- you should pick one capitalization style and stick to it.
   • Microsoft's Vista User Experience guidelines recommend sentence case (in which you capitalize only the first character of the first word), whereas Apple's Human Interface Guidelines recommend title-style capitalization. In this case (pun intended), I side with Apple, but truthfully, it doesn't matter, so long as you stick with a single style. (Do avoid all uppercase or all lowercase labels, though.)

10. There's only one row of tabs. Multiple rows create jumping UI elements, which destroy spatial memory and thus make it impossible for users to remember which tabs they've already visited. Also, of course, multiple rows are a sure symptom of excessive complexity: If you need more tabs than will fit in a single row, you need to simplify your design.

11. The row of tabs is on top of the panel -- not on the sides or the bottom where users would often overlook them.

12. The scope controlled by the tabs should be obvious from the visual design. Metaphorically, using tabs is like leafing through index cards in a drawer of an old-fashioned card catalog, so users must be able to tell at a glance what constitutes an "index card" (i.e., tab panel).

13. Fast response time ensures that clicking a new tab immediately brings the corresponding panel to the front. This is probably achieved through AJAX, but the programming technique is not important. What is important is to make the action fast enough (ideally <0.1 s) that people feel there's a physical connection between their mouse click and the appearance of the chosen panel.

While the tabs in the main body of the page are used correctly, the tabs in the global navigation bar at the top of the page are not:

Tabs should be reserved for letting users change the view while staying in the same place. Also, the little triangle beneath each label represents a pull-down menu, which is a highly non-standard widget to integrate with tabs.

Consistency

Yahoo Finance generally complies with a higher-level guideline: be consistent. The page contains three different areas with tabs, and they all look and work the same (except for the global navbar, as lamented above).

Sadly, there's a fourth tab control further down the page; here, the tabs are a different color. Mainly, though, this deviant tab control looks about the same as the other three, so it shouldn't cause major usability problems. In any case, it's so far down that page that many users won't scroll down to see it.

Consistency is important in GUI control design because it builds the user's feeling of mastery over the interface in several ways:

• Recognizability. When something always looks the same, you know what to look for and you know what it is when you find it.

• Predictability. When something always works the same way, you know what will happen when you act on it.

• Empowerment. When you can rely on your past knowledge of all the available features, you can easily compose a set of actions to achieve your goal.

• Efficiency. There's no need to spend time learning something new or worrying about the effect of inconsistent features.

AJAX Overkill

It's good when a tab click takes effect immediately, changing the panel area without a full page reload. But not all within-the-page updates are good.

On the Yahoo Finance page, stock quotes are updated in real time and each change is announced by a color flashing behind the affected number. The constant flashing all over the screen gets tiring fast, especially for numbers like volume, which change incessantly.

Just because you can do something doesn't mean that you should. Yes, it is a guideline to draw users' attention to updates within a page, but only when users need to be alerted. In this case, all users need to know is that all numbers are current and will be continually updated.

A trading system for day traders would be a different matter. In that scenario, users need to continuously monitor market trends for multiple securities, and colors flickering in their peripheral vision could alert them to short-lived trading opportunities.

On a financial portal homepage, however, users have to scan a broad set of headlines and stories. If they want to trade, they go to their broker's site, so they couldn't take advantage of anything that required trigger-fast actions anyway. Few people would sit and stare at this page to keep up with second-by-second changes; the relentless blinking is overkill and distracts users from the content they came for.

Customization Difficulties

Customization options for part of the Yahoo Finance page.

Yahoo Finance lets users customize the Market Summary tabs to show their preferred set of indices. Unfortunately, the personalization screen is overly difficult:

A chart accompanies the first item in the bulleted list, but this fact isn't obvious. If users want to change the default chart, they must infer that they have to change the element order on the quotes list. At minimum, the instructions should explain this. Better yet, the page should offer a set of radio buttons next to the index symbols and have the selected radio button determine which symbol is charted.

Also, investment experts know the ticker symbols for the indices they want to track, but they'll stick to their Bloomberg terminals. Most Yahoo Finance users will have no clue about what to type into this form. It's thus good that the page provides a link to the symbol lookup feature (just-in-time help). However, given that this page has few other features, it would have been better to just list the 30 or so most common symbols right on the page. Users could then select a symbol by clicking it, rather than having to type it (which is more error-prone).

(It's good that this customization interface is offered on a separate page instead of being squeezed into an AJAX-style overlay on the main page. Sometimes usability benefits from focusing users' attention on the matter at hand and allowing the necessary room for helpful features.)

I chose to customize this page because it shows the Dow index as the default. Every investment book I've ever read says that the S&P 500 is a better indicator for the U.S. stock market, so that's obviously the one I wanted to see. (In the interest of overly full disclosure, S&P has been one of our consulting clients, but that's not why I prefer their index. I prefer it because averaging 500 stocks gives a broader picture than averaging 30 stocks.)

Perhaps Yahoo should have used the S&P 500 as the default chart from the beginning, freeing me from having to enter the customization screen. However, while the S&P 500 is theoretically better, most press coverage centers on the Dow, so most novice investors likely understand it better.

Ethnographic research could tell us more about how people think about investing and stock indices, and it's quite possible that Yahoo did the research and had good reasons for picking the Dow. I haven't researched this particular question (our studies of investors focus on their use of the investor relations (IR) sections of corporate websites), but my guess is that Yahoo did the right thing and most users do prefer to see the Dow as their default.

While Yahoo's customization has its usability problems, the page does make good use of personalization, which is difficult to do. (The article I wrote on problems with personalization 9 years ago still holds true. The very fact that personalization improves so slowly is one reason to be skeptical about any new claims for sudden improvements in personalization technology.)

Among the page's personalized features is a list (not shown here) of current quotes for the last several stocks the user looked up. Recent interest is a good proxy for current interest, and it's very likely that users still care about the quotes for those recently checked stocks.

While the new homepage design for Yahoo Finance has its weak spots, it's mainly excellent. I'm particularly pleased to see such a correct and effective use of tabs (global navigation aside).

Original article by Jakob Nielsen first published on September 17th, 2007 as "Tabs, Used Right" on Useit.com.

About the author

Jakob Nielsen, Ph.D., is a User Advocate and principal of the Nielsen Norman Group which he co-founded with Dr. Donald A. Norman (former VP of research at Apple Computer). Until 1998 he was a Sun Microsystems Distinguished Engineer. Dr. Nielsen founded the "discount usability engineering" movement for fast and cheap improvements of user interfaces and has invented several usability methods, including heuristic evaluation.

More pragmatic usability advice is covered in his full-day tutorials on the Page-Level Building Blocks for Application Usability and on Dialogue and Workflow Design at the User Experience 2007 conference in Las Vegas and Barcelona.

Jakob Nielsen -
Reference: Useit.com [ Read more ]