Chapter 5:

Design

The Resonant Interface

HCI Foundations for Interaction Design
First Edition

by Steven Heim

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

 Chapter 5 Design

• Technology Myopia
• Conceptual Design
• Physical Design
• Evaluation
• Physical Design Cont.
• Interface Design Standards

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-2

 Technology Myopia

• Interaction designs must be

sensitive to:
– Human-human communication
– Implicit Knowledge
– Non-technical aspects of work

Integrate technology and human

activities carefully
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-3
 Conceptual Design

• Conceptual design involves

– Structuring the information space
– Creating of alternative solutions
– Determining which design concept
to pursue

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-4

 Conceptual Design
• Methodologies involved in
conceptual design:
– Brainstorming
– Card sort
– Semantic networks
– Personas
– Scenarios
– Flowcharts
– Message Sequence Charts
– Cognitive walkthroughs
– Use cases
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-5
 Conceptual Design - Brainstorming

• Team activity
– Stream-of-consciousness
– Semantic networks
– Storyboarding
• Brainstorming sessions generate
a lot of material that must be
filtered and organized

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-6

 Conceptual Design – Card Sort

Card Sorting can be used to discover user-

centered groupings

•Card sorting can be used to organize

the information collected in the
discovery phase

•Used to define groupings for menus,

controls and Web page content

•Used to generate labels for menus,

buttons and navigation links

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-7

 Conceptual Design – Card Sort
Result of a card sort

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-8

 Conceptual Design – Card Sort

• Advantages of card sorting

sessions:
– They are quick and easy to perform.
– They can be done before any
preliminary designs have been made.
– They will let you know how people
organize information.
– They will expose underlying
structures.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-9

 Conceptual Design – Card Sort

• Disadvantages of card sorting

sessions:
– They only involve the elements
that you have written on the
cards.
– They suggest solutions that imply
structures.
– They become difficult to navigate
with more categories.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-10

 Conceptual Design – Semantic Network
Is a web of concepts that are linked through association.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-11

 Conceptual Design – Semantic Network

• Advantages of semantic networks:

– They allow an easy way to explore the
problem space.
– They provide a way to create clusters
of related elements.
– They provide a graphical view of the
problem space.
– They resonate with the ways in which
people process information.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-12

 Conceptual Design – Semantic Network

• Disadvantages of semantic
networks:
– They require knowledge of the
problem space.
– They can lead beyond the problem
space.
– There is no formal semantics for
defining symbol meaning.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-13

Conceptual Design – Personas
• Personas are archetypes of actual
users, defined by the user’s goals and
attributes.

“Personas are derived from patterns

observed during interviews with and
observations of users and potential
user (and sometimes customers) of a
product”
(Cooper & Reimann, 2003, 67)

 Discuss example on pp 160 of the text book

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-14

 Conceptual Design – Personas

• A persona is created by identifying

the primary stakeholder and creating
an identity based on the stakeholder
profiles and other collection
activities such as interviews and
surveys.
• A persona is a detailed description
complete with as many personally
identifying attributes as necessary
to make it come to life.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-15
Conceptual Design – Personas

Personas should be a strict reflection

of the information derived from the
collection activities.

If you cannot point to a direct one-to-

one relation with an observed user
behavior, then that particular persona
characteristic is either unnecessary or,
more important, erroneous and will lead
to incorrect design decisions.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-16

 Conceptual Design – Personas

•Advantages of personas:
– They are quick and easy to create.
– They provide a consistent model for all team
members.
– They are easy to use with other design methods.
– They make the user real in the mind of the
designer.

•Disadvantages of personas:
– They can be difficult to create if the target
audience is international.
– Having too many personas will make the work
difficult.
– There is a risk of incorporating unsupported
designer assumptions.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-17

 Conceptual Design – Scenarios, Flowcharts, and
Cognitive Walkthroughs

•Scenarios
– A description of a typical task
– It describes
• The basic goal
• The conditions that exist at the beginning of the
task
• The activities in which the persona will engage
• The outcomes of those activities

Scenarios afford a rich picture of the user’s

tasks
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-18
 Conceptual Design – Scenarios, Flowcharts, and
Cognitive Walkthroughs
•Flowcharts can be:
– Simple network diagrams that identify
the pages of a Web site and the
navigational links between them
– Sophisticated diagrams that capture
conditional junctures and
computational processes

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-19

 Conceptual Design – Scenarios, Flowcharts, and
Cognitive Walkthroughs

•Cognitive walkthrough - the

