| Problem Summary: A large page needs to be divided into manageable chucks | Approved: Brazos R1 |
| Related Patterns: Panels, Collapsible | Coding: NA |
Example:
Use When:
- A large amount of information needs to be divided into manageable chucks.
- The customer does not need to see several panels at once. (If not true, consider Collapsible Panels.)
- The panel titles are short enough, and there are few enough panels for all the tabs to be displayed at once. (If not, consider Collapsible Panels).
- Tabs are usually better than Collapsible Panels when the conditions above are met.
- It is best not to nest tabs. Instead, consider Collapsible Panels for one of the sets of panels, or consider right-hand navigation.
- The tabs are always above the active panel, not to the left, right or below.
Solution: See example.
- Changes on a set of panels are saved or cancelled together. Moving to a different tab does not imply or require a save.
- Tabs respond to mouse clicks anywhere within the visual boundaries of the tab. It is not acceptable to respond only to clicks on the text of the tab.
- When the mouse is over a tab, the pointer changes to a hand, to indicate that a click will cause navigation. The area where the mouse pointer is a hand corresponds exactly to where a click will cause navigation.
Rationale: NA
Accessibility: Also see Accessibility
- When a tab proper (not the panel or one of its controls) has focus, the left and right arrow keys move among the tabs.
Internationalization: See Internationalization
Supporting Examples: None
Where Used: IQA
Items of Note: None
A few comments
On the Problem Summary: "There is more information than will fit on a page" - I dont think this captures it. Pages are indefinitely long. There is no such thing, really, as having too much information to fit on a page.
Instead, it seems like it should be something about related information on multiple screens, in digestable chunks, or something.
On a similar note - I wonder if Wizard should be here, rather than in Navigation and Wayfinding. Basically, for all of these examples (wizard, tabs, collapse, accordian) you have one set of info to gather and you want to break it up into smaller pieces.