Module 1-Part 2

THE PROCESS OF INTERACTION DESIGN

 Overview
What is involved in Interaction Design?
• Understanding the problem space
• Importance of involving users
• Degrees of user involvement
• What is a user-centered approach?
• Four basic activities of interaction design
• A simple lifecycle model for interaction design
Some practical issues
• Who are the users?
• What are the users’ needs?
• How to generate alternative designs
• How to choose among alternative designs
• How to integrate interaction design activities within other
lifecycle models
 What is involved in Interaction Design?
• It is a process:
▪ Focused on discovering requirements, designing to
fulfil requirements, producing prototypes and
evaluating them
▪ Focused on users and their goals
▪ Involves trade-offs to balance conflicting
requirements
• Generating alternatives and choosing between them is
key
• Four approaches: user-centered design, activity-
centered design, systems design, and genius design
The double diamond of design
 Understanding the problem space
Explore
• What is the current user experience?
• Why is a change needed?
• How will this change improve the situation?
Articulating the problem space
• Team effort
• Explore different perspectives
• Avoid incorrect assumptions and
unsupported claims
 Importance of involving users
Expectation management
• Realistic expectations
• No surprises, no disappointments
• Timely training
• Communication, but no hype
Ownership
• Make the users active stakeholders
• More likely to forgive or accept problems
• Can make a big difference in acceptance
and success of product
 Degrees of user involvement
• Member of the design team
▪ Full time: constant input, but lose touch with users
▪ Part time: patchy input, and very stressful
▪ Short term: inconsistent across project life
▪ Long term: consistent, but lose touch with users
• Face-to-face group or individual activities
• Online contributions from thousands of users
▪ Online Feedback Exchange (OFE) systems
▪ Crowdsourcing design ideas
▪ Citizen science
• User involvement after product release
What is a User-Centered approach?
User-centered approach is based on:
• Early focus on users and tasks: directly studying
cognitive, behavioral, anthropomorphic, and
attitudinal characteristics
• Empirical measurement: users’ reactions and
performance to scenarios, manuals, simulations,
and prototypes are observed, recorded, and
analyzed
• Iterative design: when problems are found in user
testing, fix them and carry out more tests
Four basic activities of Interaction
Design
1. Discovering requirements
2. Designing alternatives
3. Prototyping alternative designs
4. Evaluating product and its user
experience throughout
A simple interaction design lifecycle
model
Exemplifies a user-centered design approach
Another lifecycle model:
Google Design Sprints
Another lifecycle model:
Research in the Wild
 Some practical issues
• Who are the users?
• What are the users’ needs?
• How to generate alternative designs?
• How to choose among alternatives?
• How to integrate interaction design
activities with other lifecycle models?
 Who are the users/stakeholders?
Not obvious
• 382 distinct types of users for smartphone apps (Sha
Zhao et al, 2016)
• Many products are intended for use by large sections
of the population, so user is “everybody”
• More targeted products are associated with specific
roles
Stakeholders
• Larger than the group of direct users
• Identifying stakeholders helps identify groups to
include in interaction design activities
 What are the users’ needs?
• Users rarely know what is possible
• Instead:
▪ Explore the problem space
▪ Investigate who are the users
▪ Investigate user activities to see what can be
improved
▪ Try out ideas with potential users
• Focus on peoples’ goals, usability, and user experience
goals, rather than expect stakeholders to articulate
requirements
 How to generate alternatives
• Humans tend to stick with something that works
• Considering alternatives helps identify better designs
• Where do alternative designs come from?
▪ ‘Flair and creativity’: research and synthesis
▪ Cross-fertilization of ideas from different
perspectives
▪ Users can generate different designs
▪ Product evolution based on changing use
▪ Seek inspiration: similar products and domain, or
different products and domain
• Balancing constraints and trade-offs
 How to choose among alternatives
• Interaction design focuses on externally-visible and measurable
behavior
• Technical feasibility
• Evaluation with users or peers
▪ Prototypes not static documentation because behavior is key
• A/B Testing ((A) version against a variant (B) version to measure which one is most
successful based on your key metrics.)
▪ Online method to inform choice between alternatives
▪ Nontrivial to set appropriate metrics and choose user group
sets
• Quality thresholds
▪ Different stakeholder groups have different quality thresholds
▪ Usability and user experience goals lead to relevant criteria
How to integrate interaction design
activities within other models
• Integrating interaction design activities in lifecycle
models from other disciplines requires careful planning
• Software development lifecycle models are prominent
• Integrating with agile software development is
promising because:
▪ It incorporates tight iterations
▪ It champions early and regular feedback
▪ It handles emergent requirements
▪ It aims to strike a balance between flexibility and
structure
Principles Of HCI &
Usability Principles
 Introduction

