•13•

VISUAL DESIGN PRINCIPLES FOR USABLE

INTERFACES

Suzanne Watzman
Watzman Information Design

Everything is Designed: Why We Should Think How to Use Color 277

Before Doing 264 Creating a System: Graphic Standards and Branding 278
Making Things Easier to Use and Understand—Thinking Designing the Experience 280
About the User's Experience 264 Effective and Appropriate Use of the Medium 281
The Process of Good Design—How Do We Get The Element of Time 281
There from Here? 265
Consistent and Appropriate Visual Language 281
An Information Design Process Is an Informed
Navigation Aids 281
Design Process 265
Graphics/Icons 281
Visual Design Principles 266
Metaphor 282
Universal Principles of Visual Communication
and Organization 266 Color 282
Visual Design Tools and Techniques 267 Legibility 282
The Five Criteria for Good Design 267 Readability 282
Visual Design Principles at Work 267 Guidelines 282
Typography 268 Challenges and Opportunities: Creating Your
Own Guidelines 283
Variations in Letterforms 269
There Are No Universal Rules, Only Guidelines 283
Typographic Guidelines 270
Remember the Audience: Be a User Advocate 283
Design Principles: Page Design 271
Structure the Messages 283
Building the Design of a Page 272
Form Follows Function 283
Other Page Design Techniques 273
People Don't Have Time to Read 284
Charts, Diagrams, Graphics, and Icons 273
Be Consistent 284
Guidelines 275
Start the Design Process Early 284
Color 277
Good Design Is Not About Good Luck 284
Basic Principles of Color 277
References 284

263
264 • WATZMAN

EVERYTHING IS DESIGNED: WHY

WE SHOULD THINK BEFORE DOING

Take a moment and visualize Las Vegas at night.

What kind of image does this conjure up for you?
Flashing lights coming from all directions, one hotel's light-
ing display designed to outdo the one next door, as well as the
casino signage down the street. At first glance, everything is
exciting, colorful, and beautiful.
Now add a fireworks display to your picture. More color,
more excitement. Where do you look first? There is so much
going on; it is hard to take it all in, but you don't want to miss
a thing. Your head turns in all directions. You look there; then,
out of the corner of your eye, you see something else. Look over
there!
Now the fireworks are at their peak, and the noise gets even
louder. Any conversation with companions is impossible; it has
become impossible to focus on any one thing for more than a FIGURE 13.1. The nautilus shell is one of nature's many exam-
split second. Overwhelmed, overloaded, everything screaming ples of a perfect synthesis of form and function. It is the result
for your attention. Can you manage it? For how much longer? of years of evolution to survive in its current from. The work of
Do you begin to shake your head in despair and just give up? evolution is transparent, as we admire its beauty. It is a per-
Do you wish you were somewhere else—NOW? fect analogy for design and design process to create valuable
user experiences and usable interfaces.

Making Things Easier to Use and

Understand—Thinking About the User's Experience the method, and the style in which the information is presented.
It should be the result of a thoughtful, well-considered process,
The previous description is unfortunately an accurate analogy not merely a decorative afterthought.
of many users' experiences as they attempt to work, play, and Applying the appropriate visual/experience design princi-
relax. New products, new services, and new technology, with ples and tools while incorporating the user perspective (infor-
new or less-than-familiar ways of interacting with them. These mation design) enhances the value, perception, and usefulness
"users" are customers, electricians, grand parents, clerks, pilots, of products. It is the best combination of project goals, the user
students. They are you and me. And, for a great majority, it's a perspective, and informed decision making.
jungle out there!
Las Vegas at night with fireworks. Or, monitors that are wink-
The Role of the Designer. Visual design choices must be
ing, blinking, distracting, disturbing, overwhelming and, after a
based on project goals, user perspective, and informed deci-
short period of time, visually deafening. Now add the voices
sion making. Although many aspects of design are quantifiable,
coming from boxes...! Although this may seem like an exag-
there are visual principles that are less quantifiable, but equally
geration, for many this is exactly their experience.
important. Even though many individuals can learn the neces-
It is our job as creators of these products, of our user's expe-
sary skills, become visually literate, and able to make competent
rience to be simple and useful; where technology and process
design decisions, it is a unique combination of creativity and tal-
are transparent as possible. To do our job well, we must play the
ent that differentiates one design solution as more attractive and
role of user advocate, ensuring that the interfaces we design are
desirable than another.
not just merely exercising the technology, but assisting the user
One must not only have the talent, but also the understanding
do a job, easily moving from task to task, getting work done,
and skills to apply the principles required to present information
making life easier.
in its most accessible, useful, and pleasing form. This is the role
When we succeed, our products become effortless, even
of the designer in the development of interfaces for interactive
pleasurable to use. Good design is not noticed, it just works.
products: Understanding product goals and ensuring that inter-
That is the role of good design.
face is approachable, useful, and desirable. In an environment
in which the interface is the only tangible representation of a
Defining Visual Design. Visual design is not merely a se- product, and user perception determines product success, ap-
ries of subjective choices based on favorite colors or trendy propriate information presentation and visual design is the key.
typefaces—at best a cosmetic afterthought considered if there Designers understand visual principles within their usage con-
is enough time and money. Good visual design is the tangible text, and how to apply them appropriately to create attractive
representation of product goals. It is concerned with the "look," solutions that also solve problems.
 13. Visual Design Principles for Usable Interfaces • 265

The Process of Good Design—How Do We Get There Audit Questions A

from Here? • Who are your users?
• How will they use this product?
As interface designers, we are responsible for defining what the • When will they use this product?
experience will be like when someone uses our product. We are
defining, designing, then creating this experience to be one that • Why will they use this product?
is useful and meaningful, even pleasant and empowering. The • Where will they use this product?
designer must maintain an attitude of unbiased discovery and • How will your process evolve to support this product, as it
empathy for the user. In addition, one needs to create clearly de- evolves.
fined goals, a good design, and evaluation process—that support
and enhance these goals, and the flexibility to make changes as When the first set of questions are asked and answered,
the process continues and products evolve. the next set of questions must be asked and answered as
well:

An Information Design Process Is an Informed Audit Questions B

Design Process • What is the most efficient, effective way for your user to ac-
complish their tasks and move on to the next of tasks?
An Information Design Process is a method of visually structur-
• How can you most efficiently and effectively present informa-
ing and organizing information to develop effective communica-
tion required for ease-of-use of this product?
tion. Information design is not superficial or decorative, rather
a merging of functional, performance-based requirements with • How can the design of this product be done to support ease-of-
the most appropriate form for presentation of these require- use and transition from task to task as a seamless, transparent,
ments. and even pleasurable experience?
A thoughtful, well-designed solution will: • What are your technical and organizational parameters?

• Motivate users: It psychologically entices the audience, con- The Audit focuses on discovery. Many disciplines and organiza-
vincing them that they can successfully cope with the infor- tional resources must be considered. Change is a given, because
mation and tasks at hand. we begin with assumptions, and don't know what we don't
• Increase ease of use and accessibility: Decreases the effort know. The answers and their analysis in the context of organiza-
needed to comprehend the information and provides a clear tional objectives provide the basis for the Audit Report, which
path through material that aids in skimming, quick reference will serve as the guide for Phase 2: Design and Development.
and easy access. The Audit Report can be as simple as a two-page list or as
• Increase the accuracy and retention of information: Users complex as a comprehensive one-hundred page report. Since
learn and retain information better when it is visually mapped the goal is discovery, it include every aspect of the organization
and structured in obvious and intuitive ways. concerned with product the development cycle: project man-
agement, usability engineering, technical development, user
• Focus on needs of its users: Different audiences have different
support/documentation, visual communication and design, and
requirements and styles of learning. This approach ensures so-
content management. With these goals in mind, the result will
lutions that provide ways for different types of users to access
be unbiased, accurate, comprehensive information to serve as
information.
a basis for design in the following Design Development phase.
An Information Design approach is part of a process that
incorporates research, design, testing, and training to produce
useful, cost-effective and desirable solutions.

Phase 1: The Audit. The goal of the Audit is to create a

blueprint for the project, much like one would create an
architectural blueprint before building before construction.
To do an Audit, one must begin the process by asking and an-
swering a number of questions, acknowledging ongoing change
and an ever-increasing palette of products and services. Ask-
ing questions occurs throughout the entire product life cycle,
because the answers/design solutions reflect the user/use en- FIGURE 13.2. An Information Design Process is phased to en-
vironment and affect the ongoing usefulness and value of the sure user and organizational needs are met. It is ongoing and
product. iterative, throughout the life cycle of a product. Any change
To create a good design, ask and answer, on an ongoing basis, can trigger a recycling of this process to ensure solutions re-
the following questions: main appropriate and useful.
266 • WATZMAN

