Chapter 9

Supra-Level Elements: Designing for Usability

Supra-Level design is the largest scale visual language of documents, print or electronic. These elements are those that coordinate, overarch and unify all of the other levels to create the whole document.

• major headings
• tabs/dividers
• size
• shape
• color of page or screen

Supra-level elements are critical in determining a document's usability.

Example: By adopting the conventional paper size and stock for a business card two supra-level design choices are made that help its usability.

It is also important to consider how the document will be distributed to readers (mailed, computer screen?), the context in which readers use it (home, work?) and the amount of time readers have to look at it when choosing supra-level design elements

In many cases readers are looking to use a text, rather than read it. So supra-level elements such as headers, tabs, field size and texture, color patterns and field borders help to make information easily accessible.

• The consistent cover page, section headings, and page color of an organization over several years make readers comfortable because of this supra-level cohesion. Catalogs and brochures tend to use similar layouts so readers are used to the design.

The web is very focused on supra-level design because it allows linking unlimited fields of information across space and time.

The supra-level design as makes the first impression.

Process Example

Elaine needs to re-design her agency's annual report so that readers will want to explore and use it. Her goal is to design a more attractive and usable document.

First Elaine analyzes the rhetorical situation.

• Audience: a wide range of educational levels and interests, public and private including donors, board members, state officials, interested public, city planners, engineers and farmers
• Purpose: to inform readers about data and findings, and persuade them to continue to donate
• Context: most readers will get this document in the mail, but occasionally it will be used at small group meetings

In order to re-design the document Elaine must invent, revise and edit.

Invention: place headings in margins, use facing 11x17 pages for a more professional look and better spacial cohesion, use recycled paper

Revision: emphasizes boundaries between sections, introduces sections with bold titles and a box, adds lines and pages numbers in footer, adds internal tab on edge of page, adds key words to tabs, uses agency's logo, centers title of document

Editing: adds blue spot color throughout, mats behind pictures, changes color of title page to light blue

Vocabulary of Supra-Level Elements

Textual Elements: they initiate new sections of text and provide cohesion among text fields. They also set the theme and create a certain tone.

• Titles on cover sheets
• section headings
• initial letters
• tabs
• navigation bars
• headers/footers
• background text

Conventions include headers and footers, or a standard cover page for a particular corporation. These allow for cohesion between documents as a series.

Spatial Elements: on the supra-level have a major impact on the size, scope and structure of a communication. This includes how a paper document is physically contained (in a folder, laminated?). Supra-level spacial elements provide the basic framework onto which a designer arranges textual and graphic elements.

• size of paper/screen
• orientation of paper/screen
• folded, trimmed or attached
• inserts
• shape (can help to attract attention)
• thickness of surfaces (paper or cardstock, etc.)
• on the web: single screen or is scrolling necessary?
• web links

Conventions include the typical size of paper used (8.5x11) or the small size of a business card. On the web usually pages conform to the width of the screen.

Graphic Elements: can create boundaries between text sections, give the document cohesion, and express a theme or mood. They give the communication shape and structure.

• lines
• shading
• borders
• frame data displays/pictures
• background color, texture, glossiness

Conventions include the ornate borders often used on awards, or the common use of semi-gloss paper for an annual report.

*Textual, spatial and graphic coding modes all work together to produce a successful document.

Applying the Cognate Strategies

Supra-level design is a process of rhetorical adaptation, striving for the best fit with readers, purpose, and context.

• Arrangement: routes readers to points of interest by giving a quick map identifying the key units and subunits, creating cohesion among them. Dividers and shaded pages can help to arrange your page.
• Emphasis: points readers to selected places in the communication through things like bolding and section headings.
• Clarity: can greatly enhance by making the purpose clear through giving users easy access to information.
• Conciseness: designers have to be careful not to overindulge and create too many variations that end up misdirecting readers.
• Tone: immediately give the document a voice (serious, playful, trivial, calm, objective)
• Ethos: is influenced by supra-level design because it decides if readers believe a document is honest and if the author is reliable.