C H A P T E R6193Design PrinciplesInteraction .docx

C H A P T E R
6
193
Design Principles
Interaction design is a lengthy process that requires a
comprehensive knowledge
of computing technologies and a thorough understanding of the
psychological
complexities of the human mind. It must take into consideration
our sense of logic
and our sensitivity to aesthetics. In fact, the aesthetic-usability
effect says that
aesthetically pleasing interface designs are perceived as being
easier to use than
other, less appealing interfaces, even if that is not actually the
case.
How do we create elegant solutions to complex interaction
problems?
It can seem daunting to consider all of the technical variables
involved in interac-
tion design and come up with something that is useful and

usable and, in addition,
create a design that is aesthetically pleasing.
How do interaction designers succeed at creating the great
designs that are
powerful and aesthetically appealing?
Think of the Apple iPod® or the Google™ search engine. These
are powerful tools
that have enormous appeal and tremendous market success.
People like them, and
they perform their tasks elegantly and reliably.
To impose structure and order on the design process, interaction
designers use
principles to guide and inform the many decisions they must
make. These princi-
ples help designers to make decisions about the way interfaces
should look and
IS
B
N
0
-5
5
8
-8
6
0
1

1
-7
The Resonant Interface: HCI Foundations for Interaction
Design, by Steven Heim. Published by Addison-Wesley.
Copyright © 2008 by Pearson Education, Inc.
194 Chapter 6 Design Principles
function. They can assist in the decision-making process when
tradeoffs are re-
quired, and they can also help to convince other members of the
design team on
the correctness of certain decisions.
These principles help designers to create more-intuitive designs.
They are well
established and have a long history in the various design
disciplines. Let’s look at some
of these principles and see how they can be applied to
interaction design projects.
6.1. Principles of Interaction Design
MAXIM
Design principles can be used to guide design decisions.
Interaction design, like all design disciplines, is guided by well-
established princi-
ples. Design principles do not prescribe specific outcomes; they
function within the
context of a particular design project. They guide the
interaction designer and help

him or her to make decisions that are based on established
criteria.
There are many important principles, and there are many ways
to apply them.
Their application usually depends on context. We will explore
several of these prin-
ciples and apply them to specific design situations. The
principles will be presented
in a systematic and structured way using two main categories:
effectiveness princi-
ples and efficiency principles. Once we begin the design
process, however, things
will get a lot messier.
Iterative design is a multilayered activity that is subject to many
different and of-
ten contradictory forces. For instance, we may strive to place
screen components in
consistent locations, but to prevent the user from inadvertently
clicking on a de-
structive function like Delete, we will break the consistency
rule and locate these
functions in places that will catch the user’s attention.
The way in which we apply design principles depends on the
context of the
particular design activity in which we are involved. Every
decision must be weighed
against the whole and determined by the specific circumstances
of interaction.
Gulfs of Execution and Evaluation
Design principle can also be used to determine whether there
are gulfs of execution

or evaluation. Gulfs of execution relate to the effectiveness
principles, and gulfs of
evaluation relate to the efficiency principles. They can be
applied at each of
Norman’s seven stages (see Chapter 2) based on
execution/effectiveness and evalu-
ation/efficiency correlations.
6.1.1. Framework for Design Principles
Design principles are not easily categorized; they are
interrelated and may have re-
cursive relationships with other principles. For instance,
consider the principles of ISB
N
0
-5
5
8
-8
6
0
1
1
-7

6.1. Principles of Interaction Design 195
predictability and memorability. If something has a predictable
behavior, such as a
button that appears to press in when we click on it, we will be
more likely to re-
member that behavior the next time we encounter a similar
button. Therefore, this
type of button will have a high degree of memorability.
Recursively, the memory of
that behavior will increase the predictability of other button
components.
To avoid this type of complication, we can take a more
structured, although ar-
tificial, approach. The following framework serves the purpose
of clarifying the dis-
cussion; its use does not imply that there are no other ways of
viewing the connec-
tions and relations among the various design principles. Nor
does the method imply
a strict hierarchal structure. The framework has the following
components:
Usability Goals—There are two main usability goals in the
framework—
comprehensibility and learnability. These are discussed in more
detail later.
Design Principle Categories—As mentioned earlier, the
framework also di-
vides the design principles into two main groups—efficiency
principles and ef-
fectiveness principles. The effectiveness principles can be used
to determine re-

quired functionality, and the efficiency principles can be
applied to the design
of the presentation filter (interface). These categories and their
related princi-
ples are discussed in detail in the following sections of this
chapter.
Format for Describing Design Principles—The framework uses
the format
“serves the principle of ..., which promotes ...” to describe the
different princi-
ples. For instance, familiarity serves the principle of
memorability, which pro-
motes usability. Consider the framework shown in Figure 6.1.
The framework includes two barriers derived from the two main
goals: the
comprehensibility barrier and the learnability barrier. These
barriers can present
formidable obstacles for the user and diminish the ultimate
usefulness of the
design.
For instance, let’s look at the principles of customization and
flexibility and how
they relate to the goal of usefulness. We can say that
customization serves the prin-
ciple of flexibility, which promotes usefulness. However, if the
design is difficult to
understand, the user may not be able to use the customization
features. Therefore,
Figure 6.1 Framework for design principles.
Comprehensibility

Barrier
Learnability
Barrier
Efficiency
Usability
Effectiveness
Usefulness
Functionality
Presentation
Filter
IS
B
N
0
-5
5
8
-8
6
0
1
1

-7
the comprehensibility barrier will make the design less usable
and, consequently,
more difficult to learn. This will decrease the ultimate
usefulness of the design.
Let’s explore this framework and relate it to the interaction
framework (Dix,
Finlay, Abowd, & Beale, 1998) covered in Chapter 2 (Figure
6.2).
• Functionality—The system must have adequate functionality
for a particular
task. This is expressed in the core language of the system
(performance step)
and relates to the user’s task.
• Presentation Filter—The functionality must be made
accessible through the
presentation filter (interface). This involves the presentation,
the articulation,
and the observation steps.
• Comprehensibility Barrier— If the presentation is
comprehensible, the com-
prehensibility barrier will be superseded. This depends on the

degree of effi-
ciency/usability in the interface design. The user must
understand what is
required by the input language (articulation step) and what is
being communi-
cated by the output language (observation step).
• Learnability Barrier—If the interface is comprehensible, it
will be learnable;
there is a direct relationship.
• Effectiveness/Usefulness—If the user can learn the interface,
he or she can
take advantage of the functionality, and therefore the interface
will be useful.
6.2. Comprehensibility
MAXIM
An interface design that is easy to comprehend will be efficient
and effective.
Figure 6.2 Interaction framework.
Presentation Observation
Performance Articulation
Core Task
Input
Output
IS
B

N
0
-5
5
8
-8
6
0
1
1
-7
6.3. Learnability 197
The most important consideration in interaction design is
comprehensibility. If a
user does not understand the interface, he or she will not be able
to use it, render-
ing it useless.
A design’s comprehensibility is highly dependent on the way in
which the inter-
face communicates its functionality to the user. The
functionality that makes a design

useful might be present in the design; however, if that
functionality is communicated
in an incomprehensible way, that functionality becomes
essentially invisible.
People are adaptable and generally find ways to accomplish
their goals; how-
ever, a design that is not easy to understand makes this more
difficult and impedes
performance. We should, therefore, hold comprehensibility as
the highest goal in
the design process.
6.3. Learnability
MAXIM
An interface with high usability will be easier to learn.
The learnability of a design is based on comprehensibility: if
you can’t understand
it, you can’t learn it. However, even if an interface has high
comprehensibility, it
might still involve a learning curve. Moreover, learnability and
comprehensibility are
recursive: we start with comprehensibility, which affects
learnability, which in turn
increases comprehensibility (Figure 6.3).
This is a powerful feedback loop that can be facilitated by the
proper application of
design principles. For instance, if we use familiar conventions,
the interface will be eas-
ier to understand and, therefore, easier to learn. The end result
will be a useful design.
Let’s now look at each of the principles and see how they can

best be applied
in the interaction design process. The design principles are
organized based on the
goal for which they are the most relevant.
• Effectiveness/usefulness
° Utility
° Safety
° Flexibility
° Stability
• Efficiency/usability
° Simplicity
° Memorability
° Predictability
° Visibility
Figure 6.3
Comprehensibility/learnability
feedback loop.
IS
B
N
0