Phase 2: Design Development. Using the Audit Report as a explain and understand. They are often intuitive for those nat-
guideline, the process of Design Development begins. This is urally skilled in aesthetics and have been formally trained in
an ongoing, iterative process, with each iteration incorporating visual design/usability disciplines. Good visual interaction and
test results (from users) to make the product appropriate to experience design bridge many worlds: that of visual design,
the particular set of needs. In reality, the length of this process information presentation, and usability with that of aesthetics.
is often denned and limited by real-world deadlines, such as The resulting solutions are not only usable, but also attractive,
product release dates. interesting, and pleasurable to use.
The Design Development phase includes design and testing.
The designer/design team create a number of solutions based
on results an objectives of the Audit Report, as well as other
project specifics. The first, design ideas should be very broad, Universal Principles of Visual Communication
incorporating many ideas and options no matter how unrealistic and Organization
or unusual. As ideas are tested and evaluated, other parameters
defined and user feedback is incorporated, the solutions natu- Every visual person, whether artist or graphic designer, under-
rally become more refined. The surviving design ideas will then stands the universal principles of visual organization. They are
be based on solid information from user feedback, serving as a at work in everything we see and do. Though more conceptual
good basis for final design decisions. in nature, they are the basis for every visual decision. To begin
In the beginning of this phase, the focus is on high-level to understand these principles and how they work is to become
concepts and navigation; how will the product work? What will visually literate.
it feel like to use? As these initial concepts are refined, design There are three visual communication principles that are fun-
details become more specific. When the conceptual model and damental to all successful design solutions, related yet distinct
organizational framework are approved, the design of the look, in their meaning and application.
or product package, begins. By the end of this phase, the design Harmony is the thoughtful combination of many and dif-
has been tested, approved, and specified, to be carried out in ferent parts into a pleasing, orderly whole. In interface design,
the Implementation and Monitoring phase. this is achieved when all elements of a design appear to fit and
work well together. Transitions place to place are effortless, and
Phase 3: Implementation and Monitoring. The Implemen- the techniques used to achieve harmony are transparent to the
tation phase focuses on delivering what has been defined, de- user.
signed, and documented in the preceding phases. It is the final Visual harmony has the same goal as musical harmony; com-
part of a holistic process by defining all of what is required plementing yet enhancing the basic piece. In the visual world,
to make a product succeed on an ongoing basis. This includes the golden rectangle of Greek architecture is one of the most
not only implementation of the design within the technology, widely known examples of this.
but also product support, such as training creation of additional Balance is the pleasing harmony of various visual elements
materials, and other support that enhances use and productiv- to achieve a sense of stability and comfort in design. Much like
ity. On going monitoring of solutions is key to continued prod- a clown balancing on a ball while juggling objects of different
uct success, and must reflect the evolving technology and user weights who must make adjustments for actions that are occur-
needs. ring, visual balance requires the same concerns and adjustments
This last phase is more consultative, and ongoing through- in the interaction world.
out the product lifecycle. This ensures that any changes, such In design, all elements have visual weight, or heaviness. De-
as new technology and product developments, are reflected pending on whether the design is symmetrical or asymmetrical,
in the product itself. These may in fact trigger another Audit/ visual balance and a feeling of unity must be achieved for a so-
Design/Testing cycle, although usually less extensive than the lution to feel comfortable to the user.
initial process. There are a number of ways to achieve this. The simplest
Though the Implementation Phase is called the last phase, way is through symmetry, such as a page with centered type
it reveals the evolutionary process of design and development. and illustrations. Though it is more likely to be successful, it is
The goal of ongoing monitoring of solutions is to be aware of not as interesting and has the potential to be boring and static.
changes in user needs, technology and competition that impact Asymmetrical design is use of variation of elements, such as
user acceptance and satisfaction. Changes here often may result size, contrast, color, and placement to create visual tension and
in the need to re-evaluate and re-design to incorporate this new drama. Both are valid approaches and require skill and under-
knowledge gained. standing of complex visual interaction to achieve a balanced
and attractive design solution.
Simplicity in visual design is the embodiment of clarity, ele-
gance, and economy. Although there are many ways to achieve
VISUAL DESIGN PRINCIPLES the same result, a solution that is simple works, effortlessly de-
void of unnecessary decoration. Simplicity in design appears
Many visual design principles can be easily explained and easy, accessible, and approachable, even though it often requires
learned. Others, although easily defined, are more complex to more skill to achieve.
 13. Visual Design Principles for Usable Interfaces • 267

Achieving simple visual design solutions is no easy task,

but two guidelines for creating simple design solutions are:
"Less is more" (Mondrian) and "When in doubt, leave it out!"
(Anonymous). The simplest, most refined design is direct and
includes only the essential elements—as if by removing any of
the remaining elements the composition would be rendered
unintelligible or radically different.

Visual Design Tools and Techniques

New technologies are rapidly being created that go beyond sim-

ple automation of tasks and communication; they are revolution-
izing processes and the resulting products. Before the revolution
brought about by electronic publishing technology, many disci-
plines (e.g., writing, editing, design, publishing, programming)
were discreet and clearly defined.
Today, new publishing and communication environments
have brought to life the possbility of the renaissance
publisher—one person who can create, design, publish, and
distribute. Yet the process to arrive at successful solutions is
very complex. One must remain focused on what factors deter-
mine success and with constant evaluation and adjustment of
these factors in light of new developments.
FIGURE 13.3. The Univers typeface was designed by Adrian
The Five Criteria for Good Design Frutiger in 1957 to provide a set of compatible progressive
variations easily identified by a series of numbers.
Before any work begins, participants in the process should have
a clear understanding of the criteria for good design. These five
questions are guidelines for evaluation of design solutions be-
fore, during, and after the process to ensure that all solutions
VISUAL DESIGN PRINCIPLES AT WORK
remain valid as products, technology and user needs evolve.

• Is it Appropriate? The following sections outline the various visual design disci-
Is the solution appropriate for the particular audience, envi- plines and principles that are used when creating quality de-
ronment, technology, culture? sign solutions. Each topic can be a subject of extended study
in its own right, because there is much to understand when
• Is it Durable?
presenting information most appropriately for every specific
Will the solution be useful over time? Can it be refined, tran-
situation.
sitioned, as the product evolves and is redefined?
It is important to recognize that, as the design process
• Is it Verifiable? evolves, new insights and information will be discovered that
Has the design been tested in the use environment by typi- will have impact on the design solution. It is optimistic to base
cal users? Has feedback been properly evaluated and used to solutions on the early initial process, because the very nature
improve the product? of process means discovering what is unknown, yet critical. For
• Does it have Impact? that reason, all those involved in the design process must re-
Does the design solution not only solve the problem, but also main open and ready to incorporate new information that may
impact a look and feel, so that the user finds the product impact or change the design, cause delays, but will more accu-
experience comfortable, useful, and desirable? rately reflect the users/customers.
• Is it Cost-Effective? For example, if a new feature was developed that would
Can the solution be implemented and maintained? The cost change a product's target audience from professional users to
of any design begins with the Audit and the Design phases, focus on executives, one would have to reconsider most critical
but continues after Implementation to ensure that it remains interactions and content delivery. Executive users have less time
useful and cost-effective. The hard costs and soft costs of deliv- and need different information. The design result might be a
ery the solution plus ongoing maintenance add up to the real simpler interface, different content, perhaps larger typefaces,
cost of the design. Are there individuals with necessary skills different visual "tone of voice," etc.
and understanding to create, refine and maintain the design The most important principle to remember when thinking
as time goes on? about design is: There are no rules, only guidelines. Everything
268 • WATZMAN

is depends on context of usage. And always be thinking about it is often the major factor affecting overall usability. The de-
your users, users, users. signer must have a clear understanding of the various concepts
and principles that affect legibility when making choices about
typography.
Typography

Typography is at the very heart of visual design; it is the art How the Eye Sees, Then Reads. The human eye does not
of denning and arranging the general appearance of type. In read one letter at a time, or even one word at a time. It moves
visual design, typography is the first and most important design along a line of text, grouping the text to form comprehensible
skill to master and understand. Good typography is the basis phrases of information. This motion of the eye during reading is
of good visual design infrastructure, because it is the smallest known as saccadic movement. Typeface choice directly affects
definable part of a design—much like a pixel is to a screen this process, making it easier or more difficult for the eye to
display. If one can understand and apply the principles of good group, read and understand information.
typography, then one can extend those same principles to more The following characteristics of type further illustrate prin-
complex issues that follow, such as page design and product ciples that affect legibility of type and overall quality of the
design. communication.
Typographic choice affects legibility; the ability to easily read
and understand what is on the page, in all media. It is often x-Height. This refers to the height of the main element of a
said that good typography, like good design, is invisible—it just lowercase letter and is equivalent to the height of a lowercase
works. Choosing the appropriate typeface for the purpose and x. The x-height, not the point size, conveys the actual phys-
context, however, takes considerable experience and under- ical and psychological impression of the size of a letter.
standing.
With hundreds of typefaces to choose from and numerous Choosing a Typeface. The typefaces in Fig. 13.4 are the same
ways to manipulate them—finding the one most suited for the point size, but appear different because of variations in x-heights
intended audience is no easy task. Choosing the appropriate of each typeface. Because of these variations, as well as other de-
typeface is the difference between being able to read and sign elements of the letterforms themselves, some will be more
understand something, or not. Given the current publishing or less readable and legible than others. This depends on resolu-
environment with its lack of control, multiple media, and varied tion of the output/viewing devices, viewing environment, color,
viewing contexts, and user needs it is an even more complex context, and a variety of other design issues. When choosing a
task. typeface, it is critical to understand not only the characteris-
The choice of typeface immediately impacts whether a com- tics of a typeface, but also the usage context and application
munication is read and how it is perceived. A typeface can environment as well.
be used to set a mood. An old-fashioned typeface can make
a newsletter look dated; a typeface with extreme thick and
thin strokes in the letterform can look great in a brochure, Ascenders and Descenders. The ascender is the part of the
but render a web page unreadable. A typeface specifically de- lowercase letter that rises above the body (x-height) of the letter.
signed for online use can increase legibility as well as provid- The descender refers to the part of the lowercase letter that falls
ing perceptual cues about approachability and quality of an in- below the body (x-height) of the letter.
terface. Thus, typographic choice ultimately impacts product
acceptance. Serif and Sans Serif. Serif is the stroke that projects from the
A good choice makes the task of reading more enjoyable top or bottom of the main stroke of the letter. Some printed
and effortless rather than frustrating and fatiguing. Though letters have no serifs at all; these letterforms are called sans serif
typographic choice might seem to be an insignificant issue, (without serif).

