SlideShare a Scribd company logo
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
ADAPTIVE PATH | UXI 5
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
7ADAPTIVE PATH | UXI
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
8ADAPTIVE PATH | UXI
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."
9ADAPTIVE PATH | UXI
Designing the Moments
INTERACTION DESIGN
JOURNEY
TOUCHPOINT
(macro interaction)
INTERACTIONS
(aka features/capabilities)
MICRO INTERACTIONS
ADAPTIVE PATH | UXI 10
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.files.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?
14ADAPTIVE PATH | UXI
Interaction Design
Interaction Design defines 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.
DESIGNING FOR INTERACTION
— Interaction Design Association
15ADAPTIVE PATH | UXI
DESIGNING FOR INTERACTION
— http://www.kickerstudio.com/blog/2008/12/the-disciplines-of-user-experience/
BEFORE AN INTERACTION
16ADAPTIVE PATH | UXI
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.
DESIGNING FOR INTERACTION
Do FeelThink
DURING AN INTERACTION AFTER AN INTERACTION
ADAPTIVE PATH | UXI 17
Types of Interactions
Person to Person Person to Product Product to Product
DESIGNING FOR INTERACTION
18ADAPTIVE PATH | UXI
Fundamentals
DESIGNING FOR INTERACTION
WHAT SHOULD I DO
Feedback FeedforwardAffordance
WHAT HAPPENED WHAT WILL HAPPEN
19ADAPTIVE PATH | UXI
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.
DESIGNING FOR INTERACTION
UX Intensive Copenhagen | Day 4 | Interaction Design
21ADAPTIVE PATH | UXI
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.
DESIGNING FOR INTERACTION
22ADAPTIVE PATH | UXI
Feedback
CONCEPT REFINEMENT
23ADAPTIVE PATH | UXI
Feedback
DESIGNING FOR INTERACTION
24ADAPTIVE PATH | UXI
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 confidence
because it gives them an idea of what will happen next.
DESIGNING FOR INTERACTION
25ADAPTIVE PATH | UXI
Feedforward
DESIGNING FOR INTERACTION
600 cal
turkey bakedwater
1400 cal
salamisoda cookies
26ADAPTIVE PATH | UXI
Feedforward
DESIGNING FOR INTERACTION
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
DESIGNING FOR INTERACTION
28ADAPTIVE PATH | UXI
Match Their Expectations
When using anything for the first 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.
DESIGNING FOR INTERACTION
1
EXPECTATION, CONVENTIONS
29ADAPTIVE PATH | UXI
Match Their Expectations
DESIGNING FOR INTERACTION
1
EXPECTATION, CONVENTIONS
30ADAPTIVE PATH | UXI
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.
DESIGNING FOR INTERACTION
2
CONSISTENCY
31ADAPTIVE PATH | UXI
Maintain Consistency
DESIGNING FOR INTERACTION
2
CONSISTENCY (OR LACK THEREOF)
Duplicate Save As…
32ADAPTIVE PATH | UXI
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.
DESIGNING FOR INTERACTION
3
COMPLEXITY & SIMPLICITY
33ADAPTIVE PATH | UXI
Reduce (Perceived) Complexity
DESIGNING FOR INTERACTION
3
34ADAPTIVE PATH | UXI
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.
DESIGNING FOR INTERACTION
4
CONTEXT
35ADAPTIVE PATH | UXI
Consider the Context
DESIGNING FOR INTERACTION
4
CONTEXT
36ADAPTIVE PATH | UXI
Consider the Context
DESIGNING FOR INTERACTION
4
CONTEXT
37ADAPTIVE PATH | UXI
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
38ADAPTIVE PATH | UXI
Anticipate User Needs
DESIGNING FOR INTERACTION
5
ANTICIPATION, PREDICTIVE RESOLUTION
39ADAPTIVE PATH | UXI
Help Them Make the Right Choice
Helping people feel confident about their experience (and
exploration) of your product rests heavily on affordance 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
40ADAPTIVE PATH | UXI
Help Them Make the Right Choice
DESIGNING FOR INTERACTION
6
AFFORDANCE, FEEDFORWARD & FEEDBACK
41ADAPTIVE PATH | UXI
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 fix the error
and in as graceful a manner possible.
DESIGNING FOR INTERACTION
7
ERROR AVOIDANCE, DETECTION, & RECOVERY
42ADAPTIVE PATH | UXI
Proactively Prevent Problems
The Poka-Yoke principle
of mistake-proofing
DESIGNING FOR INTERACTION
7
ERROR AVOIDANCE, DETECTION, & RECOVERY
43ADAPTIVE PATH | UXI
Proactively Prevent Problems
Some designs help you back out of errors with grace.
DESIGNING FOR INTERACTION
7
ERROR AVOIDANCE, DETECTION, & RECOVERY
44ADAPTIVE PATH | UXI
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.
DESIGNING FOR INTERACTION
8
AESTHETICS
45ADAPTIVE PATH | UXI
Appearance Matters
DESIGNING FOR INTERACTION
8
AESTHETICS
46ADAPTIVE PATH | UXI
Appearance Matters
DESIGNING FOR INTERACTION
8
AESTHETICS
47ADAPTIVE PATH | UXI
Appearance Matters
DESIGNING FOR INTERACTION
8
AESTHETICS
Google Material Design
“A visual language that synthesizes
classic principles of good design
with the innovation and possibility
of technology and science.”
48ADAPTIVE PATH | UXI
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.
DESIGNING FOR INTERACTION
8
AESTHETICS
—Jakob Schneider
This is Service Design Thinking
49ADAPTIVE PATH | UXI
Constraints are Good
Constraints are often positioned as negatives, where we lack
the necessary time, money, technology or staff, when they
should be seen as a benefit. More often than not, complete
freedom has the power paralyze, forcing the designer to
develop and construct their own set of constraints.
DESIGNING FOR INTERACTION
9
CONSTRAINTS
50ADAPTIVE PATH | UXI
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 effective 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
DESIGNING FOR INTERACTION
9
CONSTRAINTS
51ADAPTIVE PATH | UXI
Constraits are Good
DESIGNING FOR INTERACTION
9
CONSTRAINTS
52ADAPTIVE PATH | UXI
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.
DESIGNING FOR INTERACTION
10
TRUST
53ADAPTIVE PATH | UXI
Do the Right Thing
DESIGNING FOR INTERACTION
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
DESIGNING FOR INTERACTION
55ADAPTIVE PATH | UXI
The State of IxD: Convergence 2.0
DESIGNING FOR INTERACTION
— 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
56ADAPTIVE PATH | UXI
Physical
THE DIGITAL/ANALOG RELATIONSHIP IS CHANGING
DESIGNING FOR INTERACTION
→ Location [GPS]
→ Sensors
→ Internet of Things
→ Multi-Channel
→ Global
After Hugh Dubberly’s Convergence 2.0
57ADAPTIVE PATH | UXI
Social
EVERYTHING IS SOCIAL
DESIGNING FOR INTERACTION
→ Identity & Authentication
→ Contacts
→ Social Graph
→ Conversation
→ Schedules
→ Consumption
→ Activity Streams
→ Data
After Hugh Dubberly’s Convergence 2.0
58ADAPTIVE PATH | UXI
Network
THE SYSTEM IS ENABLING EVERYTHING
DESIGNING FOR INTERACTION
→ Communication
→ Maps
→ Media Access
→ Payment & Advertising
→ Speech & Image Recognition
→ Automated Translation
After Hugh Dubberly’s Convergence 2.0
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
DESIGNING FOR INTERACTION
59
ADAPTIVE PATH | UXI
Project
A nightclub wants to
differentiate 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 different types of built-
in screens.
CASE
ADAPTIVE PATH | UXI 61
Design Principles
→What happens in the club, stays in the club
→Promotes serendipity
→Drunk proof
DESIGN CHALLENGE
ADAPTIVE PATH | UXI 62
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
64ADAPTIVE PATH | UXI
Sketching Fundamentals
SKETCHING INTERACTIONS
65ADAPTIVE PATH | UXI
Sketching Tools
→ Use markers and pens, not pencils
→ If you mess up, keep going
→ If you really mess up, grab a new page
SKETCHING INTERACTIONS
YELLOW MARKER
GRAY MARKER
SHARPIE MARKER
66ADAPTIVE PATH | UXI
Sketching Tools
SKETCHING INTERACTIONS
ATTENTION
DEPTH
BOLDNESS & DETAILS
67ADAPTIVE PATH | UXI
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
SKETCHING INTERACTIONS
68ADAPTIVE PATH | UXI
Emotions
SKETCHING INTERACTIONS
69ADAPTIVE PATH | UXI
People
SKETCHING INTERACTIONS
70ADAPTIVE PATH | UXI
Tools & Devices
SKETCHING INTERACTIONS
71ADAPTIVE PATH | UXI
Objects
SKETCHING INTERACTIONS
UX Intensive Copenhagen | Day 4 | Interaction Design
73ADAPTIVE PATH | UXI
Sketching Library
Practice common forms; have a ready set of design patterns to use
SKETCHING INTERACTIONS
74ADAPTIVE PATH | UXI
User Flows
Combine patterns and ideas into sets that illustrate user steps
SKETCHING INTERACTIONS
75ADAPTIVE PATH | UXI
Design Sketching
An approach that…
SKETCHING INTERACTIONS
76ADAPTIVE PATH | UXI
What to Sketch and When
SKETCHING INTERACTIONS
UX Intensive Copenhagen | Day 4 | Interaction Design
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
SKETCHING INTERACTIONS
78
79ADAPTIVE PATH | UXI
Lessons
→Sketching is power
→Copy
→Practice with Sketchnotes
→Don’t worry about quality
→Have fun!
SKETCHING INTERACTIONS
ADAPTIVE PATH | UXI
Ideation
→ Ideation Methods
→ Brainstorming Basics
→ Exercise: Relabeling
→ Exercise: Structured Ideation
80
IDEATION
Where do ideas come from?
ADAPTIVE PATH | UXI 82
Ideation Fuel
→Needs
→Opportunities
→Principles
→Pain points
→Personas
→Moments
→Journeys
→Principles
→Technology
→Interaction Types
IDEATION
How might we…?
84ADAPTIVE PATH | UXI
Brainstorming
Brainstorming is a method for quickly developing many
possible solutions to a specific challenge. Effective
brainstorming follows a few key steps:
IDEATION
→ Time Boxed
→ Visual
→ Focused
→ Organized
85ADAPTIVE PATH | UXI
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 five key traits in creative behavior.
http://www.robcottingham.ca/cartoon/archive/2007-07-13-brainstorming/
87ADAPTIVE PATH | UXI
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 flexible.
Sketching
Relabeling
91ADAPTIVE PATH | UXI
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
Imitation
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 affordances to
create new functions appropriate
for a night club
95
How do you structure
an ideation session?
97ADAPTIVE PATH | UXI
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
UX Intensive Copenhagen | Day 4 | Interaction Design
99ADAPTIVE PATH | UXI
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
UX Intensive Copenhagen | Day 4 | Interaction Design
101ADAPTIVE PATH | UXI
Frameworks Focus Ideation
IDEATION
— The Xbox 360 “Mild to Wild” matrix. See http://www.core77.com/reactor/04.06_xbox.asp
102ADAPTIVE PATH | UXI
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
103ADAPTIVE PATH | UXI
Ideation Framework
IDEATION
1
2
3
A B C
OPPORTUNITIES
INTERACTION

