UX Intensive Copenhagen | Day 4 | Interaction Design

Day 4
MAY 8, 2015
Interaction Design

ADAPTIVE PATH | UXI
Social Media
→ Twitter
• @uxintensive
• #UXICopenhagen
• @traceyvarnell
→ Email
• apevents@adaptivepath.com
2
UX INTENSIVE

Check out the UXI Alumni
LinkedIn Group
Check your email for an invite to join the group

ADAPTIVE PATH | UXI 4
DAY 1
DESIGN
STRATEGY
DS
DAY 2
USER
RESEARCH
DR
DAY 3
SERVICE
DESIGN
SD IxD
DAY 4
INTERACTION 
DESIGN
The tools you
need to put your
designs into
business — and
vice versa
How to unearth
deep, practical
insights about the
people you want
to reach most
Tools of modeling
and analysis that
shape smart and
systemic solutions
How to design for
better interactions
and become a
better interaction
designer

DAY 1
DESIGN
STRATEGY
DS
DAY 2
USER
RESEARCH
DR
DAY 3
SERVICE
DESIGN
SD
DAY 4
INTERACTION
DESIGN
IxD
Abstract
Real
Think Make

6ADAPTIVE PATH | UXI
INTERACTION DESIGN
DISCOVER DEFINE DESIGN DELIVER

Service Design
INTERACTION DESIGN
Interaction Design
Experience between person
and single touchpoint, usually a
digital product
Orchestrated experience
among all parts of the service,
from people to objects to
places to interfaces