FIGURE 13.4. The x-height of a typeface (actual height of a lower-case x)

is a key characteristic when deciding the visual size of a typeface, par-
ticularly where readability is the critical requirement. The above type-
faces are the same point size. Some will seem larger (e.g., Helvetica)
and easier to read than others (e.g., Serifa) though they are the same
point size.
 13. Visual Design Principles for Usable Interfaces • 269

Readability Versus Legibility. Readability is ability to find

A A
what you need on the page; legibility is being able to read it
when you get there. Effective page design makes a page read-
able; good use of typography makes it legible.
Legibility is determined by:
Old Style: Garamond (1617) Transitional: Baskerville (1757)
• typeface
•
•
•
•
•
output/viewing device, resolution
line length/column width
letter spacing, word spacing, line spacing
justified versus ragged columns
movement
A
Modern: Bodoni (1788)
A
Egyptian: Serifa (1894)

A
• color
• viewing environment

Contrast. Contrast can affect size, shape, color, and back-

Contemporary: Helvetica
ground color.

Variations. There are five ways to vary a typeface: FIGURE 13.5. These five A's show typographic style from the
1600s through modern times, reflecting similar changes in
• lightface tools, fashion, and current events. Ultimately, choice of output
• boldface media should determine typeface choice, given details such
• condensed as the thick and thin parts of the letterforms, negative space,
viewing environment, output resolution, etc.
• expanded
• italics
Variations in Letterforms
Note: In some typefaces, there may be additional increments
of medium and extra bold, as well as combinations such as bold Variations in Stress. Early designers of type attempted to
extended or bold italic. match the handwritten letterforms of the scribes as much as pos-
sible. The results were typefaces with a distribution of weight
Font. A font is made up of all of the characters of one size of through the thinnest part of the letterform, creating a diago-
one particular typeface. In addition to the alphabet and punctua- nal stress. A good example of this is Garamond. Over time, the
tion marks, certain fonts include symbols and special characters, stress became more vertical as in Baskerville, and later, com-
such as the &. pletely vertical with Bodoni. With Century Expanded, there is a
return to a slight diagonal stress. In Helvetica, you will find no
Size. Type size is referred to in terms of point size. Because of noticeable stress at all.
differences in x-heights, 14-point Helvetica looks much larger
than 14-point Times Roman. Variations in Thicks and Thins. Typefaces also vary in the
degree of contrast between the thick and thin strokes of the
letters. Garamond illustrates the prominent characteristics of
This is 14-point Helvetica. Old Style faces, little contrast between thick and thin strokes.
The contrast is even greater in Transitional faces, and Modern
This is 14-point Times. faces such as Bodoni, which have the most extreme contrasts
between thick and thin strokes. With Egyptian faces, such as
Kerning. Kerning is the adjustment of the spacing between Century Expanded, there is a return to less contrast. In Contem-
letters to give the visual impression that they are all equidistant. porary faces, such as Helvetica, there are no perceptible thick
and thin strokes.
Families of Type. There are five families, or organizational
groupings of type, based on their historical development. Al- Variations in Serifs. Serifs also vary from one face to the
though created over hundreds of years ago, all of these type- next in their weight and in the way they are bracketed—the
faces are in use today. But more important than knowing the way in which the serif meets the vertical stroke of the letter.
date of creation is understanding how typefaces have evolved You can see this evolution in type from the Old Style heavy serif
over time, and the resulting differences and similarities among of Garamond through the Transitional serif of Baskerville to the
them. The style of typeface is very much a reflection of trends, refined Modern serif of Bodoni. This was followed by a return
fashion, current events, and technical developments at the time to the heavy serif in Century Expanded, an Egyptian face, and
the typeface was designed. See Fig. 13-5. the elimination of the serif in Helvetica, a Contemporary face.
270 • WATZMAN

the reader, create visual intrusions, and slow or the curtail

alphabet ALPHABET reading.

Contrast in Weight (Boldness). Combining classic faces

with a good differential factor can add useful contrast, such
as extra bold Helvetica with regular-weight Times. Be wary of
alphabet ALPHABET combining two faces that are both intricate, such as Gill Sans
Bold and Souvenir. This can add too much contrast and visual
FIGURE 13.6. The serif typeface Century below versus the complexity.
sans serif typeface Univers, above. Understanding the dif-
ferences within the typeface as well as what the differences Output Device and Viewing Environment. The quality
between a serif and a sans serif is important. Try setting a of publishing technologies and viewing environment vary
paragraph of each with exactly the same line length, size and greatly—laser printer versus video versus electronic media, etc.
spacing to compare the differences. In choosing a typeface style, size, spacing, and leading, it is
critical to consider the final output medium and its effect on
legibility. Low-quality monitors and poor lighting have a major
Typographic Guidelines impact: serifs sometimes disappear, letters in small bold type fill
in, and colored type may disappear altogether.
Serif Versus Sans Serif. Serif typefaces have a stronger base-
line due to the "feet" created by serifs. This helps move the Letter Spacing. When letter spacing is too tight, the letters are
reader's eye horizontally across the line of type. Sans serif and hard to distinguish from each other, making them less legible.
serif typefaces can be effectively combined if one limits the When letter spacing is too wide, the gaps between the letters do
number of typographic changes to prevent what could become not allow the eye to recognize letter groups as easily. Optimal
visual chaos. The key is to ensure, that no matter what choices letter spacing is unnoticeable, the eye can skim across a line and
are made, they reinforce information hierarchy and overall de- quickly and easily understand.
sign goals. See Figs. 13.6 and 13.7.
Word Spacing. Too-tight word spacing makes words difficult
• Sans serif is often easier to read as online, though depending to distinguish one from the next. When word spacing is too
on the type size and monitor resolution, sans serif can be wide, gaps between words don't allow the eye to forms word
equally as legible if the appropriate size, style and color choice groups as easily. When there is greater space between words
is made than there is between lines, the reader's eye naturally falls to the
• sans serif or serif can be effective for contrast, particularly closest word—which may be the word below instead across the
when combined with size and weight changes. line. This often occurs with low-resolution or poorly developed
• resolution and color impact choices products.

Combining Typefaces. When combining typefaces, it is im- Line Spacing/Leading. The space between lines of text, or
portant to decide whether the goal is harmony or contrast. As leading, should increase in relation to type size. However, this
a general rule, it is wise not to use more than two different adjustment must be done visually, not mathematically. You can
typefaces on one page. Excellent typography does not get in also improve legibility by increasing the leading in relation to
the way of the reader. Too many typefaces can jar and confuse column width.

Line Length/Column Width. The correct line length is just

alphabet ALPHABET long enough for the eye to easily move across the line without
losing its place and easily drop down to continue reading the
following lines.

Justified Versus Ragged Right (Flush Left). A justified col-

alphbet ALPHABET umn can leave uneven word spacing, creating rivers, or vertical
white spaces, within in the paragraph. These rivers cause the
FIGURE 13.7. Serif typeface (Century) on the bottom versus eye to move vertically down the page, to naturally connect visu-
sans serif typeface Univers, on the top, show the differences in ally what is closest in proximity, instead of easily across the line
each as well as where the information in each "is held" are the of type. It is very difficult to prevent rivers in justified columns,
keys to optimum legibility and readability of text. Try covering unless much time and effort are applied. It is for this reason that,
up the lower half of lines of type with some other choices, to unless the type is manually set or adjusted, it is better to use a
get an idea of where the information "is held" in each typeface. ragged right column. See Fig. 13.8.
How easy or hard is it to understand the words or lines of text?
Try this for each situation and you will begin to get an idea of Highlighting with Type. There are three basic ways to high-
what is critical for optimum readability and legibility of text. light type:
 13. Visual Design Principles for Usable Interfaces • 271

