Tuesday, September 18, 2007

Tabs, Used Right: The 13 Usability Guidelines

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

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: (below)

Tab Usability Guidelines
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."    (Continued via Alertbox)    [Usability Resources]

Yahoo Finance Tab Controls - Usability, User Interface Design

Yahoo Finance Tab Controls


Post a Comment

<< Home

<< Home