• Human-computer interaction (HCI) is the study of designing,

implementing, and evaluating the interactive interfacesused by
• humans and computers.

• People who specializein HCI think about how to

design and implement computer systems that
satisfy human users.

• HCI is the study of the interaction between

humans and computers, particularly as it pertains to
the design of technology
• HCI overlaps user-centered design, UI, and UX to
create intuitive products and technologies.

• Most research in HCI field aims to improve human–

computer interaction by improving how an interface
is used and understood by humans.

• HCI helps to make interfaces that increase

productivity, enhance user experience, and reduce
risks in safety-critical systems.

• Poorly designed machines lead to many unexpected

problems, sometimes just user frustration, but
sometimes, chaotic disasters.
• Making systems easy to use and learn
• Usability applies to all aspects of the system.
• Some principles to support usability are:
• Compatibility
• Easy of Learning
• Memorability
• Predictability
• Simplicity
• Flexibility
• Responsiveness
• Protection
• Invisible Technology
• Control
• WYSIWYG
Heuristics and usability principles-
Nielsen's Heuristics
 Jakob’s Heuristic

Visibility of
1 System Status
Definition The design should 1
always keep users informed about
what is going on, through
appropriate feedback within a
reasonable amount of time.

Knowing what the • Tip: Communicate clearly 1 “You Are Here” maps
current system status to users what the system’s Interactive mall maps have to show
is can help users learn state is — no action with people where they currently are, to help
the outcome of their consequences to users them understand where to go next.
prior interactions and should be taken without
2 Checkout flow
determine next steps. informing them. Multistep processes show users which
steps they’ve completed, they’re currently
Predictible • Tip: Present feedback to the
user as quickly as possible. working on, and what comes next.
interactions create
trust in the product 3 Phone tap
• Tip: Build trust through
as well as the brand. Touchscreen UIs need to reassure users
open and continuous
that their taps have an effect — o en
communication.
through visual change or haptic feedback.

Info Shipping Payment Review

2 3

$43.23

Pay now

www.nngroup.com/articles/visibility-system-status/
 Jakob’s Heuristic

Match between System

2 and the Real World
Definition The design should speak the
users' language. Use words, phrases, and
concepts familiar to the user, rather than
internal jargon. Follow real-world
conventions, making information appear
in a natural and logical order. 1

The language you • Tip: Ensure users can 1 Stovetop controls

should use depends understand meaning When stovetop controls match the layout
very much on your without having to go look of heating elements, users can quickly
specific users. up a word’s definition. understand which control maps to each
heating element.
• Tip: Never assume your
understanding of words or 2 “Car” vs. “automobile”
concepts will match those If users think about this object as a
of your users. “car,” use that as the label instead.

33 Shopping cart icon

• Tip: User research will help
you uncover your users' A shopping cart icon is easily recognizable
because that feature serves the same
familiar terminology, as
purpose as its real-life counterpart.
well as their mental models
around important concepts.

3
2

Shopping Cart

Car

Automobile
2

CheckOut

www.nngroup.com/articles/match-system-real-world/
 Jakob’s Heuristic

User Control
3 and Freedom
Definition Users often perform
actions by mistake. They need a
clearly marked "emergency exit"
to leave the unwanted action
without having to go through an
1
extended process.

When it's easy for • Tip: Support Undo 1 Exit sign

people to back out and Redo. Digital spaces need quick “emergency”
of a process or undo exits, just like physical spaces do.
an action, it fosters • Tip: Show a clear way to
exit the current interaction, 2 Undo and redo
a sense of freedom
like a "Cancel" button. These functions give users freedom
and confidence.
because they don’t have worry about their
• Tip: Make sure the exit actions — everything is easily reversible.
Exits allow users to is clearly labeled and
remain in control of discoverable. 3 Cancel button
the system and Users shouldn’t have to commit to a
avoid getting stuck process once it’s started — they should
and feeling be able to easily cancel and abandon.
frustrated.

Untitled document

2 Undo Redo 3

Delete Photo

Cancel

www.nngroup.com/articles/user-control-and-freedom
 Jakob’s Heuristic

Consistency
4 and Standards
Definition Users should not have
to wonder whether different words, CHE
situations, or actions mean the
same thing. Follow platform and CK

industry conventions. IN

Jakob's Law states • Tip: Improve learnability 1 Check-in counter