Black on White Versus White on Black and Dark on Light

A justified column can leave uneven word spacing, Background Versus Light on a Dark Background
creating rivers, or vertical white spaces within the
paragraph. These rivers cause the eye to move Positive and Negative Type. White on black (or light on a
vertically down the page, to naturally connect dark background) is generally regarded as less legible and much
more difficult to read over large areas. To the human eye, white
visually what is closest in proximity, instead of
letters on a black background appear smaller than their reversed
easily across the line of type. It is very difficult to equivalent. The amount of contrast between the color of type
prevent rivers in justified columns, unless much and the background is an especially important factor for online
time and effort are applied. It is for this reason that, communication. Color adds exponential levels of complexity to
unless the type is manually set or adjusted, it is these considerations since displays are inconsistent from one
situation to another.
better use a ragged right column.

A justified column can leave uneven word spacing, DESIGN PRINCIPLES: PAGE DESIGN
creating rivers, or vertical white spaces within the
paragraph. These rivers cause the eye to move While typography deals with legibility, page design focuses on
vertically down the page, to naturally connect readability—the ability to read and comprehend information.
Can the reader find what is needed on the page? The two impor-
visually what is closest in proximity, instead of
tant functions of page design are motivation and accessibility.
easily across the line of type. It is very difficult to A well-designed page is inviting, drawing the eye into the in-
prevent rivers in justified columns, unless much formation. Users are motivated to accept the invitation. A good
time and effort are applied. It is for this reason that, page will ensure that the reader will continue by increasing
unless the type is manually set or adjusted, it is the ease of understanding and accessibility of the information.
(For purposes of simplicity, the term page design is used inter-
better use a ragged right column. changeably to mean page, screen, and document design.)
Motivation and accessibility can be accomplished by provid-
FIGURE 13.8. With current technology, the difference be- ing the reader with ways to understand the information hier-
tween a justified column and ragged right column can make archy quickly. At a glance, the page design should reveal easy
a huge difference. In a poorly justified column, spaces within navigation and clear, intuitive paths to discovering additional
a justified line connect vertically down the page, distracting details and information. This is called visual mapping.
the eye from easily reading across a line of text. A page, site or product that is visually mapped and designed
for easy navigation has:

• Bold or Extra bold • a clear underlying visual structure

• italics—Italics are appropriate for short phrases versus long • organizational landmarks
passages, because the slant of the italic appears lighter on is
more difficult to read. • graphic cues and other reader aids
• UPPERCASE Because Uppercase letterforms are more angular, • clearly differentiated information types, clearly structured ex-
the eye attempts to connect lines and shapes that are in clos- amples, procedures, and reference tools
est proximity and drawn in the same direction. In addition, • well-captioned and annotated diagrams, matrices, charts,
uppercase letterforms take the full space from baseline to the graphics, etc.
top of the font space. The eye has limited shape and size cues
to help differentiate between letters, words and sentences to This kind of visual structuring will aid readers and
create meaning.
• provide a clear path through the information
It is only necessary to use one highlighting technique for em- • aid in skimming
phasis. • give a conceptual framework
• prevent a feeling of overload from too information
Decorative Typefaces. These are of limited use for body text,
because their irregular design make them less legible. They One could think of a table of contents as a simple visual map,
should be used for headlines with caution. Because they are es- because it quickly provides a simple overview, the order, and
sentially typographic fashion statements, decorative typefaces some details about the structure and content. What it does not
can either reinforce or distract from the overall message, or reveal however, are priorities. Site maps or other diagrams will
brand of a particular product or organization. provide some of this information as well.
272 • WATZMAN

FIGURE 13.12. Filtering.

FIGURE 13.13. Mixing modes.

FIGURE 13.9. Gray page or screen.

FIGURE 13.14. Abstracting.

other graphic devices can increase a grouping/chunk and to

separate one chunk from another. See Fig. 13.10.

Queuing. This entails ordering chunks of information visually

to reflect the content hierarchy. The design suits the user's
requirements of subject matter, order, and importance. See
FIGURE 13.10. Chunking. Fig. 13.11.

Filtering. This step simplifies linguistic and visual order to fil-

ter out unnecessary background noise that interferes with the
information being transmitted. Filtering builds a sense of layers
of information through color, visual cues and symbols, bulleted
lists and headers, making one page effective for a range of users
and uses. See Fig. 13.12.

Mixing Modes. Different people learn by using different cog-

nitive modes or styles. Some prefer text, others prefer illustra-
tions, photos, diagrams, or formulas. To suit these naturally var-
ied learning styles, information must be translated into several
different modes, which are then carefully presented to avoid a
FIGURE 13.11. Queuing. confusing jumble. See Fig. 13.13.
 13. Visual Design Principles for Usable Interfaces • 273

Abstracting. The individual page or screen is a microcosm of impossible to ignore or focus attention on the primary field of
the complete book, site product. The result is a complete cod- vision when there is winking and blinking somewhere else on
ified system of graphic standards, effective for both the reader the page. Superfluous use of visual devices in fact reduces the
and the producer. Abstracting creates a system of standards value of the information by distracting and disturbing the user's
that simplify text organization, create consistent approaches to desire and ability to focus, read, and understand.
preprocessing information, and establish a unique customized
look for an organization's products. See Fig. 13.14. Proximity. This concept applies to the placement of visual
elements physically close, so they will be understood as related
elements.
Other Page Design Techniques For example, if there were 3 images with captions on a page,
it would be more useful to place each caption near the image
White Space. White space (or empty space) is one of the if explains, though it might be more efficient to place the three
most underutilized tools of design, yet is extremely effective. captions together in one block of type on the page.
It can be used to visually open up a page, focus attention, help
group like kinds of information, as well as provide a rest for the The Illusion of Depth. Though the online world exists on a
reader's eye and create the perception of simplicity and ease of two-dimensional space, various visual techniques can be used to
use. create the illusion of depth, much like the painters of the Italian
Renaissance period. Visual cues, such as layering, overlapping,
The Grid. A grid is a system for distribution of visual elements perspective, size, contrast, and color can reinforce visual hier-
in a clearly intelligible order. Grids, as part of a design system, archy by giving the illusion that one element appears on top of
determine the horizontal placement of columns, and the vertical or in front of another.
placement of headlines, text, graphics, and images.
This visual organization or grid system is a series of con-
sistent relationships, alignments, and spatial organization. The Charts, Diagrams, Graphics, and Icons
grid acts as a blueprint of the page that can be used again
and again to create additional pages that appear related, but The goal of any visual device is to provide the fastest, most
have different information. When the grid system is understood, efficient path to understanding ideas, as well as to make it clearer
it forms the basis for consistent application and extension of and more compelling. Useful, effective graphics can act much
the design by others who also understand the intention of the like visual shorthand, particularly important when the real estate
system. of the page is limited. A good graphic can eliminate the need for
Every good design has an underlying structure or grid, as a text and communicate across cultures. However, a bad graphic
basis to create a consistent look and feel to a program, web site, that is unclear and must be reinforced by long captions can be
book, or sets of any of these. One could think of the grid as the worse than none at all.
visual analogy of the metal beams as a framework of a high-rise The old cliche, a picture is worth a thousand words, is true
buildings. Each floor has the same underlying elements. Such only if it is efficient and effective. In stressful situations, people
as windows, elevators, plumbing, but depending on the use of do have the time to read or the ability to focus on lengthy text or
each floor, will be built and look very different. complex visuals. Though more difficult to achieve brevity and
The grid is also a tool to improve usability. For example, if a simplicity in such cases have greater value.
user can anticipate a button to always appear in the same place, People prefer well-designed charts, diagrams, and illustra-
or help always available in the same way, this greatly improves tions that quickly and clearly communicate complex ideas and
the usefulness of the product or program and ultimately its suc- information such as comparisons or analysis. Studies show that
cess. Placement all visual elements such as buttons and help are images are retained long after the reader is finished reading.
specified on the grid. Done correctly, visual images can be used to make the infor-
mation more memorable and effective. At a minimum, a good
illustration or graphic can often improve performance simply
Field of Vision. Field of vision refers to what a user can see
because it increases user motivation.
on a page with little or no eye movement; it is the main area
Visuals are powerful communications tools. They can be
where the eye rests to view most of the page. A good design
used to:
places key elements in the primary field of vision. It should
reflect and reinforce the information hierarchy. Size, contrast,
• visualize data
grouping, relationships, and movement are tools that create and
reinforce field of vision. • visualize new or abstract concepts
The user will see first what is visually strongest, not neces- • visualize physical and technical concepts that are invisible to
sarily what is largest or at the top of a page. This is particularly the eye
important for online information, because of limitations of page • communicate a large amount of information efficiently and
real estate and dense information environment. effectively
One can easily experience these concepts, as well as the
strength of peripheral vision, when looking at a page that Visuals can be used to explain and reinforce concepts, rela-
has a banner advertisement or moving graphics. It is virtually tionships, and data by making them tangible. They become
274 • WATZMAN

