- Be consistent
throughout the project.
- Use consistent formats
in all screens or in each major section of a
project.
- Use the same fonts,
button designs, colors, border styles, backgrounds,
methods of interacting with text boxes, control panels,
and special effects such as transitions.
- Don't introduce an
oval button in one place and then use a square button
elsewhere, unless you have a real reason for the
change.
Screen
Layout
- Provide a title at the
top of every screen.
- Provide a comfortable
place to start scanning the screen, a place to go next,
and a place to finish.
- People read English
from top to bottom and left to right. Try to organize a
screen the same way, even if the screen contains graphics
and images as well as text.
- Put information that
users need first in the upper left. Put what users need
last, such as buttons to select what screen to see next,
in the lower right.
- Concentrate critical
information in the center of the screen. Color critical
information in red and green.
- Divide all screens
into the same zones or grids and place similar functions
in similar locations on all screens.
- Avoid placing
important objects or text near outer borders of the
screen. Doing so would require separate eye focusing and
additional eye movement. Doing so would also risk that a
television display will cut off important
information.
- Center text on screens
that are primarily text screens.
Boxes
- Boxes around text and
other objects help separate objects and help emphasize
what is in a box.
- A box draws your eye
to what the box contains.
- A box interrupts the
flow of the page, for good or for ill.
Buttons
That Invoke Links
- Provide meaningful
interactivity.
- Provide a superb Help
facility that contains answers to all questions that
might occur to users. Let the computer take the memory
burden off the users.
- Provide users with the
feeling that they can control where they are going and
know where they have been. Never expect users to keep
track of more than three successively deeper paths taken
with hyperlinks without providing substantial assistance,
such as a graphical map depicting the
structure
- Prepare buttons
carefully.
- The fewer buttons, the
better.
- Use at most a dozen
buttons on any one screen.
- Use the same style for
buttons that provide the same controls throughout a
project.
- Use meaningful labels
for each button rather than a cryptic label or no label
at all.
- Use button colors and
locations as visual hints about what buttons
do.
- Minimize the number of
keystrokes a user must enter.
Colors
- Use at most five
colors on a screen.
- Be consistent in
coloring different screens. Do not alter the coloring
scheme in the middle, without a very good
reason.
- Use colors that match
familiar meanings, such as red for stop or
danger.
- Select screen colors
that are pleasing to the intended audience.
- Use beige or blue
tones at the edges of the screen.
- Use blue tones for
backgrounds.
- Use bright reds and
yellows when you want users to respond
quickly.
- Present alphanumeric
information in the spectrum of red, white, and
yellow.
- Use only quiet colors,
such as green or blue, if a project is likely to appear
on television screens. Bright colors are attractive on
computer screens but not on televisions.
- Note that natural
images, that is, pictures of the real world, have
opposite color requirements from graphics. Whereas
graphics require a maximum of five colors, a natural
image requires a minimum of 256 colors and benefits
greatly from having as many as 16 million
colors.
Backgrounds
- Use a background that
is more interesting than a plain color, to add a
professional touch.
- Do not make a
background too complicated or it will distract users from
the foreground's content and may make text
unreadable.
- A close-up photograph
of a piece of granite or a gradual shading from one
neutral color to another are good backgrounds, but an
aerial photograph of a city or a page of text are
not.
Getting
Attention
- Put images and audio
that will attract attention at the start of a project.
One glance at this grabber must draw a user into the
project and motivate the user to continue. Make one
keyword in the grabber HUGE.
- Use motion on the
screen to attract instant attention. Consider starting a
screen with motion in the upper left corner and later,
when its time for a user to leave the screen, initiating
motion in the lower right corner.
- Attract attention to
important text with a flashing border. Note that making
the text itself flash makes the text hard to
read.
- Alternatively, flash
an important message a few times to attract the user's
attention to it, then stop the flashing so the user can
read the text.
- Consider putting
important material near where red touches blue. A user's
eye goes first to the area of highest contrast, unless
something on the screen is moving.
- Put a list's most
important items at the top and bottom. A user's eye goes
to the top item in the list first, then skips to the
bottom item.
Synergy
Among Media
- In general, play audio
of a voice along with a screen that contains video,
image, or graphics but not text. Do not expect people to
both read and listen at the same time
- Play a voice
simultaneously with displaying text only if both media
use exactly the same words. Even using an abbreviation in
the text, and a complete word in the voice, destroys a
user's concentration. Adding a spoken summary that plays
while a user is reading a detailed explanation on the
screen prevents a user from concentrating on either the
summary or the details.
- Consider delaying the
start of audio for a few moments to allow a user to read
text without being distracted with audio.
- Consider letting the
user decide when to start audio
- Never make narration
the primary way of conveying important information, in a
sight-and-sound medium.
- Use narration and
visual materials to reinforce each other.
- Do not present any
sort of video, including animation, when you expect
people to either read or listen to unrelated material.
Motion is too distracting. Of course, playing audio and
video of a speaker is fine.
- Use transitions such
as wipes and fades to avoid abrupt changes between
media.
- Use a few types of
transitions consistently, sparingly, and with a definite
purpose, rather than using all types of transitions for
the glitz.
Text
Techniques
- When in doubt, use
large white characters on a pale blue
background.
- White characters on a
blue background may not be most effective for attracting
attention or being convincing.
- Make sure text is
readable, quickly and easily, on any display that must
show the project, not only on the display used to create
it. If the project must show on a television monitor or
projection television, be sure to test it.
- Emphasize simplicity.
In particular, use few different fonts and
sizes.
- Use a sansserif font
for titles and bullets. (Serifs are short lines added to
some letters. A font with no serifs is called
sansserif.)
- Avoid large blocks of
text, but if you must use a lot of text, use a serif
font.
- Use an appropriately
sized font. Be sure the text is large enough to read.
Consider centering the text.
- Use active
verbs.
- Use parallel
constructions.
- Be cautious about any
use of alliteration, simile, or metaphor.
- Avoid
pronouns.
- Round off numbers to
indicate their accuracy.
- Avoid imperatives and
personal interpretations.
- Use simple, everyday
words whenever possible.
- Use upper and lower
case. NEVER USE ALL UPPER CASE.
- Don't forget the
fundamental hypertext techniques of using few characters
per line, using few lines per screen, and using links to
give the information a comprehensive and comprehensible
structure.
Graphics
Techniques
- Use graphics to guide
users to important information, as opposed to distracting
them toward unimportant information.
- When possible, tie
words to graphics. For example, if a screen's title
contains the word circle, consider basing the screen's
design on a circle.
- Use graphics that are
relevant to the objectives and ideas communicated in
text.
- Make graphic objects
concrete and meaningful and consider users' familiarity
with the specific area.
- Consider how users
interpret individual graphics, along with their ability
to perform required interactions.
- Use particular graphic
objects that interest specific user groups.
- Rather than trying to
convey too much information in one image, use several
simpler images.
- When graphics must
contain a lot of information, emphasize the important
information on which you want users to focus their
attention. Use visual cues, such as labels or
arrows.
Audio
Techniques
- Clipping a microphone
to a speaker's lapel gives far better results than using
the microphone that is built into a video camera. Be sure
that the microphone points at the speaker's lips. Place
it far enough to the side so that the speaker does not
blow air directly at it when she says "popcorn" or
"telephone". This will avoid recording the sounds of
moving air as lip blast.
- For best results, the
interviewer and the person being interviewed need
separate microphones on their lapels. If at all possible,
route both microphones through an inexpensive audio mixer
box and listen to the mixed result through headphones to
be sure that you are recording both people at the same
volume. However, merely using a cheap adapter that has
two inputs and one output and connecting that output to
video camera is far better than using the camera's
built-in microphone.
|