Designing the Moments
INTERACTION DESIGN
PATIENT
ACTIVITIES
INFORMATION
NEEDS
Critical Moment
Patient sees Care
Provider
activities
i think i need helpstages discover what is wrong with me make me better maintain my new normal
1 2 3 4 5 7 8 9 10 11 12 13 14
Critical Moment
Patient needs JMH
Critical Moment
Severity of condition
can determine the
tone of the journey
Redirect
Get patient on correct
path: ER/UC/PCP
May have been
directed from
routine PCP visit
Critical Moment
Patient gets diagnosis
Critical Moment
Patient gets or starts
treatment
Critical Moment
Get patient on the
road to normal
Critical Moment
Patient sees Care
Provider
Redirect
Referred to Specialist,
patient is looking to
connect with right
Care Provider for them
6
+ ANXIETY
+ RELIEF
STORY ARC
The relative change in
anxiety and relief and the
range in patient stories
key moment
something feels
wrong
Unsure what is
wrong. Scare of
the unknown.
my needs
Validate that I
need help
key moment
decide to
get help
Confident I will get
help and hopeful that
I can get answers.
my needs
Be ready for me
key moment
monitor
treatment
Confident in my care.
Clear expectations of
what is progress.
Access to my Doctor
just in case.
my needs
Access to help
when needed.
Reassurance that
there is progress.
key moment
check-ups
Consistent access to
my Doctor. Confident
in my care and
prepared if anything
comes up.
my needs
Show me progress
key moment
see a specialist
Confident in my care
and trust in Doctor.
Empathy for my
situation.
my needs
Be my rock and hub
of information
key moment
choose
treatment option
Clear expectations of
how my life will
change with helpful
resources. Empathy
for my situation.
my needs
Understand how
this will impact me
long-term
key moment
talk to doctors
to see what is
going on
No empathy or
comfort. Feel rushed
and unimportant to
my Doctor.
my needs
Listen to me so
I can trust you
key moment
change
treatment
No set expectations of
progress. No confi-
dence in my care or
doctor.
my needs
Provide me options
key moment
get tests and
review results
No clear answer, so no
confidence in my care.
No expectations of
when we’ll know.
my needs
Need expert of my
disease to help me
check-ups
• Continue routine checks up and tests
• Repeat new treatments/monitoring if
needed
something feels wrong
• Having pain or onset of symptoms
• Notice a sudden change in at-home
monitoring
i think i need help
• Call Primary Doctor or a General Line
• Ask family/friends with similar symptoms
• Self diagnose
• Google triage
1
2
1
2
3
4
3
4
5 7
7
10
11
12
11
12
1413
1413
8
8
9
10
9
6
5
6
decide to get help
• Go to the ER or Urgent Care Center
• Schedule a visit with Primary Doctor
talk to doctors to see what
is going on
• Explain my symptoms
• Answer questions
• Visit PCP or Specialist
get tests and review results
• Nurse or techs administers tests
• Wait
• Get referral for Specialists
see specialists
• Doctor may give initial diagnosis
• Get more referrals
• Get additional tests
• See multiple Specialists
get diagnosis
• Ask additional questions
• Hear results of the tests and what
they mean
• Learn about diagnosis and what that means
• Do my own research to validate diagnosis or
learn more
choose treatment option
• Hear treatment option(s)
• Do my own research to validate
treatment decision
get treatment
• Get initial treatment administered by
Doctor or Nurse
• Receive follow-up instructions to monitor
get prescriptions
• Start an ongoing treatment, like medication
or at home care
• Receive instructions on how to continue
ongoing treatment at home
maintain overall health
• Fix other things that are impacted by my
chronic treatment
• Exercise and diet
• Get emotional and social support
monitor treatment
• Monitor and log progress at home or
through visits
• Monitor side effects and effectiveness
change treatment
• By phone or doctor's visits
• Change or add doctors if needed
• Repeat
something feels wrong
• Symptom checker
• Google triage
• Primary care phone number for triage
i think i need help
• Where do I go for what
• Triage Phone Number
• Insurance benefits - cost/benefit of where
to go
decide to get help
• Facility address
• Time of appointment
• Phone numbers
talk to doctors to see what
is going on
• Prepared questions
• What I should tell my doctor
get tests and review results
• Tests and what they are for
• Results
• Referral for Specialist
see specialists
• Coordinated appointment with Specialist
• Managed list of who I've seen for what
get diagnosis
• Why this is happening to me
• What the diagnosis is
• Expectations of how things will change
choose treatment option
• Why this treatment
• Side effects
• What treatment will entail
get treatment
• Who to call for what
• Discharge papers and after-care instructions
• Prescription
• Doctor's note
get prescriptions
• Side effects
• Prescription information
• After-care information
maintain overall health
• Other ways my life will be impacted
• Resources to manage social and
emotional changes
check-ups
• Update on my progress
• Lab work
monitor treatment
• What to look out for
• Instructions
• Doctor’s phone number for emergency
change treatment
• Doctor’s phone number for emergency
• When to call
GET TREATMENT
"I appreciated that
he didn’t sugar
coat it, but was
still hopeful."
GET DIAGNOSIS
"You never forget this
moment, no matter how
gently your Doctor
breaks the news."
MONITOR TREATMENT
"Things seem to return to
normal and then there is
this curve ball."
CHECK-UPS
"I still don’t feel like I’ve
got the answers I need to
deal with this."

Designing the Moments
INTERACTION DESIGN
JOURNEY
TOUCHPOINT
(macro interaction)
INTERACTIONS
(aka features/capabilities)
MICRO INTERACTIONS

DESIGNING FOR
INTERACTION
SKETCHING
INTERACTIONS
IDEATION 
DEFINING
INTERACTIONS
PROTOTYPING
AND TESTING
EXERCISE 1
Interacting with Paper
EXERCISE 2
Sketching Scenarios
EXERCISE 3
Relabeling
EXERCISE 4
Structured Ideation
EXERCISE 5
Stories, Flows, and
Annotations
EXERCISE 6
Build, Test, Demo

Warm Up
http://timothytrespas.ﬁles.wordpress.com/2013/03/mind-controlled-weapon.jpg

ADAPTIVE PATH | UXI
Designing for Interaction
→ Fundamentals
→ Good Interactions
→ Trends
→ Exercise 1: Interaction with Post-its
12
INTERACTION DESIGN