-5
5
8
-8
6
0
1
1
-7
6.4. Effectiveness/Usefulness
MAXIM
Effectiveness describes the usefulness of a design.
The effectiveness goal stipulates that a design must fulfill the
user’s needs by afford-
ing the required functionality. This may mean that the design
for a drawing program
should enumerate all of the tools required to create digital
drawings, or it may mean
that a Web site has all the information a visitor may need to
accomplish his or her
goals.

Effectiveness can be measured by the semantic distance (see
Chapter 2) be-
tween what a user needs to accomplish and the functionality
offered by the design.
Consider a remote for a VCR that does not contain a button for
ejecting a tape.
There is a gulf of execution between the need to eject a tape and
the functionality
afforded by the remote. This design renders the device less
useful than it could be.
6.4.1. Utility
Effectiveness can be defined as the utility of the proposed
design. The principle of
utility relates to what the user can do with the system. A design
with good utility
can be useful and might prove to be an effective tool for
accomplishing particular
tasks if that utility is easy to access and use.
Adobe PhotoShop® is arguably one of the most useful
applications available
commercially. It is used by people from an amazing diversity of
domains, from Web
site developers to commercial and recreational photographers.
PhotoShop® is a good
example of an application with high utility and ease of use.
Although there is a
learning curve for some of its more professional functionality
such as commercial
pre-press development, the tools are designed with each domain
in mind so that
professionals can relate to the program’s utility in a familiar
context.

6.4.2. Safety
Effectiveness also involves the principle of safety. A design
that has a high degree of
safety is more useful than a design that involves a high degree
of risk. Safety issues
can involve physical parameters, such as those in mission-
critical environments like
air traffic control or nuclear facilities. Safety can also mean that
people can use the
system without the risk of losing or destroying their work. In
the Humane Interface,
Jeff Raskin put forth two rules for interface design that are
corollaries to Asimov’s
laws of robotics (Raskin, 2000). The first one is stated as
follows:
A computer shall not harm your work or, through inaction,
allow your work to come to
harm.
We will discuss the second rule later in the efficiency/usability
section. The auto
recovery and auto save features available in software
applications are good examples ISB
N
0
-5
5
8
-8
6
0

1
1
-7
6.4. Effectiveness/Usefulness 199
of the safety principle being put into effect. The plain truth is
that computers crash
from time to time, and there is a risk that some work will be
lost. These automatic
safety features have more than earned their cost of
development.
We have already seen some of the risks involved with design
flaws in mission-
critical environments. The lessons learned from the Apollo 13
space mission and the
Three Mile Island disaster stand as monuments to the critical
importance of the
safety principle in human–computer interaction.
Recovery
Raskin’s first rule can be implemented in interaction designs by
incorporating appropri-
ate undo functionality and robust error recovery routines. It can
also be incorporated
in Web design by stipulating the need to retain Web-based form

input when users nav-
igate to previous pages in a form fill-in process during Web-
based transactions.
6.4.3. Flexibility
An important parameter of effectiveness is flexibility. A tool
that is flexible can be
used in multiple environments and address diverse needs. This
is the “Swiss Army
Knife” concept. An effective tool should also have enough
flexibility to perform a
desired function under many different circumstances.
For instance, a drawing program would have high flexibility,
and therefore
greater effectiveness, if it could be used to create images for the
Web as well as for
professional print publishing. It would also be more flexible if
it could import di-
rectly from a scanner or if it could import and export images in
diverse formats.
Customization
Another important consideration in terms of flexibility is the
capacity to modify the
tool to the individual needs of the user. A tool would have
greater flexibility if peo-
ple were able to customize the interface according to their
personal preferences.
For example, users should have the ability to alter settings like
default fonts and
font parameters. They should be able to modify toolbars and
toolbar placement so
that they can adjust their working space to be more efficient and

memorable. These
adjustments should be recorded by the application so the user
does not have to ad-
just them every time he or she uses the program. This is usually
accomplished with
a Preferences dialogue such as the one shown in Figure 6.4.
6.4.4. Stability
Another important parameter of effectiveness is the stability of
the system being de-
signed. A stable system is a robust system. A system that
functions consistently well
will be more useful than a system that crashes frequently.
The robustness of a Web site design may involve the use of
well-established
technologies and appropriately tailored content. For instance,
content that is not
IS
B
N
0
-5
5
8
-8
6
0
1
1

-7
Figure 6.4 Adobe PhotoShop® Preferences dialogue.
Adobe product screen shot reprinted with permission from
Adobe Systems Incorporated.
adapted to the connection speeds of the visitor may cause the
screen to freeze or
the computer to become so slow as to be unusable.
Video is becoming more prevalent on the Web due to the
ubiquity of broadband
connections. However, a robust design would inform visitors
about the size of the
video file and afford visitors with slower connections access to
a lower-bandwidth
version of the video, either through an automated process or
manually.
6.5. Efficiency/Usability
MAXIM
Efficiency describes the usability of a design.
The efficiency goal stipulates that a design should enable a user
to accomplish tasks
in the easiest and quickest way possible without having to do

overly complex or ex-
traneous procedures. It is a measure of the usability of the
design. Raskin’s second
rule relates to the efficiency of a design:
A computer shall not waste your time or require you to do more
work than is strictly
necessary.
There are many factors that affect the usability of an interaction
design. They
range from the size and placement of a component in a drawing
program to the
readability of the content of a Web page. These should not be
seen as mutually ex-
clusive or isolated components of the design process; they are
often interrelated and
might also overlap. ISB
N
0
-5
5
8
-8
6
0
1
1
-7

6.5. Efficiency/Usability 201
These factors may also conflict at times and require tradeoffs.
The overriding
principle of comprehensibility often can be used to make
determinations about the
relative importance of competing principles.
6.5.1. Simplicity
Everything should be made as simple as possible, but not
simpler.
Albert Einstein
Simplicity is a high-level principle. If things are simple, they
will be easy to under-
stand and, therefore, easy to learn and remember. If things are
simple, it will be
easy to make predictions about their use and functionality.
Simplicity can increase
the efficiency of an interface and make it more usable. It also
can be applied to in-
crease the comprehensibility of an interface design.
Figure 6.5 shows the design of the Google Web search engine.
It is an excellent
example of a simple yet powerful tool.
One of the hardest things to accomplish is the design of
something that is sim-

ple yet effective. It is important to understand the difference
between simple and
simplistic, which refers to something that results from
oversimplification. A simplis-
tic design involves “dumbing down” the interface and should be
avoided. Simple
designs do complex things in simple ways.
Ockham’s Razor (The Principle of Simplicity)
The concept of simplicity is eloquently expressed in Ockham’s
razor, attributed
to the medieval English philosopher and Franciscan monk
William of Ockham
(ca. 1285–1349):
Pluralitas non est ponenda sine necessitate [Pluralities should
not be posited without
necessity].
Figure 6.5 Google.com.
Screenshot © Google Inc. and is used with permission.
IS
B
N
0
-5
5
8
-8
6

0
1
1
-7
This principle can be understood as follows: given two
otherwise equivalent
designs, the simplest one is best. This is a widely accepted
concept in disciplines as
diverse as physics and graphic design. We can also make
excellent use of the prin-
ciple in interaction design.
At the heart of Ockham’s razor is the idea that necessity must
dictate the com-
ponents of a design. This is similar to the concept of leveling in
icon design, accord-
ing to which the designer eliminates unnecessary details until
only the essential el-
ements are left (see Chapter 11). We must often make decisions
about the amount
of detail to include in an icon. Through leveling, we reduce the
unnecessary detail
and isolate the elements that foster comprehension. Similarly,
Ockham’s razor ar-
gues that we should only include those elements that are

required to communicate
the necessary information.
Ockham’s razor can also guide the development of secondary
windows (see
Chapter 10). Secondary windows such as dialogue boxes that
contain occasionally
needed functionality should be added if and when they are
needed. Unnecessary win-
dows can cause confusion and can involve cumbersome window
manipulation tasks.
80/20 Rule
The 80/20 rule was conceived by the economist Vilfredo Pareto,
who found that
20% of the Italian population owned 80% of the nation’s
wealth. This rule has sub-
sequently been used to describe complex systems in various
domains and can be
used to guide interaction design.
According to the 80/20 rule, 80% of an application’s use
involves 20% of its
functionality. This idea can guide the construction of pull-down
menus and tool-
bars. For instance, the 20% that is an application’s most useful
functionality should
be put into the toolbars, where it can be easily accessed,
whereas the other 80% can
be put in less accessible pull-down menus. This also relates to
the principle of pro-
gressive disclosure discussed later.
The 80/20 principle can also be applied to the design process
itself. Interaction

