mobile prototyping essentials
Post on 21-Apr-2017
41.715 Views
Preview:
TRANSCRIPT
UX Australia 2011Mobile Prototyping
Essentials
Rachel HinmanSenior Research Scientist Nokia Research Lab Palo Alto, California USA
Hinman
2
Q:
What makes mobile UX different?
Q:
3
A
4
A :-(
5
A
6
?7
88
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
12
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
A
Designers new to mobile don’t have the domain specific skills or heuristics to lean on.
13
PrototypePrototypePrototypePrototypePrototypePrototypePrototypePrototype
14
A
PC Prototypingis considered a Luxur
y15
A
Mobile Prototyping is
Essential16
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…Review the four “whys” of mobile prototypingIdentify the two genres of prototyping and overview of six prototyping methodsReview the key differences between NUI and GUI interfacesOverview of animation principles that can be incorporated into your mobile experiencesThree hands-on activities
19
Our plan for today…Review the four “whys” of mobile prototypingIdentify the two genres of prototyping and overview of six prototyping methodsReview the key differences between NUI and GUI interfacesOverview of animation principles that can be incorporated into your mobile experiencesThree hands-on activities
20
Our plan for today…Review the four “whys” of mobile prototypingIdentify the two genres of prototyping and overview of six prototyping methodsReview the key differences between NUI and GUI interfacesOverview of animation principles that can be incorporated into your mobile experiencesThree hands-on activities
21
Our plan for today…Review the four “whys” of mobile prototypingIdentify the two genres of prototyping and overview of six prototyping methodsReview the key differences between NUI and GUI interfacesOverview of animation principles that can be incorporated into your mobile experiencesThree hands-on activities
22
Our plan for today…Review the four “whys” of mobile prototypingIdentify the two genres of prototyping and overview of six prototyping methodsReview the key differences between NUI and GUI interfacesOverview of animation principles that can be incorporated into your mobile experiencesThree hands-on activities
23
Okay, let’s get started!
24
Prototyping
25
Explore the “Unknowns”
“Whys” of prototypingImprove your design decision-making
steal this slide!
Gather User Feedback
Communicate an Idea
Fine-tune an Idea26
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
Experiential Prototyping:Best suited for design explorations where:
Target mobile hardware and software scope is unknown.(perhaps being created).
2
steal this slide!
The design space is relatively unchartered.
334
You are working on a “focused” mobile project.1
Tactical Prototyping:Best suited for design explorations where:
Target mobile hardware and software scope is known.
2
steal this slide!
The design space is relatively known.
335
Experiential Prototyping
36
37
38
39
Context Matters
40
Context will likely beyour blindside
Context Framework steal this slide!
41
Context Framework steal this slide!
42
43
Experiential Prototypingwill help you understand
context
You are working on a “broader” mobile project.
Experiential Prototyping:Best suited for design explorations where:
Target mobile hardware and software scope is unknown.(perhaps being created).
The design space is relatively unchartered.
1
2
3
Concept Videos
Experiential Prototypes
Storyboarding
Speed Dating Prototypes
Body Storming
46
Bodystorming
Through Lines
In reality… people’s lives are messy
53
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.
Photo by Christian Crumlish (xian), 2009 on Flickr 54
1. Select groups of five to eight participants in a troupe.
55
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
56
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.
Photo by Christian Crumlish (xian), 2009 on Flickr
57
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
58
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
59
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
60
Bodystorming will help you capture the emotional tenor of
mobile interactions
61
Design in Context
Concept Videos
Experiential Prototypes
Storyboarding
Speed Dating Prototypes
Body Storming
63
Speed Dating Prototypes
Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
64
Scott Davidoff of CMU• Few design tools
• High Cost of Failure
• Unpredictable social consequences
Rapidly Exploring Application Design through Speed Dating
Abundance brings perspective.
Speed Dating PrototypesBuilds on three theories:
Need to cross boundaries to know they exist.
Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge.
1
2
3
65
66
Step OneIdentify most promisingconcepts
Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 67
Step TwoCreate storyboards thatdepict each concept
68
Step ThreePresent storyboards tousers & gather feedback
Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 69
Step FourCreate prototypes
Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 70
Step FiveConduct user enactments with prototypes
71
Speed Dating Prototypes are especially well-suited for gathering user impressions of a new-to-the-world experience
Concept Videos
Experiential Prototypes
Storyboarding
Speed Dating Prototypes
Body Storming
Concept Videos
Nokia 888 communicator concept phone design by Tamer Nakisci 73
74
7575
• High Impact
• Highly Shareable
• Good for High-Level Ideas
• Technology still in development
Concept VideosPros
76
• High Impact
• Highly Shareable
• Good for High-Level Ideas
• Technology still in development
Concept VideosPros
• Resource Intensive!!!
• Skill Intensive
• Cultural Fit
• Concept videos don’t make bad ideas good.
Cons
77
78
The first step of creating a concept video is….
Concept Videos
Experiential Prototypes
Storyboarding
Speed Dating Prototypes
Body Storming
79
Storyboarding
80
81
Mobile UX StoryboardingIdentify the central idea(s) you are trying to communicate.
82
Mobile UX StoryboardingIdentify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces.
83
Mobile UX StoryboardingIdentify the central idea(s) you are trying to communicate.
Rough out a basic story.
Create a character and identify the key issues he/she currently faces.
84
Start filling in the cells. Rough out the complete story, then fill in details.
Mobile UX StoryboardingIdentify the central idea(s) you are trying to communicate.
Rough out a basic story.
Create a character and identify the key issues he/she currently faces.
85
Start filling in the cells. Rough out the complete story, then fill in details.
Mobile UX StoryboardingIdentify the central idea(s) you are trying to communicate.
Rough out the basic story
Create a character and identify the key issues he/she currently faces.
86
87
88
ActivityYour Design Challenge!Storyboarding
89
ActivityYour Design Challenge!Storyboarding: Ideas
90
ActivityYour Design Challenge!Storyboarding
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
Flash Prototype
Tactical Prototypes
In-Screen Mobile Prototypes
steal this slide!
Keynote/Powerpoint Prototypes
Mobile Browser Prototypes
Platform Specific Prototype
Sketching/Paper Prototyping
93
Flash Prototype
Tactical Prototypes
In-Screen Mobile Prototypes
steal this slide!
Keynote/Powerpoint Prototypes
Mobile Browser Prototypes
Platform Specific Prototype
Sketching/Paper Prototyping
94
Sketching
95
Great mobile UIsspeak their power
96
AHuh?Q
:
97
98
99
100
101
We can annotate expectations in the web world
Add to cart
Free two-day shipping
Shipping!
Collectible!
Maybe a kindle!
Look inside the book
REALLY!Look inside the book
Get it new OR used!
Sell mine
102
103
104
Design for partial attention and interruption
AHow do I create mobile interfaces that “speak their power”?
Q:
105
Edit!!!
106
RuthlessEditing
107
108
A Brave NUI World
109
110
Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
111
We’re reaching the edges of what GUI can do
112
Most mobile smartphones have touchscreens with Natural User Interfaces
113
GUIs Become Brittleon a Mobile Device
116
117
GUI/NUI Chasm
Key differences between NUI and GUI
118
Defining Attributes of
GUIs…
119
120
GUI Mental Model = Computer as tool
121
GUI = Recognition“What you see is what you
get”
GUI = Metaphorics, containment and place
122
GUIs = Heavy Chrome, Icons & Buttons
123
Defining Attributes of
NUIs…
124
125
NUI Mental Model = Computer as media
126
NUI = Intuition“What you do is what you
get”
127
NUI = Fluid, Unmediated, and Organic
NUIs = Content is the Star128
129
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
GUI = Experiences are anchored
130
131
NUI = Experiences Unfold
132
NUIs Unfold Like a Game
NUIs Can Feel Anchor-less
133
134
The Nested Doll Pattern1
Mobile Experiences UnfoldPatterns for how mobile experiences unfold and progressively reveal their nature
steal this slide!
The Hub and Spoke Pattern2
The Bento Box Pattern3
The Filtered View Pattern4135
136
Nested Doll Pattern
137
Hub and Spoke Pattern
138
Bento Box Pattern
139
Filtered View Pattern
A
140
Trick to unfolding = Information boulders to pebbles
A
141
A
142
ActivityYour Design Challenge!From GUI to NUI
143
ActivityYour Design Challenge!From GUI to NUI
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
147
ActivityREMEMBER!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.
148
149
Paper In-Screen Prototypes
Following Process documented by Diego Pulido via UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine
1. Sketch screen layouts.
Photo courtesy of Diego Pulido and UX Magazine 150
1. Sketch screen layouts. 2. Scan or photograph the sketches.
Photo courtesy of Diego Pulido and UX Magazine 151
1. Sketch screen layouts. 2. Scan or photograph the sketches.
3. Making sizing adjustments to the files.
Photo courtesy of Diego Pulido and UX Magazine
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.
Photo courtesy of Diego Pulido and UX Magazine 153
154
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.
Photo courtesy of Diego Pulido and UX Magazine
155
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.
Photo courtesy of Diego Pulido and UX Magazine
156
ActivityYour 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….
Flash Prototype
Tactical Prototypes
In-Screen Mobile Prototypes
steal this slide!
Keynote/Powerpoint Prototypes
Mobile Browser Prototypes
Platform Specific Prototype
Sketching
157
158
Paper Prototyping
159
160
Mobile Browser Prototypes
161
Keynote/Powerpoint Prototypes
162
LOGOTagline
163Edit
LOGOTagline
164Edit
Sydney Opera HouseThere 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.
LOGOTagline
165Edit
Sydney Opera HouseThere 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.
LOGOTagline
166Edit
Sydney Opera HouseThere 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.
LOGOTagline
167Edit
LOGOTagline
167Edit
Sydney Opera HouseThere 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.
LOGOTagline
168Edit
Supports *some* gestures and transitions.
Reasons for Prototyping in Keynote/Powerpoint
steal this slide!
Level of fidelity is high – gives you an end result that looks and feels like a real app.
It’s as close as you can get to the real thing without digging into code.
It’s super efficient and fast!
169
Supports *some* gestures and transitions.
Reasons for Prototyping in Keynote/Powerpoint
steal this slide!
Level of fidelity is high – gives you an end result that looks and feels like a real app.
It’s as close as you can get to the real thing without digging into code.
It’s super efficient and fast!
170
Motion:New Design Material
171
Animation & TransitionsA new design elements that can:
steal this slide!
Help users form a mental model of how information will “unfold”.
Help make your experience feel more intuitive for users.
Reinforce cognition.
Provide cues for interaction.
172
Twelve Basic Principles of Animation
173
Principle OneSquash and Stretch
174
Principle OneSquash and Stretch
175
Principle TwoAnticipation
176
Principle TwoAnticipation
177
Principle ThreeStaging
178
Principle ThreeStaging
179
Principle FourStraight Ahead and Pose to Pose
180
Principle FourStraight Ahead and Pose to Pose
181
Principle FiveFollow Throughand Overlapping Action
182
183
Principle FiveFollow Throughand Overlapping Action
Principle SixSlow in and Out
184
Principle SixSlow in and Out
185
Principle SevenArcs
186
Principle SevenArcs
187
Principle EightSecondary Action
188
Principle EightSecondary Action
189
Principle NineTiming
190
Principle NineTiming
191
Principle TenExaggeration
192
Principle TenExaggeration
193
Principle Eleven and TwelveSolid Drawing and Appeal
194
195Sketches Courtesy of Greg NudelmenStoryboarding iPad Transitions
Specifying Transitions
Transitions and AnimationMethods for specifying motion:
Build a prototype of key motion phrases using PowerPoint, Keynote or other prototyping tool.
Include specifications on wireframes.
196
Hand drawn sketches.
197
Motion is an Art.There are no formulas.
198
Fidelity
199
Failure
200
Prototyping is not a Panacea
A
PC Prototypingis considered a Luxur
y
A
Mobile Prototyping is
Essential
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 FrontierA Guide for Designing Mobile Experiences
Expected Publication: late 2011
Follow along…
Q?
206
Different platforms express characteristics differently
top related