Mobile Prototyping Essentials

Title
Mobile Prototyping Essentials
UX Australia 2011
Rachel Hinman
Senior Research Scientist
Nokia Research Lab
Palo Alto, California USA
Hinman

I used to be a web designer, too
2

What makes mobile UX different?
Q:
Q:
3

A
What are the similarities
4

A
:-(
5

A
6

8
Web designers know how to work in a rapidly evolving field
8

Bad Decision-Making
9

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

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

Differences in the mobile environment
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
12

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

Prototype
Prototype
Prototype
Prototype
Prototype
Prototype
Prototype
Prototype
Prototype
14

PC Prototypingis considered a
A
Um… duh!
Luxury
15

Mobile Prototyping is
Essential
A
16

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

A
Prototypes are the ultimate
decision-making aid
18

Our plan for today…
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
19

Our plan for today
20

Our plan for today
21

Our plan for today
22

Our plan for today
23

Okay, let’s get started!
Okay… let’s get started
24

Prototyping
25

steal this slide!
“Whys” of prototyping
Improve your design decision-making
Communicate an Idea
Gather User Feedback
Explore the “Unknowns”
Fine-tune an Idea
26

Communicating an Idea or Experience
YouTube Video
27

Hypothesis vs. Agenda
Gather User Feedback
28

Explore the Unknowns
29

Fine-Tune an Idea
30

Two Genres
31

Experiential Prototyping
32

Tactical Prototyping
33

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

You are working on a “focused” mobile project.
1
Tactical Prototyping:
steal this slide!
2
Target mobile hardware and software scope is known.
3
The design space is relatively known.
35

Experiential Prototyping
36

Context Matters
39

Context will likely beyour blindside
40

Context Framework
Context Framework
steal this slide!
41

Context Framework
Context Framework
steal this slide!
42

Experiential Prototypingwill help you understand
context
43

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

What we learned from the web
Experiential Prototypes
Body Storming
Speed Dating Prototypes
Concept Videos
Storyboarding

Paper Prototype example
Bodystorming
46

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.
53

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

Select groups of five to eight participants in a troupe.
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.
55

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.

56

4. Props can have feelings, thoughts, and the ability to speak. Use thought-bubble cards to show what a participant is thinking versus saying.
57

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.
58

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.
59

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

Design in Context
61

Body Storming
Concept Videos
Storyboarding

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

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

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

“in the wild” ideation
Step One
Identify most promising
concepts
66

Step Two
Create storyboards thatdepict each concept
Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
67

Step Three
Present storyboards tousers & gather feedback
68

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

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

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

Body Storming
Concept Videos
Storyboarding

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

74

75
75

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

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

The first step of creating a concept video is….
78

Body Storming
Concept Videos
Storyboarding
79

Storyboarding
80

“in the wild” ideation
81

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

Create a character and identify the key issues he/she currently faces.
83

Rough out a basic story.
84

Rough out a basic story.
Start filling in the cells. Rough out the complete story, then fill in details.
85

Rough out the basic story
Start filling in the cells. Rough out the complete story, then fill in details.
86

87

88

Pivoting people through information
Your Design Challenge!
Storyboarding
Activity
89

Storyboarding: Ideas
Activity
90

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

Tactical Prototyping

steal this slide!
Tactical Prototypes
Sketching/Paper Prototyping
In-Screen Mobile Prototypes
Mobile Browser Prototypes
Keynote/Powerpoint Prototypes
Flash Prototype
Platform Specific Prototype
93

steal this slide!
Tactical Prototypes
Sketching/Paper Prototyping
Flash Prototype
94

Sketching
95

Great mobile UIs
speak their power
96

Speak their power?
Huh?
Q:
A
97

A light switch
98

Shopping cart
99

We can annotate expectations in the web world
We can annotate expectations
in the web world
101

We can annotate expectations in the web world
REALLY!Look inside the book
Free two-day shipping
Look inside the book
Get it new OR used!
Sell mine
Add to cart
Shipping!
Collectible!
Maybe a kindle!
102

Options have to be apparent and intuitive in mobile for people to
103

104
Text entry will never be easy
Design for partial attention andinterruption

How do you make interfaces that speak their power
How do I create mobile interfaces that “speak their power”?
Q:
A
105

Edit!!!
106

RuthlessEditing
107

108
Wireframe
A Brave NUI World

Wireframe
109

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

111
Wireframe
We’re reaching the edges
of what GUI can do

Wireframe
Most mobile smartphones
have touchscreens with Natural User Interfaces
112

113
Wireframe
GUIs Become Brittle
on a Mobile Device

116
Wireframe

Wireframe
GUI/NUI Chasm
117

Key differences between NUI and GUI
Okay… let’s get started
118

Defining Attributes of
GUIs…
119

GUI Mental Model =
Computer as tool
120

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

Wireframe
GUI = Metaphorics, containment and place
122

GUIs = Heavy Chrome, Icons & Buttons
123

Defining Attributes of
NUIs…
124

NUI Mental Model =
Computer as media
125

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

127
Wireframe
NUI = Fluid, Unmediated, and Organic

NUIs = Content is the Star
It’s like a game of cards
128

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
129

GUI = Experiences are anchored
130

NUI = Experiences Unfold
131

NUIs Unfold Like a Game
132

NUIs Can Feel Anchor-less
133

134

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

Nested Doll Pattern
136

Hub and Spoke Pattern
137

Bento Box Pattern
138

Filtered View Pattern
139

A
Trick to unfolding =
Information boulders to pebbles
140

A
141

From GUI to NUI
Activity
143

From GUI to NUI
Activity
Identify an interaction sequence you’d like to recreate using NUI principles.
Sketch out the interaction using the templates provided.
Identify how you’d like your mobile experience to unfold.
1
2
3
144

145

146

REMEMBER!
It’s easy to go crazy and try to do it all.Instead, focus on applying what we’ve covered…
Activity
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.
147

148

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

1. Sketch screen layouts.

150
Photo courtesy of Diego Pulido and UX Magazine


2. Scan or photograph
the sketches.

151


2. Scan or photograph
the sketches.
3. Making sizing
adjustments to the
files.

152

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.

153

5. Import the files into the mobile device’s photo gallery.

154

5. Import the files into the mobile device’s photo gallery.
6. Click and swipe away.

155

Create an in-screen prototype.
Activity
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….
156

steal this slide!
Tactical Prototypes
Sketching
Flash Prototype
157

Paper Prototyping
158

160

161

162

LOGO
Tagline
Edit
163

LOGO
Tagline
Sydney Opera House
There is no doubt that the Sydney Opera House is his masterpiece. It is one of the great iconic buildings of the 20th century, an image of great beauty that has become known throughout the world – a symbol for not only a city, but a whole country and continent.
Edit
164

LOGO
Tagline
Sydney Opera House
Edit
165

LOGO
Tagline
Sydney Opera House
Edit
166

LOGO
Tagline
LOGO
Tagline
Sydney Opera House
Edit
Edit
167
167

LOGO
Tagline
Edit
168

Reasons for Prototyping in Keynote/Powerpoint
steal this slide!
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.
169

Reasons for Prototyping in Keynote/Powerpoint
steal this slide!
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.
170

Motion:
New Design Material
171

Animation & TransitionsA new design elements that can:
steal this slide!
Reinforce cognition.
Help users form a mental model of how information will “unfold”.
Provide cues for interaction.
Help make your experience feel more intuitive for users.
172

Twelve Basic Principles
of Animation
173

Principle One
Squash and Stretch
174

Principle One
Squash and Stretch
175

Principle Two
Anticipation
176

Principle Two
Anticipation
177

Principle Three
Staging
178

Principle Three
Staging
179

Principle Four
Straight Ahead
and Pose to Pose
180

Principle Four
Straight Ahead
and Pose to Pose
181

Principle Five
Follow Through
and Overlapping Action
182

Principle Five
Follow Through
and Overlapping Action
183

Principle Six
Slow in and Out
184

Principle Six
Slow in and Out
185

Principle Seven
Arcs
186

Principle Seven
Arcs
187

Principle Eight
Secondary Action
188

Principle Eight
Secondary Action
189

Principle Nine
Timing
190

Principle Nine
Timing
191

Principle Ten
Exaggeration
192

Principle Ten
Exaggeration
193

Principle Eleven and Twelve
Solid Drawing and Appeal
194

Specifying Transitions
Sketches Courtesy of Greg NudelmenStoryboarding iPad Transitions
195

Transitions and AnimationMethods for specifying motion:
Hand drawn sketches.
Include specifications on wireframes.
Build a prototype of key motion phrases using PowerPoint, Keynote or other prototyping tool.
196

Motion is an Art.
There are no formulas.
197

Fidelity
198

Failure
199

Prototyping is not a Panacea
200

PC Prototypingis considered a
A
Um… duh!
Luxury

Mobile Prototyping is
A
Um… duh!
Essential

Thanks, and next up…
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: late 2011
Follow along…

Q?
Q&A: final break

Different platforms express characteristics differently
206
Wireframe

http://blog.i2fly.com	1071
http://www.scoop.it	474
http://www.usercentered.de	370
http://kobewan.com	246
http://www.conseilsmarketing.fr	214
http://lonewolflibrarian.wordpress.com	169
http://uxaustralia.com.au	157
http://www.rosenfeldmedia.com	145
http://rosenfeldmedia.com	121
http://lmalita.wordpress.com	87
http://crossthebreeze.posterous.com	81
http://localhost	77
http://www.macromedios.net	65
http://paper.li	54
http://grap2256.posterous.com	51
http://feeds.feedburner.com	39
http://user-experience-specialist.blogspot.com	35
https://twitter.com	34
http://us-w1.rockmelt.com	34
http://keenux.com	33
http://iml.isobarkorea.co.kr	27
http://www.twylah.com	20
http://ashtergroup.blogspot.com	19
http://www.uxgeek.co	15
http://lanyrd.com	15
http://eventifier.co	13
http://www.conseilsmarketing.com	12
http://titulo5.uprh.edu	10
http://www.idestudio.kr	5
http://www.newsblur.com	5
http://sapientnyxd.posterous.com	4
http://www.uxabilidad.com	4
http://nowlab.isobarkorea.co.kr	3
http://posterous.com	3
http://www.slideshare.net	3
http://www.linkedin.com	2
http://uxd.isobarkorea.co.kr	2
http://statichtmlapp.heroku.com	2
http://user-experience-specialist.blogspot.de	2
http://dandandans.dropmark.com	2
http://blogs.yoni.bz	1
http://instacurate.com	1
http://macromedios.net	1
http://michelleadams.posterous.com	1
http://192.168.111.57	1
http://trunk.ly	1
http://tweetedtimes.com	1
https://www.airset.com	1
http://www.sonesu.com	1
http://storify.com	1
http://bottlenose.com	1

Mobile Prototyping Essentials

by Rachel Hinman

Accessibility

Categories

Upload Details

Usage Rights

51 Embeds 3,736

Statistics

Mobile Prototyping Essentials Presentation Transcript