mobile prototyping essentials workshop: part 2
DESCRIPTION
TRANSCRIPT
Rachel HinmanSenior Research Scientist Nokia Research Lab Palo Alto, California USA
Hinman
Part II
Mobile Prototyping Essentials
Our plan for today…8:30am - Noon
What makes mobile UX different?Two Design/Mobile UX Exercises:• Identifying Mobile Needs• Ideating in the Wild
1:30pm – 5:30pm
Mobile prototyping essentialsThree Mobile Prototyping Exercises• Storyboarding• Practice Ruthless Editing/Translating GUI to NUI• Creating an In-Screen Prototype
Noon – 1pm - LUNCH
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
A
…and their instincts are not tuned to the nuance of mobile.
14
Try starting with instinct and intuition
AInstinct nounA natural or innate impulse, inclination, or tendency.
16
A
PC Prototypingis considered a
Luxury
17
ADesign involves
Instincts
18
A
Mobile Prototyping is
Essential
19
APrototyping
will help you develop
Mobile Instincts
20
A
21
ADesign involves
Instincts
22
APrototyping
will help you develop
Mobile Instincts
23
Our plan for this afternoon…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 interfaces
Overview of animation principles that can be incorporated into your mobile experiencesThree hands-on activities
24
Review the four “whys” of mobile prototypingIdentify 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 experiencesThree hands-on activities
25
Our plan for this afternoon…
Review the four “whys” of mobile prototypingIdentify 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 experiencesThree hands-on activities
26
Our plan for this afternoon…
Review the four “whys” of mobile prototypingIdentify the two genres of prototyping and overview six prototyping methods
Review the key differences between NUI and GUI interfaces
Three hands-on activities
27
Our plan for this afternoon…
Okay, let’s get started!
28
Prototyping
29
Explore the “Unknowns”
“Whys” of prototyping
Improve your design decision-making
steal this slide!
Gather User Feedback
Communicate an Idea
Fine-tune an Idea
30
Gather User Feedback
32
Explore the Unknowns
33
Fine-Tune an Idea
34
Two Genres
35
Experiential Prototyping
36
Tactical Prototyping
37
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.
338
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.
339
Experiential Prototyping
40
41
42
43
Context Matters
44
Context will likely beyour blindside
45
Experiential Prototypingwill help you understand
context
Concept Videos
Experiential Prototypes
Storyboarding
Speed Dating Prototypes
Body Storming
Concept Videos
Experiential Prototypes
Storyboarding
Speed Dating Prototypes
Body Storming
Concept Videos
Experiential Prototypes
Storyboarding
Speed Dating Prototypes
Body Storming
Q:
“…users are just trying to muddle through situations in their lives. They often act without rationalizing.”
~ Andrew HintonInteractions 2012
Q:
Plans & Situated Action
Mutual Reconfiguration
Q:
Suchman’s theory of mutual reconfiguration suggests a person’s capacity to act (their agency) is reconfigured when it comes into contact with another thing or person - that human action is constantly constructed and reconstructed from dynamic interactions with the material and social worlds.
Q:
54
55
57
Bodystorming
58
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
59
1. Select groups of five to eight participants in a troupe.
60
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
61
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
62
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
63
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
64
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
65
Bodystorming will help you capture the emotional tenor of
mobile interactions
66
Design in Context
Concept Videos
Experiential Prototypes
Storyboarding
Speed Dating Prototypes
Body Storming
Storyboarding
68
Why Storyboard?
69
1. In mobile, Context Matters
70
Even in situations in which a spirit of exploration and freedom exist, where faculty are free to experiment to work beyond physical
and social constraints, our cognitive habits often get in the
way.
Marshall McLuhan called it “the rear-view mirror effect,” noting that “We see the world through a
rear-view mirror. We march backwards into the future.”
“Hey, I’ve got this great idea …”
2. Qualify ideas
72
73
Mobile UX StoryboardingIdentify the central idea(s) you are trying to communicate.
74
Mobile UX StoryboardingIdentify the central idea(s) you are trying to communicate.
Create a character and identify the key issues he/she currently faces.
75
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.
76
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.
77
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.
78
79
80
81
ActivitySelect a concept…
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
30 Minutes
Concept Videos
Experiential Prototypes
Storyboarding
Speed Dating Prototypes
Body Storming
88
Speed Dating Prototypes
Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
89
Scott Davidoff of CMU
• Few design tools
• High Cost of Failure
• Unpredictable social consequences
Rapidly Exploring Application Design through Speed Dating
Concept Videos
Experiential Prototypes
Storyboarding
Speed Dating Prototypes
Body Storming
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
91
92
Step One
Identify most promisingconcepts
Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 93
Step Two
Create storyboards thatdepict each concept
94
Step Three
Present storyboards tousers & gather feedback
Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 95
Step Four
Create prototypes
Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 96
Step Five
Conduct user enactments with prototypes
97
Speed Dating Prototypes are especially well-suited for gathering user impressions of a new-to-the-world experience
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
99
Flash Prototype
Tactical Prototypes
In-Screen Mobile Prototypes
steal this slide!
Keynote/Powerpoint Prototypes
Mobile Browser Prototypes
Platform Specific Prototype
Sketching/Paper Prototyping
100
Great mobile UIsspeak their power
101
Already talked about….
Edit!!!
102
Already talked about….
RuthlessEditing
103
Already talked about….
A
104
Already talked about….
105
A Brave NUI World
106
107
Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
108
We’re reaching the edges of what GUI can do
109
Most mobile smartphones have touchscreens with Natural User Interfaces
110
GUIs Become Brittleon a Mobile Device
113
Eight Principles of NUIs
1. Principle of Performance Aesthetics
2. Principle of Direct Manipulation
3. Principle of Scaffolding
4. Principle of Contextual Environments
5. Principle of Super Real
6. Principle of Social Interaction
7. Principle of Spatial Representation
8. Principle of Seamlessness
115
1. Principle of Performance Aesthetics
NUI experiences should be like an ocean voyage, the pleasure comes from the interaction, not the accomplishment.
Example:Part instrument, part composition and part artwork, the iPhone application Bloom enables users to create elaborate patterns and unique melodies by simply tapping on the screen
116
2. Principle of Direct Manipulation
Touch screens and gestural interaction functionality enable users to feel like they are physically touching and manipulating information with their fingertips. Example:The scrolling gesture is an example of the Principle of Direct manipulation
117
3. Principle of Scaffolding
Scaffolding is strong cue or guide that sets a user’s expectation by giving them an indication of how the interaction will unfold.
Example:The graphics that surround objects as the are placed on a Surface Table are an example of scaffolding.
118
4. Principle of Contextual Environments
Unlike GUIs that will present a user with the same set of options regardless of the context it is in, NUIs are responsive to the environment and suggests what the next interaction should be.
Example:Most mobile devices can locate themselves in time and space, and present interfaces that adapt to the orientation of the device.
119
5. Principle of the Super Real
Unlike GUIs that contains information in a cascading series of windows that resemble sheets of paper, successful NUIs extend objects in a logical way into the world of magic.
Example:Gestures like “pinch/zoom” are a logical extension into the world of magic
120
6. Principle of Social Interaction
Unlike GUI laptops that are optimized for individual use, systems with larger NUI formats like the Microsoft Surface Table or tablets, like the iPad, lend themselves to social computing experiences.
Example:Matt Jones of BERG Design Consultancy created an UI iPad sketch that explores the passable and sharable nature of the iPad as an object
121
7. Principle of Spatial Representation
Unlike GUI systems, where an icon serves as visual representation of information, NUIs represent information as objects. Example:NUI objects have auras, like attraction affordances pictured in this Surface Table application.
122
8. Principle of Seamlessness
Touchscreens, sensors embedded in hardware, and the use of gestural UIs allow NUI interactions to feel seamless for users because interactions are direct. There are fewer barriers between the user and information. Example:Coverflow UI on the iPhone is a seamless way to navigate content
123
GUI/NUI Chasm
Q:
Q:
Key differences between NUI and GUI
125
Defining Attributes of
GUIs…
126
127
GUI Mental Model = Computer as tool
128
GUI = Recognition“What you see is what you
get”
GUI = Metaphorics, containment and place
129
GUIs = Heavy Chrome, Icons & Buttons
130
Defining Attributes of
NUIs…
131
132
NUI Mental Model = Computer as media
133
NUI = Intuition“What you do is what you
get”
134
NUI = Fluid, Unmediated, and Organic
NUIs = Content is the Star
135
GUI = Experiences are anchored
136
137
NUI = Experiences Unfold
138
NUIs Unfold Like a Game
NUIs Can Feel Anchor-less
139
140
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 Pattern4141
142
Nested Doll Pattern
143
Hub and Spoke Pattern
144
Bento Box Pattern
145
Filtered View Pattern
ActivityDesign 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
146
147
148
149
150
151
152
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.
NUI characteristics:• Computer as Media • What you DO is what you get
• Content is the interface • Unfolding
GUI to NUI TranslationFocus on....
Boulder to Pebbles - Create UIs that speak their power with Ruthless Editing!
NUI Unfolding Patterns• Nested Doll • Hub and Spoke
• Bento Box • Filtered View
30 Minutes
155
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 Magazine156
1. Sketch screen layouts. 2. Scan or photograph the sketches.
Photo courtesy of Diego Pulido and UX Magazine157
1. Sketch screen layouts. 2. Scan or photograph the sketches.
3. Making sizing adjustments to the files.
Photo courtesy of Diego Pulido and UX Magazine158
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 Magazine159
160
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
161
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
5-10 Minutes
Q:
Now you can really start to have
some fun!
Q:
• Gesture• Sound/Voice• Image/Video• GPS• Animation• Facial Recognition• Sensors
Q:What revisions can you make now?
Q:
ActivityDesign Challenge!From GUI to NUI Modifications
Now that your concept is on the device, what new interactions does the device inspire?
Modify your existing interaction sequence with at least one NUI-inspired interaction
Create a new in-screen prototype using the new NUI-inspired interaction
1
2
3
168
20 Minutes
3Key Learnings
170
171
1. Sketching Rocks!
2. Get into the NUI Paradigm to design for
it
173Photo courtesy of Diego Pulido and UX Magazine
3. Get your work on a device as quickly as you can
174Photo courtesy of Diego Pulido and UX Magazine
3. GET YOUR WORK ON A DEVICE AS QUICKLY
AS YOU CAN!!!
175
176
177
supermodel
Use the medium you’re designing for
Making it pretty…
181
Flash Prototype
Tactical Prototypes
In-Screen Mobile Prototypes
steal this slide!
Keynote/Powerpoint Prototypes
Mobile Browser Prototypes
Platform Specific Prototype
Sketching
182
183
Keynote/Powerpoint Prototypes
184
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!
185
186
http://keynotopia.com/
Even in situations in which a spirit of exploration and freedom exist, where faculty are free to experiment to work beyond physical
and social constraints, our cognitive habits often get in the
way.
Marshall McLuhan called it “the rear-view mirror effect,” noting that “We see the world through a
rear-view mirror. We march backwards into the future.”
In closing….
188
Fidelity
189
Failure
190
Prototyping is not a Panacea
191
Mobile presents an
opportunity to invent new ways for users to interact with information.
Opinion!
are uniquely mobile
Great Mobile Experiences:
are sympathetic to contextspeak their power3
1
2
3
Q:
Q:
A
PC Prototypingis considered a
Luxury
A
Mobile Prototyping is
Essential
APrototyping
will help you develop
Mobile Instincts
196
Thank you!Email:[email protected]