that people spend by maintaining both types Check-in counters are usually located at
most of their time on of consistency: internal the front of hotels. This consistency meets
products other than and external. customers’ expectations.
yours. Failing to
• Tip: Maintain consistency 2 Design system
maintain consistency Using elements from the same design
within a single product or
may increase the system across the product lines lowers
a family of products
users' cognitive load the learning curve of users.
(internal consistency).
by forcing them to
learn something new. 3 Noti cations
• Tip: Follow established
A standardized notification design
industry conventions
provides a similar but distinguishable
(external consistency).
look and feel for different app pop-ups.

Colors

2 #F0557B #4F2330 #FFFFFF

3 12:3
#D51D50 #35151D 4
Typography Aa Aa Aa Aa
Light Reg Me d Bold

Components Button Button

Button Button

www.nngroup.com/articles/consistency-and-standards/
 Jakob’s Heuristic

5 Error Prevention
Definition Good error messages
are important, but the best
designs carefully prevent problems
from occuring in the first place.
eliminate error-prone conditions,
Either
1
or check for them and present
users with a confirmation option
before they commit to the action.

There are two types • Tip: Prioritize your effort: 1 Guard rails
of errors: slips and Prevent high-cost errors Guard rails on curvy mountain roads
mistakes. first, then little frustrations. prevent drivers from falling off of cliffs.

Slips are unconscious • Tip: Avoid slips by providing 2 Airline con rmation
errors caused by helpful constraints and The confirmation page before checking
inattention. good defaults. out on airline websites gives users
another chance to review the flight details.
Mistakes are conscious • Tip: Prevent mistakes by
errors based on a removing memory burdens, 3 Date selection on calendar
mismatch between the supporting undo, and Offer good defaults and set boundaries
user’s mental model warning your users. when people book services by dates.
and the design. Grey out unavailable options.

2 Review Flights and Pay 3 Nov 17 – Nov 26

17 18 19 20 21 22

23 24 25 26

Confirm Booking

www.nngroup.com/articles/slips/
 Jakob’s Heuristic

Recognition Rather
6 Than Recall
Definition Minimize the user's memory
load by making elements, actions, and
options visible. The user should not have
to remember information from one part of
the interface to another. Information
required to use the design should be
visible or easily retrievable when needed. 1

Humans have limited • Tip: Let people recognize 1 Lisbon

short-term memories. information in the People are more likely to correctly answer
Interfaces that interface, rather than the question “Is Lisbon the capital of
promote recognition having to remember Portugal?” rather than “What’s the capital
reduce the amount of (“recall”) it. of Portugal?”
cognitive effort 2 Comparison table
required from users. • Tip: Offer help in-context,
Comparison tables list key differences so
instead of giving users a
that users don’t need to remember them
long tutorial to memorize.
to make comparisons.
• Tip: Reduce the 3 Search
information that users
Search queries are presented together
have to remember. with the results as a reference.

iPad Pro 12.9-in. (4th gen) iPad Air (3rd iPad (7th gen)
gen)
The Lion King

2 3
Search results

www.nngroup.com/articles/recognition-and-recall/
 Jakob’s Heuristic

Flexibility and
7 Efficiency of Use
Definition Shortcuts — hidden
from novice users — may speed up
the interaction for the expert user
such that the design can cater to
both inexperienced and
experienced users. Allow users to
1
tailor frequent actions.

Flexible processes • Tip: Provide accelerators 1 Shortcuts

can be carried out in like keyboard shortcuts and Regular routes are listed on maps, but
different ways, so touch gestures. locals with more knowledge of the area
that people can pick can take shortcuts.
whichever method • Tip: Provide personalization
by tailoring content and 2 Keyboard shortcut
works for them. Keyboard shortcuts for complex products
functionality for individual
users. can help expert users finish their tasks
more e ciently.
• Tip: Allow for customization,
3 Tap to like
so users can make
Social apps allow two ways to like posts.
selections about how they
Experienced users can tap to like because
want the product to work.
it speeds up their browsing.

2
C V

www.nngroup.com/articles/flexibility-efficiency-heuristic
 Jakob’s Heuristic

Aesthetic and
8 Minimalist Design
Definition Interfaces should not
contain information which is
irrelevant or rarely needed. Every
extra unit of information in an
1
interface competes with the
relevant units of information and
diminishes their relative visibility.

This doesn't mean • Tip: Keep the content and 1 Ornate vs. simple teapot
you have to use a flat visual design of UI focus on Excessive decorative elements can
design — it's about the essentials. interfere with usability.
making sure you're
keeping the content • Tip: Don't let unnecessary 2 Communicate, don’t decorate
elements distract users Over-decoration can cause distraction
and visual design
from the information they and make it harder for people to get the
focused on the
really need. core information they need.
essentials. Ensure
that the visual • Tip: Prioritize the content 3 Messy vs organized UI
elements of the UI and features to support Messy UI increases the interaction cost
support the user's primary goals. for users to find their desired content;
primary goals. Organized UI lowers the cost.