ADAPTIVE PATH | UXI
DESIGNING FOR INTERACTION
What is
interaction
design?

Interaction Design
Interaction Design deﬁnes the structure and behavior
of interactive systems. Interaction Designers strive to
create meaningful relationships between people and
the products and services that they use, from
computers to mobile devices to appliances and beyond.
— Interaction Design Association

— http://www.kickerstudio.com/blog/2008/12/the-disciplines-of-user-experience/

BEFORE AN INTERACTION
Our Take
Interaction design focuses on what people think before
engaging, what they do or should do while engaging, and how
they feel about it after.
Do FeelThink
DURING AN INTERACTION AFTER AN INTERACTION

Types of Interactions
Person to Person Person to Product Product to Product

Fundamentals
WHAT SHOULD I DO
Feedback FeedforwardAﬀordance
WHAT HAPPENED WHAT WILL HAPPEN

Affordance
Affordances indicate how to interact with a feature or
function. If the affordance does not match the mental model of
the person, the experience goes down.
Good affordances help people do the right thing.

UX Intensive Copenhagen | Day 4 | Interaction Design

Feedback
Feedback is some indication that something has happened.
Every action by a person who engages with the product or
service, no matter how slightly, should be accompanied by
some acknowledgement of the action.
Designing the appropriate feedback is the designer’s task. The
designer has to determine how quickly the product or service
will respond and in what manner.

Feedback
CONCEPT REFINEMENT

Feedback

Feedforward
Feedforward is knowing what will happen before you perform an
action. Feedforward can be a straightforward message (“pushing
this button will submit your order”), or simple cues such as a
hypertext links with descriptive names instead of “here”.
Feedforward allows users to perform an action with conﬁdence
because it gives them an idea of what will happen next.

Feedforward
600 cal
turkey bakedwater
1400 cal
salamisoda cookies

Feedforward

ADAPTIVE PATH | UXI
Ten Things to Think About
While there’s no absolute right way of
doing things and there are no rules in
design, there are things you should
always try to keep in mind.
27

Match Their Expectations
When using anything for the ﬁrst time, there is a level of
situating and learning that must take place. This transition
is easier when a product uses familiar UI conventions to
perform common functions.
1
EXPECTATION, CONVENTIONS

Match Their Expectations
1
EXPECTATION, CONVENTIONS

Maintain Consistency
Consistency is one of the strongest methods of helping
users understand your product, as they develop a mental
model and establish expectations of where things are and
how things work.
2
CONSISTENCY

Maintain Consistency
2
CONSISTENCY (OR LACK THEREOF)
Duplicate Save As…

Reduce (Perceived) Complexity
Complexity is inherent in many things, but we should also
ways aim to reduce the cognitive load that we place on
people as they use our products. Let the system do the
math, compare data, and remember things for the user.
Hide irrelevant features and functions, and progressively
disclose them as needed.
3
COMPLEXITY & SIMPLICITY

Reduce (Perceived) Complexity
3

Consider the Context
Context of use plays an extremely important role in the
experience of interacting with products and services. Think
about who is using it, when and where, how are they
interacting, what they are doing and how all of this might
change over time.
4
CONTEXT

4
CONTEXT

Anticipate User Needs
Understanding exactly what people need in order to
complete a task allows you to begin to anticipate their
needs before they need them. Make smart assumptions
and help people even before they need assistance.
DEFINING INTERACTION DESIGN
5
ANTICIPATION, PREDICTIVE RESOLUTION

Anticipate User Needs
5
ANTICIPATION, PREDICTIVE RESOLUTION

Help Them Make the Right Choice
Helping people feel conﬁdent about their experience (and
exploration) of your product rests heavily on aﬀordance to
communicate how to interact with something, feedforward
to communicate what will happen if they do and feedback
to let them know that something has happened.
DEFINING INTERACTION DESIGN
6
AFFORDANCE, FEEDFORWARD & FEEDBACK