TYPES
104ADAPTIVE PATH | UXI
Ideation Framework
IDEATION
1
2
3
A B C
STAGES
PAIN POINTS
105ADAPTIVE PATH | UXI
Journey Framework
IDEATION
Beginning Middle End
NEED 1
NEED 2
NEED 3
106ADAPTIVE PATH | UXI
Concept Cards
IDEATION
107ADAPTIVE PATH | UXI
Validate with Principles
IDEATION
CONCEPTS
PRINCIPLES
VALIDATED CONCEPTS
108ADAPTIVE PATH | UXI
Put It to a Vote
IDEATION
CONCEPTS
1
1
3
1
3
2
Dot Vote
ADAPTIVE PATH | UXI
EXERCISE #4
Structured
Ideation
→ Generate concepts for each of the
needs for different 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
111ADAPTIVE PATH | UXI
1
2
3
A B C
ORDERING MEETING PLAYING
What happens in the club, stays in the club Promotes serendipity Drunk proof
112ADAPTIVE PATH | UXI
Voting
→Looking for the best ideas for each need.
→Look at Ordering first. Lay them out. Organize the concepts.
→Vote. 2 dots per person per need.
→Keep the top concepts. Put the others aside.
→Repeat.
IDEATION
113ADAPTIVE PATH | UXI
Lessons
→No right time to ideate
→Go for quantity
→Mix different techniques
→Involve others to improve buy in
IDEATION
ADAPTIVE PATH | UXI
Defining Interactions
→ Where to Start
→ Design Patterns
→ Concept Validation
→ Exercise: Defining the Details
114
INTERACTION DESIGN
You’ve got some good ideas,
now what?
116ADAPTIVE PATH | UXI
Good Places to Start
DEFINING INTERACTIONS
EFFORT
Working Prototype
Sketches
Wireframes
Storyboards
Lo-fi Prototype
Flows
FIDELITY
117ADAPTIVE PATH | UXI
Why?
→Fast
→Low investment
→Easy to change
→Gets you thinking outside of the computer
→Good enough to validate
DEFINING INTERACTIONS
118ADAPTIVE PATH | UXI
Sketches
DEFINING INTERACTIONS
119ADAPTIVE PATH | UXI
Boxes and Arrows
DEFINING INTERACTIONS
Name
Description
120ADAPTIVE PATH | UXI
Wireframes
DEFINING INTERACTIONS
Scenarios and Storyboards
DEFINING INTERACTIONS
Don’t reinvent the wheel.
123ADAPTIVE PATH | UXI
Screen Patterns
DEFINING INTERACTIONS
Theresa Neil
124ADAPTIVE PATH | UXI
Mobile Patterns
DEFINING INTERACTIONS
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
125ADAPTIVE PATH | UXI
Mobile Patterns
DEFINING INTERACTIONS
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
UX Intensive Copenhagen | Day 4 | Interaction Design
Validate early and often.
Concept Validation Guidelines
DEFINING INTERACTIONS
→ 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?
130ADAPTIVE PATH | UXI
WHAT TO UNCOVER, EVALUATE, AND ANSWER
Concept Validation Guidelines
DEFINING INTERACTIONS
→ Test against design principles
→ Develop multiple ideas
→ Use extremes for contrast and comparison
→ Use real content
131ADAPTIVE PATH | UXI
132ADAPTIVE PATH | UXI
Critique
→A critique isn’t about gaining approval for the work
→Ask people open questions, not closed ones
→Capture all of the feedback
DEFINING INTERACTIONS
ADAPTIVE PATH | UXI
EXERCISE #5
Flows and
Annotations
→ Draw a template of 3 rectangles
→ Draw flows 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
DEFINING INTERACTIONS
133
134ADAPTIVE PATH | UXI
ADAPTIVE PATH | UXI
Prototyping and Testing
→ Interactive Prototypes
→ Exercise: Prototype and Test
135
INTERACTION DESIGN
136ADAPTIVE PATH | UXI
Refinement
PROTOTYPING AND TESTING
EFFORT
Working Prototype
Sketches
Wireframes
Storyboards
Lo-fi Prototype
Flows
FIDELITY
137ADAPTIVE PATH | UXI
Paper Prototypes
Paper prototypes are a quick and easy way to detail and test
specific moments within an overall product or service experience.
PROTOTYPING AND TESTING
ADAPTIVE PATH | UXI
Physical
Prototypes
Physical Prototypes
allow us to experiment
with the ways that
people interact with our
products in the physical
world.
PROTOTYPING AND TESTING
ADAPTIVE PATH | UXI
UX Intensive Copenhagen | Day 4 | Interaction Design
UX Intensive Copenhagen | Day 4 | Interaction Design
UX Intensive Copenhagen | Day 4 | Interaction Design
Screen Prototypes
PROTOTYPING AND TESTING
Screen Prototypes will focus on further detail than paper
prototypes, and are great for testing overall frameworks, or linking
those specific moments together into a more complete experience.
142
143ADAPTIVE PATH | UXI
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?
PROTOTYPING AND TESTING
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 differentiate
→ Consider affordances,
feedforward, and feedback
→ Ensure solutions meet design
principles
PROTOTYPING AND TESTING
144
Guidance
PROTOTYPING AND TESTING
→ 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.
145ADAPTIVE PATH | UXI
146ADAPTIVE PATH | UXI
Tools
PROTOTYPING AND TESTING
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 Saffer
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.
You are awesome.
TRACEY@ADAPTIVEPATH.COM
Thank You.
San Francisco
Pier One
San Francisco CA
94107-110
415-495-8270

