Need someone with Information Technology background to do a paper.

The course is IT302 Human Computer Interaction

Need someone to write a 2 page paper APA format with in-text citation and references.

Import the wirframe design into document.

I can provide instruction and Chapter 6 of the book by email. PDF file maybe to large to attach.

[IT302 | Human Computer Interaction]

Unit 5 Assignment

Outcomes addressed in this activity:

Unit Outcomes:

 Describe design principles

 Analyze the ethical considerations related to human-computer interaction
 Apply design principles to improvement of a user interface

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:

[IT302 | Human Computer Interaction]

1. Comprehensibility and Learnability

2. Effectiveness/Usefulness

 Utility

 Safety

 Flexibility

 Stability

3. Efficiency/Usability

 Simplicity

 Memorability

 Predictability

 Visibility

4. Grouping

 Gestalt Principles of Perception

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:

 Your paper should show an understanding of the textbook reading and other
sources.

 Submit your work as a Word document – import the wireframe design into the
same document.

 Include a properly-formatted cover page.

 The paper’s body must use 10- or 12-size Times New Roman or Arial font and
meet other APA formatting requirements.

 Use sources that are appropriate for university work.

 Cite your sources within the body of the paper and provide a list of references at
the end in a separate References page. In-text citations and references should
be properly formatted according to APA guidelines.

[IT302 | Human Computer Interaction]

 Use subheadings for each part of the paper so that your professor clearly sees
where each of the three parts begins.

 Ensure that your work is not copied from any sources. Copying does not prove
an understanding of the material, and plagiarism will not be tolerated.

 An Abstract page and Table of Contents are not required.

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:

 Use the following convention to name 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

[IT302 | Human Computer Interaction]

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 R

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

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

6.1. Principles of Interaction Design 195

predictability and memorability. If something has a predictable behavior, such as

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 Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

196 Chapter 6 Design Principles

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

198 Chapter 6 Design Principles

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 progra

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 We

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

200 Chapter 6 Design Principles

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

202 Chapter 6 Design Principles

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

204 Chapter 6 Design Principles

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

6.5. Efficiency/Usability 205

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

206 Chapter 6 Design Principles

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

6.5. Efficiency/Usability 207

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

208 Chapter 6 Design Principles

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

6.5. Efficiency/Usability 209

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

210 Chapter 6 Design Principles

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

6.6. Grouping 2

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

212 Chapter 6 Design Principles

• 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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

6.6 Grouping 213

Figure 6.15 Adobe PhotoShop® Preferences dialogue.
Adobe product screen shot reprinted with permission from Adobe Systems Incorporated.

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

214 Chapter 6 Design Principles

Figure 6.17 Property pane from Adobe Dreamweaver®.
Adobe product screen shot reprinted with permission from Adobe Systems Incorporated.

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

6.6. Grouping 215

Figure 6.19 Common fate: Adobe Dreamweaver® properties pane.
Adobe product screen shot reprinted with permission from Adobe Systems Incorporated.

Figure 6.20 Closure
principle.

Figure 6.21 Adobe Dreamweaver® Results panel.
Adobe product screen shot reprinted with permission from Adobe Systems Incorporated.

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

216 Chapter 6 Design Principles

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

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.

Figure 6.25 (a) Translation. (b) Reflection. (c) Rotation.

a c

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.

218 Chapter 6 Design Principles

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

220 Chapter 6 Design Principles

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

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

b+
a

a
a

a+ 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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

222 Chapter 6 Design Principles

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
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright © 2008 by Pearson Education, Inc.

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

n = 1

2n n

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

224 Chapter 6 Design Principles

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):

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.

226 Chapter 6 Design Principles

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

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

228 Chapter 6 Design Principles

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

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.

230 Chapter 6 Design Principles

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.

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

232 Chapter 6 Design Principles

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.

Turn in your highest-quality paper
Get a qualified writer to help you with

“ Need someone with Information Technology background to do a paper. ”

Get high-quality paper

NEW! AI matching with writer

Still stressed from student homework?

Get quality assistance from academic writers!

Order now