One extra Design Pattern

20-02-2007 - BLOGG 4

PAFSD Lecturer ask the class to research and note one other design pattern (not within the GOF 23 design patterns).

Name of Pattern:
Module Tab design pattern [5]

Problem
The user needs to navigate through one or more stacked panes of content without refreshing the page.

Applicability: (where and when used)
There are multiple panes of content, but there is space to only show one content pane at a time
The different panes of content do not need to be viewed in context with each other.
You need a way to switch between the content without going to a different page. For navigating to different pages within a site, use Navigation Tabs instead
There are 2-10 category titles
The category titles are relatively short and predictable.

Solution
o Present a single-line row of links immediately above the stacked panes of content they will control.
o Never stack multiple rows of tabs to control a single piece of content.
o Separate the links with the vertical bar character "" or through an equivalent graphic.
o Always show one tab as selected with its content visible
o Indicate the selected tab by highlighting the background of the "cell" around it. Yahoo! adds a "pointer" to the bottom of the selected tab.
o The content should be visually connected to the tab it is associated with and be visually bounded (usually by a box.)
o Only one content area may be visible at a time.
Maintaining the Metaphor
o Tabs should appear in the same location as the user clicks from one tab to another.
o Wherever possible, do not refresh the entire page upon selection of a new tab.
o Selecting a tab will not affect other parts of the page.
o Selecting a tab will not navigate to a different page or perform an action (beyond switching the visible content.
Rationale
o Tabs provide context. They give visual indication of a user's location within a body of information.
o Tabs build on a real world metaphor. The selected state is reinforced with the file folder tab metaphor of a folder physically in front of the others in the set.
o Tabs provide navigation. They provide the ability to navigate alternate content views.
Accessibility
o Allow the user to navigate across the tabs in a logical order with the Tab key.
o A focused tab can be selected with the Enter key.
o Indicate the active tab (pane) by one of these alternative means (in addition to visual indication):
§ Include a TITLE attribute with the word "active" into the link that was just activated.
§ Include an invisible graphic with an ALT attribute and a word "active" into the link.
§ Attach an ALT attribute with the word "active" to Yahoo!'s graphic that indicates active link.

[5] http://developer.yahoo.com/ypatterns/pattern.php?pattern=moduletabs (2006-03-05)
[GOF] Elements of Reusable object Oriented Software, GOF 1998