More Related Content

More from Adaptive Path

UI for Big Data Visualization | Jonathan Stray | UX Week 2012
UI for Big Data Visualization | Jonathan Stray | UX Week 2012UI for Big Data Visualization | Jonathan Stray | UX Week 2012
UI for Big Data Visualization | Jonathan Stray | UX Week 2012
Adaptive Path
 
UX Week 2011: Only Good Touching
UX Week 2011: Only Good TouchingUX Week 2011: Only Good Touching
UX Week 2011: Only Good Touching
Adaptive Path
 
UX Week 2007: CNN.com Relaunch Case Study
UX Week 2007: CNN.com Relaunch Case StudyUX Week 2007: CNN.com Relaunch Case Study
UX Week 2007: CNN.com Relaunch Case Study
Adaptive Path
 
The importance of trust in customer experience
The importance of trust in customer experienceThe importance of trust in customer experience
The importance of trust in customer experience
Adaptive Path
 
From the Outside-In
From the Outside-InFrom the Outside-In
From the Outside-In
Adaptive Path
 
Five Great Experiences to Nurture
Five Great Experiences to NurtureFive Great Experiences to Nurture
Five Great Experiences to Nurture
Adaptive Path
 
Subject To Change: creating great products and services for an uncertain world
Subject To Change: creating great products and services for an uncertain worldSubject To Change: creating great products and services for an uncertain world
Subject To Change: creating great products and services for an uncertain world
Adaptive Path
 
