visual design

Ten
Design
Principles
for
Online
Help
BY AMBER LANCASTER, Student Member
Texas Tech University Student Chapter

18

hen users come to an online

help system, they want to
locate the information they need and
read it as quickly as possible so they can
complete a desired task. Heuristic
checklists help designers create an interface with design features that facilitate
information gathering, comprehension,
and application. Such checklists organize best practices based on design theory and designer experience, and offer
guidelines for creating various types of
documents. They can serve as a particularly useful reference when designing
online help systems that best support
users needs.
The heuristic principles described in
this article can be used as a checklist to
ensure that any online help system
offers users a better help experience.
The checklist is not comprehensive, but
it can be added to a set of existing
guidelines owned by your company. Or
you can use it as a starting point for
your design team to discuss ways for
improving the design of an interface.

1.

Use font types, sizes, and

colors that facilitate reading.

When creating any interface, use textual design elements that facilitate the
reading process and avoid design features that complicate character recognition. Use fonts, kerning and leading,
and text colors that do not distract from
the texts message.
Use design features that help users
understand the hierarchical structure
of the information, such as sans serif
fonts for headings and subheadings and
serif fonts for body text. Avoid nontraditional font types, such as hand script
and calligraphy, because they increase
the time it takes users to recognize characters and read the text.
Display type in at least 12-point font
size, and allow users to adjust the size to
meet their preferences. This establishes
an initial font setting but allows flexibility
for users who may need to enlarge text
because of vision impairments or reduce
text to capitalize on screen space.
Use kerning to adjust the spacing
between letters that appear too tight or
too loose to prevent drawing attention
to the design and away from the conMay 2005

visual design
tent. Appropriate spacing between letters enhances aesthetic appeal and readability. Appropriate kerning will also
help prevent eye fatigue when reading
onscreen text.
Use 12-point leading to align text
evenly above and below the baseline and
to create approximately a single line
break between text lines. This creates
visual alignment at the bottom of the
letters and enhances readability.

Figure 2. CorelDream 3D help.

2.

Use appropriate margins,

line width, and justification.

Typically, it takes longer to read

information on screen displays than on
hardcopy. Margin width, line width,
and justification type can affect how
users comprehend the appearance,
meaning, and organization of the text.
These design features also affect how
long it takes users to skim and read the
information.
Margins provide white space and
visual cues that direct the eye where to
read. Line width between 35 and 55
characters helps facilitate reading and
prevents eye fatigue that can result from
Figure 1. Microsoft XML 4.0 Parser SDK

scanning longer segments. Left-justified

text with ragged-right edges guides the
eye to text on the left side. For an example of how these design elements contribute to readability, see Figure 1, which
shows Microsofts XML 4.0 Parser SDK
help system.

3.

Use high contrast between

text characters and
background.

Experts in human-computer interaction say that reading from a display has

several disadvantages compared with
reading from hardcopy. One disadvantage is low contrast between the text
characters and the background. A low
contrast creates a fuzzy appearance,
and readers will likely strain their eyes to
see the text. To avoid creating designs
with problematic readability, use highly
contrasting text and background colors,
such as black text and purple icons on a
white background as shown in Figure 2,
CorelDream 3D help.
May 2005

19

visual design
sions to verify their understanding, to gain
a sense of competence, and to match
manual information against the system.
First-time users often rely on interactive
tutorials to carry out commands with the
computer system, as illustrated in Figure
4, the CorelDRAW 8 tutorial that shows
how to create a new graphic.

Figure 3. Adobe FrameMaker 7.0 help.

7.

Focus on the user, not the

computer.

Online help systems should focus on

the users role in completing a task
rather than focusing on the computers
function. State task descriptions in an
imperative voice that emphasizes what
the user is doing. Avoid anthropomorphic text (Hi! I am your computer. I
will begin the session when you press
Return) that implies the computer
processes information in a human way
that is antithetical to its capabilities.

8.

Cluster keywords and

indicate a starter set of
commands.

4.

Avoid screen sizes that

require frequent page turning.

Excessive page turning is disruptive

when reading online information. Page
turning interrupts the reading process
and distracts users attention from the
content. Use a screen size and reading
segments that do not require frequent
page turning. For instance, the default
screen size of Adobe FrameMaker 7.0, as
seen in Figure 3, allows the user to scan
all the information in one segment without having to click to additional pages.
The information is presented in two
screen lengths and can be viewed by
scrolling.
20

5.

Maintain close proximity

between clickable areas.

Excessive motion for invoking computer action may fatigue and annoy
users. Online help systems that require
excessive motion, such as moving the
cursor across numerous areas of the
screen to invoke computer action or system response, can become tiresome or
frustrating. To avoid fatiguing and
annoying users, place clickable items in
close proximity.

6.

Provide sample sessions or

tutorials.

Many users walk through sample ses-

Online help should offer concise

descriptions of the interface syntax and
semantics (such as keystroke shortcuts)
for more experienced users, but it
should also provide an appropriate level
of information for novice users who may
need more training. For instance, an
alphabetical list of command shortcuts is
helpful to those who know command
lines; however, presenting the information this way does little for the novice
user. To guide users to the right help
topics, create categories of task descriptions or keywords to describe associated
tasks, and provide a starter set of commands for frequently performed tasks.

9.

Develop context-sensitive
help.

Users often invoke help systems when

they experience difficulty completing a
task. To help users locate topics specific
to the task at hand, create context-sensitive help that provides information
about the task that users are trying to
complete when they request help. For
instance, CorelDRAW 8s context-sensitive
help feature allows users to access help
about specific tools or features when
using them. In Figure 5, the user
May 2005

visual design
Figure 4. CorelDRAW 8 tutorial.

invokes help for the Freehand tool by

right-clicking its icon.

10.

Offer human-like guides,

when appropriate.

Some online help situations call for

human-like guides to walk users through
a process. While anthropomorphic
descriptions can elicit a negative
response, human-like guides are usually
perceived positively when used appropriately. For instance, when novice users
operate software for the first time, they
often appreciate a human-like guide to
show them the features and explain
how they are used in context, as does
Gateways HelpSpot. HelpSpot provides
video tutorials narrated by a female
character. In Tour Windows XP, the
narrator explains features of the software and walks the user through them.
When the user is performing a highly
complex task that would be better
explained with voice and image demonstration, video sequences or human-like
guides are appropriate.
Conclusion

Figure 5. CorelDRAW 8s context-sensitive help.

The process of designing online help

systems can be complex and is often
unwieldy. To aid the design process, technical communicators can use a heuristic
checklist. The benefits are threefold: (1)
the designer can use existing guidelines,
reducing the time spent choosing design
features; (2) the design of online help
systems is guided by field-accepted principles based on research and experience;
and (3) the user experience is enhanced,
including the time it takes to locate and
read information, to comprehend information, and to apply it in ways that facilitate completing a desired task.
SUGGESTED READINGS
Coe, Marlana. Human Factors for Technical
Communicators. Indianapolis: Wiley, 1996.
Jacobson, Robert. Information Design.
Cambridge: MIT Press, 2000.
Schneiderman, Ben, and Catherine
Plaisant. Designing the User Interface: Strategies for Effective Human-Computer Interaction. New York: Addison Wesley, 2004.

May 2005

21