design often involves updating or modifying a previous design.
Given the limited
resources that often exist regarding time and personnel, this
process might involve
making decisions about which aspects of the design should be
improved. According
to the 80/20 principle, design resources should be allocated to
the significant 20% of
the interface because working on the other 80% will not be as
cost effective.
Satisficing
The 80/20 principle is related to the principle of satisficing,
which stems from the
need to create a balance between satisfying and sufficing.
This principle combines the conflicting needs of finding the
optimal solution
that satisfies all the requirements and the need to settle on a
solution that will be
sufficient to proceed with the design. In other words, we must
find the 20% that
makes the most difference and focus on a solution that will
suffice. ISB
N
0
-5
5
8
-8
6

0
1
1
-7
6.5 Efficiency/Usability 203
Satisficing is born of necessity. In the interaction design
domain, resources are
often scarce and there is always a deadline. Satisficing can be
used when a satis-
ficed solution is better than the previous design or any
competing solution. It is a
way to deal with resource limitations, especially when a project
is complex and
contains multiple interacting variables.
Satisficing is not, however, an excuse to pursue the path of least
resistance. It is
also inappropriate in mission-critical environments. In those
situations, less than satis-
factory solutions can have devastating results, and satisficing
should not be considered.
Progressive Disclosure
With progressive disclosure, the user is shown only what is
necessary at any given

moment during his or her interaction with the system. This
technique can take the
form of links like “more info,” “view details,” or “related
topics” on a Web page. It
can also take the form of an expandable menu in an application
(Figure 6.6) (see
Chapter 10). Progressive disclosure serves to simplify available
options so the user
does not get overwhelmed with irrelevant functionality.
Constraints
The principle of constraints involves limiting the actions that
can be performed in a
particular design; it therefore controls the design’s simplicity. It
is applied by con-
straining the amount of functionality on a screen to only the
necessary functions
and therefore is related to the principle of progressive
disclosure.
Figure 6.6 Expandable menu: (a) expanded, (b) minimized.
b
a
IS
B
N
0
-5
5

8
-8
6
0
1
1
-7
When it is not appropriate or applicable, functionality can be
grayed out, which
helps to reduce user errors due to inappropriate commands out
of the range of the
current system state (Figure 6.7). The appropriate application of
constraints can
make an interface much easier to learn and use.
Constraints can be categorized as physical or psychological.
Physical constraints
limit a user’s movement by controlling aspects such as direction
or distance.
Psychological constraints limit a user’s actions by influencing
the way he or she per-
ceives the interface and its various components.
Physical Constraints

• Paths—Physical paths constrain movement to a designated
location and direc-
tion. Sliders and scrollbars constrain a user’s movement to the
horizontal or ver-
tical movement allowed by the components track.
• Axes—Physical axes constrain the user’s movement to
rotation around an axis.
This can be seen in the way a trackball works. A trackball
affords an infinite
number of axes on which to rotate the ball and an unlimited
length of move-
ment. The user is constrained, however, to the location of the
device because
translational movement has no effect. For a discussion of
rotational and transla-
tional movement, see Chapter 14.
• Barriers —Barriers provide spatial constraints that can confine
the user’s
movement to the appropriate areas of the interface. The physical
barrier pro-
vided by the computer screen can be used to help people target
buttons and
controls that are located in the peripheral areas of the interface.
Chapter 7
shows how Fitts’ law can be used to support the use of the
screen’s boundaries
to constrain the user’s movement and helping him or her to
target small inter-
face components.
Psychological
• Conventions—Conventions exploit learned behavior to

influence a user’s ac-
tions. For instance, the location of certain screen elements has
become stan-
dardized and is, therefore, conventional. People tend to look in
those locations
when they need a particular functionality, and putting all of the
conventional el-
ements in the expected location constrains the user’s attention
to those loca-
tions.
• Mapping—Mapping can influence the way in which people
perceive relation-
ships between controls and effects. For example, a Web page
design can take
advantage of our natural tendency to map forward motion to the
right and
backward motion to the left by pointing arrows in those
directions (the reverse
is true for people who read from right to left).
• Symbols—Symbols can influence the way in which we interact
with an inter-
face by defining meaning and constraining our possible
interpretations of inter-
face elements. Symbols are used mostly for icons and labels.
See Chapter 11 for
an in-depth discussion of symbols.
Figure 6.7 Grayed-out
functionality.
IS
B
N

0
-5
5
8
-8
6
0
1
1
-7
6.5.2. Memorability
We can use the principle of memorability to increase the
efficiency of designs.
Interfaces that have high memorability are easier to learn and
use, instilling a sense
of control and comfort in the user. It is always comforting to
know that the next
time you launch a program, you will be able to find the objects
and functionality
you need without having to search menus or consult a manual.
Many different parameters affect memorability, including the

following:
• Location—If we place a particular object in a consistent
location, it will be eas-
ier to remember. The convention of putting the search box in
the upper right-
hand corner of a Web page makes it easier to find.
• Logical Grouping—If we group things logically, they will be
easier to remem-
ber. For instance, if we put related options together in a menu,
their functional-
ity will be easier to remember. Later we explore the issues
involved in visual
grouping in the section on the Gestalt principles.
• Conventions—If we use conventional objects and symbols,
they will be easier
to remember. The shopping cart symbol is a convention, and
therefore its func-
tionality is easy to remember.
• Redundancy—If we use multiple perceptual channels to code
information,
people will be able to focus on the channel they personally rely
on the most.
There will also be more available associations for long-term
memory processing
(see Chapter 13 for more information on long-term memory
processing).
An interface with high memorability is more comprehensible
and efficient be-
cause there are fewer things for users to think about. These
interfaces allow us to
apply previous knowledge to components of the interface.

6.5.3. Predictability
Predictability involves a person’s expectations and ability to
determine the results of
his or her actions ahead of time. Predictable events are obvious,
and their results
are, to a large degree, foreseeable. Highly predictable events are
often considered
inevitable.
Predicting the outcome of an action involves memory. We base
our judgment
on our previous experiences. If our document printed the last
time we clicked the
printer icon, it will probably print again when we hit it a second
time.
If we can predict the outcomes of our actions, we gain a sense
of security that al-
lows us to be more productive. This security can also encourage
us to explore some
of the less familiar aspects of an interface and, therefore, to
increase its usefulness.
Consistency and Correctness
Predictability and memorability can be increased by using the
principle of consis-
tency. The consistency principle can be applied to every aspect
of an interface, from
IS
B
N
0

-5
5
8
-8
6
0
1
1
-7
color coding and icon style to button placement and
functionality. Consistency rein-
forces our associations and, therefore, increases our ability to
remember and predict
outcomes and processes.
Consistency can be seen in the placement and labeling of menus
in the com-
mon GUIs such as OS X® and Windows®. These interfaces
consistently place the
File, Edit, and View menus, when they are available, together
on the left side of
menu bars and the Window and Help menus on the right end

(Figure 6.8). The
other components of the various windows such as the Close and
Minimize buttons
are also placed in consistent locations and have a consistent
appearance.
We should strive for consistency. Before we enforce
consistency, however, we
must make sure that we are correct; otherwise we will simply be
consistently incor-
rect. Consistent incorrectness may be preferable to inconsistent
incorrectness be-
cause people are highly adaptable and pick up patterns easily,
so that any amount
of consistency is helpful. Consistent incorrectness can mean,
however, that the user
must consistently do more work than is necessary. It can also
mean that the user
will simply be consistently confused and have to constantly
think about how to use
the interface. Neither of these situations is optimal, and they
can be avoided with a
bit of forethought and testing.
Generalizability
Consistency can help us use the knowledge we gathered from
previous experience
and apply it to similar situations. This decreases our learning
curve and makes us
more efficient. For instance, if we know that the Save function
is in the File menu
and that the File menu is located on the left side of the toolbar
in one program, we
can predict that the Save function’s location will be the same in
another program.

Searching drop-down menus is time consuming and emphasizes
one of their essen-
tial disadvantages: they hide things.
Conventions
Conventions are, by their very nature, predictable. They allow
us to use our intu-
itions, which are based on previous experience and logic.
Conventions are created
Figure 6.8 (a) Macintosh menu. (b) Microsoft Word menu.
a
b
IS
B
N
0
-5
5
8
-8
6
0
1
1
-7