The Long Wow
The Long WowThe Long Wow
The Long Wow
Adaptive Path
 

More from Adaptive Path (8)

UI for Big Data Visualization | Jonathan Stray | UX Week 2012
UI for Big Data Visualization | Jonathan Stray | UX Week 2012UI for Big Data Visualization | Jonathan Stray | UX Week 2012
UI for Big Data Visualization | Jonathan Stray | UX Week 2012
 
UX Week 2011: Only Good Touching
UX Week 2011: Only Good TouchingUX Week 2011: Only Good Touching
UX Week 2011: Only Good Touching
 
UX Week 2007: CNN.com Relaunch Case Study
UX Week 2007: CNN.com Relaunch Case StudyUX Week 2007: CNN.com Relaunch Case Study
UX Week 2007: CNN.com Relaunch Case Study
 
The importance of trust in customer experience
The importance of trust in customer experienceThe importance of trust in customer experience
The importance of trust in customer experience
 
From the Outside-In
From the Outside-InFrom the Outside-In
From the Outside-In
 
Five Great Experiences to Nurture
Five Great Experiences to NurtureFive Great Experiences to Nurture
Five Great Experiences to Nurture
 
Subject To Change: creating great products and services for an uncertain world
Subject To Change: creating great products and services for an uncertain worldSubject To Change: creating great products and services for an uncertain world
Subject To Change: creating great products and services for an uncertain world
 
