Context: The artifact contains a medium or large amount
of content through which the user will navigate; that content is subdivided
into many pages or working surfaces.
Many Web sites
This pattern language
Problem: How should the content be presented in
a unified and consistent way, so that the user can easily navigate through
it and quickly become familiar with it?
Solution: Design a simple, flexible visual framework
for the content, then repeat it on every page or working surface; position
the content within that framework, allowing the form of the content to
vary as needed. Put functional elements, such as headers and
common controls, in the same place within the framework on each page; these
will usually be at the edges. Use the same color scheme (more or
less; see Color-Coded Sections)
and typography throughout -- you're trying to build a look that the user
can immediately recognize. Place all the elements of the framework
within an invisible grid that establishes the sizes of elements and the
distance between them (see Calm Grid).
Do not make the framework too constraining, however, since all the content
needs to fit gracefully in it!
The artifact needs to be visually unified, to look like it's all of one
piece. This may be done for commercial reasons, such as to establish
a corporate identity, but it also improves the user's experience by helping
maintain "visual momentum" as the user moves through the artifact.
Users should easily be able to find common functionality, wherever they
happen to be in the artifact. In particular, they need to find titles
and/or headers, navigation controls, and exit points.
Different content often demands different visual treatment, to make its
structure and meaning clear.
Too much sameness looks boring, and may even cause the user to get lost
in the artifact.
Be sure you understand the structure of the content before you start,
so you can take advantage of whatever consistency already exists.
For example, a series of dialogs may all have a text box at the top, or
a set of reference book sections might all have a single diagram in them;
these can be put in the same place within the framework. Let the
content speak to you.
If you need a creative boost, consider using some of these elements
to construct the framework:
Dense blocks of text or controls, where it's appropriate for the content
Images or groups of images
Strong left or right margins
Significant areas of white space
Vertical or horizontal lines
Sidebars and margin notes, for textual content
Very bold typefaces for headers
Text areas that are inverted, e.g. white text on a black background, for
an even stronger statement than a bold typeface
Resulting Context: Within the framework, you
need to decide where to put Convenient
Environment Actions and various navigation controls (see Go
Back One Step and Go Back to
a Safe Place). You also need to figure out how to handle the
different content on each page. This is most commonly done in the
middle area of the page, since the edges are usually taken up with framework
elements. Try to stay within the grid you established for the framework;
other than that, just experiment with it to see what works.
Notes: Mullet and Sano devote a few pages of their
book, Designing Visual Interfaces, to this technique. In a
section entitled "Reinforcing Structure through Repetition," they point
out how little repeated structure is really necessary to achieve the effect
of a unified framework:
"The programmatic effect of repetition can be based on content or visual
characteristics and can be established using virtually any design element.
The powerful human tendency to perceive regularity in the display leaves
the designer with a wide latitude for choosing an element whose repetition
facilitates communication while providing the comforting familiarity
of a well-defined program."
Comments to: firstname.lastname@example.org
Last modified May 17, 1999
Copyright (c) 1999 by Jenifer Tidwell. All rights reserved.