Figure 6.9 Shopping cart
convention.
Figure 6.10 Logo of Pearson Education.
through consistency. If something is consistently done in a
particular way, that will
eventually become the conventional way of doing it.
Consider the shopping cart icon used on most commercial Web
sites (Figure 6.9).
It was one of the first conventions to appear on the Web and has
remained a staple
for any site the offers that particular functionality.
Familiarity
Familiarity increases predictability. If we use familiar menu
names and options in
our designs, users will be able to locate objects and functions
more easily. Similarly,
if we use familiar images and metaphors, familiar formats and
layouts, and familiar
ways of doing things, we increase the predictability, efficiency,
and comprehensibil-
ity of our interface designs.

Location, Location, Location
Location is everything! This bit of wisdom from the real estate
domain also has a
resonance for interaction design. Not all areas on the screen are
created equal. If
you understand the conventional use of screen space, you can
optimize the pre-
dictability of your designs. For instance, Web pages are
constructed from a top-
left orientation (unless the user orientation is right to left, in
which case it is top
right), which dictates that the top-left corner is the prime
location. This is where
the visitor’s attention naturally falls unless there are objects
with high intensity in
other locations drawing his or her attention away. See the later
section on stimu-
lus intensity.
The top-left area of the page is typically the place where the
logo of the com-
pany or institution is placed (Figure 6.10). This is prime screen
real estate and is vis-
ible no matter what resolution the visitor is using or the size of
the browser window.
By placing the logo here, we follow the predictability principle
and give visitors an
immediate indication of the site’s identity.
IS
B
N
0

-5
5
8
-8
6
0
1
1
-7
Modes
Modes create instability in mental models because they change
the way objects
function, unfortunately often without warning or any
demonstrable indication, de-
creasing the predictability of the interface.
The simplest example of a mode is the way in which the Shift
key affects the
characters on the screen by creating an “uppercase mode.” This
new modality
changes things significantly: an “A” can have a very different
meaning than an “a.”

The fact that we keep our finger on the shift key when using it
makes this a tog-
gle, which is easier to deal with than a complete modal
transformation because our
action constantly reminds us of the alteration in functionality.
The Caps Lock key is
a bit more problematic because we can forget that the uppercase
mode has been
turned on.
It can be frustrating to copy a long paragraph and then glance at
the screen to
see all of the words we just typed with reverse capitalization.
This is one of the rea-
sons some word processing applications include a “tOGGLE
cASE” in the Change
Case formatting menu (Figure 6.11).
Modes can be particularly problematic, especially for anyone
who is not a fre-
quent user of a particular application. They are often made more
difficult because
of the paucity of indications about the system’s state while the
mode is active,
which can create a significant gulf of evaluation.
For instance, in a particular painting program, the text tool can
be used to enter
text directly onto the canvas at the exact location required. The
system automatically
enters “text mode” when the text tool is selected, but there is
little visual indication
that a mode has been entered. The text mode creates a separate
layer in which the
text remains editable until it is rendered as pixels along with the

graphic image.
This is actually a significant improvement over the way text
used to be entered
in such programs, using a separate dialogue box. The difficulty
with the implemen-
tation in this case arises when we go to save the file. When the
text mode is active,
most other functions are inaccessible, including the Save
function. Unfortunately,
there is no visible indication that the other functions have been
disabled until we
engage the File menu and see that the options are not available.
The most problematic aspect of this gulf of evaluation occurs if
we try to save
the file using the Ctrl�S keyboard shortcut. In this case, there
is no indication that
the Save function is disabled, nor is there any indication that
the keyboard shortcut
had no effect. We are left to assume, incorrectly, that the file
has been saved.
Figure 6.11 Toggle case example.
HCI Foundations for Interaction Design
hci fOUNDATIONS FOR iNTERACTION dESIGN
IS
B
N
0
-5

5
8
-8
6
0
1
1
-7
6.5.4. Visibility
Show everything at once, and the result is chaos. Don’t show
everything,
and then stuff gets lost.
(Norman, 1998, 74)
The principle of visibility involves making the user aware of the
system’s compo-
nents and processes, including all possible functionality and
feedback from user ac-
tions. As we saw, this is a significant principle for applications
that contain modes.
The principle of visibility dictates that the user must be

informed about all of
the system’s objects and processes. But how is this
accomplished? Do we just make
everything visible? In a complex application complete visibility
could make the in-
terface impossible to use.
Overload
MAXIM
The principles of progressive disclosure and simplicity should
be used in
conjunction with the principle of visibility.
Following the principle of visibility without also applying
progressive disclosure can
lead to visual overload. It is easier to make all of a system’s
functionality visible and
let the user be discriminating than it is to meticulously study
the temporal aspects of
user interaction and craft an interaction space according to the
requirements of cur-
rent tasks, updating the interface as the user completes new
tasks.
This is the challenge posed by the principle of visibility. The
principle of sim-
plicity can also be used to identify the necessary elements that
will define what
should be visible and when.
Feedback
Direct manipulation interfaces involve high visibility because
they are defined by
the immediate visual feedback they provide about user actions.

It is the task of the
interaction designer to decide what form that feedback takes.
There are conventions concerning feedback, such as the way
command buttons
behave when they are clicked or cursor hinting, which makes
resource-intensive
processing visible to the user (see Chapter 10). These
conventions should be used
in a way that complies with user expectations.
Recognition/Recall
The principle of visibility is based on the fact that people are
better at recognition
than recall. In other words, recognizing a target option within a
set of options is eas-
ier than recalling that option from memory. Making things
visible when they are rel-
evant helps people to complete complex processes without
having to remember all
the details involved.
IS
B
N
0
-5
5
8
-8
6

0
1
1
-7
Orientation
People need to be able to orient themselves, especially in
complex information
spaces. Web site design must be sensitive to the visitor’s need
to know where he or
she is within the context of the site, especially if the site is
large and has many dif-
ferent areas. “You are here” orientation is essential for people
who navigate the Web
using hyperlinks rather than search mechanisms.
The principle of visibility means that a Web site design should
supply informa-
tion for a visitor to know what the site is about, how many areas
the site has, and
where the visitor is within the site. Page titles, site logos,
tabbed interfaces, cookie
trails, and color coding are some elements that can help visitors
to orient themselves.

We have looked at some of the principles used by designers to
help craft more
usable and useful interactions. These are high-level principles
that can guide deci-
sions about the various tradeoffs required by conflicting
requirements. We now look
at some of the principles that function on lower levels. These
principles are used to
make decisions about specific screen controls, menus, and
layouts.
6.6. Grouping
MAXIM
Use visual cues to support the logical structure of the interface.
We can increase the comprehension of complex information by
creating visual pre-
sentations that logically support the intrinsic structure of that
information. This in-
volves grouping related things and presenting them in a
comprehensible way
through the creation of menus with related options or the
grouping of related radio
buttons on the screen.
It can also mean using borders or backgrounds to group a Web
site’s navigation
links. To help in structuring this process, interaction designers
often refer to the
principles of perception that were developed by Gestalt
psychologists in the early
twentieth century.
6.6.1. Gestalt Principles of Perception
Gestalt psychology is based on the concept that we strive to

perceive our environment
as comprised of whole entities, even if we are not presented
with complete informa-
tion. For instance, emoticons, such as the little smiling face :-)
used so frequently to
add emotional nuances to e-mails and text messages, are often
composed of just three
separate text characters, yet we perceive them as complete
faces.
At the heart of Gestalt psychology is the idea that we strive to
find the simplest
solutions to incomplete visual information. Rather than seeing
the emoticon as three
unique elements that must be considered individually, we
gravitate to a simple so-
lution, which interprets them as one integrated object. ISB
N
0
-5
5
8
-8
6
0
1
1
-7

6.6. Grouping 211
Gestalt psychology strives to explain the factors involved in the
way we group
things. This is of considerable interest to interaction designers,
who spend a great
deal of time creating menu groupings and arranging content on
screens and Web
pages. Let’s explore some of the principles and concepts of the
Gestalt perspective
on visual grouping.
Figure-Ground
Gestalt psychology’s notion of figure and ground posits that we
perceive our envi-
ronment by differentiating between objects and their
backgrounds. Basically, this
means that we see some things as being prominent and others as
being recessive,
or as forming the background of the visual field.
This concept is often illustrated using the Rubin face/vase
illusion shown in
Figure 6.12. This image is manipulated in such a way that we
must constantly strive
to define the figure and the ground; it becomes a dynamic tug-
of-war between the
faces and the vase.
As another example, consider the Macintosh logo (Figure 6.13).