FIGURE 13.15. Zen calligraphy is an example of the historically close

relationship between word and image. The great Zen master Hakuin
of Kyoto, Japan (1768-1865) created this symbol to mean "dead," with
additional notes saying, "Whenever anyone understands this, then he
is out of danger."

thinking tools. Information is clarified, made easier to evaluate, intersecting circles, but after many years of reinforcement
and has greater impact. The use of visuals, whether they are many will recognize it immediately without any text or other
photographs, charts, illustrations, icons, or diagrams, is a very explanation. It is a very difficult task to create an icon that, with-
effective way to communicate a message. Choosing the appro- out any explanation, communicates a concept across cultures.
priate presentation of the concept is critical to the user's ability For example, the use of a freestanding rectangular box with
to effectively comprehend the message. In addition, a key to a an open door flap indicates a mailbox, or in-box. This kind of
successful visual is understanding the limitations of the display mailbox is rarely used today, and was never in use in Europe
medium. (they have mail slots or upright boxes) or any other part of the
world. Even the concept of mail delivery would be considered
Tables, Charts, and Diagrams. These three types of graph- strange. This is a case where understanding had to be learned.
ics are discussed in order of complexity. Tables are the least Although simple ideas presented as icons are appropriate, a pro-
difficult to create, charts the second most difficult, and diagrams gram with many complex icons using colloquial images would
the third. Illustrations, graphics, and other images and visuals surely make a program agonizing for users from other cultures.
are the most complex and require more conceptual and visual There is an important difference between an icon and an
sophistication. illustration, though often the two concepts are confused. If an
When is one more appropriate than the other? Determining icon has to be labeled, in fact it is really an illustration. The value
which format is the most effective is illustrated in Fig. 13.16. of an icon as visual shorthand is lost, and it is better to use just the
In addition to this list, it is important to remember that visual word or short phrase rather than both when screen real estate
cues, such as color, shading, texture, lines and boxes, should be is at a minimum. Alternatively it might be more appropriate and
considered redundant cues and only used to provide additional useful as an illustration.
emphasis to support the concept. If an icon is memorable with minimal reinforcement, then it
is successful. If after several times a user cannot remember the
meaning of a particular icon, then it is of no value and should
Icons and Graphic Cues. Icons and other graphic cues are be eliminated. If a set of icons is being designed, there must
another form of visual shorthand that help users locate and be consistency of style (business-like vs. playful), light source
remember information. Choosing a style that is easily under- (upper right or other), perspective and line style among the
stood, and consistent with the overall style, is no easy task. It is icons, as well as consistency with the product of which they
important to choose style that is simple and consistently rein- are a part.
forced throughout a product.
More complex and unique symbols and icons can be used
if usage takes place over a longer period, allowing familiarity Illustrations and Photographs. As technology improves,
and learning to take place. The Mastercard logo is basically two the use of complex images will only be limited by the designer's
 13. Visual Design Principles for Usable Interfaces • 275

When to Use What Graphic

If you want to show... use a...

Groups Group of related items, with a specific order numbered list

Relationships Relationships and steps involved in a process flow chart

Relationships between categories of ideas table
Relationships of tasks taking place over time project plan table

Evaluate/Compare Evaluate items against several criteria rating table

Evaluate items against one criteria comparison table
Compare more than one item to more than matrix diagram
one variable
Compare several things in relation to one variable bar chart
Compare the relative parts that make up a whole pie chart

Hierarchy Hierarchical structure of an organization organizational chart

Concepts concept Illustration and/or

Abstract concept text icons, other
graphics
complex images
interactive
components

FIGURE 13.16. When to use what graphic.

choice. Appropriateness is the most important component; one would add time, complicate the image, and possibly never sim-
should not use cartoons for a company brochure, or use a plify the explanation.
low-resolution photograph of a control panel when a line il- No matter what method one uses for visual explanations, it
lustration would be clearer. must clarify and reinforce. If the goal of the image is to explain
Understanding meaning and implications of illustrations and where to locate a piece of equipment, then an overview of the
photographs is no easy task, but there are some basic guidelines equipment in the environment is appropriate. If the goal is to
for making those choices. show a particular aspect, such as a button, then the illustration
Photographs represent existing objects easily, but issues of should focus attention only on that. One can crop an image to
resolution and cross-media publishing can often make them focus attention on specifically what is being explained; it all
unintelligible. If the photographs can be reproduced with depends on the goal of the photograph or illustration.
proper resolution, cropping, and contrast, and the focus user There are cases when the combination of photography and
on the required detail, then this is a good choice. They can also illustration are more effective than either alone. For example,
include cues for orientation and context that is more difficult to a photograph of an object in its usage environment conveys
achieve in an illustration. information beyond the image of the object itself. If the goal
Often the reproduction quality of a photograph is unpre- was to show the location of a particular part of that object, then
dictable, no matter how it is simplified or cropped to focus a detail, closely associated with the overall photograph or inset,
attention. In this case, an illustration or line drawing is more would be even more useful than just a photo or illustration alone.
effective. The obvious advantage of illustration is for visualiza-
tion of concepts or objects that do not yet, or may never exist.
Another advantage is the ability to focus by the design. For ex- Guidelines
ample, attention can be focused on a specific machine part by
highlighting various lines and greying-out less important parts Visuals Should Reinforce the Message. Don't assume that
of the illustration. To do a similar thing in a photograph at best the audience will understand how the visual reinforces the
276 • WATZMAN

FIGURE 13.17. Thirty centuries of development separate the the

Chinese ancient characters on the left from the modern writ-
ing on the right. The meaning of the characters is (from top
to bottom): sun, mountain, tree, middle, field, frontier, and
door.
door.

argument. A clear focused illustration with a concise caption FIGURE 13.18. It is obvious which of the above examples
will shorten comprehension and learning and cause the user to communicates a important message most quickly. The goal
say "Aah, that is how it all fits together!" for the designer is to communicate the message in the most
Visuals should: direct way, so that the user can understand and make deci-
sions based on that information. Obviously, some situations
• Help clarify complex ideas are more critical than others, but it is no less important to be-
• Reinforce concepts gin design with consideration of the needs of users.
• Help the user understand relationships
Focus on Quality Not Quantity. Graphics are only effective
if they are carefully planned, well-executed, and used sparingly;
Create a Consistent Visual Language. In creating graph-
like visual shorthand. One good diagram with a consice caption
ics, it is important to establish a consistent visual language
is more effective than several poorly thought out diagrams that
that works within the entire communication system. Graph-
require long explanations.
ics attract attention. When the user sees the screen, the eye
automatically jumps to a visual, regardless of the fact that it may
Work with a Professional Most of can write a letter that
interrupt the flow of reading. A graphic should not create dishar-
clearly communicates the the message, but when it conies to
mony. This will only slow down the progress of comprehension
writing the year-end sales report or the company brochure, we
and make it more difficult for the user to continue. It will also
often turn to a professional writer to help us find the most effec-
increase the effort needed to understand the relationship be-
tive, relevant, and interesting way to communicate our message.
tween the text and the visual.
This holds true for the development of user interfaces, graphics,
and other visuals that impact the look and feel and ultimately
Consider Both Function and Style. It is important to con- the overall success of a program.
sider function versus decoration. Although it would be won-
derful to see an artistic illustration tax forms or comic styled Build Graphics Library to Create Visual Consistency,
illustrations in annual reports, it would not be appropri- Organizational Identity, and a Streamlined Process. Be-
ate or reinforce a message or image of the communication cause graphics often do require a professional, they can become
and organization. A good graphic is appropriate to the con- time consuming and expensive to create. Once a visual lan-
text of the communication and reinforces and validates the guage and style are established, start building a graphics library.
message. If the same concepts are being illustrated repeatedly, this is an
 13. Visual Design Principles for Usable Interfaces • 277

opportunity to streamline the development process by collect- Because of its ready availability, it very tempting to apply it in
ing them in one place and making them available for reuse. An superficial ways. For color to be effective, it should be used
organizational style can be created for these visual explanations. as an integral part of the design program, to reinforce meaning,
As time goes on, users will come to associate a particular style not simply as decoration. The choice of color—while ultimately
and method of explanation with the organization, which aids based on individual choice—should follow and reinforce
understanding as well as reinforcing an organization's product content, as well as function.
brand and identity.

Reinforce Shared Meaning (Common Visual Language). Basic Principles of Color