evaluator follows the various
scenarios using the flowcharts or
the low-fidelity prototypes

•The evaluator takes the part of

the primary stakeholder and tries
to accomplish that stakeholder’s
various tasks
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-20
 Physical Design
• The physical design involves:
– What it will look like
– What components it will require
– How the screens will be laid out

• We use the following tools during this

phase:
– Low-fidelity prototypes
– Evaluations
– Wireframes
– Functional prototypes

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-21

 Physical Design - Low-fidelity prototypes

• Nielsen distinguishes between

two types of prototypes
– Horizontal
– Vertical

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-22

 Physical Design - Low-fidelity prototypes
• The three main criteria for low-
fidelity prototypes:
– Easy and inexpensive to make.
– Flexible enough to be constantly changed and
rearranged.
– Complete enough to yield useful feedback about
specific design questions.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-23

 Physical Design - Low-fidelity prototypes

People are more comfortable criticizing paper

prototypes

• You will have to make some decisions before you

begin:
– What feedback do you need at this point in the design
process?
– How much of the design should you prototype?
– Should you cover all of the areas but without great detail
(breadth vs. depth)?
– Should you cover one area in great detail?

• These questions will help you to define the scope of

the prototype and focus on what you want to
accomplish

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-24

 Physical Design - Low-fidelity prototypes
• Advantages of paper prototypes:
– They can be used early and often.
– They are inexpensive and easy to create.
– They make design ideas visual.
– No special knowledge is required; all team
members can create them.

• Disadvantage of paper prototypes:

– They are not interactive.
– They cannot be used to calculate response
timings.
– They do not deal with interface issues such
as color or font size.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-25
 Evaluation

Begin evaluations early in the design process.

• Evaluation is an integral part of the

development process and can take the form of
an informal walkthrough or a more structured
heuristic evaluation.

• Formal usability testing can begin once a

prototype has been developed.

• Discuss some of the benefits of starting the

evaluation process early in the design phase
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-26
 Evaluation – Heuristic Evaluation
• Heuristic evaluations are performed by
usability experts using a predetermined
set of criteria designed to measure the
usability of a proposed design.

• The evaluator follows a scenario through

the design and tests each step against
the heuristic criteria.

• The evaluator makes recommendations to

the design team either through a written
document or during a team meeting.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-27

 Evaluation – Nielsen’s Heuristics
• In collaboration with Rolf Molich,
Jakob Nielsen developed a set of 10
heuristics for interface design.
 See Lec2HCIMI.doc page 7
• The revised set based on an analysis
of 249 usability problems.

http://www.useit.com/papers/heuristic/heur
istic_list.html

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-28

 Physical Design Cont. - Wireframes
• Wireframes define:
– Basic page layout
– Screen components

• Wireframes are developed from

flowcharts and paper prototypes

• They are basically more evolved paper

prototypes that include detailed
information about the interface
elements
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-29
 Physical Design Cont. - Wireframes
Wireframes help to create template layouts that can be used to
impose a consistent structure throughout the interface

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-30

 Physical Design Cont. – Wireframes

• Web Formats
– Web sites from different domains
use layouts particular to that
domain

Use page layouts that are common to

the domain

Use flexible design for Web pages

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-31
 Evaluation – Functional Prototypes
• Functional prototypes are interactive
prototypes that represent various
degrees of functionality
– They can either be horizontal or vertical

• Functioning prototypes can be created

using RAD environments, such as:
– Microsoft
– Visual Studio
– Adobe
• Flash
• Dreamweaver
• Director

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-32

 Interface Design Standards

• These tools promote standards-based

designs that have a consistent look
and feel
– Graphical libraries
– User interface toolkits
– Visual interface builders
– Web development tools

• Working in a standardized
environment increases efficiency and
promotes learning (Cooper & Reimann, 2003)
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-33
Interface Design Standards

• Shneiderman and Plaisant (2005, 185) identified

the following benefits from the use of high-
level software tools

• User Interface Independence

– They separate interface design from internals.
– They enable multiple user interface strategies.
– They enable multiple-platform support.
– The establish the role of the user interface
architect.
– They enforce standards.

• Methodology and Notation

– They facilitate the development of design procedures.
– They help in finding ways to talk about design.
– They create project management.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-34

Interface Design Standards
• Rapid Prototyping
– The make it possible to try out ideas very
early.
– They make it possible to test, revise, test,
revise, . . . .
– They engage end users—managers and customers.

• Software Support
– They increase productivity.
– They offer constraint and consistency checks.
– They facilitate team approaches.
– They ease maintenance.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-35