Help Them Make the Right Choice
6
AFFORDANCE, FEEDFORWARD & FEEDBACK

Proactively Prevent Problems
Products should always make every attempt to help users
avoid making mistakes, but when they do happen the
system should make it as easy as possible to ﬁx the error
and in as graceful a manner possible.
7
ERROR AVOIDANCE, DETECTION, & RECOVERY

The Poka-Yoke principle
of mistake-prooﬁng
7

Some designs help you back out of errors with grace.
7

Appearance Matters
Psychology has proven that things that look better
actually work better for people. Some of this is a result of
human perception, but it is also a question of what makes
one thing look better than another.
8
AESTHETICS

Appearance Matters
8
AESTHETICS

Appearance Matters
8
AESTHETICS
Google Material Design
“A visual language that synthesizes
classic principles of good design
with the innovation and possibility
of technology and science.”

Appearance Matters
Information design...pertains to the task of making complex
and abstract content accessible in a simpler way. Through
logical composition, visual hierarchy and the use of visual
metaphors. Viewers are supported in their absorption and
comprehension of information.
8
AESTHETICS
—Jakob Schneider
This is Service Design Thinking

Constraints are Good
Constraints are often positioned as negatives, where we lack
the necessary time, money, technology or staﬀ, when they
should be seen as a beneﬁt. More often than not, complete
freedom has the power paralyze, forcing the designer to
develop and construct their own set of constraints.
9
CONSTRAINTS

Constraints are Good
Q. Does the creation of design admit constraints?
A. Design depends largely on constraints. 
Q. What constraints?
A. The sum of all constraints. Here is one of the few eﬀective keys to
the design problem — the ability of the designer to recognize as many
of the constraints as possible — his (or her) willingness and
enthusiasm for working within these constraints —the constraints of
price, of size, of balance, of surface, of time, etc.; each problem has its
own particular list.
—Charles Eames
9
CONSTRAINTS

Constraits are Good
9
CONSTRAINTS

Do the Right Thing
Treat people with the respect they deserve. No matter what
you’re making, remember that you’re not just building a
product or a service — you’re building a relationship.
10
TRUST

Do the Right Thing
10
TRUST

ADAPTIVE PATH | UXI
The 10 Things
→ Match expectations
→ Maintain consistency
→ Reduce perceived complexity
→ Consider context
→ Anticipate needs
→ Guide to the right choice
→ Proactively prevent problems
→ Appearance matters
→ Boundaries are good
→ Do the right thing
54

The State of IxD: Convergence 2.0
— Based on Hugh Dubberly’s Convergence 2.0
http://www.dubberly.com/articles/convergence-2-0.html
PHYSICAL
SOCIALNETWORK
Convergence 1.0 — publishing,
broadcasting, computing.
“once media are digital, boundaries
between media types will blur and
opportunities for interaction will grow”
—Nicholas Negroponte, 1980

Physical
THE DIGITAL/ANALOG RELATIONSHIP IS CHANGING
→ Location [GPS]
→ Sensors
→ Internet of Things
→ Multi-Channel
→ Global
After Hugh Dubberly’s Convergence 2.0

Social
EVERYTHING IS SOCIAL
→ Identity & Authentication
→ Contacts
→ Social Graph
→ Conversation
→ Schedules
→ Consumption
→ Activity Streams
→ Data

Network
THE SYSTEM IS ENABLING EVERYTHING
→ Communication
→ Maps
→ Media Access
→ Payment & Advertising
→ Speech & Image Recognition
→ Automated Translation

ADAPTIVE PATH | UXI
EXERCISE #1
Interaction
with Post-its
→ Fold a post-it note in half
→ How can you indicate to someone
that it can be opened?
→ How do you let them know what
to expect once opened?
→ How do you provide appropriate
feedback once it’s opened?
→ Share with your neighbor
59

