Repeated Framework

Examples: 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.

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!

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:

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:
Last modified May 17, 1999

Copyright (c) 1999 by Jenifer Tidwell.  All rights reserved.