Pattern 79: Display the options
 AKA:

Back to Diagram 1 - Getting started Back to Diagram 2 - Usability Back to Diagram 3 - Adding detail Back to Diagram 4 - Workflow/security

View sensitizing image - tbd

You have ESTABLISHED THE USE CASES (3) and CLASSIFIED YOUR SITE (11).You understand THE RHETORIC OF ARRIVAL AND DEPARTURE (20).

What is the best way to show the users how to use the site and what options are available?

Therefore

Use tabs only when there are less than about 8 options. Consider a see-through tab card that summarizes the information on the other cards. On workflow sites provide ‘buttony’ Previous and Next buttons. Ensure that the site logo, navigation and tabs load quickly.

This pattern is terminal within this language.

Contributors and sources
Richard Dué, Detlef Vollmann

Discussion - forces - known uses

Navigation bars and search engines provide the basic option display but are limited when the site is complex. One way to sow options is to use a tab card layout such as the one above. Tab card metaphors can be useful on all sites, but they are especially so on workflow sites.

Tabs must be drawn in such a way that it is clear which one is active (in front). One may use colour to achieve this aim, making the colour of the active tab the same as the active area or the NAVIGATION BAR (25) below the tab. A tab bar should be a single graphic so that it loads quickly. THE RHETORIC AND ARRIVAL AND DEPARTURE (20) suggests that you should provide pop-ups or ‘rollovers’ to show where the tab will lead. If you do this by making each tab a graphic then the result will be both slow and messy (cf. Krug, 2000).

Amazon adopts this approach well. However as their site content has grown the tab organization has become less effective.

Browse the language What is Wu? Look at an example pattern sequence Structure of the patterns
Comment on Wu Contributors Return to TriReme home page Links to related sites