like the 20% who have good User Observation Sessions:
ideas and think like you, but are
elite power users. Identifying Ten Basic Steps
the 80% often is difficult since To test the useability of a design, watch and listen carefully.
inexperienced users are not Figure out what to test and what not to test; limiting scope
usually included in a design will provide solutions to specific problems. Involve users
team seek them out. with the same demographic background and experience level
expected of the typical user. Write short, simple instructions,
Provide Full clear and complete. But don’t explain how to do the things
Accessibility you’re testing. Observe, record and revise. Then, do it again,
until all needs are addressed.
Your application should be
accessible to all its users. It is Here are ten basic steps you can use, as adapted from The
likely that some differ from the Macintosh Human Interface Guidelines by Apple Computer.
average. They may vary in age, 1. Introduce yourself and describe the purpose of the
styles, abilities or could have session, but don’t tell the users what you are testing.
physical, cognitive, or language 2. Tell the users that “It’s OK to quit anytime,” so they
limitations, as well as other don’t feel locked in.
differences. 3. Explain the purpose of any special equipment in the
You want to create products all room.
people can use including 4. Ask the users to think aloud, saying what comes to mind
those with disabilities. There as they work. These comments provide insights into
are approximately 43 million users’ expectations, intentions and problem-solving
disabled, potential users in the strategies — all useful information for your analysis.
world. This group provides 5. Explain that you will not provide help. Allowing users to
tremendous possibilities. work on their own will best show how they interact with
Identify their differences and a product — otherwise you will lose the most valuable
special needs, and allow them information you can gain. Only step in if users cannot
to interact with different input solve problems on their own.
or output devices. 6. In general terms, describe what the users will be doing,
all materials and sequences they will use. You may
If needed, globalize your design include written instructions or demonstrations, if
for international languages from necessary, but not on the work you are testing.
the start. Including worldwide 7. Ask for questions before starting, then begin.
compatibility at the beginning 8. While observing: Stay alert — don’t let your mind
of your development process is wander. Periodically, you may ask questions or prompt
easier than trying to incorporate users, but establish a protocol for how frequently you do
support for script systems after either. Do not prompt too often. Ask users what they are
your product is complete. thinking if they seem stuck or confused. Be patient.
Users with visual disabilities Remember the users are doing you a favor.
have the most trouble using a 9. At the conclusion, explain the purpose of test. Answer
display-intensive application. any questions. Discuss interesting behaviors you
Add the capability for different observed. Ask for suggestions or improvements.
text sizes or use “zoom” 10. Use the results. Users will do unexpected things, but
features. For color-vision never blame mistakes on them.
impaired, use colors redundant Avoid Feature Cascade
with other types of cues (text, position,
highlights). And let the users select colors. Market pressures sometimes force the
addition of features when resources are not
Put the User at Ease available to develop them fully often
Design to increase productivity for your because of press reviews or intense pressure
entire audience. However, do not from clients or users. Compare costs and
overcompensate for special needs or add benefits, but stick to your original intent.
features for a disability that get in way of Feature cascade can reduce effectiveness
able users. You must weigh the importance and add unwanted complexity.
of any design decision with its impact on all Evaluate requests to expand the scope by
users. the impact on:
• Application size
• Application speed with the desktop. It is the background
• User interface complexity screen, default window types and
• Development time verses feature standard screen elements users see and
refinement use with every application in their
• Documentation difficulty system.
• Potential software defects (bugs) • Expanding Folders: These folders
are very common on most desktops,
• Impact of new features on existing
including Microsoft Windows, with its
systems the File Manager.
Designing With Metaphors • Folder Tabs: As a fairly new
metaphor, folder tabs present multiple
A common goal of graphical user interfaces forms or messages in the same
is that they be intuitive. Effective user graphical area. The user selects a view
interfaces are familiar to
new users when you use
common elements to present
new concepts or features.
And they provide innovative
solutions when you present
new features or actions in a
way which expands and
extends upon the way users
perform existing operations.
Effective user interfaces
achieve these goals by
making extensive, yet
careful use of metaphors.
Metaphor is the use of
layout, graphics and
interactions to suggest a use
for something by presenting An example of folder tabs from Microsoft Word for Windows 6.0
a familiar concept. A by clicking on a “tab” that brings the
metaphor is something that looks or acts element associated with that tab into
like something the user will easily view.
recognize. But, that use doesn’t define or
limit the implementation of the metaphor. WYSIWYG
From a user’s perspective, a metaphor What You See Is What You Get is a key
provides a natural organization of existing desktop metaphor. Users should easily see
mental models with connections to the real what they need when they need it. Don’t
world. While, from a designer’s hide features in an application using
perspective, a metaphor presents a useful abstract commands.
map to explore and evaluate alternative Give visual clues about where users can
find their choices. When a function has a
One way to choose a metaphor is to select large number of features, use a stepped
or expand upon an existing one. If you need interface that reveals relevant information
to create your own, look for a current object in pieces. This approach shows the choices
or technique which can provide many of the most users want most of time while
features you want. Try to strike a balance providing ways to get at more choices.
between the metaphor’s suggested use and
the ability of the computer to support and See and Point
extend the metaphor. See and point is another key metaphor of
Some examples of good metaphors are: the desktop. The user always sees on the
• The Desktop: All users of graphical screen what’s happening and can
user-interface systems are familiar manipulate objects based on the general
form of action: noun-then-verb. The two the computer. The basic principles of direct
basic paradigms are: manipulation are:
1. The user selects an object (noun) 1. Objects on screen remain visible while
and chooses actions to perform users perform physical actions on them.
(verb.) The system lists all actions
2. The impact of those operations is
available for the object in menus.
2. The user drags an object (noun)
3. The tools provided give good feedback
onto another object with an action
(verb) associated. For this
metaphor to work, the user must 4. All actions currently available are easy
recognize the use of an object, to see.
such as a trash can. Consequently, 5. If grave consequences might follow an
objects should look like things in action, the system notifies users before
the real world. any damage is done.
Always provide visual clues such as 6. The system provides clues whenever it
highlighting feedback is crucial. carries out a command, or, if it cannot
Selecting an item must never alter the carry out a command, explains why not
object, and selecting incorrectly should and what should be done instead.
never impose a penalty users should be 7. Topics of interest are highlighted.
able to undo a selection by making another 8. Animated indicators provide
selection or clicking outside the selection. reassurance that a task is completing
Extend the standard interface only when the Give The Perception of
standards do not meet the users’ needs. Stability
• No standard element or behavior Users need a stable a reference point to
covers your need. Look carefully at cope with the complexity introduced by
the existing standards (look and feel) computers. They require an interface design
and emulate them as closely as that presents an understandable, familiar
possible. To avoid confusion, do not and predictable environment. The desktop
mix visual cues. provides this in a two-dimensional space on
• An existing element almost covers which objects are placed. It defines
your needs, but requires a small consistent graphic elements to maintain an
modification. Don’t assign new illusion of stability.
behaviors to existing objects. Use It is the perception of stability that is most
standard objects in a standard way. important. If you provide a clear, finite set
Don’t change the basic behavior when of objects and actions for objects and do not
designing a new element from an remove unavailable options, the user will
existing one, otherwise the interface feel as if the system is more stable. Always
becomes unpredictable and harder to dim (gray) unavailable menu or object
figure out. items instead of removing them to enhance
Put the User In Control
Users should initiate and control actions. Be Consistent
People learn best when actively engaged.
Consistency enhances stability by allowing
The key is to create a balance between
people to transfer their knowledge and
providing users with the capabilities needed
skills from one application to another. Use
to do work and preventing them from
standard elements of the interface to
destroying data. Provide clear help with
minimize training and eliminate confusion.
warnings and always notify of potentially
Effective applications are consistent in a
undesirable situations Allowing the user to
variety of ways. A visual interface aids
proceed with confirmation messages gives
learning by employing an easily recognized
the user control.
Direct manipulation gives users the feeling
that they control the objects represented by Consistent behavior means people learn
how to do things only once. Then they
explore new applications or types of Avoid Modality
features using these pre-learned skills. This
Modes restrict the operations the user can
benefits the typical user who divides
perform. They lock users into one specific
working time among several applications.
set of functions. Modes don’t allow any
Developers also benefit because users build
other work until the user completes the
on prior experiences, thus reducing the need
for future enhancements in some cases.
Avoid modality whenever possible to create
Consistency in the use of language helps
an interface that allows users to do what
users learn easily. Use clear language,
they want, when they want. Always strive
consistently and concisely throughout every
to preserve the user’s ability to be in
aspect of your product, from the user-
control. Controlling modality is okay only
interface to the documentation. Every
if it is:
development team should include one or
more skilled technical writers responsible • Long term for example,. word
for both documentation and the language processing versus graphics editing
on the screen. (application modality)
Use terms that users are familiar with or • Short term, “spring loaded,” where the
that are consistent with the standard user must constantly do something to
interface. Don’t use technical jargon or maintain the mode (for example, hold
computer terminology, especially in menus, down a button to scroll)
dialog boxes or user’s manuals. • Alert mode user must rectify
situation before proceeding
Ask these questions to determine a
product’s consistency: • Emulation of a familiar, real-life
situation for example, selecting
• Is it consistent within itself? drawing tools
• Is it consistent with earlier versions of • A change only for the attributes of an
object, not for the behavior for
• Is it consistent with interface example, selecting a font in bold italic
• Blocking most other operations to
• Is it consistent in its use of metaphors?
emphasize modality for example,
Be Forgiving error conditions and dialog boxes
Encourage user exploration. Make actions Progressive Disclosure
reversible so that a user can try things
Progressive disclosure reduces complexity
without fear of damage. Create safety nets
and presents the most common choices
for comfort learning and use. Always warn
while initially hiding more complex or
before tasks that might cause irretrievable
additional information. This process helps
data loss. For example, use alert boxes,
you develop an interface that is easy for
clearly presented options and appropriate,
novices to learn, yet includes advanced
timely feedback to reduce program
features. Provides users with the ability to
learning. However, frequent use of alert
select preferences that the system
boxes is a good indication of bad program
“remembers” from session to session,
design. Reduce the need for these whenever
allowing users to control their environment.
possible without compromising forgiveness.
Provide the features users really need as
Keep users informed by providing direct
they need them. Avoid using one large
and simple feedback as they do tasks or as
dialog with everything on it. Use flexible
soon as possible. When initiating an action,
feature selections; for example, move
provide indicators visual, auditory or infrequent user changes to a “settings”
both. Provide as much information as function.
possible about long operations, including
what to expect and when long delays will Visual Design
occur. Always allow a graceful way out if
possible. Spell out error situations so users Considerations
understand what went wrong and how to Aesthetic integrity means information is
avoid it in the future. well organized and the display is consistent
with the principles of good visual design.
Always design products to be pleasant to
look at for a long time. Investment in a Use Color Carefully
graphic designer for a graphical project is
Use color to enhance meaning, not just to
well worth the expense.
improve aesthetics. It can be valuable as an
Keep graphics simple. Limit the number of additional channel of information.
elements and behaviors to enhance However, the user should control color
usability. Graphics are the basis of effective choice whenever possible. Success requires
interaction but they must be designed so an understanding of many complex issues
that they don’t clutter the screen. about the use and appearance of interface
elements enhanced by
color. Color is used to
distinguish the active
window from others. It
can enhance controls on
a window to help the
user focus attention on
work. But, it must not
draw attention to the
interface itself. It should
make the interface more
visually pleasing and
Some icons from Microsoft Windows 3.1 meaningful.
Overloading the user with complex icons or
putting dozens of buttons in dialog boxes Use Meaningful Icons
does not follow graphic language or Icons work effectively as representations of
interface standards. computer entities. People often recognize
Don’t use arbitrary graphics to represent and understand pictures more quickly than
concepts. Nonstandard symbols may appear verbal commands. Studies show traffic
as something different or distracting. Use signs with symbols are more recognizable
graphics that convey meaning through from a distance than words only. When
representation, analogy or metaphor. designed properly, pictures can cross
Always give users some control over the cultural and language barriers, take up less
look of their environments. This allows space and provide a clearer representation
them to display their own style and of complex concepts. They are generally
individuality and reduces the burden on the easier to remember than keyboard
designer to create an interface that appeals commands. For example, mailboxes are
to every user. easily recognizable for sending and
Design for the Display
There are limitations to designing icons. A
Use straight lines and 45 degree angles. context is typically needed to provide
Curves have jagged edges which do not successful communication. Another
look good. 3D effects are difficult to interface element may be more appropriate
achieve. If you desire 3D effects, use a if the meaning is not clear. Sometimes text
professional visual designer and use a is the simplest way to convey a concept.
consistent light source from the upper-left.
Use existing shapes whenever available. Design Effective Icons
Don’t reinvent standard icons. Users often Design effective icons by building on the
associate different shapes with different desktop metaphor, diverging as little as
meanings. Remember that consistency possible. Don’t be gratuitously cute and
enhances learning. don’t use inside jokes or pictures
Make user-selected options visually representing code names. Avoid text in
obvious. Reverse black & white, but not icons, except as a user preference.
colors. Do not reverse colors as the result Try to make icon graphics look like real-
will often be ugly and difficult to world items whenever possible. For
distinguish. Instead, darken colors when the conceptual entities, make icons
user selects an object. representative of a function; or, if that is too
complex, think about how to explain the
idea to a novice. Often the terms and
analogies you would use will suggest good This article drew on a number of resources,
icon images. especially the Macintosh Human Interface
Another approach is to make an icon look Guidelines by Apple Computer, Inc. (Apple
like the window that results from opening Technical Library, Addison Wesley 1992,
the icon However, make sure icons don’t ISBN 0-201-62216-5).
look like miniature windows. It is often Other suggested reading includes:
easier to make icons representing objects The Elements of Friendly Software Design
(nouns) than actions (verbs). Think of an by Paul Heckel (SYBEX Inc., Alameda,
object that is representative of the function CA, ISBN 0-7821-1538-1)
and consider the advantages and
The Society of Mind by Marvin Minsky
disadvantages of the idea in regards to the
(Simon and Schuster, New York, NY, ISBN
An d , h ere yo u see o u r ro bu st, co st-
effecti ve execpti o n repo rti n g fa ci l i ty.
Archibald recovers quickly during the user demo.