This image cre-
ates a tension between its perception as a face in profile and one
in frontal view. This
is an interesting illusion, which has a potential dynamic effect
in icon design; how-
ever, would be inappropriate to design an interface that created
such visual tension.
Unfortunately, some Web sites use busy backgrounds, which
compete with the
information on the page. This type of presentation makes it hard
to distinguish fig-
ures from the ground and diminishes the efficiency of the
presentation, sometimes
even making essential information invisible to the visitor.
If we use these principles correctly, we can create logical
groupings of multiple
objects that will be perceived as complete entities and become
figure components
within the visual field of the user. In other words, we can use
these principles to im-
pose a logical structure on an interface’s visual stimuli. These
principles also ensure
that the groups are presented in a natural way that is easy to
understand.
In summary, according to Gestalt psychology:
• We have a natural inclination to perceive things as whole
entities.
• We tend to distinguish foreground objects from background.
• The Gestalt principles of perception define the factors
involved in visually

grouping items.
A number of Gestalt principles can be useful in guiding the
creation of logical
groupings and can increase the comprehensibility of the
interface. These principles
address low-level decisions about the placement and
organization of screen elements,
such as icons and controls. They can also be used to organize
and structure menus.
The Gestalt principles we will explore include the following:
• Proximity
• Similarity
Figure 6.12 The Rubin
face/vase illusion.
Figure 6.13 Macintosh logo.
IS
B
N
0
-5
5
8
-8
6
0

1
1
-7
• Common fate
• Closure
• Good continuity
• Area
• Symmetry
• Surroundedness
• Prägnanz
Proximity Principle—Objects that are close to each other will
be seen as
belonging together.
Consider the illustrations in Figure 6.14. We see Figure 6.14a as
a group of radio
buttons in a table comprised of four columns and four rows
without any preference

for either orientation. However, if the radio buttons are placed
closer horizontally, we
tend to see four rows of five buttons, as in Figure 6.14b. When
they are positioned
closer vertically (Figure 6.14c), we tend to see four columns of
five buttons. The prin-
ciple of proximity causes us to group the buttons that are close
to each other.
Let’s look at a real-world example. Consider the Preferences
dialogue from
Adobe PhotoShop® shown in Figure 6.15. The buttons on the
far right tend to be
seen as two groups rather than as four separate buttons. This is
because there is
slightly more vertical room between the Reset and Prev buttons,
meaning that
OK and Reset appear closer and therefore related. The same is
true for the Prev
and Next buttons. This grouping supports the logical structure
of the buttons’
functions.
Similarity Principle—Objects that have similar visual
characteristics, such as size,
shape, or color, will be seen as a group and therefore related.
Consider the illustrations in Figure 6.16. We see Figure 6.16a as
rows of radio
buttons and checkboxes, whereas in Figure 6.16b we see
columns. This is because
Figure 6.14 (a) Equidistant. (b) Horizontal proximity. (c)
Vertical proximity.
a b c

IS
B
N
0
-5
5
8
-8
6
0
1
1
-7
6.6 Grouping 213
Figure 6.15 Adobe PhotoShop® Preferences dialogue.
of our tendency to group the similar shapes. We see Figure
6.16c as three checkbox
columns and two sets of radio button columns rather than four

discrete radio button
columns because we group each set of two columns together.
Figure 6.17 shows the Property pane from Adobe’s
Dreamweaver® application.
This is a complex pane that contains a great deal of
functionality. However, if we
give it a quick glance, we can see relationships between similar
objects. Our eyes
pick up all of the text boxes because of the white areas that they
have in common.
The drop-down menus appear related because they all have the
down-pointing
arrow inside a blue square background. The justification icons
on the upper right
corner are similar in appearance and are therefore grouped.
Figure 6.16 (a) Rows of similar objects. (b) Columns of similar
objects. (c) Grouped columns.
a b c
IS
B
N
0
-5
5
8
-8

6
0
1
1
-7
Figure 6.17 Property pane from Adobe Dreamweaver®.
The principle of similarity implies the existence of contrast.
This is the other
side of the coin and can be used visually to separate objects that
should not be
seen as related. Later we look at this issue more closely in the
section on screen
complexity.
Common Fate Principle—Objects that move together are seen as
related.
This may seem an odd principle for interface design; however,
if we under-
stand movement as having a beginning, a direction, and an end,
it becomes easier
to apply the principle to static elements and it becomes a

powerful tool for inter-
face design.
Consider Figure 6.18. The drop-down menus on the left side do
not start at the
same location and do not end at the same location; hence, they
are not visually
grouped together and are seen as individual objects. The menus
on the right side do
start and end together, except for the last one, which just ends
with others. These
components share a common fate and, therefore, seem related.
A grid structure can be used to control the common fate of
screen objects.
Consider again the Dreamweaver® Properties pane, which uses
alignment exten-
sively to group related functionality. There are also
discontinuities that serve to
Figure 6.18 (a) Unaligned drop-down menus. (b) Aligned drop-
down menus.
a b
IS
B
N
0
-5
5
8
-8

6
0
1
1
-7
6.6. Grouping 215
Figure 6.19 Common fate: Adobe Dreamweaver® properties
pane.
Figure 6.20 Closure
principle.
Figure 6.21 Adobe Dreamweaver® Results panel.
separate nonrelated functionality. The underlying grid becomes
obvious when we
start delineating the visual alignments as in Figure 6.19.
Closure Principle—We tend to see things as complete objects
even though there
may be gaps in their shape.

We see the brackets in the first row in Figure 6.20 as three
groups of two due to
their proximity. If we look at the brackets in the second row
beginning at the left,
we tend to see three enclosures. If we look at them from the
right, however, we
again tend to see groups of two brackets.
The closure principle can also be seen in the way the inactive
tabs on the
Dreamweaver® Results panel in Figure 6.21 are delimited with
a line that does not
span the entire height of the row of tabs. We tend to see
complete boxes in which
the links are placed.
Good Continuity Principle—We tend to see things as smooth,
continuous
representations rather than abrupt changes.
Consider the section of a page from the Apple.com Web site
shown in Figure
6.22. Even though the line that delineates the top row is hidden
by the image and
is not continuous, we perceive one row containing the .mac title
and the two
round buttons.
IS
B
N
0
-5

5
8
-8
6
0
1
1
-7
Figure 6.22 Part of an Apple.com Web page.
Figure 6.23 MoMA.org Web page.
Courtesy Museum of Modern Art.
Consider the page from the Museum of Modern Art (MoMA)
Web site shown in
Figure 6.23. The principle of good continuity helps us connect
the top part of the
left column with the part that appears under the dark horizontal
strip. The dark strip
appears to be placed on top of the white column that extends
from the top to the
bottom of the page.

The Area Principle—Objects with a small area tend to be seen
as the figure, not
the ground (also called the smallness principle).
IS
B
N
0
-5
5
8
-8
6
0
1
1
-7
6.6. Grouping 217
Figure 6.24 (a) Metropolitan Museum of Art Web page
(original). (b) Metropolitan Museum of
Art Web page (altered) by author.

a b
Consider the page from the Metropolitan Museum of Art Web
site shown in
Figure 6.24. In Figure 6.24a the large center image creates a
ground within which
one can see figures. When the same image is reduced in size, it
becomes another
figure on the page.
Symmetry Principle—Symmetrical areas tend to be seen as
complete figures that
form around their middle
According to the symmetry principle, we tend to group
symmetrical elements
into groups defined by a center point. There are a few ways to
create symmetry:
translation, reflection, and rotation (Figure 6.25).
Consider the page from the XM Satellite Web site shown in
Figure 6.26. The
center of the page is enclosed within a space created by the two
red lines. The bot-
tom line is a 90� rotation of the top line.
b
Figure 6.25 (a) Translation. (b) Reflection. (c) Rotation.
a c
IS
B
N

0
-5
5
8
-8
6
0
1
1
-7
Figure 6.26 XM Satellite Radio Web-based player.
© 2006 XM Satellite Radio Inc. All rights reserved.
Top divider
Rotated divider
Figure 6.27 Surroundedness principle. (a) Original Apple.com
page. (b) Blurred Apple.com page.
a b

Surroundedness Principle—An area that is surrounded will be
seen as the figure,
and the area that surrounds will be seen as the ground.
Consider the page from the Apple Web site shown in Figure
6.27a. Logically,
the page seems to consist of top and bottom rows, two side
columns, and a cen-
ter area. If you look at the blurred version in Figure 6.27b,
however, the
IS
B
N
0
-5
5
8
-8
6
0
1
1
-7