A serious issue to consider when creating graphics, particularly
conceptual diagrams, is shared meaning, whether it be across Additive Primaries. The entire spectrum of light is made up
an organization or across the globe. The same diagram can be of red, green, and blue light, each representing a third of the
interpreted in entirely different ways by different people having spectrum. These three colors are known as additive primaries,
different backgrounds and experience. and all colors are made up of varying amounts of them. When
Truly effective graphics require extra time and effort, but all three are combined, they produce white light.
the payoff can be tremendous. They are invaluable tools for
promoting additional learning and action because they Subtractive Primaries. By adding and subtracting the three
primaries, cyan, yellow, and magenta are produced. These are
• reinforce the message
called subtractive primaries.
• increase information retention
• shorter comprehension time Green + Blue - Red = Cyan
Red + Blue — Green = Magenta
Red + Green — Blue = Yellow
COLOR
Color on a computer display is created by using different combi-
Though color is reinforcing, or redundant visual cue, it is by nations of red, green, and blue light. In print, colors are created
far the most powerful element in visual communication. Color with pigments rather than light. All pigments are made up of
evokes immediate and forceful responses, both emotional and varying amounts of the subtractive primaries.
informational. Because color is a shared human experience, it The three attributes of color are:
is symbolic as well. And, like fashion, the perception and value
of color changes over time. • Hue—the actual color
Color can be used to trigger certain reactions or define a style.
• Saturation—the intensity of the color
For example, in Western business culture, dark colors (such as
navy blue) are generally considered to be conservative, whereas • Value—includes lightness and brightness:
paler colors (such as pink) are regarded as feminine and not Lightness—how light or dark a color appears
businesslike. However, in other cultures these color choices Brightness—this is often used interchangeably with lightness;
would have entirely different meaning. the differences are as follows: lightness depends on the
The appropriate use of color can make it easier for users to color of the object itself, and brightness depends on the
absorb large amounts of information and differentiate informa- amount of light illuminating the object.
tion types and hierarchies. Research on the effects of color in
advertising show that ads using one spot of color are noticed
200% more often than black and white ads, whereas full-color How to Use Color
ads produce a 500% increase in interest.
Color is often used to add information to: Less Is More ... Useful and Understandable. Just as you
can overload a page or screen with too many typefaces, you can
• show qualitative differences have too many colors or make bad choices. Given the unpre-
dictability of color displays, users, and viewing situations, the
• act as a guide through information
choice can get complicated. Color is often best used to high-
• attract attention/highlight key data light key information. As a general rule, use no more than three
• indicate quantitative changes colors for primary information. An example is the use of black,
• depict physical objects accurately red, and gray—black and red for contrasting information, gray
for secondary. When thinking about color online, one must re-
All in all, color is an immensely powerful tool. Like the tools member that each display will output color in a different way.
of typography and page design, it can easily be misused. Re- Red and green should be used sparingly, since they spring for-
search shows that whereas one color, well used, can increase ward. Blue is often used for backgrounds, since it recedes. Add
communication effectiveness, speed, accuracy, and retention; to that the lighting situation and a variety of users. All these
multiple colors, poorly used, actually decrease effectiveness. factors affect color choice.
278 • WATZMAN

