Mobile Prototyping Essentials
Part II
Rachel Hinman
Senior Research Scientist
Nokia Research Lab
Palo Alto, California USA
Hinman

Our plan for today…
8:30am - Noon
What makes mobile UX different?
Three Design/Mobile UX Exercises:
• Identifying Mobile Needs
• Ideating in the Wild
• Creating a Good Hand
Noon – 1:30pm - LUNCH
1:30pm – 5:30pm
Mobile prototyping essentials
Three Mobile Prototyping Exercises
• Storyboarding
• Translating GUI to NUI
• Creating an In-Screen Prototype

Great Mobile Experiences:
1 are uniquely mobile
2 are sympathetic to context
3 speak their power
3

Our plan for today…
8:30am - Noon
What makes mobile UX different?
Three Design/Mobile UX Exercises:
• Identifying Mobile Needs
• Ideating in the Wild
• Creating a Good Hand
Noon – 1pm - LUNCH
1pm – 5pm
Mobile prototyping essentials
Three Mobile Prototyping Exercises
• Storyboarding
• Translating GUI to NUI
• Creating an In-Screen Prototype

Q: What makes mobile UX different?
Q:
5

A
6

7
:-(
A

A
8

?
9

10
10

Bad
Decision-Making
11

The final diamonds are where good
design decisions matter most…
…and where designers new to mobile
have the least domain specific skill
and confidence.
12

Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
13

Highly variable context and environment
Small screen size and limited text input
UI takes up the entire screen
Difficult to multi-task and easy to get lost
14

Designers new to mobile
A don‟t have the domain
specific skills or heuristics to
lean on.
15

Prototype
Prototype
Prototype
Prototype
Prototype
Prototype
Prototype
Prototype
16

PC Prototyping
is considered a
Luxury
A
17

Mobile Prototyping is
Essential
A
18

The best way
to develop those skills
is to prototype early
and often.
19

A
Prototypes are the ultimate
decision-making aid
20

Our plan for today…
Review the four “whys” of mobile prototyping
Identify the two genres of prototyping and
overview of six prototyping methods
Review the key differences between NUI
and GUI interfaces
Overview of animation principles that can be
incorporated into your mobile experiences
Three hands-on activities
21

Our plan for today…
Review the four “whys” of mobile prototyping
Identify the two genres of prototyping and
overview six prototyping methods
Review the key differences between NUI
and GUI interfaces
Overview of animation principles that can be
incorporated into your mobile experiences
Three hands-on activities
22

Our plan for today…
Review the four “whys” of mobile prototyping
Identify the two genres of prototyping and
overview six prototyping methods
Review the key differences between NUI
and GUI interfaces
Overview of animation principles that can be
incorporated into your mobile experiences
Three hands-on activities
23

Our plan for today…
Review the four “whys” of mobile prototyping
Identify the two genres of prototyping and
overview six prototyping methods
Review the key differences between NUI
and GUI interfaces
Overview of animation principles that can be
incorporated into your mobile experiences
Three hands-on activities
24

Our plan for today…
Review the four “whys” of mobile prototyping
Identify the two genres of prototyping and
overview six prototyping methods
Review the key differences between NUI
and GUI interfaces
Overview of animation principles that can be
incorporated into your mobile experiences
Three hands-on activities
25

Okay, let‟s get started!
26

Prototyping
27

“Whys” of prototyping
Improve your design decision-making
Communicate an Idea
Gather User Feedback
Explore the “Unknowns”
Fine-tune an Idea
28

Communicating an Idea or Experience
YouTube Video 29

Gather User Feedback
30

Explore the Unknowns
31

Fine-Tune an Idea
32

Two Genres
33

Experiential Prototyping
34

Tactical Prototyping
35

Experiential Prototyping:
Best suited for design explorations where:
1 You are working on a “broader”
mobile project.
2 Target mobile hardware and software
scope is unknown.
(perhaps being created).
3 The design space is relatively
unchartered.
36

Tactical Prototyping:
Best suited for design explorations where:
1 You are working on a “focused”
mobile project.
2 Target mobile hardware and software
scope is known.
3 The design space is relatively known.
37

Experiential Prototyping
38

39

40

Context Matters
41

Context will likely be
your blindside
42

Context Framework
43

Context Framework
44

Experiential Prototyping
will help you understand
context
45

Experiential Prototyping:
Best suited for design explorations where:
You are working on a “broader”
1 mobile project.
2 Target mobile hardware and software
scope is unknown.
(perhaps being created).
3 The design space is relatively
unchartered.

Experiential Prototypes
Body Storming
Speed Dating Prototypes
Storyboarding
Concept Videos

Experiential Prototypes
Body Storming
Speed Dating Prototypes
Storyboarding
Concept Videos

Bodystorming
49

Through Lines

In reality… people‟s lives are messy

Similar to improvisational theater, body storming
involves acting out possible scenarios or use
cases with actors and props. Unlike computer-
based technology that is logic based and only
makes visible the conditions that existed
before, people are
illogical, perceptive, aware, and self-correcting.
Body storming is a technique that helps capture
and harness these messy yet essential aspects
of human behavior and account for them in the
mobile design process.
56

1. Select groups of five to eight
participants in a troupe.
Photo by Christian Crumlish (xian), 2009 on Flickr 57

1. Select groups of five to eight
participants in a troupe.
2. Identify 3-5 experience
scenarios for your troupe to
“perform.”
Examples: Purchasing a cup of
coffee with my iPhone, selecting
which phone to purchase in
a carrier‟s store.
Photo by Christian Crumlish (xian), 2009 on Flickr 58

3. Every player must have a
role; there should be no
“trees” that are just for
background. Use large
cards that label the roles
people are playing.
59
Photo by Christian Crumlish (xian), 2009 on Flickr

4. Props can have
feelings, thoughts, and the
ability to speak. Use
thought-bubble cards to
show what a participant is
thinking versus saying.
Photo by Christian Crumlish (xian), 2009 on Flickr 60

5. Have a narrator or color commentator who
can explain things. The narrator can
pretend the scenario is like television,
using a remote to stop action, rewind,
or fast-forward.
Photo by Christian Crumlish (xian), 2009 on Flickr 61

6. De-brief after each scenario. What did
the group learn? What was surprising?
What seemed important? Capture what
you learned from the exercise and
discuss how you can integrate it into
what happens next.
Photo by Christian Crumlish (xian), 2009 on Flickr 62

Bodystorming will help you capture
the emotional tenor of mobile
interactions
63

Design in Context
64

Experiential Prototypes
Body Storming
Speed Dating Prototypes
Storyboarding
Concept Videos

Speed Dating Prototypes
Illustration courtesy of Scott Davidoff
Rapidly Exploring Application Design through Speed Dating 66

Scott Davidoff of CMU
•Few design tools
•High Cost of Failure
•Unpredictable social consequences
Rapidly Exploring Application Design through Speed Dating 67

Speed Dating Prototypes
Builds on three theories:
1 Abundance brings perspective.
Need to cross boundaries to know
2 they exist.
Multiple low-cost engagements with
3 multiple concepts enables a broader
perspective to emerge.
68

Step One
Identify most
promising
concepts
69

Step Two
Create storyboards
that
depict each concept
Illustration courtesy of Scott Davidoff
Rapidly Exploring Application Design through Speed Dating 70

Step Three
Present storyboards to
users & gather
feedback
71

Step Four
Create prototypes
Photo courtesy of Scott Davidoff
Rapidly Exploring Application Design through Speed Dating 72

Step Five
Conduct user enactments
with prototypes
Photo courtesy of Scott Davidoff
Rapidly Exploring Application Design through Speed Dating 73

Speed Dating Prototypes are
especially well-suited for gathering
user impressions of
a new-to-the-world experience
74

Experiential Prototypes
Body Storming
Speed Dating Prototypes
Storyboarding
Concept Videos

Storyboarding
76

77

Mobile UX Storyboarding
Identify the central idea(s) you are
trying to communicate.
78

Mobile UX Storyboarding
Identify the central idea(s) you are
trying to communicate.
Create a character and identify the key
issues he/she currently faces.
79

Mobile UX Storyboarding
Identify the central idea(s) you are
trying to communicate.
Create a character and identify the key
issues he/she currently faces.
Rough out a basic story.
80

Mobile UX Storyboarding
Identify the central idea(s) you are
trying to communicate.
Create a character and identify the key
issues he/she currently faces.
Rough out a basic story.
Start filling in the cells. Rough out the
complete story, then fill in details.
81

Mobile UX Storyboarding
Identify the central idea(s) you are
trying to communicate.
Create a character and identify the key
issues he/she currently faces.
Rough out the basic story
Start filling in the cells. Rough out the
complete story, then fill in details.
82

83

84

Your Design Challenge!
Storyboarding
1 Select one concept you‟d like to explore more
deeply using the storyboarding technique.
Storyboard one scenario using the templates
2 provided.
Remember to identify the key issues the
3 character faces and rough out the complete
story before filling in details.

30 Minutes

Experiential Prototypes
Body Storming
Speed Dating Prototypes
Storyboarding
Concept Videos

Concept Videos
Nokia 888 communicator concept phone design by Tamer Nakisci 91

92

93
93

Concept Videos
Pros
•High Impact
•Highly Shareable
•Good for High-Level
Ideas
•Technology still in
development
94

Concept Videos
Pros Cons
•High Impact •Resource Intensive!!!
•Highly Shareable •Skill Intensive
•Good for High-Level •Cultural Fit
Ideas
•Concept videos don‟t
•Technology still in make bad ideas good.
development
95

Tactical Prototyping

Tactical Prototypes
Sketching/Paper Prototyping
In-Screen Mobile Prototypes
Mobile Browser Prototypes
Keynote/Powerpoint Prototypes
Flash Prototype
Platform Specific Prototype
97

Tactical Prototypes
Sketching/Paper Prototyping
In-Screen Mobile Prototypes
Mobile Browser Prototypes
Keynote/Powerpoint Prototypes
Flash Prototype
Platform Specific Prototype
98

Sketching
99

Great mobile UIs
speak their power
100

Ruthless
Editing
101

A Brave NUI World
102

103

Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
104

We‟re reaching the edges
of what GUI can do
105

Most mobile smartphones
have touchscreens with
Natural User Interfaces
106

GUIs Become Brittle
on a Mobile Device
107

110

GUI/NUI Chasm
111

Key differences between
NUI and GUI
112

Defining Attributes of
GUIs…
113

GUI Mental Model =
Computer as tool
114

GUI = Recognition
“What you see is what you get”
115

GUI = Metaphorics, containment and place
116

GUIs = Heavy Chrome, Icons & Buttons
117

Defining Attributes of
NUIs…
118

NUI Mental Model =
Computer as media
119

NUI = Intuition
“What you do is what you get”
120

NUI = Fluid, Unmediated, and Organic
121

NUIs = Content is the Star
122

Highly variable context and environment
Small screen size and limited text input
UI takes up the entire screen
Difficult to multi-task and easy to get lost
123

GUI = Experiences are anchored
124

NUI = Experiences Unfold
125

NUIs Unfold Like a Game
126

NUIs Can Feel Anchor-less
127

128

Mobile Experiences Unfold
Patterns for how mobile experiences unfold
and progressively reveal their nature
1 The Nested Doll Pattern
2 The Hub and Spoke Pattern
3 The Bento Box Pattern
4 The Filtered View Pattern
129

Nested Doll Pattern
130

Hub and Spoke Pattern
131

Bento Box Pattern
132

Filtered View Pattern
133

A
Trick to unfolding =
Information boulders to pebbles
134

Your Design Challenge!
From GUI to NUI
1 Identify an interaction sequence you‟d like to
recreate using NUI principles.
2 Sketch out the interaction using the
templates provided.
3 Identify how you‟d like your mobile
experience to unfold.
135

REMEMBER!
It‟s easy to go crazy and try to do it all.
Instead, focus on applying what we‟ve covered…
Understanding the differences between
graphical and natural user interfaces.
Experimenting with how your mobile experience
can unfold and and progressively reveal its
nature.
Play around with the unfolding patterns that have
been presented… or invent some of your own.
136

137

30 Minutes

Paper In-Screen Prototypes
Following Process documented by Diego Pulidovia
UX Magazine – Paper In-Screen Prototypes
Photos courtesy of Diego Pulido and UX Magazine
139

1. Sketch screen layouts.
140
Photo courtesy of Diego Pulido and UX Magazine

1. Sketch screen layouts.
2. Scan or photograph
the sketches.
141
Photo courtesy of Diego Pulido and UX Magazine

1. Sketch screen layouts.
2. Scan or photograph
the sketches.
3. Making sizing
adjustments to the
files.
142
Photo courtesy of Diego Pulido and UX Magazine

4. Save the resized
images in a file format
supported by the mobile
device. Be mindful of the
sequencing of your
screens and label files
accordingly.
143
Photo courtesy of Diego Pulido and UX Magazine

4. Save the resized
images in a file format
supported by the mobile
device. Be mindful of the
sequencing of your
screens and label files
accordingly.
5. Import the files into the
mobile device‟s photo
gallery.
144
Photo courtesy of Diego Pulido and UX Magazine

4. Save the resized
images in a file format
supported by the mobile
device. Be mindful of the
sequencing of your
screens and label files
accordingly.
5. Import the files into the
mobile device‟s photo
gallery.
6. Click and swipe away.
145
Photo courtesy of Diego Pulido and UX Magazine

Your Design Challenge!
Create an in-screen prototype.
Hang your screen designs on the wall.
Photograph each design.
Transfer photos from the camera to computer
and make any sizing adjustments.
Sync images to your mobile device
and swipe away….
146

Tactical Prototypes
Sketching
In-Screen Mobile Prototypes
Mobile Browser Prototypes
Keynote/Powerpoint Prototypes
Flash Prototype
Platform Specific Prototype
147

Keynote/Powerpoint Prototypes
148

149

Reasons for Prototyping
in Keynote/Powerpoint
It‟s super efficient and fast!
Level of fidelity is high – gives you an end
result that looks and feels like a real app.
Supports *some* gestures and transitions.
It‟s as close as you can get to the real thing
without digging into code.
150

151

Tactical Prototypes
Sketching
In-Screen Mobile Prototypes
Mobile Browser Prototypes
Keynote/Powerpoint Prototypes
Flash Prototype
Platform Specific Prototype
152

Emergent Mobile Topics
1 Shapeshifting
2 A Brave NUI World
3 Comfortable Computing

Shapeshifting

156

“We made the web
in the image of
ourselves, and in
the U.S., that
means OBESE.”
~Jason Grigsby

A
158

159

Q:
“I think a lot of web design in the
past five to ten years is actually
Q:
just a reflection of print again.
We‟ve been designing for one
context, which isn‟t much better
than a PDF document.”
~ Bryan Rieger
160

Q: “Our obsession with layout
(carried over from print design)
Q:
keeps us from seizing much
bigger opportunities on mobile.”
~ Luke Wroblewski
161

162

Shapeshifting

Plans & Situated Action
Mutual Reconfiguration

Q: Suchman‟s theory of mutual
reconfiguration suggests a person‟s
Q:
capacity to act (their agency) is
reconfiguredwhen it comes into contact
with another thing or person -
thathuman action is constantly
constructed and reconstructed
from dynamic interactions with the
material and social worlds.

168

Q:
Q:
Two
Design Implications

Q:
Q:
1. Shift in contextual assumptions

Q:
Q:
2. Shift in our sensibilities
around content as a design material

Q:
Q:
1. Shift in contextual assumptions

A

A
Throughout the design process,
our work should be situated in
the contexts where it will be used.

Go to the Gemba

Go to the Gemba

Go to the Gemba

Q:
Q:
2. Shift in our sensibilities
around content as a design material

Design as the manipulation of materials.

Q:
Q:
Pages and screens
are not our design material

Content as a design material.

“Right now many designers end up
focusing a lot of energy on the overlying
Q:
view – the whole template and look and
feel. But the smaller the screen gets, the
Q:
less that stuff matters.
One of the most important things we‟ve
started looking at is writing and working
with APIs rather than designing „pages‟
for one context.”
~Stephanie Rieger

“For so much digital content, there is no
good metaphor to render anymore – the
content is just information, text and
images – so new approaches to
Q:
interaction and visual UI design are
needed.”
~Mike Kruzeniski

Emergent Mobile Topics
1 Shapeshifting
2 A Brave NUI World
3 Comfortable Computing

Mark Weiser

Q:
Q:

“The most profound technologies
Q:
are those that disappear.
Q:
They weave themselves into the
fabric of everyday life until they are
indistinguishable from it.”
~ Mark Weiser
The Computer for the 21st Century

Q:
Q:
Tab Pad Yard-Sized Board
1991

2010

Mobile devices are
the gateway drug for ubicomp

Following toddlers into the future

“I like cuddling up in bed with Netflix
Q:
on the iPad instead of sitting in front
of the TV. It‟s more comfortable to
Q:
go to bed with a movie the same
way I used to go to bed with a
book”
~ Norbert
iPad Study Participant

“It‟s almost like my blankie…
Q:
I curl up in bed with it, or on the
couch. I usually have it with
Q:
me, regardless of extenuating
circumstances ”
~ Erin
iPad Study Participant

“It’s almost like my blankie…”

Say Goodbye to Done

This should look familiar…
213

This should look familiar…
The web has evolved around a
task-efficiency model.
Mobile can be different.
214

Tasks are about completion…
215

Tasks are about completion…
Possibilities are interactions that
accrue over time…
216

Tasks are about completion…
Possibilities are interactions that
accrue over time…
… or facilitate
exploration…
217

Tasks are about completion…
Possibilities are interactions that
accrue over time…
..or are about
… or facilitate SENSING
exploration… INTENT!
218

219

220

221

222

223

224

Fidelity
226

Failure
227

Prototyping is not a Panacea
228

PC Prototyping
is considered a
Luxury
A

Mobile Prototyping is
Essential
A

Great Mobile Experiences:
1 are uniquely mobile
2 are sympathetic to context
3 speak their power
3

Mobile presents an
opportunity to invent new
ways for users to interact
with information.
232

Thank you!
Email:
rachel.hinman@nokia.com
Templates and Online Resources:
www.rachelhinman.com/mobile_prototyping_essentials

Oh! By the way, I‟m writing a book..
The Mobile Frontier
A Guide for Designing
Mobile Experiences
Expected Publication: May 2012
Follow along…