6.6. Grouping 219
surrounded center area becomes the figure and the other page
areas appear as
the ground. This is the visual impression the page has on our
perception of its
contents.
White Space—The area of a page or screen that contains no
content is called
white space.
White space is a common design concept (not a Gestalt
principle) that is closely
related to the surroundedness principle and can be used to
distinguish between figure
and ground. White space is often used to create breathing room
on the page and to
set off paragraphs, images, and controls. It can create
separations, group related ob-
jects, and organize and highlight important components of the
screen. Things that are
surrounded by white space are seen as related.
White space is discussed in the context of margin width in
Chapter 12. Studies
have shown that it has an effect on text comprehensibility.
Prägnanz Principle—We tend to perceive things based on the
simplest and most
stable or complete interpretation.
The overarching Prägnanz principle evolves from the
combination and interac-
tion of the other principles. In visual grouping, many Gestalt

principles of percep-
tion work together, although at times, one principle can work
against the influence
of another. This can create tension that can be visually
interesting but should be
avoided in interface design.
For example, the application of a colored background for a set
of check boxes
and radio buttons should be based on the logical grouping of
components and not
conflict with that logical structure as it does in Figure 6.28a.
Figure 6.28 (a) Visual conflict with common fate. (b) Visual
conflict with surroundedness.
a b
IS
B
N
0
-5
5
8
-8
6
0
1
1

-7
Figure 6.29 Stimulus intensity.
The principles we have explored would compel us to group the
similarly
shaped checkboxes in these images vertically. However, the
background color is
applied horizontally, creating a surroundedness and similar fate
for the components
in rows.
The dark background pulls on our perception because it has
more intensity
than the white background, and we see three horizontal rows
surrounded by white.
In Figure 6.28b we have the same visual/logical conflict,
resulting in the perception
of two white rows surrounded by gray.
6.7. Stimulus Intensity
As we have seen, the physical encoding of an object affects our
perception of that
object according to the Gestalt principles of perception. If we
add to this the con-
cept of stimulus intensity, we find that the visual effect can
become quite strong.

According to the Model Human Processor developed by Card,
Moran, and
Newell (see Chapter 7), we respond first to the intensity of a
stimulus and only then
do we begin to process its meaning. In other words, we perceive
the color, shape,
or size of an object before we understand what the object is.
In the set of numbers in Figure 6.29, for example, viewers
typically perceive the
columns of bold numbers before they perceive the rows of odd
and even numbers.
In this image, the principles of proximity and common fate
work together with the
intensity of the bold numbers to create the appearance of
columns. Only after they
process the meaning of the numbers can viewers create logical
rows based on odd
and even numbers.
6.8. Proportion
Proportion can be used to represent logical hierarchies. The
headings element in
markup languages uses proportion to visually structure
information on a page
(Figure 6.30). ISB
N
0
-5
5
8
-8

6
0
1
1
-7
6.8. Proportion 221
Figure 6.30 The six levels of heading elements.
Figure 6.31 (a) Golden ratio. (b) Golden ratio equation.
a b
a b+
a
a
a
a+ b
b
=
b

The most important heading on a page should be marked up
with a level 1
heading. The browsers render this by using the largest type size
and scale down the
rest of the levels proportionately.
6.8.1. Golden Ratio
In the so-called golden ratio the relationship between two
parameters describing
a form such as height and width is expressed through a ratio
that is equal to
0.618. For instance, consider the line in Figure 6.31. When the
full length a + b is
to the longer segment a, as a is to the shorter segment b, the
ratio a/b is equal to
0.618.
The golden ratio can be found in nature, for example, in the
proportions of the
human body such as the ratio between the length of the hand
and that of the fore-
arm (Figure 6.32).
The ratio’s proportions have an inherently pleasing visual effect
and have there-
fore been used in design throughout history. The height and
width of the Parthenon
and the façade of Notre Dame Cathedral use the golden ratio.
IS
B
N
0
-5

5
8
-8
6
0
1
1
-7
Figure 6.32 (a) Golden ratio in human proportions. (b) Golden
ratio in the Apple iPod®.
a
a
b
b+
a
6.8.2. Fibonacci Series
The Fibonacci series is a sequence of numbers in which each
number is the sum of

the two preceding numbers. The relationship between
consecutive numbers in the
Fibonacci series is similar to the golden ratio. This similarity
increases as the num-
bers in the series increase:
1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, . . .
The sequence is common in nature and is found in the growth
patterns of shells
and flowers. It has been used in art and can be found in
Mozart’s sonatas and
Beethoven’s Fifth Symphony. It was also used by the architect
Le Corbusier to cre-
ate a system of architectural proportions that were in tune with
the natural propor-
tions of the human body. We can see the first six elements of
the Fibonacci series
graphically represented in Figure 6.33.
Both the golden ratio and the Fibonacci sequence can be used to
create harmo-
nious proportions for objects and areas on Web pages or
application interfaces.
They should not, however, be imposed on an information space
at the expense of
other, more pressing considerations.
Figure 6.33 Fibonacci series.
8
5
3 2
11

b
IS
B
N
0
-5
5
8
-8
6
0
1
1
-7
6.9. Screen Complexity 223
6.9. Screen Complexity
As computers become more powerful, they offer more
functionality, which can
make GUIs visually complex and difficult to use. The principles
covered in this

chapter can be used to guide the design of interfaces, and many
of these principles,
such as progressive disclosure and simplicity, can help to
ensure that the results are
not too complex or overwhelming.
The measure of complexity developed by Tullis (1984) can be
used to calculate
the relative complexity, and therefore the difficulty, of a design.
This measure of
complexity uses information theory (Shannon & Weaver, 1949)
to determine the
complexity of typographically designed pages. It is directly
related to the Gestalt
principle of common fate in that it encourages the use of
underlying grid structures
to visually simplify complex screens.
The formula for calculating complexity in bits (due to the log
base 2) is shown
in Figure 6.34.
To calculate the measure of complexity for a particular screen,
do the following:
1. Place a rectangle around every screen element.
2. Count the number of elements and the number of columns
(vertical alignment
points).
3. Count the number of elements and the number of rows
(horizontal alignment
points).
The original screen used by Tullis, as shown in Figure 6.35, was

found to give
a mean search time of 8.3 seconds:
22 fields with 6 horizontal (column) alignment points � 41 bits
22 fields with 20 vertical (row) alignment points � 93 bits
Overall complexity � 134 bits
Tullis redesigned the original screen to reduce its complexity,
as shown in
Figure 6.36.
Figure 6.34 Formula for calculating the measure of complexity.
C, complexity of the system in bits;
N, total number of events (widths or heights);
m, number of event classes (number of unique widths or
heights);
pn, probability of occurrence of the nth event class (based on
the frequency of events within that class).
C = -N p log p
m
n = 1
2n n
IS
B
N
0

-5
5
8
-8
6
0
1
1
-7
Figure 6.35 Tullis’ original screen, with rectangles. (b) Tullis’
original screen, with
alignment points.
TEST RESULTS SUMMARY: GROUND
GROUND, FAULT T-G
3 TERMINAL DC RESISTANCE
> 3500.00 K OHMS T-R
- 14,21 K OHMS T-G
> 3500.00 K OHMS R-G

3 TERMINAL DC VOLTAGE
- 0.00 VOLTS T-G
- 0.00 VOLTS R-G
VALID AC SIGNATURE
3 TERMINAL AC RESISTANCE
- 8.82 K OHMS T-R
- 14,71 K OHMS T-G
- 62B.52 K OHMS R-G
LONGITUDINAL BALANCE POOR
- 39 DB
COULD NOT COUNT RINGERS DUE TO
LOW RESISTANCE
VALID LINE CKT CONFIGURATION
CAN DRAW AND BREAK DIAL TONE
a
TEST RESULTS SUMMARY: GROUND
GROUND, FAULT T-G
3 TERMINAL DC RESISTANCE

> 3500.00 K OHMS T-R
- 14,21 K OHMS T-G
> 3500.00 K OHMS R-G
3 TERMINAL DC VOLTAGE
- 0.00 VOLTS T-G
- 0.00 VOLTS R-G
VALID AC SIGNATURE
3 TERMINAL AC RESISTANCE
- 8.82 K OHMS T-R
- 14,71 K OHMS T-G
- 62B.52 K OHMS R-G
LONGITUDINAL BALANCE POOR
- 39 DB
COULD NOT COUNT RINGERS DUE TO
LOW RESISTANCE
VALID LINE CKT CONFIGURATION
CAN DRAW AND BREAK DIAL TONE
Vertical alignment points