The Long Wow
The Long WowThe Long Wow
The Long Wow
 

Recently uploaded

一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
amrsoftec1
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
taqyed
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
Decomart Studio
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
7sd8fier
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
taqyed
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 

Recently uploaded (20)

一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 

UX Intensive Copenhagen | Day 4 | Interaction Design

  • 1. Day 4 MAY 8, 2015 Interaction Design
  • 2. ADAPTIVE PATH | UXI Social Media → Twitter • @uxintensive • #UXICopenhagen • @traceyvarnell → Email • apevents@adaptivepath.com 2 UX INTENSIVE
  • 3. Check out the UXI Alumni LinkedIn Group Check your email for an invite to join the group
  • 4. 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
  • 5. ADAPTIVE PATH | UXI 5 DAY 1 DESIGN STRATEGY DS DAY 2 USER RESEARCH DR DAY 3 SERVICE DESIGN SD DAY 4 INTERACTION DESIGN IxD Abstract Real Think Make
  • 6. 6ADAPTIVE PATH | UXI INTERACTION DESIGN DISCOVER DEFINE DESIGN DELIVER
  • 7. 7ADAPTIVE PATH | UXI 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
  • 8. 8ADAPTIVE PATH | UXI 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."
  • 9. 9ADAPTIVE PATH | UXI Designing the Moments INTERACTION DESIGN JOURNEY TOUCHPOINT (macro interaction) INTERACTIONS (aka features/capabilities) MICRO INTERACTIONS
  • 10. ADAPTIVE PATH | UXI 10 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
  • 12. ADAPTIVE PATH | UXI Designing for Interaction → Fundamentals → Good Interactions → Trends → Exercise 1: Interaction with Post-its 12 INTERACTION DESIGN
  • 13. ADAPTIVE PATH | UXI DESIGNING FOR INTERACTION What is interaction design?
  • 14. 14ADAPTIVE PATH | UXI Interaction Design Interaction Design defines 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. DESIGNING FOR INTERACTION — Interaction Design Association
  • 15. 15ADAPTIVE PATH | UXI DESIGNING FOR INTERACTION — http://www.kickerstudio.com/blog/2008/12/the-disciplines-of-user-experience/
  • 16. BEFORE AN INTERACTION 16ADAPTIVE PATH | UXI 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. DESIGNING FOR INTERACTION Do FeelThink DURING AN INTERACTION AFTER AN INTERACTION
  • 17. ADAPTIVE PATH | UXI 17 Types of Interactions Person to Person Person to Product Product to Product DESIGNING FOR INTERACTION
  • 18. 18ADAPTIVE PATH | UXI Fundamentals DESIGNING FOR INTERACTION WHAT SHOULD I DO Feedback FeedforwardAffordance WHAT HAPPENED WHAT WILL HAPPEN
  • 19. 19ADAPTIVE PATH | UXI 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. DESIGNING FOR INTERACTION
  • 21. 21ADAPTIVE PATH | UXI 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. DESIGNING FOR INTERACTION
  • 22. 22ADAPTIVE PATH | UXI Feedback CONCEPT REFINEMENT
  • 23. 23ADAPTIVE PATH | UXI Feedback DESIGNING FOR INTERACTION
  • 24. 24ADAPTIVE PATH | UXI 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 confidence because it gives them an idea of what will happen next. DESIGNING FOR INTERACTION
  • 25. 25ADAPTIVE PATH | UXI Feedforward DESIGNING FOR INTERACTION 600 cal turkey bakedwater 1400 cal salamisoda cookies
  • 26. 26ADAPTIVE PATH | UXI Feedforward DESIGNING FOR INTERACTION
  • 27. 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 DESIGNING FOR INTERACTION
  • 28. 28ADAPTIVE PATH | UXI Match Their Expectations When using anything for the first 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. DESIGNING FOR INTERACTION 1 EXPECTATION, CONVENTIONS
  • 29. 29ADAPTIVE PATH | UXI Match Their Expectations DESIGNING FOR INTERACTION 1 EXPECTATION, CONVENTIONS
  • 30. 30ADAPTIVE PATH | UXI 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. DESIGNING FOR INTERACTION 2 CONSISTENCY
  • 31. 31ADAPTIVE PATH | UXI Maintain Consistency DESIGNING FOR INTERACTION 2 CONSISTENCY (OR LACK THEREOF) Duplicate Save As…
  • 32. 32ADAPTIVE PATH | UXI 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. DESIGNING FOR INTERACTION 3 COMPLEXITY & SIMPLICITY
  • 33. 33ADAPTIVE PATH | UXI Reduce (Perceived) Complexity DESIGNING FOR INTERACTION 3
  • 34. 34ADAPTIVE PATH | UXI 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. DESIGNING FOR INTERACTION 4 CONTEXT
  • 35. 35ADAPTIVE PATH | UXI Consider the Context DESIGNING FOR INTERACTION 4 CONTEXT
  • 36. 36ADAPTIVE PATH | UXI Consider the Context DESIGNING FOR INTERACTION 4 CONTEXT
  • 37. 37ADAPTIVE PATH | UXI 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
  • 38. 38ADAPTIVE PATH | UXI Anticipate User Needs DESIGNING FOR INTERACTION 5 ANTICIPATION, PREDICTIVE RESOLUTION
  • 39. 39ADAPTIVE PATH | UXI Help Them Make the Right Choice Helping people feel confident about their experience (and exploration) of your product rests heavily on affordance 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
  • 40. 40ADAPTIVE PATH | UXI Help Them Make the Right Choice DESIGNING FOR INTERACTION 6 AFFORDANCE, FEEDFORWARD & FEEDBACK
  • 41. 41ADAPTIVE PATH | UXI 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 fix the error and in as graceful a manner possible. DESIGNING FOR INTERACTION 7 ERROR AVOIDANCE, DETECTION, & RECOVERY
  • 42. 42ADAPTIVE PATH | UXI Proactively Prevent Problems The Poka-Yoke principle of mistake-proofing DESIGNING FOR INTERACTION 7 ERROR AVOIDANCE, DETECTION, & RECOVERY
  • 43. 43ADAPTIVE PATH | UXI Proactively Prevent Problems Some designs help you back out of errors with grace. DESIGNING FOR INTERACTION 7 ERROR AVOIDANCE, DETECTION, & RECOVERY
  • 44. 44ADAPTIVE PATH | UXI 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. DESIGNING FOR INTERACTION 8 AESTHETICS
  • 45. 45ADAPTIVE PATH | UXI Appearance Matters DESIGNING FOR INTERACTION 8 AESTHETICS
  • 46. 46ADAPTIVE PATH | UXI Appearance Matters DESIGNING FOR INTERACTION 8 AESTHETICS
  • 47. 47ADAPTIVE PATH | UXI Appearance Matters DESIGNING FOR INTERACTION 8 AESTHETICS Google Material Design “A visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.”
  • 48. 48ADAPTIVE PATH | UXI 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. DESIGNING FOR INTERACTION 8 AESTHETICS —Jakob Schneider This is Service Design Thinking
  • 49. 49ADAPTIVE PATH | UXI Constraints are Good Constraints are often positioned as negatives, where we lack the necessary time, money, technology or staff, when they should be seen as a benefit. More often than not, complete freedom has the power paralyze, forcing the designer to develop and construct their own set of constraints. DESIGNING FOR INTERACTION 9 CONSTRAINTS
  • 50. 50ADAPTIVE PATH | UXI 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 effective 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 DESIGNING FOR INTERACTION 9 CONSTRAINTS
  • 51. 51ADAPTIVE PATH | UXI Constraits are Good DESIGNING FOR INTERACTION 9 CONSTRAINTS
  • 52. 52ADAPTIVE PATH | UXI 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. DESIGNING FOR INTERACTION 10 TRUST
  • 53. 53ADAPTIVE PATH | UXI Do the Right Thing DESIGNING FOR INTERACTION 10 TRUST
  • 54. 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 DESIGNING FOR INTERACTION
  • 55. 55ADAPTIVE PATH | UXI The State of IxD: Convergence 2.0 DESIGNING FOR INTERACTION — 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
  • 56. 56ADAPTIVE PATH | UXI Physical THE DIGITAL/ANALOG RELATIONSHIP IS CHANGING DESIGNING FOR INTERACTION → Location [GPS] → Sensors → Internet of Things → Multi-Channel → Global After Hugh Dubberly’s Convergence 2.0
  • 57. 57ADAPTIVE PATH | UXI Social EVERYTHING IS SOCIAL DESIGNING FOR INTERACTION → Identity & Authentication → Contacts → Social Graph → Conversation → Schedules → Consumption → Activity Streams → Data After Hugh Dubberly’s Convergence 2.0
  • 58. 58ADAPTIVE PATH | UXI Network THE SYSTEM IS ENABLING EVERYTHING DESIGNING FOR INTERACTION → Communication → Maps → Media Access → Payment & Advertising → Speech & Image Recognition → Automated Translation After Hugh Dubberly’s Convergence 2.0
  • 59. 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 DESIGNING FOR INTERACTION 59
  • 60. ADAPTIVE PATH | UXI Project A nightclub wants to differentiate 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 different types of built- in screens. CASE
  • 61. ADAPTIVE PATH | UXI 61 Design Principles →What happens in the club, stays in the club →Promotes serendipity →Drunk proof DESIGN CHALLENGE
  • 62. ADAPTIVE PATH | UXI 62 Needs →Order drinks →Meet new people →Play social games DESIGN CHALLENGE
  • 63. ADAPTIVE PATH | UXI Sketching Interactions → Sketching Fundamentals → Exercise 3: Sketching Scenarios 63 SKETCHING INTERACTIONS
  • 64. 64ADAPTIVE PATH | UXI Sketching Fundamentals SKETCHING INTERACTIONS
  • 65. 65ADAPTIVE PATH | UXI Sketching Tools → Use markers and pens, not pencils → If you mess up, keep going → If you really mess up, grab a new page SKETCHING INTERACTIONS YELLOW MARKER GRAY MARKER SHARPIE MARKER
  • 66. 66ADAPTIVE PATH | UXI Sketching Tools SKETCHING INTERACTIONS ATTENTION DEPTH BOLDNESS & DETAILS
  • 67. 67ADAPTIVE PATH | UXI 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 SKETCHING INTERACTIONS
  • 68. 68ADAPTIVE PATH | UXI Emotions SKETCHING INTERACTIONS
  • 69. 69ADAPTIVE PATH | UXI People SKETCHING INTERACTIONS
  • 70. 70ADAPTIVE PATH | UXI Tools & Devices SKETCHING INTERACTIONS
  • 71. 71ADAPTIVE PATH | UXI Objects SKETCHING INTERACTIONS
  • 73. 73ADAPTIVE PATH | UXI Sketching Library Practice common forms; have a ready set of design patterns to use SKETCHING INTERACTIONS
  • 74. 74ADAPTIVE PATH | UXI User Flows Combine patterns and ideas into sets that illustrate user steps SKETCHING INTERACTIONS
  • 75. 75ADAPTIVE PATH | UXI Design Sketching An approach that… SKETCHING INTERACTIONS
  • 76. 76ADAPTIVE PATH | UXI What to Sketch and When SKETCHING INTERACTIONS
  • 78. 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 SKETCHING INTERACTIONS 78
  • 79. 79ADAPTIVE PATH | UXI Lessons →Sketching is power →Copy →Practice with Sketchnotes →Don’t worry about quality →Have fun! SKETCHING INTERACTIONS
  • 80. ADAPTIVE PATH | UXI Ideation → Ideation Methods → Brainstorming Basics → Exercise: Relabeling → Exercise: Structured Ideation 80 IDEATION
  • 81. Where do ideas come from?
  • 82. ADAPTIVE PATH | UXI 82 Ideation Fuel →Needs →Opportunities →Principles →Pain points →Personas →Moments →Journeys →Principles →Technology →Interaction Types IDEATION
  • 84. 84ADAPTIVE PATH | UXI Brainstorming Brainstorming is a method for quickly developing many possible solutions to a specific challenge. Effective brainstorming follows a few key steps: IDEATION → Time Boxed → Visual → Focused → Organized
  • 85. 85ADAPTIVE PATH | UXI 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 five key traits in creative behavior.
  • 87. 87ADAPTIVE PATH | UXI 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
  • 88. Practice makes you better, faster, and more flexible.
  • 91. 91ADAPTIVE PATH | UXI Acting IDEATION TROUBLE SPOT LOW POINT HIGH POINT ADAPTIVE PATH'S GUIDE TO EXPERIENCE MAPPING Twitter Teaser Email Website Guide
  • 95. ADAPTIVE PATH | UXI EXERCISE #3 Interaction Relabeling → Take an object (scissors, markers, post-its) and reinterpret its functions and affordances to create new functions appropriate for a night club 95
  • 96. How do you structure an ideation session?
  • 97. 97ADAPTIVE PATH | UXI 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
  • 99. 99ADAPTIVE PATH | UXI 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
  • 101. 101ADAPTIVE PATH | UXI Frameworks Focus Ideation IDEATION — The Xbox 360 “Mild to Wild” matrix. See http://www.core77.com/reactor/04.06_xbox.asp
  • 102. 102ADAPTIVE PATH | UXI 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
  • 103. 103ADAPTIVE PATH | UXI Ideation Framework IDEATION 1 2 3 A B C OPPORTUNITIES INTERACTION
 TYPES
  • 104. 104ADAPTIVE PATH | UXI Ideation Framework IDEATION 1 2 3 A B C STAGES PAIN POINTS
  • 105. 105ADAPTIVE PATH | UXI Journey Framework IDEATION Beginning Middle End NEED 1 NEED 2 NEED 3
  • 106. 106ADAPTIVE PATH | UXI Concept Cards IDEATION
  • 107. 107ADAPTIVE PATH | UXI Validate with Principles IDEATION CONCEPTS PRINCIPLES VALIDATED CONCEPTS
  • 108. 108ADAPTIVE PATH | UXI Put It to a Vote IDEATION CONCEPTS 1 1 3 1 3 2
  • 110. ADAPTIVE PATH | UXI EXERCISE #4 Structured Ideation → Generate concepts for each of the needs for different 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
  • 111. 111ADAPTIVE PATH | UXI 1 2 3 A B C ORDERING MEETING PLAYING What happens in the club, stays in the club Promotes serendipity Drunk proof
  • 112. 112ADAPTIVE PATH | UXI Voting →Looking for the best ideas for each need. →Look at Ordering first. Lay them out. Organize the concepts. →Vote. 2 dots per person per need. →Keep the top concepts. Put the others aside. →Repeat. IDEATION
  • 113. 113ADAPTIVE PATH | UXI Lessons →No right time to ideate →Go for quantity →Mix different techniques →Involve others to improve buy in IDEATION
  • 114. ADAPTIVE PATH | UXI Defining Interactions → Where to Start → Design Patterns → Concept Validation → Exercise: Defining the Details 114 INTERACTION DESIGN
  • 115. You’ve got some good ideas, now what?
  • 116. 116ADAPTIVE PATH | UXI Good Places to Start DEFINING INTERACTIONS EFFORT Working Prototype Sketches Wireframes Storyboards Lo-fi Prototype Flows FIDELITY
  • 117. 117ADAPTIVE PATH | UXI Why? →Fast →Low investment →Easy to change →Gets you thinking outside of the computer →Good enough to validate DEFINING INTERACTIONS
  • 118. 118ADAPTIVE PATH | UXI Sketches DEFINING INTERACTIONS
  • 119. 119ADAPTIVE PATH | UXI Boxes and Arrows DEFINING INTERACTIONS Name Description
  • 120. 120ADAPTIVE PATH | UXI Wireframes DEFINING INTERACTIONS
  • 123. 123ADAPTIVE PATH | UXI Screen Patterns DEFINING INTERACTIONS Theresa Neil
  • 124. 124ADAPTIVE PATH | UXI Mobile Patterns DEFINING INTERACTIONS 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
  • 125. 125ADAPTIVE PATH | UXI Mobile Patterns DEFINING INTERACTIONS 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
  • 126. Touch Gesture Cards (PDF): Luke Wroblewski
  • 130. Concept Validation Guidelines DEFINING INTERACTIONS → 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? 130ADAPTIVE PATH | UXI WHAT TO UNCOVER, EVALUATE, AND ANSWER
  • 131. Concept Validation Guidelines DEFINING INTERACTIONS → Test against design principles → Develop multiple ideas → Use extremes for contrast and comparison → Use real content 131ADAPTIVE PATH | UXI
  • 132. 132ADAPTIVE PATH | UXI Critique →A critique isn’t about gaining approval for the work →Ask people open questions, not closed ones →Capture all of the feedback DEFINING INTERACTIONS
  • 133. ADAPTIVE PATH | UXI EXERCISE #5 Flows and Annotations → Draw a template of 3 rectangles → Draw flows 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 DEFINING INTERACTIONS 133
  • 135. ADAPTIVE PATH | UXI Prototyping and Testing → Interactive Prototypes → Exercise: Prototype and Test 135 INTERACTION DESIGN
  • 136. 136ADAPTIVE PATH | UXI Refinement PROTOTYPING AND TESTING EFFORT Working Prototype Sketches Wireframes Storyboards Lo-fi Prototype Flows FIDELITY
  • 137. 137ADAPTIVE PATH | UXI Paper Prototypes Paper prototypes are a quick and easy way to detail and test specific moments within an overall product or service experience. PROTOTYPING AND TESTING
  • 138. ADAPTIVE PATH | UXI Physical Prototypes Physical Prototypes allow us to experiment with the ways that people interact with our products in the physical world. PROTOTYPING AND TESTING ADAPTIVE PATH | UXI
  • 142. Screen Prototypes PROTOTYPING AND TESTING Screen Prototypes will focus on further detail than paper prototypes, and are great for testing overall frameworks, or linking those specific moments together into a more complete experience. 142
  • 143. 143ADAPTIVE PATH | UXI 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? PROTOTYPING AND TESTING Principles →What happens in the club, stays in the club →Promotes serendipity →Drunk proof
  • 144. 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 differentiate → Consider affordances, feedforward, and feedback → Ensure solutions meet design principles PROTOTYPING AND TESTING 144
  • 145. Guidance PROTOTYPING AND TESTING → 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. 145ADAPTIVE PATH | UXI
  • 146. 146ADAPTIVE PATH | UXI Tools PROTOTYPING AND TESTING 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
  • 147. ADAPTIVE PATH | UXI Wrap Up 147 INTERACTION DESIGN
  • 148. 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 Saffer 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.
  • 150. TRACEY@ADAPTIVEPATH.COM Thank You. San Francisco Pier One San Francisco CA 94107-110 415-495-8270