Create a Color Logic, Use Color Coding. Use a color scheme elements. The desired contrast between what is being read (this
that reinforces the hierarchy of information. Don't miscue the includes graphics, photographs, etc.) must be clearly and eas-
audience by using different colors for the same concept. When- ily differentiated from the background. If there is not enough
ever possible, try to use colors that work with the product contrast (of color, size, resolution, etc.), then differentiation and
branding and identity or an established visual language. Create reading will be difficult or impossible. This is particularly a prob-
a color code that is easily understood by the user and reinforces lem with online displays, because the designer has no control
meaning. of display quality.

Create a Palette of Compatible Colors. Harmonious color Quantity Affects Perception. Color used in a small area will
can be created by using a monochromatic color scheme or differ- be perceived differently by the eye than the same color used in
ing intensities of the same hue. But make them different enough a larger area. In the smaller area, the color will appear darker,
to be easily recognized and simple enough to be easily repro- in the larger area, lighter and brighter.
duced, no matter the medium.
Use Color as a Redundant Cue When Possible. At least
Use Complementary Colors with Extreme Caution. These 9% of the population, mostly male, is color-deficient to some
are colors that lie opposite each other on the color wheel. Let degree, so it is generally not a good idea to call out warn-
one dominate and use the other for accents. Never put them ing points only through color. With a combination of color
next to each other because the edges where they meet will and a different typeface, etc., you won't leave anyone in the
vibrate. Though this was the goal of pop art in the 1960s, it dark.
makes pages impossible to read. One must check each particular
display, because the calibration of monitors can unexpectedly
We Live in a Global World, So When in Rome... Remem-
cause this to happen.
ber that different colors have different connotations in different
cultures, religions, professions, etc.
Decisions Regarding Color in Typography Are Critical
Colored type appears smaller to the human eye than the same » in the U.S., on February 14th, red means love
type in black. This is important to consider when designing user
interfaces. One must also consider the smear effect on typogra- • in Korea, red means death
phy in displays, based on the color chosen, the strength of the in China, red is used in weddings and signals good luck and
projected light and interaction with colors surrounding it. Addi- fortune
tionally, quality and calibration of displays impact characteristics • in many countries, red means revolution
of color online. • to a competitor, red means first place
• to an accountant, red means a negative balance
Consider the Viewing Medium. The same color looks differ- • to a motorist, red means stop
ent when produced by: • in emergencies, a red cross means medical help
• a computer display
• an LCD projector
Creating a System: Graphic Standards and Branding
• color laser printer versus dot matrix output
• glossy versus dull paper With the explosion of new publishing media in a global mar-
ietplace, the need for guidelines for developing and produc-
Context Is Everything. Though printed color is very famil- ing consistent, quality communication has taken on a new
iar and more controllable, projected color is inconsistent and argency.
varies, depending on lighting, size of the color area, size and The new technology makes it easy to generate images, and
quantity of colored elements, lighting, output device. One must offers a wealth of options. The danger lies in creating the vi-
check all viewing possibilities to ensure that color choices are sual chaos, with every element demanding attention beyond
readable as well as legible, across all media used. What might he point of sensory overload. With the new tools, it can hap-
look good on a laptop may not be readable when projected in pen faster, at a lower cost, and with greater distribution.
a room of 500 people printed in the corporate brochure. Graphic standards system provide guidelines and tools for
The amount of color will affect how it is viewed, as well as structuring and organizing communications, and reinforce a
the best background choice. A blue headline is very readable on brand across a corporation on the globe. Graphic standards are
a white background, but if that background becomes a color, documented guidelines that explain the methodology behind
then readability can be reduced dramatically, depending on how :he design. In addition, the guidelines and examples support
it gets presented on each particular display. those who wish to expand the system by explaining how to
maintain a consistent brand and organizational look and feel as
Contrast Is Critical When Making Color Choices. Con- lew products, features, and technology are introduced.
trast is the range of tones between the darkest and the lightest A graphic standards system will ensure:
 13. Visual Design Principles for Usable Interfaces • 279

0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

(b)

FIGURE 13.19. Trying examples in your context. Because color is not

available in this particular edition, try your own experiment. Take a look
at this illustration, and recreate a paragraph of text, with the background
graded from 100% to 0%, choosing one color for the background. Then
set lines of type in a variety of typefaces and sized, to see where it
becomes legible or totally impossible to read. Remember to test your
choices with each context and parameters. Such things as lighting, pro-
jection distance, and users' physiological constraints can make the dif-
ference whether something can be read or not.
280 • WATZMAN

• Built-in quality • What is the purpose?

The system ensures that the company/product image is com- • Who are the audiences?
municated to all audiences. Standards promote consistency • What are the differences; the similarities?
in handling information across product lines, companies,
• Who will be doing the work?
projects, etc.
• What tools will be used?
• Control over resources
A system provides dramatic managerial control over re- • What is the desired company or product image?
sources of use of skills, time and materials. Well-developed Development. Goals for the Development Phase include:
standards build in flexibility. They can be adapted to new
communications without having to go back to the original • Design of standards that are easy to read, use, and project a
designer each time. consistent quality image.
• A Streamlined development process • Design of products that fit within the production parameters
They help structure thinking for content, design, and pro- of the company.
duction by providing a guideline of predetermined solutions
for particular communication problems. Typical problems are Implementation. The Implementation phase must ensure that
solved in advance or the first time they occur. Most impor- the system is accepted and used properly. This requires train-
tantly, graphics standards systems allow people to go on to ing and support, easy procedures for distributing and updating
higher level issues of communication effectiveness. materials, and a manual explaining how to use the system.
The development of standards is in itself an educational pro-
cess. It requires all participants to be aware of communication
What Does a System Cover?. Corporate graphic standards objectives and what is required to meet them. As alternatives
historically had been applied to an organization's logo, sta- are developed and tested, management has the opportunity to
tionery, business cards, and other printed materials. As the on- evaluate their organization's purpose, nature, and direction, as
line portion of an organizations brand dominates, providing for well as its working methods and communication procedures.
cross-media guidelines is even more critical. The process requires the commitment and involvement
Corporate graphic standards are generally communicated to across many departments and levels. The result is an empow-
the organization in print and electronic form. Documentation ering of the organization—planting the seeds for growth and
often includes: increased effectiveness.

• Corporate Identity Manuals

Style guides in both print and online illustrate the applica- DESIGNING THE EXPERIENCE
tion of the standards across the company's publications and
provide specifications for production and expansion. The heart of interface design is in the definition and creation of
• Templates and Guidelines designing the user's experience; what is it really like for people
These come in both print and electronic form. facing the monitor, using a cell phone or an ATM. Though pre-
• Editorial Style Guides sentation possibilities are expanding day by day, our capacity to
Determine the use of product/service names, punctuation, understand, use, and integrate new information and technology
and spelling, writing styles. has not grown at the same rate. Making the most appropriate
media choices, whether it be images, animation, or sound, to
explain complex ideas to widely varied audiences is no easy task.
Developing the System. When developing an organizational The most important guideline is: there are no rules, only
graphics standards system, one must consider the global pub- guidelines. Though one can generally say visual principles work
lishing needs, the resources available for producing products, a particular way, any change in context would change the ap-
and the skill level of those directing production. plication of the the principle. For example, in the early days of
To responsibly determine the overall corporate needs, a team the software industry, research showed that a particular blue
effort is required. Personnel from areas such as information worked well as a background color. Now, however, depending
systems, graphic design, usability, and marketing, along with on the calibration of your monitor, as well as environmental
engineers, writers, and users should be involved in the process. lighting, that particular color of blue could be a disaster. In fact,
This team approach helps to build support for, and commitment that particular blue can often vibrate if type in particular colors
to, the organizational standards. is placed on this background. Of course, it would all depend
The development of a comprehensive system follows the on how much type, its size and boldness, viewing situation,
Information Design Process of Audit, Development, and Imple- etc. Sound complex? For this reason, one needs to understand
mentation. the principles, test the ideas, and then test on every output de-
vice that will be used. Putting known guidelines together with
Audit. The Audit is a critical step in determining the scope and experience continually gathered from the field will allow the
parameters of an organization's corporate graphic standards. designer to develop a clear understanding of what works well
Specific questions for the Audit phase include: in a particular environment and user situations.
 13. Visual Design Principles for Usable Interfaces • 281

The next key guideline is to keep it simple. Although many cues (blinking cursors, etc.) and other implied structural el-
tools are available, there is only one goal: to clearly commu- ements (e.g., handles around selected areas) become power-
nicate ideas. The designer must always ask: What is the most ful navigational tools if intuitively understood and predictably
efficient and effective way to communicate this idea? A good applied.
illustration might work better (and take less bandwidth) than In addition, one must keep in mind how the product will be
an animated sequence. A simple bold headline might allow the used. Will the user calmly sit down and use the product, will
user to read the page than a banner moving across the page, con- the tasks be interrupted over a period of hours, days, months,
stantly drawing the eye to the top. Animated icons are entertain- or years? Will the user be physically impaired, in a state of panic
ing, but would they be appropriate or necessary to understand fumbling with a keypad. The element of time contributes to the
serious financial information? design criteria and choices.
There is a great temptation to use many new tools. The best
tip is to use a tool only if it can explain an idea better than any
other method or enhance an explanation or illustrate a point Consistent and Appropriate Visual Language
that otherwise could not be done as effectively or efficiently.
The best design is not noticed, it just works. Products are used A major issue is the unpredictability and vastness of the prod-
to get something done, not to notice the design. The best test ucts. Providing way-finding devices that are easy to recognize,
of success is ease of understanding and completing the tasks, understand, and remember, include:
and moving on to the next. • clear and obvious metaphors
Like all expensive real estate, online real estate has the same • interface elements consistent with the visual style of other pro-
characteristic: location, location, location! With such a premium gram parts, including consistent style for illustrations, icons,
of space, and so much to accomplish in such a short time, be- graphic elements, dingbats, shading, etc.
ing considerate and efficient with the screen real estate is the • guidelines for navigational aids, such as use of color, typogra-
design goal. The appropriate use of all the design principles,
phy, page/screen structure, etc., consistent with other parts
graphics, icons, and illustrations make that goal possible if it is of product support.
applied with understanding and consideration of each particu-
lar context of usage.
In the following sections are some of the issues and consid-
erations when presenting interactive information. As one con- Navigation Aids
siders how the many elements impact the design of interfaces,
the following principles must be considered very seriously. When reading a book, there are many ways we can see our
progress through it. We can use a bookmark, turn down the
corner of a page, or use a pen to highlight information we want
Effective and Appropriate Use of the Medium to remember. We can refer to the table of contents or index,
and then flip directly to the desired page. We can use a finger as
Transitioning a print document to an online environment re- a placeholder and walk down the hall to show a colleague.
quires a rethinking of how it must be presented. Viewing and At no time can we ever see or touch the entire digital docu-
navigating through online information require radically differ- ment (or program). If we cannot hold the entire document, how
ent design considerations and methods. Users do not necessar- do we know where we are in relation to the whole? How do we
ily view the information in a linear way, in a particular order, or get back to where we were? Or some where use haven't been?
time frame. Navigation aids provide readers with highways, maps, road
Interactive media viewed on computer screens have quite signs, and landmarks as they move through the online landscape.
different characteristics and potential, particularly as informa- They enhance discovering and communicating the underlying
tion crosses platforms, resolutions, and environments. structure; providing a sense of place so that the user knows
Historically, we have come from the rich medium of print, where they are, where they have been, how to move elsewhere,
where we can hold the entire product in our hand, view it, and or return to the beginning.
choose what/when/how we wish to read. The mere physicality Using familiar visual elements (e.g., from other products,
of a book provides many sensory cues that are not present on releases, etc.) leverages existing knowledge. Graphic standards
a two-dimensional monitor. As designers, we must find other support this as well. When using a familiar page layout/grid
ways to provide the same cues that allow people to use products structure, it is much easier to remember the zones in which like
comfortably and with confidence. kinds of information appear. This ensures that whatever visual
cues are applied can take advantage of the user's experience
and save time for the designer.
The Element of Time
Graphics/Icons
This is the critical difference between static and interactive me-
dia. The sense of interaction with a product impacts the user's Graphic representations are very effective devices to orient
perception of usefulness and quality. In addition, animated users within a program. A visual map can offer an overall picture
282 • WATZMAN

of the program's sections and interrelations. Graphics and uncontrollable locations. Because of limited space, the viewer
icons can help support the function of the table of contents, gets only hints of related information but no great amount of de-
index, and page numbers. In addition to the many new tools to tail. Imagine if someone walking by could click on the speaker's
highlight their functionality, they can be even more effective name and get additional biographical information, or click on
as guides through and around a product. The key here is to the location and get directions. This is kind of organization
ensure that the intent and action have been clearly denned and is hierarchical and a radical difference from the way informa-
designed. tion is presented in a brochure where order is fixed. There is a
specific linear sequence; the chronology is implied by its bind-
ing or folding, though one may choose to read page 5 before
Metaphor page 1.
In online environments, the designer can rarely control how
We learn easiest when we have previous structure, or mental and in what order the user will access the product. This requires
model with which to associate and expand information. If we fundamental differences in presentation of information. We can
have a basic understanding of the concepts we can easily add make suggestions and best guesses but still must design with an
more information. The desktop metaphor for a software inter- awareness these major unknowns.
face is easy to grasp as a way to organize data in a program, This idea goes hand-in-hand with using the laptop format
because the basic logic is similar to what we are familiar with as another design consideration. The home page, like a well-
in the real world. Using familiar visual analogies helps users designed poster, should hint at all topics contained in the site,
understand and organize new information more easily. provide high level information about these topics, and suggest
easy paths to access this a information. If information goes be-
yond the laptop format, the design must visually communicate
Color to the user how they can know it is there by providing strong
visual hints, so that they will investigate beyond what is immedi-
Once the monitor is paid for, color is free and a very seductive ately visible. One can imagine the changes required for smaller,
design tool. One must be sure to use it consistently. On the hand-held, voice-activated devices.
monitor, there is limited space to work with. When colors are
assigned meanings, and those meanings are carried through-
Design for the Most Difficult Common Denominator. One
out the product, the colors can replace written explanations
must design the interface in anticipation of the worst-case
(e.g., the bars at the top of the screen are blue, so this must be
scenario. If a majority of users will be using your product in
the testing section or the yellow background always means an
a quiet room, with fast connections, perfect lighting, and large
overview section).
monitors, the requirements are different from a contractor ac-
cessing critical information on a laptop in the field. Often, the
user profile is unknown, because new technology often defines
Legibility
new categories. But if, for example, the users will be on a variety
As discussed in typography, legibility is the ability to read the of platforms and locations with constant interruption, then one
information on the page. The page can be a screen, and as such, has to design from this situation. It is critical to consider what
has special considerations. Color, size, background, movement, the breadth of possibilities will be; and user testing, viewing,
viewing environment, lighting, resolution, all play a critical part questioning can make the difference of product acceptance or
not.
in legibility.

Avoid Overuse of Saturated Colors. Saturated colors, such

Readability as red, tend to jump out at the viewer, which is distracting and
irritating. Thus, red is usually not a good choice for large areas of
Readable screens demand use of clear visual representations and color on the screen. High impact is dependent on the contrast
concise, unambiguous text. A design can imply meaning by the between background and foreground colors. For instance, when
placement of elements in particular areas, or zones alotted for designing screens for a display with a black background, both
certain types of information. This makes the screen easier to yellow and white have a higher impact than red. What must also
comprehend and more accessible. It also makes optimal use of be considered is the variations in every viewing situation and
a limited space. how that affects contrast among the various elements on the
page, as well as overall legibility and readability.

Guidelines Consider Different Users' Levels of Skill All navigation

tools should be simple enough for the novice user, but must
Use the Analogy of a Poster As a Guide to Design. One not slow down the expert. Detailed visual maps and other vi-
analogy is to think of a home page as if it were a poster. A sual graphics/elements should be available for those users who
poster must grab one's attention quickly, in unpredictable and need them, without getting in the way of the expert user who
 13. Visual Design Principles for Usable Interfaces • 283

wants to bypass unnecessary explanation and jump immediately There Are No Universal Rules, Only Guidelines
the desired section.
If there were rules, everything would look the same and work
Be Aware of the Fatigue Factor. Although there is no defini- perfectly according to those rules. Each situation is different
tive answer on fatigue caused by looking at a computer screen with its own context and parameters.
for long periods of time, it is a central factor to consider. Accord-
ing to H. John Durrett's book, Color and the Computer, looking
at a well-designed computer screen should not cause any more Remember the Audience: Be a User Advocate
fatigue than reading a book or writing a report. Though many
would disagree with this statement, many people spend more Throughout the process of development, audience needs are
time with their computer than a book and no doubt would have primary. Who are they? What requirements do they have? How
additional input on this subject. and where are they using your product? Answers to these and
As interactive media becomes a commodity, the focus will other questions are the criteria to evaluate alternatives through-
not be on what a product does, but how it does it; that will out the development process. As designers, we must understand
be the difference between product acceptance or product fail- and advocate from the point of view of the user.
ure. Success or failure will be judged by the ease of use and
understanding of its interface—the face of the product/program
to the users. Structure the Messages
Content must be analyzed to create a clear visual hierarchy (re-
Other Differences to Consider. There are a many differences
flecting the information hierarchy) of major and minor elements.
that impact how and why we design our interfaces, and many
This visual layering of information helps the user focus on con-
of them have been discussed in other chapters in more detail.
text and priorities.
A designer should never forget differences such as vision and
physical impairment (sight, motor skills, etc.) mental impair- Test the Reading Sequence. Apply the squint test. How does
ment and how that impacts ability to read, comprehend, and the eye travel across the page, screen, or publishing medium?
use the interfaces we design. What is seen first, second, third? Does this sequence support
the objectives and priorities as defined in the Audit?
Use the Squint Test to Check the Design. A very simple self-
test to check visual hierarchy is the squint test. Simply squint
your eyes at the page you are evaluating, putting the details Form Follows Function
out of focus. As you look at the page, what is the first, most
dominant element on the page? Is this what should be seen first? Be clear about the user and use environment first. The interface
What should have primary, secondary, importance on the page? design should be its tangible representation and reinforce these
In cognitive psychology terms, this is called visual queuing. The goals.
visual ordering of what the user sees on the page is the goal of
good interaction design.

CHALLENGES AND OPPORTUNITIES: CREATING

YOUR OWN GUIDELINES
The challenges facing today's designers of interactive commu-
nications are great. How can we create products that are seen,
read, understood, and acted on? How do we harness the power
of the new technologies, given increasing variety and complex-
ity? How can we make informed visual choices? and provide our
users with a useful, usable and desireable experience?
WARNING: No book or seminar or technology alone will
turn anyone into a professional designer! It requires years of
extensive training and practical experience in a variety of dis-
ciplines. Much like a programmer or surgeon or fine cabinet
maker, it is a lifelong endeavor. FIGURE 13.20. There are many ways to say the same thing.
The guidelines that follow are offered as starting points only, What is important is to create an appropriate visual style and
first steps in understanding how one makes informed design design all visual elements in the same way. The goal is to
decisions—design that is the best, most thoughtful and appro- create a consistent visual language throughout the entire
priate integration of both form and function. product.
284 • WATZMAN

Keep Things Simple. The objective is to efficiently and ef- process. In particular, with interactive media, the traditional re-
fectively communicate a message, so that users can perform a view and production process will change. The process is less
task. Fewer words, type styles, and graphic elements generally of a hand-off and more of a team effort; it's more like making a
mean less visual noise and greater comprehension. An obvious film than writing a book.
metaphor enhances intuitive understanding and use. The goal No matter how varied an organization's products are, suc-
is to communicate ideas and information, not show off features cessfully applying the principles of good design will enable
or graphics. an organization to communicate more effectively with all its
audiences and customers. This will have a direct impact on
improving the value of the products and services, in addition to
People Don't Have Time to Read adding value to an organization's brand and identity.

In addition to writing clearly and concisely, it is important to

design information in the most economical, accessible, intuitive Good Design Is Not About Good Luck
format, enhanced by a combination of graphics and typography.
Graphics are very powerful and can often be used to efficiently Good design is based on the principles of visual and inter-
and effectively provide explanations while saving space on a action design applied appropriately and thoughtfully. Creat-
page. Designer beware, as they can visually dominate a page, ing the most useful, successful design for an interactive prod-
unless considered beforehand and designed as an integral part uct is difficult. By its nature, the design process is iterative,
of the page. ongoing and experiential. There are usually several possible
ways to solve a problem, with the final design decision dic-
tated by the best choices based on requirements at a particular
Be Consistent time.
Always and forever, remember the users, user, users. They are
Consistent use of type, page structure, graphic, and naviga- why we are here and have this work to do. They are everywhere,
tional elements creates a visual language that reduces the ef- in places we have not yet imagined. As the world grows smaller
fort needed read and understand the interface. The goal is to and we are more connected, the opportunity lies in where and
create a user experience that appears effortless and enjoyable what we have not discovered.
throughout. I have been studying and practicing in this field of visual/
interaction design in all its various flavors for over 20 years.
Though contexts and technology change, the basic principles
Start the Design Process Early of visual design still apply. What does not change, however,
is my focus on the user, user perspective, and use environ-
Don't wait until the last minute. Put together the develop- ment, with an ongoing goal to make things easier to use and
ment team of designers, usability professionals, engineers, re- understand.
searchers, writers, and user advocates at the beginning of the This is only the very beginning

References
Apple Computer, Inc. (1992). Macintosh human interface guidelines. McCloud, S. (1993). Understanding comics: The invisible art.
Reading, MA: Addison-Wesley. Northhampton, MA: Kitchen Sink Press.
Apple Computer, Inc. (1993). Making it Macintosh. The Macintosh Meggs, P. (1992). A history of graphic design. New York: Van Nostrand
interface guidelines companion [CD-ROM]. Reading, MA: Addison- Reinhold.
Wesley. Mullet, K., & Sano, D. (1995). Designing visual interfaces: Communi-
Craig, J. (1998). Designing with type. New York: Watson-Guptil Publi- cations oriented techniques. Englewood Cliffs, NJ: Sunsoft/Prentice
cations. Hall.
Dondis, D. A. (1998). A primer of visual literacy. Cambridge, MA: MIT Norman, D. A. (1990). The design of everyday things. New York:
Press. Doubleday Currency.
Hewlett, V. (1996). Visual interface design for Windows. New York: Olins, W. (1989). Corporate identity: Making business strategy
Wiley Computer Publishing. visible through design. Boston, MA: Harvard Business School
Krug, S. (2000). Don't make me think. Indianapolis, IN: Que Publishing. Press.
Laurel, B. (Ed.). (1990). The art of human-computer interface design. Rosenfeld, L., & Morville, P. (1998). Information architecture for the
Reading, MA: Addison-Wesley. World Wide Web. Sebastopol, CA: O'Reilly.
Laurel, B. (1991). Computers as theater. Reading, MA: Addison-Wesley. Sano, D. (1996). Designing large-scale web sites. New York: John Wiley
Lynch, P. J., & Horton, S. (1999). Web style guide: Basic design prin- and Sons.
ciples for creating web sites. New Haven, CT: Yale University Schriver, K. A. (1997). Dynamics in document design. New York: Wiley
Press. Computer Publishing.
 13. Visual Design Principles for Usable Interfaces • 285

Shedroff, N. (2001). Experience design. Indianapolis, IN: New Riders. Tufte, E. (1997). Visual explanations. Cheshire, CT: Graphics
Spiekermann, E., & Ginger, E. M. (1993). Stop stealing sheep. Mountain Press.
View, CA: Adobe Press. Weinman, L. (0000). Coloring web graphics.
Tufte, E. (1983). The visual display of quantitative information. Xerox Corporation (1988). Xerox publishing standards. New York:
Cheshire, CT: Graphics Press. Watson-Guptil Publications.
Tufte, E. (1990). Envisioning information. Cheshire, CT: Graphics Zapf, H. (1960). About Alphabets. Cambridge, MA: MIT Press.
Press.