Horizontal
alignment
points
b
The redesigned screen gave a mean search time of 5.0 seconds,
and is about
28% less complex than the original screen:
18 fields with 7 horizontal (column) alignment points � 43 bits
18 fields with 8 vertical (row) alignment points � 53 bits
Overall complexity � 96 bits
An easier method for calculating complexity was suggested by
Galitz (2002) and
consists in counting the following:
• The number of elements on the screen
• The number of horizontal (column) alignment points
• The number of vertical (row) alignment points
The sums for the original and redesigned screens by this
measure are as follows:
For Figure 6.29 (original):
IS

B
N
0
-5
5
8
-8
6
0
1
1
-7
6.9. Screen Complexity 225
22 elements
6 horizontal (column) alignment points
20 vertical (row) alignment points
48 � complexity.
For Figure 6.30 (redesigned):

18 elements
7 horizontal (column) alignment points
8 vertical (row) alignment points
33 � complexity
This calculation shows that the redesigned screen is about 31%
less complex
than the original screen. Applied consistently, this formula can
be used to perform
quick evaluations of two competing designs.
Complexity versus Usability
According to the measurement of complexity, a simple screen
should be the least
complex and therefore the most usable. However, reducing a
screen to its ulti-
mate simplicity might not be the best thing to do. Studies have
shown that overly
simple screens are less interesting and can actually become less
useful, especially
if the drive for simplicity causes the screen to contain less
functionality and lose
some utility.
Figure 6.36 Redesign of original screen.
IS
B
N
0

-5
5
8
-8
6
0
1
1
-7
Figure 6.37 Relationship between complexity and usability.
Complexity
Usability
Optimum Complexity
In a study that measured usability in relation to complexity,
Comber and Maltby
(1997) found that both overly simple and overly complex
screens were low in us-
ability. Their results showed a bell curve relationship, with the

most usable screens
being those with moderate amounts of complexity (Figure 6.37).
Comber and Maltby defined usability in terms of the following
three components:
• Effectiveness
• Learnability
• Attitude
They found tradeoffs between usability and complexity:
• As complexity decreased, it became harder to differentiate
among screen ob-
jects; the screen became artificially regular.
• As complexity decreased, predictability increased.
• Increased complexity meant that there were fewer ways to
group objects.
• Excessive complexity made screens look artificially irregular.
• Increased complexity could occur from increased utility.
Research Results
The results of research on screen complexity show that we
should strive for logical
layouts that contain the necessary functionality, and that we
should design them so
that the user can visually understand groupings without
struggle.

Overly complex screens seem chaotic and unorganized, making
it hard for peo-
ple to make sense of the visual presentation. With overly simple
screens, there may
not be enough cues to help people group related functionality.
We should strive for a balance and apply all of our principles
based on the
overriding principle of comprehensibility. If people do not
understand what they ISB
N
0
-5
5
8
-8
6
0
1
1
-7
6.11. Usability Goals 227

are looking at, none of the functionality will be useful. People
will probably choose
not to use the interface unless they absolutely have to, in which
case their perform-
ance will be diminished and their frustration level increased.
Complexity Guidelines:
• Optimize the number of elements on a screen within the limits
of clarity and
utility.
• Minimize the alignment points. Use grid structures.
6.10. Resolution/Closure
The principle of resolution, also known as closure, relates to the
perceived comple-
tion of a user’s tasks. (This is different than the Gestalt
principle of closure.) When
the user’s objective is satisfied, he or she will consider the task
complete and move
on to the next goal. Although this concept may seem trivial, it
proved to be signifi-
cant for the original designs of ATM machines.
A primary reason that we use ATMs is to withdraw money from
bank accounts.
The original ATM designs required users to insert their cards
into the machines.
After the transaction was complete and the users had received
their money, the card
was returned. A problem arose because users considered their
task complete when
they received money from the machine, and they often left
before their card had
been ejected. This difficulty was caused because ATM designers

had ignored the
principle of resolution. It has been rectified by solutions that
require users to swipe
cards rather then insert them into the machines.
6.11. Usability Goals
As we saw in Chapter 3, user-centered design (UCD) puts the
focus on the user’s
tasks and goals. It also recognizes that interaction designs
should facilitate those
goals in the most advantageous way possible.
In other words, UCD encourages the development of usability
goals that pro-
mote more usable interface designs. As we have seen, the
generally accepted us-
ability goals state that an interface should be:
• Understandable
• Learnable
• Effective/useful
• Efficient/usable
These usability goals seem logical, and it would be difficult to
argue against
them; however, it may not be entirely clear how they will affect
the design that you
are currently developing. How can you promote ease of learning
or increase the
IS
B

N
0
-5
5
8
-8
6
0
1
1
-7
efficiency of a design? How do these goals affect the many
decisions you need to
make about color, text, icons, or any other interface element?
To answer these questions, we must first understand how to
develop a set of
usability guidelines for the project; to do that, we need to
understand how to go
from general usability goals to more specific design guidelines.
Let’s see how that
can be accomplished.

6.11.1. Goals to Principles
Usability goals provide a foundation not a prescription for
design. These goals have
been studied by HCI practitioners and designers, and a great
deal of research has
gone into studying how we can make things easy for people to
understand and
learn. The result of these efforts is that these goals have been
defined according to
design principles.
6.11.2. Principles to Guidelines
Design principles can guide us and help us to make informed
decisions; however,
they must be defined according to each particular project. You
must clarify what
they mean for your project by defining them in terms of the
guidelines that your de-
sign must satisfy.
Quantifying usability goals in terms of project guidelines at the
beginning of the
project provides a basis on which to make design decisions and
provides criteria for
usability tests later.
These guidelines are documented at the beginning of the project
and are re-
ferred to when decisions need to be made. They provide a
structure for the various
evaluations you perform throughout the project.
Even small-scale projects have many guidelines. There is a list
of global guide-
lines affecting every module in the design, as well as sectional

guidelines. These
guidelines should be listed according to their relationship to the
design, making it
easier to refer to them during team meetings.
The distillation process from usability goals, to design
principles, to project
guidelines might resemble the following:
Usability Goal—Easy to use. Most people are interested in
completing their
tasks and do not enjoy struggling with the tools they need to
use. One of the
most important goals of user-centered design is to make things
easy to use.
Design Principle—Simplicity. Simple things require little effort
and can often
be accomplished without much thought. If interaction designs
are guided by
the principle of simplicity, they will be easier to use.
Project Guideline—A project guideline based on the principle of
simplicity
might require that all dialogue boxes should present only the
basic functions
that are most often used and that other, less used functions can
be accessed us-
ing an expandable dialogue with a link for “More Options.” ISB
N
0
-5
5

8
-8
6
0
1
1
-7
6.11. Usability Goals 229
Design Scenario
Circumference: Application of Design Principles
In this design scenario, we apply some of the design principles
discussed earlier to
the wireframes developed for the Circumference Web site in the
previous chapter. We
will not go into great depth at this point because we will first
need to explore the is-
sues of color, text, icons, components, and auditory feedback
before we can com-
plete the design phase. These topics are covered in depth in the

following chapters.
Let’s apply our design principle and see what issues still need
to be resolved.
Effectiveness/Usefulness
• Utility—The functional requirements that were discovered
include the following:
° The site should include the ability for the visitor to read
selected poems in
their original language and English versions. This should be
done in such a
way as to allow audible browsers access to as much content as
possible.
° Online ordering of individual journals and subscriptions
should be possible.
° There should be a facility for e-mail contact with the editors.
° There should be access to Circumference event videos.
All of these requirements, except the one that refers to the
audible
browsers, can be verified using the wireframes. The Event page
wireframes will
be similar to the Issues wireframes due to the similarity of the
flowcharts for
these areas.
• Safety—Safety issues involve the collection of personally

identifiable information
during the order process and the validation of credit card data.
This is relevant
for both the customer and the provider.
The wireframes for the subscription area should include an
indication of
security levels involved in the transaction. This can be in the
form of an icon iden-
tifying the entity used to verify credit card information.
Safety was also explored in the discussion of the order form
flowchart; see
that design scenario for more information.
• Flexibility—Using both print and screen-based CSS will allow
visitors to either
read the poems from the screen or print them. These features are
not discernible
from the wireframes but are recorded in the requirements
document.
Podcasts can give visitors the additional option of listening to
selected po-
ems in both the original language and in English. This issue
came up during the
evaluation process because the principle of flexibility initiated