ADAPTIVE PATH | UXI
Project
A nightclub wants to
diﬀerentiate through
emerging technology.  
They want you to explore
new ways to interact  
using wearables and  
built-in screens.
They are open to any  
form factor for the wearable
and diﬀerent types of built-
in screens.
CASE

Design Principles
→What happens in the club, stays in the club
→Promotes serendipity
→Drunk proof
DESIGN CHALLENGE

Needs
→Order drinks
→Meet new people
→Play social games
DESIGN CHALLENGE

ADAPTIVE PATH | UXI
Sketching Interactions
→ Sketching Fundamentals
→ Exercise 3: Sketching Scenarios
63
SKETCHING INTERACTIONS

Sketching Fundamentals

Sketching Tools
→ Use markers and pens, not pencils
→ If you mess up, keep going
→ If you really mess up, grab a new page
YELLOW MARKER
GRAY MARKER
SHARPIE MARKER

Sketching Tools
ATTENTION
DEPTH
BOLDNESS & DETAILS

Hierarchy and Emphasis
→ Fill the page with overlapping rectangles
→ Pass it to your neighbor, then choose one
rectangle and color it yellow
→ Pass it to your neighbor, then outline 3-4
rectangles with the fat sharpie
→ One more pass! Shade in 3-4 rectangles with
the gray marker ... or add some shadows

Emotions

People

Tools & Devices

Objects

Sketching Library
Practice common forms; have a ready set of design patterns to use

User Flows
Combine patterns and ideas into sets that illustrate user steps

Design Sketching
An approach that…

What to Sketch and When

ADAPTIVE PATH | UXI
EXERCISE #2
Sketching
Scenarios
→ Draw three panels on a half sheet
→ Show a person using a wearable
device interacting with (1) another
person, (2) interacting with the
wearable, (3) interacting with
another object, all in a nightclub
→ Vary emotion
78

Lessons
→Sketching is power
→Copy
→Practice with Sketchnotes
→Don’t worry about quality
→Have fun!

ADAPTIVE PATH | UXI
Ideation
→ Ideation Methods
→ Brainstorming Basics
→ Exercise: Relabeling
→ Exercise: Structured Ideation
80
IDEATION

Ideation Fuel
→Needs
→Opportunities
→Principles
→Pain points
→Personas
→Moments
→Journeys
→Principles
→Technology
→Interaction Types
IDEATION

Brainstorming
Brainstorming is a method for quickly developing many
possible solutions to a speciﬁc challenge. Eﬀective
brainstorming follows a few key steps:
IDEATION
→ Time Boxed
→ Visual
→ Focused
→ Organized

Brainstorming Ideals
Things to aim for:
INSIGHT TO CONCEPT
→ Fluency — ability to rapidly generate many ideas
→ Flexibility — discover new connections between ideas
→ Originality — seek unexpected ideas
→ Awareness — see beyond the obvious
→ Courage — willingness to explore without fear
After J.P. Guilford’s ﬁve key traits in creative behavior.

http://www.robcottingham.ca/cartoon/archive/2007-07-13-brainstorming/

Brainstorming Roadblocks
Things to avoid:
INSIGHT TO CONCEPT
→ Over thinking
→ Talking instead of drawing
→ Passing judgment
→ Perfection
→ Fear (Fear is the mind-killer*)
* Borrowed from Frank Herbert’s Dune and the Bene Gesserit Litany Against Fear

Practice makes you better,
faster, and more ﬂexible.

Acting
IDEATION
TROUBLE SPOT
LOW POINT
HIGH POINT
ADAPTIVE PATH'S GUIDE TO
EXPERIENCE
MAPPING
Twitter Teaser Email
Website Guide

USER
TWITTER
TEASER
EMAIL
WEBSITE
GUIDE

I
D
E
A
T
I
O
N
M
A
T
E
R
I
A
L
S
Playing

ADAPTIVE PATH | UXI
EXERCISE #3
Interaction
Relabeling
→ Take an object (scissors, markers,
post-its) and reinterpret its
functions and aﬀordances to
create new functions appropriate
for a night club
95

