Thursday, October 11, 2007

Interface Design: How To Design Effective And Usable Navigation Tabs

Designing usable tabs ...

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

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

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")."    (Continued via Robin Good)    [Usability Resources]

Yahoo Homepage Tabs - Usability, User Interface Design

Yahoo Homepage Tabs


Post a Comment

<< Home

<< Home