this discussion.
Podcasting was not covered in the requirements document and
represents
another expansion of the project’s scope; refer back to the
discussion of feature
creep in the Mission Statement section of Chapter 4. Adhering
to the principle of
satisficing can help to keep the reigns on this type of situation.
IS
B
N
0
-5
5
8
-8
6
0
1
1
-7

Design Scenario (cont.)
• Stability—No cutting-edge technology will be used because
the primary user
profiles indicate that visitors will not be technologically
sophisticated and may
be using outdated versions of browsers and operating systems.
All pages will be reviewed using all major browsers on all
major operating
systems and on diverse resolutions and screen types, including
cathode ray
tubes (CRTs) and liquid crystal displays (LCDs).
Efficiency/Usability
• Simplicity—We interact with the principle of simplicity in the
overriding impor-
tance placed on the sample poems. The text of the poetry must
be presented in
a clean and readable manner without distracting graphic or
auditory elements.
° White Space –White space will be used to frame the poems
and clarify nav-
igation.

° Progressive Disclosure—Progressive disclosure will organize
and structure
the presentation of selected poems from various issues. It will
also make the
visitor survey more pleasant.
° Constraints—The constraints imposed on the design are
covered in the dis-
covery document.
• Memorability
° Consistency-Correctness—The site will use consistent
terminology that was
elicited from real users during interviews and card sorts.
° Generalizability—The colors of the various print issues will
also be used as
navigational aids.
° Conventions—Memorability will be enhanced by using
conventions related
to the location of screen elements.
° Familiarity—The site will use familiar labels, images, and
hyperlink appear-
ance. The memorability factor will also be enhanced through the
use of col-
ors that relate to the published journals.
• Predictability—Predictability will be enhanced with templates
for screen layout.

• Visibility—The principle of visibility will be applied to the
functional and content-
based elements of the site, including the presentation of
selected poems and the
journal ordering process.
° Overload—The visual components of the site will be kept to a
minimum,
and only functional and content-based elements will be used.
Colors will be
limited to those required for product recognition and navigation.
° Feedback—When an order is completed, a confirmation page
will be pre-
sented to the customer.
° Recognition/Recall—Sample poems will include the flag of
the poet’s coun-
try of origin and the name of the original language, so visitors
will be able to
select poems based on their recognition of the flags or language.
IS
B
N
0
-5
5
8

-8
6
0
1
1
-7
Resources on the Web 231
Design Scenario (cont.)
° Orientation—The global links will indicate the current page
by retaining the
active look as defined in the CSS.
We have explored some of the principles covered in this
chapter; the rest will be
applied to specific page elements discussed in each of the
following chapters. Each
chapter covers a different aspect of interface design, and the
appropriate principles
will be discussed in those contexts.
Interaction design is a complex and difficult process. It involves

physical and cogni-
tive abilities and limitations as well as technical intricacies and
complications.
Combining all of these elements may seem an impossible task at
times, and you will
often wonder how you will ever achieve a robust and elegant
solution that ad-
dresses the multiplicity of variables with which you must
contend.
As we have seen, many effective and powerful tools are at your
disposal.
Coming from several diverse disciplines, these can all be put to
good use during the
development process. Understanding how people will view your
design is essential
to its success, and an awareness of your target user’s mental
models will help you
gain this knowledge.
During the course of the project you will make hundreds of
decisions, both
large and small, that will affect the outcome of the project. You
will, therefore, need
to understand and apply the various design principles repeatedly
to every move
you make.
Adherence to these principles will provide you with a support
system that has
been around since humans began designing artifacts to improve
their existence.
Design principles will guide you through the design process and
help you to make
the decisions that you will face at every turn.

Summary
www.aw.com/heim
You will find information relating to user interface design
guidelines, principles and
links to information on the gestalt principles of perception.
Resources on the Web
IS
B
N
0
-5
5
8
-8
6
0
1
1
-7

Suggested Reading
Lidwell, W., Holden, K., & Butler, J. (2003). Universal
Principles of Design: 100 Ways
to Enhance Usability, Influence Perception, Increase Appeal,
Make Better Design
Decisions, and Teach Through Design: Rockport Publishers.
Norman, D. (1999). The Invisible Computer: Why Good
Products Can Fail, the
Personal Comptuer is So Complex, and Information Appliances
Are the
Solution
(Reprint ed.): MIT Press.
Norman, D. (2002). The Design of Everyday Things (Reprint
ed.): Basic Books.
Williams, R. (2003). The Non-Designer's Design Book (2 ed.):
Peachpit Press.
IS
B
N

0
-5
5
8
-8
6
0
1
1
-7
[IT302 | Human Computer Interaction]

1
Unit 5 Assignment
Outcomes addressed in this activity:
Unit Outcomes:
-computer
interaction
Course Outcome:
IT302-3: Apply design guidelines to human-computer
interaction methods.

Assignment Instructions and Requirements:
For this assignment and those in several subsequent units, you
will develop a new
interface design. Check the reading for a list of authorized
devices/interfaces; if you
wish to develop one that is not on the list, you need pre-
approval from your professor.
This week, write a paper in which you provide the following
information:
Part 1. Design Choice and Wireframe
In a paragraph, briefly explain the device/interface you have
chosen and the main
features you intend to include. Then provide a sufficiently-
detailed and labeled
wireframe, imported into your Word document. You might like
to use some of the
same processes that you employed in the unit 3 and 4
assignments to help you
develop this new plan.

Part 2. Report of Design Principles
Create a report that explains how design principles relate to
your emerging design
presented in part 1 of this assignment. (Consider this a defense
of your design
proposal.) Include comments regarding each of the following,
writing in full
sentences and providing a separate paragraph for each numbered
section:
2
1. Comprehensibility and Learnability
2. Effectiveness/Usefulness

Utility
3. Efficiency/Usability
4. Grouping
You may also include comments about Stimulus Intensity,

Proportion, Screen
Complexity, and Resolution, but the items listed above are
required. Write
everything in your own words, but if you use any resources,
make sure you
properly cite in the body of the paper and provide a reference
entry.
Part 3. Ethical Considerations
Examine the user interface that you are designing in terms of
ethical considerations
that might need to be addressed. These could include but are
not limited to issues
of intellectual property rights, accessibility for those with
disabilities, etc. Research
ethical considerations on the Web, and reference at least two
appropriate sources to
support your comments about how you might address these
issues in your design.
This section should be at least one full page in length.
Notes:

reading and other
sources.
- import the
wireframe design into the
same document.
-formatted cover page.
e 10- or 12-size Times New Roman
or Arial font and
meet other APA formatting requirements.
list of references at
the end in a separate References page. In-text citations and
references should
be properly formatted according to APA guidelines.

3
professor clearly sees
where each of the three parts begins.
Copying does not prove
an understanding of the material, and plagiarism will not be
tolerated.
Written work should be free of spelling, grammar, and APA
errors. Points deducted from
the grade for each writing, spelling, or grammar error are at
your instructor’s discretion.

Please be sure to download the file "Writing Center Resources"
from Doc Sharing to
assist you with meeting APA expectations.
Directions for Submitting Your Assignment:
IT302-Unit5-
LastName-FirstName, where your own name is typed (example:
IT302-Unit5-
Carson-Rachel). Submit the completed document as an
attachment to the Unit
5 Assignment Dropbox before the deadline.
Review the grading rubric below before beginning this activity.
Assignment 5 grading rubric = 50 points
Assignment Requirement Points
possible

Points
earned
1. Student identifies a design idea and main
features, and presents a sufficiently-detailed and
labeled wireframe for this design.
0-20
2. Student adequately defends the chosen design in
terms of Comprehensibility and Learnability,
Effectiveness/Usefulness, Efficiency/Usability,
and Grouping.
0-15
3. Student identifies ethical considerations that might
influence the design of his/her interaction user
interface, and supports comments with

appropriate resources.
0-15
4
Total (Sum of all points)
0-50
Points deducted for spelling, grammar, and/or APA errors.
Adjusted total points

C H A P T E R6193Design PrinciplesInteraction .docx

C H A P T E R6193Design PrinciplesInteraction .docx

More Related Content

Similar to C H A P T E R6193Design PrinciplesInteraction .docx (20)

More from humphrieskalyn (20)

Recently uploaded (20)

C H A P T E R6193Design PrinciplesInteraction .docx