How do you structure
an ideation session?

Ideation Sessions
INSIGHT TO CONCEPT
→ Fixed time limit
→ Quantity, quantity, quantity
→ No bad ideas: make a “parking lot”
→ Focus on pain points and opportunities
→ Find a structure to brainstorm around

Organize your Concepts
INSIGHT TO CONCEPT
→ Cluster and collapse similar concepts
→ Name the clusters
→ Consider collapsing or stringing together concepts
→ Do an initial sorting of concepts

Frameworks Focus Ideation
IDEATION
— The Xbox 360 “Mild to Wild” matrix. See http://www.core77.com/reactor/04.06_xbox.asp

There’s no one way.
→ Need + Moment + Creativity = New Concept
→ Stage in the Journey + Opportunity + Creativity = New Concept
→ Pain Point + Interaction Type + Principle + Creativity = New Concept
→ Technology + Persona + Creativity = New Concept
IDEATION

Ideation Framework
IDEATION
1
2
3
A B C
OPPORTUNITIES
INTERACTION 
TYPES

Ideation Framework
IDEATION
1
2
3
A B C
STAGES
PAIN POINTS

Journey Framework
IDEATION
Beginning Middle End
NEED 1
NEED 2
NEED 3

Concept Cards
IDEATION

Validate with Principles
IDEATION
CONCEPTS
PRINCIPLES
VALIDATED CONCEPTS

Put It to a Vote
IDEATION
CONCEPTS
1
1
3
1
3
2

ADAPTIVE PATH | UXI
EXERCISE #4
Structured
Ideation
→ Generate concepts for each of the
needs for diﬀerent interaction
types. Keep the design principles
in mind as you ideate.
→ Organize and label your concepts.
→ Dot vote to identify the top
concepts.
IDEATION
110

1
2
3
A B C
ORDERING MEETING PLAYING
What happens in the club, stays in the club Promotes serendipity Drunk proof

Voting
→Looking for the best ideas for each need.
→Look at Ordering ﬁrst. Lay them out. Organize the concepts.
→Vote. 2 dots per person per need.
→Keep the top concepts. Put the others aside.
→Repeat.
IDEATION

Lessons
→No right time to ideate
→Go for quantity
→Mix diﬀerent techniques
→Involve others to improve buy in
IDEATION

ADAPTIVE PATH | UXI
Deﬁning Interactions
→ Where to Start
→ Design Patterns
→ Concept Validation
→ Exercise: Deﬁning the Details
114
INTERACTION DESIGN

You’ve got some good ideas,
now what?

Good Places to Start
DEFINING INTERACTIONS
EFFORT
Working Prototype
Sketches
Wireframes
Storyboards
Lo-ﬁ Prototype
Flows
FIDELITY

Why?
→Fast
→Low investment
→Easy to change
→Gets you thinking outside of the computer
→Good enough to validate

Sketches

Boxes and Arrows
Name
Description

Wireframes

Scenarios and Storyboards

Screen Patterns
Theresa Neil

Mobile Patterns
NAVIGATION
→ Springboard
→ List Menu
→ Tab Menu
→ Gallery
→ Dashboard
→ Metaphor
→ Mega Menu
→ Page Carousel
→ Image Carousel
→ Expanding List
Springboard List Menu
Tabs Mega Menu
Theresa Neil

Mobile Patterns
SEARCH, SORT, & FILTER
→ Explicit Search
→ Scoped Search
→ Saved & Recent
→ Search Form
→ Search Results
→ Onscreen Sort
→ Sort Order Selector
→ Sort Form
→ Onscreen Filter
→ Filter Drawer
→ Filter Dialog
Explicit Search Scoped Search
Search Results Search Results
Sort Form
Search Form
Theresa Neil

Touch Gesture Cards (PDF): Luke Wroblewski

Source: http://www.mmk.ei.tum.de/demo/gesture/gesture.html