2 3 3

COMMUNICATE,
DOn't d e c o a t e

One of our
favorite slogans

www.nngroup.com/articles/aesthetic-and-minimalist-design/
 Jakob’s Heuristic

Help Users Recognize,

9 Diagnose, and Recover
from Errors
Definition Error messages should
WRONG
be expressed in plain language WAY
(no error codes), precisely indicate
the problem, and constructively
suggest a solution.
1

Error messages • Tip: Use traditional error 1 Wrong way sign

should be presented message visuals, like Wrong-way signs on the road remind
with visual treatments bold, red text. drivers that they are heading in the
that will help users wrong direction and ask them to stop.
notice and recognize • Tip: Tell users what went
wrong in language they 2 Internet connection error
them. Good internet connection error pages
will understand — avoid
technical jargon. show what happened and constructively
instruct users on how to fix the problem.
• Tip: Offer users a
3 No search results
solution, like a shortcut
Provide useful help when people
that can solve the error
encounter search-result pages returning
immediately.
zero results, such as popular topics.

2 3
No results for
“Teddy bear”
There is no Internet connection
You might try
Try:

www.nngroup.com/articles/error-message-guidelines/
 Jakob’s Heuristic

Help and
10 Documentation
Definition It’s best if the design i
doesn’t need any additional
explanation. However, it may be
necessary to provide documentation
to help users understand how to
complete their tasks.
1

Help and • Tip: Ensure that the 1 Airport information center

documentation help documentation is Information kiosks at airports are easily
content should be easy to search. recognizable and solve customers'
easy to search and problems in context and immediately.
focused on the user's • Tip: Whenever possible,
present the 2 Frequently asked questions
task. Keep it concise, Good frequently-asked-question pages
documentation in-context
and list concrete anticipate and provide the helpful
right at the moment that
steps that need to be information that users might need.
the user requires it.
carried out.
3 Information icon
• Tip: List concrete steps
Information icons reveal tooltips to explain
to be carried out.
jargon when users touch or hover over
them, which provides contextual help.

2 3
Frequently Asked Questions

www.nngroup.com/articles/help-and-documentation/
 Visibility of
System Status 1 Nielsen Norman Group
Designs should keep users informed
about what is going on, through
Jakob’s Ten
Usability Heuristics
appropriate, timely feedback.
Interactive mall maps have
1
to show people where they
currently are, to help them
understand where to go next.

2 Match between
System and 3 UserFreedom
Control
and 4 Consistency
Standards
and
the Real World
Users oŁen perform actions by Users should not have to wonder
The design should speak the users' mistake. They need a clearly marked whether different words, situations,
language. Use words, phrases, and "emergency exit" to leave the or actions mean the same thing.
concepts familiar to the user, rather unwanted action. Follow platform conventions.
than internal jargon. EXIT
Just like physical spaces, Check-in counters are usually
CHECK IN

Users can quickly understand digital spaces need quick located at the front of hotels,
which stovetop control maps “emergency” exits too. which meets expectations.
to each heating element.

5 Error
Prevention 6 Recognition
Rather Than Recall 7 Flexibility
Efficiency of Use
and

Good error messages are Minimize the user's memory load Shortcuts — hidden from novice users
important, but the best designs by making elements, actions, and — may speed up the interaction for
carefully prevent problems from options visible. Avoid making users the expert user.
occurring in the first place. remember information. Regular routes are listed on
Guard rails on curvy mountain People are likely to correctly maps, but locals with more
roads prevent drivers from answer “Is Lisbon the capital knowledge of the area can
falling off cliffs. of Portugal?”. take shortcuts.

8 Aesthetic
Minimalist
and
9 Recognize,
Diagnose, and 10 Help
Documentation
and

Design Recover from Errors

It’s best if the design doesn’t need any
Interfaces should not contain Error messages should be expressed additional explanation. However, it
information which is irrelevant. Every in plain language (no error codes), may be necessary to provide
extra unit of information in an precisely indicate the problem, and documentation to help users complete
interface competes with the relevant constructively suggest a solution. their tasks.
units of information. Wrong-way signs on the Information kiosks at airports
are easily recognizable and
WRONG i

A minimalist three-legged road remind drivers that

WAY

stool is still a place to they are heading in the solve customers' problems in
sit. wrong direction. context and immediately.
 Some key points
Four basic activities in interaction design process
▪ Discovering requirements
▪ Designing alternatives
▪ Prototyping
▪ Evaluating
User-centered design rests on three principles
▪ Early focus on users and tasks
▪ Empirical measurement using quantifiable
and measurable usability criteria
▪ Iterative design