Concept Validation Guidelines
→ Does the concept make sense to users?
→ Do the features work well together?
→ Is it a common pattern?
→ Is the content logically organized?
→ Is it the content what people need it to be?
WHAT TO UNCOVER, EVALUATE, AND ANSWER

Concept Validation Guidelines
→ Test against design principles
→ Develop multiple ideas
→ Use extremes for contrast and comparison
→ Use real content

Critique
→A critique isn’t about gaining approval for the work
→Ask people open questions, not closed ones
→Capture all of the feedback

ADAPTIVE PATH | UXI
EXERCISE #5
Flows and
Annotations
→ Draw a template of 3 rectangles
→ Draw ﬂows for your top concepts,
showing how do you get from one
interaction to the next
→ Add labels, descriptions,
highlights, color, and shading
→ Validate with your team
133

ADAPTIVE PATH | UXI
Prototyping and Testing
→ Interactive Prototypes
→ Exercise: Prototype and Test
135
INTERACTION DESIGN

Reﬁnement
PROTOTYPING AND TESTING
EFFORT
Working Prototype
Sketches
Wireframes
Storyboards
Lo-ﬁ Prototype
Flows
FIDELITY

Paper Prototypes
Paper prototypes are a quick and easy way to detail and test
speciﬁc moments within an overall product or service experience.

ADAPTIVE PATH | UXI
Physical
Prototypes
Physical Prototypes
allow us to experiment
with the ways that
people interact with our
products in the physical
world.
ADAPTIVE PATH | UXI

Screen Prototypes
Screen Prototypes will focus on further detail than paper
prototypes, and are great for testing overall frameworks, or linking
those speciﬁc moments together into a more complete experience.
142

Goals
→ Think: How does the user know to
interact (and what to interact with)?
→ Do: How does the user get feedback
when interacting with the product/
service?
→ Feel: How does the user feel during/
after the interaction?
Principles
→What happens in the
club, stays in the club
→Promotes serendipity
→Drunk proof

ADAPTIVE PATH | UXI
EXERCISE #6
Build, Test,
Demo
→ Prototype a wearable device and
built-in screen
→ Demonstrate a key interaction for
each need
→ Test with other teams or team
members, iterate, and diﬀerentiate
→ Consider aﬀordances,
feedforward, and feedback
→ Ensure solutions meet design
principles
144

Guidance
→ Ask participants to complete specific tasks.
→ Have the participant talk aloud about what they are
thinking and why they are making specific choices.
→ Be prepared to edit the prototype on the fly.

Tools
Simple Linking
Clickable pages or screens
Doesn't provide transitions
and typically just supports
tap/click interaction
Detailed Interactions
Manipulation of individual
elements
Multi-touch gestures
Cond. logic a bonus
Sophisticated Linking
Provides animation/
transitions between
screens
May include some  
gestures beyond  
tap/click

ADAPTIVE PATH | UXI
Wrap Up
147
INTERACTION DESIGN

ADAPTIVE PATH | UXI
Select References
148
101 Things I Learned in Architecture School
Matthew Frederick
About Face 4
Alan Cooper et al
The Design of Everyday Things
Donald Norman
Designing for Interaction, 2nd Edition
Dan Saﬀer
Designing Interactions
Bill Moggridge
Inventing the Medium
Janet Murray
The Laws of Simplicity: Design, Technology,
Business, Life
John Maeda
Storytelling for User Experience
Whitney Quesenbery and Kevin Brooks
The Sketchnote Handbook
Mike Rohde
The following are a few (of many) great books that may support you in your work.

TRACEY@ADAPTIVEPATH.COM
Thank You.
San Francisco
Pier One
San Francisco CA
94107-110
415-495-8270

UX Intensive Copenhagen | Day 4 | Interaction Design

Recommandé

Recommandé

Contenu connexe

Plus de Adaptive Path

Plus de Adaptive Path (8)

Dernier

Dernier (20)

UX Intensive Copenhagen | Day 4 | Interaction Design