SlideShare a Scribd company logo
1 of 206
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
What are the similarities A :-( 5
A What are the similarities 6
? 7
8 Web designers know how to work in a rapidly evolving field 8
Web designers know how to work in a rapidly evolving field 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… 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 20
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 21
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 22
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 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
Hypothesis vs. Agenda Explore the Unknowns 29
Hypothesis vs. Agenda Fine-Tune an Idea 30
Two Genres 31
Hypothesis vs. Agenda 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 Sympathy to context principles Tactical Prototyping: Best suited for design explorations where: steal this slide! 2 Target mobile hardware and software scope is known. 3 The design space is relatively known. 35
Experiential Prototyping 36
37
38
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
Sympathy to context principles Experiential Prototyping: Best suited for design explorations where: 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
Paper Prototype example 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
Paper Prototype example 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.  Photo by Christian Crumlish (xian), 2009 on Flickr 55
Paper Prototype example 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 Photo by Christian Crumlish (xian), 2009 on Flickr
Paper Prototype example  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 57
Paper Prototype example 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 58
Paper Prototype example 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 59
Bodystorming will help you capture the emotional tenor of mobile interactions 60
Paper Prototype example Design in Context 61
What we learned from the web Experiential Prototypes Body Storming Speed Dating Prototypes Concept Videos Storyboarding
Paper Prototype example Speed Dating Prototypes Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 63
Paper Prototype example Scott Davidoff of CMU ,[object Object]
High Cost of Failure
Unpredictable social consequencesRapidly Exploring Application Design through Speed Dating 64
Speed Dating Prototypes 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
Paper Prototype example Step Two Create storyboards thatdepict each concept Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 67
Paper Prototype example 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
What we learned from the web Experiential Prototypes Body Storming Speed Dating Prototypes Concept Videos Storyboarding
Paper Prototype example Concept Videos Nokia 888 communicator concept phone design by Tamer Nakisci 73
Paper Prototype example 74
Paper Prototype example 75 75
Paper Prototype example Concept Videos Pros ,[object Object]
Highly Shareable
Good for High-Level  Ideas
Technology still in  development 76
Paper Prototype example Concept Videos Pros Cons ,[object Object]
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
What we learned from the web Experiential Prototypes Body Storming Speed Dating Prototypes Concept Videos Storyboarding 79
Paper Prototype example Storyboarding 80
“in the wild” ideation 81
What we learned from the web Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate.  82
What we learned from the web 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.  83
What we learned from the web 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.  84
What we learned from the web 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.  85
What we learned from the web 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.  86
Paper Prototype example 87
Paper Prototype example 88
Pivoting people through information Your Design Challenge! Storyboarding Activity 89
Pivoting people through information Your Design Challenge! Storyboarding: Ideas Activity 90
Your Design Challenge! 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
Hypothesis vs. Agenda Tactical Prototyping
What we learned from the web 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 In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 94
Hypothesis vs. Agenda Sketching 95
Hypothesis vs. Agenda Great mobile UIs speak their power 96
Speak their power? Huh? Q: A 97
A light switch 98
Shopping cart 99
100
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
Web designers know how to work in a rapidly evolving field Edit!!! 106
Web designers know how to work in a rapidly evolving field 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
Hypothesis vs. Agenda
Hypothesis vs. Agenda
116 Wireframe
Wireframe GUI/NUI Chasm 117
Key differences between NUI and GUI Okay… let’s get started 118
Defining Attributes of  GUIs… 119
Paper Prototype example GUI Mental Model =  Computer as tool 120
Paper Prototype example 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
Paper Prototype example NUI Mental Model =  Computer as media 125
Paper Prototype example 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
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 129
Paper Prototype example GUI = Experiences are anchored 130
Paper Prototype example NUI = Experiences Unfold 131
Paper Prototype example NUIs Unfold Like a Game 132
NUIs Can Feel Anchor-less 133
Differences in the mobile environment 134
The Nested Doll Pattern 1 Sympathy to context principles 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
Paper Prototype example Nested Doll Pattern 136
Paper Prototype example Hub and Spoke Pattern 137
Paper Prototype example Bento Box Pattern 138
Paper Prototype example Filtered View Pattern 139
How do you make interfaces that speak their power A Trick to unfolding =  Information boulders to pebbles 140
How do you make interfaces that speak their power A 141
A 142
Pivoting people through information Your Design Challenge! From GUI to NUI Activity 143
Pivoting people through information Your Design Challenge! 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
Pivoting people through information 145
Pivoting people through information 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
Differences in the mobile environment 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
Paper Prototype example 1. Sketch screen layouts.       150 Photo courtesy of Diego Pulido and UX Magazine
Paper Prototype example 1. Sketch screen layouts.    2. Scan or photograph      the sketches.     	 151 Photo courtesy of Diego Pulido and UX Magazine
Paper Prototype example 1. Sketch screen layouts.    2. Scan or photograph      the sketches.  3. Making sizing     adjustments to the     files.         152 Photo courtesy of Diego Pulido and UX Magazine
Paper Prototype example  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 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.           154 Photo courtesy of Diego Pulido and UX Magazine
Paper Prototype example 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.            155 Photo courtesy of Diego Pulido and UX Magazine
Your Design Challenge! 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
What we learned from the web steal this slide! Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 157
Paper Prototype example Paper Prototyping 158
159
Paper Prototype example Mobile Browser Prototypes 160
Paper Prototype example Keynote/Powerpoint Prototypes 161
Paper Prototype example 162
Paper Prototype example LOGO Tagline Edit 163
Paper Prototype example 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
Paper Prototype example 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 165
Paper Prototype example 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 166
Paper Prototype example LOGO Tagline 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 Edit 167 167 Paper Prototype example
Paper Prototype example LOGO Tagline Edit 168
What we learned from the web 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
What we learned from the web 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
Paper Prototype example Motion: New Design Material 171
What we learned from the web 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
Paper Prototype example Twelve Basic Principles  of Animation 173
Paper Prototype example Principle One Squash and Stretch 174
Paper Prototype example Principle One Squash and Stretch 175
Paper Prototype example Principle Two Anticipation 176
Paper Prototype example Principle Two Anticipation 177
Paper Prototype example Principle Three Staging 178
Paper Prototype example Principle Three Staging 179
Paper Prototype example Principle Four Straight Ahead  and Pose to Pose 180
Paper Prototype example Principle Four Straight Ahead  and Pose to Pose 181
Paper Prototype example Principle Five Follow Through and Overlapping Action 182
Paper Prototype example Principle Five Follow Through and Overlapping Action 183
Paper Prototype example Principle Six Slow in and Out 184
Paper Prototype example Principle Six Slow in and Out 185
Paper Prototype example Principle Seven Arcs 186
Paper Prototype example Principle Seven Arcs 187
Paper Prototype example Principle Eight Secondary Action 188
Paper Prototype example Principle Eight Secondary Action 189
Paper Prototype example Principle Nine Timing 190
Paper Prototype example Principle Nine Timing 191
Paper Prototype example Principle Ten Exaggeration 192
Paper Prototype example Principle Ten Exaggeration 193
Paper Prototype example Principle Eleven and Twelve Solid Drawing and Appeal 194

More Related Content

What's hot

They Call it Surfing for a Reason
They Call it Surfing for a ReasonThey Call it Surfing for a Reason
They Call it Surfing for a Reason
Rachel Hinman
 

What's hot (20)

The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)
The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)
The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)
 
User Centered Design & User Experience
User Centered Design & User ExperienceUser Centered Design & User Experience
User Centered Design & User Experience
 
6 Rules of User Interface Design
6 Rules of User Interface Design6 Rules of User Interface Design
6 Rules of User Interface Design
 
The Complexity of Simplicity
The Complexity of SimplicityThe Complexity of Simplicity
The Complexity of Simplicity
 
Agile Architecture and Modeling - Where are we Today
Agile Architecture and Modeling - Where are we TodayAgile Architecture and Modeling - Where are we Today
Agile Architecture and Modeling - Where are we Today
 
UXPA2019 Optimal AR UX for Complex Purchases — How immersive technology boost...
UXPA2019 Optimal AR UX for Complex Purchases — How immersive technology boost...UXPA2019 Optimal AR UX for Complex Purchases — How immersive technology boost...
UXPA2019 Optimal AR UX for Complex Purchases — How immersive technology boost...
 
An introduction to ergonomics for mobile UX (Ux in the City)
An introduction to ergonomics for mobile UX (Ux in the City)An introduction to ergonomics for mobile UX (Ux in the City)
An introduction to ergonomics for mobile UX (Ux in the City)
 
Beyond Staggered Sprints: Integrating User Experience and Agile
Beyond Staggered Sprints: Integrating User Experience and AgileBeyond Staggered Sprints: Integrating User Experience and Agile
Beyond Staggered Sprints: Integrating User Experience and Agile
 
UI For Alien Cowboys
UI For Alien CowboysUI For Alien Cowboys
UI For Alien Cowboys
 
The Art of Creativity
The Art of CreativityThe Art of Creativity
The Art of Creativity
 
Why UX is Important
Why UX is Important Why UX is Important
Why UX is Important
 
Rulespace
RulespaceRulespace
Rulespace
 
UX (User Experience) Process, May 2017
UX (User Experience) Process, May 2017UX (User Experience) Process, May 2017
UX (User Experience) Process, May 2017
 
Remixing Mobile User Experience
Remixing Mobile User ExperienceRemixing Mobile User Experience
Remixing Mobile User Experience
 
Technology as a Cultural Practice - UX Australia
Technology as a Cultural Practice - UX AustraliaTechnology as a Cultural Practice - UX Australia
Technology as a Cultural Practice - UX Australia
 
They Call it Surfing for a Reason
They Call it Surfing for a ReasonThey Call it Surfing for a Reason
They Call it Surfing for a Reason
 
LeanUX - Presentation slides
LeanUX - Presentation slidesLeanUX - Presentation slides
LeanUX - Presentation slides
 
UX/Design Thinking Prototyping Workshop
UX/Design Thinking Prototyping Workshop UX/Design Thinking Prototyping Workshop
UX/Design Thinking Prototyping Workshop
 
Effective prototyping
Effective prototypingEffective prototyping
Effective prototyping
 
Effective prototyping (for Vermont Code Camp)
Effective prototyping (for Vermont Code Camp)Effective prototyping (for Vermont Code Camp)
Effective prototyping (for Vermont Code Camp)
 

Viewers also liked

How Web Designers Can Stop Worrying and Learn to Love Content Strategy - CS F...
How Web Designers Can Stop Worrying and Learn to Love Content Strategy - CS F...How Web Designers Can Stop Worrying and Learn to Love Content Strategy - CS F...
How Web Designers Can Stop Worrying and Learn to Love Content Strategy - CS F...
Sophie Dennis
 
Working in harmony - Port80 2013
Working in harmony - Port80 2013Working in harmony - Port80 2013
Working in harmony - Port80 2013
Sophie Dennis
 

Viewers also liked (20)

Prototyping is an attitude
Prototyping is an attitudePrototyping is an attitude
Prototyping is an attitude
 
Linked data at globo.com - Web of Linked Entities (WoLE 2013) - WWW 2013
Linked data at globo.com - Web of Linked Entities (WoLE 2013) - WWW 2013Linked data at globo.com - Web of Linked Entities (WoLE 2013) - WWW 2013
Linked data at globo.com - Web of Linked Entities (WoLE 2013) - WWW 2013
 
Storytelling ux tokyo-en
Storytelling ux tokyo-enStorytelling ux tokyo-en
Storytelling ux tokyo-en
 
Introduction to RDFa
Introduction to RDFaIntroduction to RDFa
Introduction to RDFa
 
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
 
Power of Story
Power of Story Power of Story
Power of Story
 
How to Redefine Success by Writing Your Own Rules : DareConf 2013
How to Redefine Success by Writing Your Own Rules : DareConf 2013How to Redefine Success by Writing Your Own Rules : DareConf 2013
How to Redefine Success by Writing Your Own Rules : DareConf 2013
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013
 
How Web Designers Can Stop Worrying and Learn to Love Content Strategy - CS F...
How Web Designers Can Stop Worrying and Learn to Love Content Strategy - CS F...How Web Designers Can Stop Worrying and Learn to Love Content Strategy - CS F...
How Web Designers Can Stop Worrying and Learn to Love Content Strategy - CS F...
 
Measurable & meaningful
Measurable & meaningfulMeasurable & meaningful
Measurable & meaningful
 
#digpen V - Designing Content: or how web designers can stop worrying and lea...
#digpen V - Designing Content: or how web designers can stop worrying and lea...#digpen V - Designing Content: or how web designers can stop worrying and lea...
#digpen V - Designing Content: or how web designers can stop worrying and lea...
 
Strategic UX - Rapid experience strategy techniques to help businesses succee...
Strategic UX - Rapid experience strategy techniques to help businesses succee...Strategic UX - Rapid experience strategy techniques to help businesses succee...
Strategic UX - Rapid experience strategy techniques to help businesses succee...
 
ATM UI prototyping
ATM UI prototypingATM UI prototyping
ATM UI prototyping
 
Pioneers, Settlers and Town Planners for Product Development
Pioneers, Settlers and Town Planners for Product DevelopmentPioneers, Settlers and Town Planners for Product Development
Pioneers, Settlers and Town Planners for Product Development
 
Designing the right product
Designing the right productDesigning the right product
Designing the right product
 
Working in harmony - Port80 2013
Working in harmony - Port80 2013Working in harmony - Port80 2013
Working in harmony - Port80 2013
 
Which matters more: content, design or technology? A rant
Which matters more: content, design or technology? A rantWhich matters more: content, design or technology? A rant
Which matters more: content, design or technology? A rant
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
 
Designing stuff that matters fast ux bristol 2012 eewei chen darius kumana
Designing stuff that matters fast ux bristol 2012 eewei chen darius kumanaDesigning stuff that matters fast ux bristol 2012 eewei chen darius kumana
Designing stuff that matters fast ux bristol 2012 eewei chen darius kumana
 
Designing with algorithms
Designing with algorithmsDesigning with algorithms
Designing with algorithms
 

Similar to Mobile Prototyping Essentials

The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
Marcelo Graciolli
 

Similar to Mobile Prototyping Essentials (20)

Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
 
Apdf Spontaneous Invention
Apdf Spontaneous InventionApdf Spontaneous Invention
Apdf Spontaneous Invention
 
Prototyping Experiences for Connected Products
Prototyping Experiences for Connected ProductsPrototyping Experiences for Connected Products
Prototyping Experiences for Connected Products
 
Mobile UX Essentials
Mobile UX EssentialsMobile UX Essentials
Mobile UX Essentials
 
Human Computer Interaction: Academia and Industry
Human Computer Interaction: Academia and IndustryHuman Computer Interaction: Academia and Industry
Human Computer Interaction: Academia and Industry
 
Rapid Product Design in the Wild
Rapid Product Design in the WildRapid Product Design in the Wild
Rapid Product Design in the Wild
 
Design in Startups
Design in StartupsDesign in Startups
Design in Startups
 
eXtreme User eXperience (XUX) - How one team melded UX with XP
eXtreme User eXperience (XUX) - How one team melded UX with XPeXtreme User eXperience (XUX) - How one team melded UX with XP
eXtreme User eXperience (XUX) - How one team melded UX with XP
 
Video as a prototyping tool for connected products
Video as a prototyping tool for connected productsVideo as a prototyping tool for connected products
Video as a prototyping tool for connected products
 
WORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignWORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction Design
 
User Experience & Extreme Programming: An Experience Report
User Experience & Extreme Programming: An Experience Report User Experience & Extreme Programming: An Experience Report
User Experience & Extreme Programming: An Experience Report
 
Design Thinking - Types of prototypes
Design Thinking - Types of prototypes Design Thinking - Types of prototypes
Design Thinking - Types of prototypes
 
Prototyping - 2015 PhillyCHI UX Workshop Series
Prototyping - 2015 PhillyCHI UX Workshop SeriesPrototyping - 2015 PhillyCHI UX Workshop Series
Prototyping - 2015 PhillyCHI UX Workshop Series
 
Intro to User Centered Design Workshop
Intro to User Centered Design WorkshopIntro to User Centered Design Workshop
Intro to User Centered Design Workshop
 
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni MahariashaUX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
 
Prototyping and Piloting
Prototyping and PilotingPrototyping and Piloting
Prototyping and Piloting
 
Focus fast bigd15_roger_belveal_2015-09-19
Focus fast bigd15_roger_belveal_2015-09-19Focus fast bigd15_roger_belveal_2015-09-19
Focus fast bigd15_roger_belveal_2015-09-19
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
 
Agile leadership practices for PIONEERS
 Agile leadership practices for PIONEERS Agile leadership practices for PIONEERS
Agile leadership practices for PIONEERS
 

Recently uploaded

如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
yzeoq
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
Amil baba
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
thubko
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
pillahdonald
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
Amil baba
 

Recently uploaded (20)

如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 
Avoid these common UI/UX design mistakes
 Avoid these common UI/UX design mistakes Avoid these common UI/UX design mistakes
Avoid these common UI/UX design mistakes
 
Latest Trends in Home and Building Design
Latest Trends in Home and Building DesignLatest Trends in Home and Building Design
Latest Trends in Home and Building Design
 
The Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to CatwalkThe Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to Catwalk
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign design
 
Mark Zuckerberg Carthago Delenda Est Shirt
Mark Zuckerberg Carthago Delenda Est ShirtMark Zuckerberg Carthago Delenda Est Shirt
Mark Zuckerberg Carthago Delenda Est Shirt
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdfExplaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
Onyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets DurabilityOnyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets Durability
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
 

Mobile Prototyping Essentials

  • 1. Title Mobile Prototyping Essentials UX Australia 2011 Rachel Hinman Senior Research Scientist Nokia Research Lab Palo Alto, California USA Hinman
  • 2. I used to be a web designer, too 2
  • 3. What makes mobile UX different? Q: Q: 3
  • 4. A What are the similarities 4
  • 5. What are the similarities A :-( 5
  • 6. A What are the similarities 6
  • 7. ? 7
  • 8. 8 Web designers know how to work in a rapidly evolving field 8
  • 9. Web designers know how to work in a rapidly evolving field Bad Decision-Making 9
  • 10. 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
  • 11. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 11
  • 12. 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
  • 13. Designers new to mobile don’t have the domain specific skills or heuristics to lean on. A 13
  • 14. Prototype Prototype Prototype Prototype Prototype Prototype Prototype Prototype Prototype 14
  • 15. PC Prototypingis considered a A Um… duh! Luxury 15
  • 16. Mobile Prototyping is Essential A 16
  • 17. The best way to develop those skills is to prototype early and often. 17
  • 18. A Prototypes are the ultimate decision-making aid 18
  • 19. 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
  • 20. 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 20
  • 21. 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 21
  • 22. 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 22
  • 23. 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 23
  • 24. Okay, let’s get started! Okay… let’s get started 24
  • 26. 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
  • 27. Communicating an Idea or Experience YouTube Video 27
  • 28. Hypothesis vs. Agenda Gather User Feedback 28
  • 29. Hypothesis vs. Agenda Explore the Unknowns 29
  • 30. Hypothesis vs. Agenda Fine-Tune an Idea 30
  • 32. Hypothesis vs. Agenda Experiential Prototyping 32
  • 34. 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
  • 35. You are working on a “focused” mobile project. 1 Sympathy to context principles Tactical Prototyping: Best suited for design explorations where: steal this slide! 2 Target mobile hardware and software scope is known. 3 The design space is relatively known. 35
  • 37. 37
  • 38. 38
  • 40. Context will likely beyour blindside 40
  • 41. Context Framework Context Framework steal this slide! 41
  • 42. Context Framework Context Framework steal this slide! 42
  • 43. Experiential Prototypingwill help you understand context 43
  • 44. Sympathy to context principles Experiential Prototyping: Best suited for design explorations where: 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
  • 45. What we learned from the web Experiential Prototypes Body Storming Speed Dating Prototypes Concept Videos Storyboarding
  • 46. Paper Prototype example Bodystorming 46
  • 48.
  • 49.
  • 50.
  • 51.
  • 52. In reality… people’s lives are messy
  • 53. Paper Prototype example 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
  • 54. Select groups of five to eight participants in a troupe. Photo by Christian Crumlish (xian), 2009 on Flickr 54
  • 55. Paper Prototype example 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. Photo by Christian Crumlish (xian), 2009 on Flickr 55
  • 56. Paper Prototype example 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 Photo by Christian Crumlish (xian), 2009 on Flickr
  • 57. Paper Prototype example  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 57
  • 58. Paper Prototype example 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 58
  • 59. Paper Prototype example 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 59
  • 60. Bodystorming will help you capture the emotional tenor of mobile interactions 60
  • 61. Paper Prototype example Design in Context 61
  • 62. What we learned from the web Experiential Prototypes Body Storming Speed Dating Prototypes Concept Videos Storyboarding
  • 63. Paper Prototype example Speed Dating Prototypes Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 63
  • 64.
  • 65. High Cost of Failure
  • 66. Unpredictable social consequencesRapidly Exploring Application Design through Speed Dating 64
  • 67. Speed Dating Prototypes 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
  • 68. “in the wild” ideation Step One Identify most promising concepts 66
  • 69. Paper Prototype example Step Two Create storyboards thatdepict each concept Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 67
  • 70. Paper Prototype example Step Three Present storyboards tousers & gather feedback 68
  • 71. Step Four Create prototypes Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 69
  • 72. Step Five Conduct user enactments with prototypes Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 70
  • 73. Speed Dating Prototypes are especially well-suited for gathering user impressions of a new-to-the-world experience 71
  • 74. What we learned from the web Experiential Prototypes Body Storming Speed Dating Prototypes Concept Videos Storyboarding
  • 75. Paper Prototype example Concept Videos Nokia 888 communicator concept phone design by Tamer Nakisci 73
  • 78.
  • 81. Technology still in development 76
  • 82.
  • 85. Technology still in development
  • 89. Concept videos don’t make bad ideas good.77
  • 90. The first step of creating a concept video is…. 78
  • 91. What we learned from the web Experiential Prototypes Body Storming Speed Dating Prototypes Concept Videos Storyboarding 79
  • 92. Paper Prototype example Storyboarding 80
  • 93. “in the wild” ideation 81
  • 94. What we learned from the web Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. 82
  • 95. What we learned from the web 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. 83
  • 96. What we learned from the web 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. 84
  • 97. What we learned from the web 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. 85
  • 98. What we learned from the web 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. 86
  • 101. Pivoting people through information Your Design Challenge! Storyboarding Activity 89
  • 102. Pivoting people through information Your Design Challenge! Storyboarding: Ideas Activity 90
  • 103. Your Design Challenge! 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
  • 104. Hypothesis vs. Agenda Tactical Prototyping
  • 105. What we learned from the web steal this slide! Tactical Prototypes Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 93
  • 106. steal this slide! Tactical Prototypes Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 94
  • 107. Hypothesis vs. Agenda Sketching 95
  • 108. Hypothesis vs. Agenda Great mobile UIs speak their power 96
  • 109. Speak their power? Huh? Q: A 97
  • 112. 100
  • 113. We can annotate expectations in the web world We can annotate expectations in the web world 101
  • 114. 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
  • 115. Options have to be apparent and intuitive in mobile for people to 103
  • 116. 104 Text entry will never be easy Design for partial attention andinterruption
  • 117. How do you make interfaces that speak their power How do I create mobile interfaces that “speak their power”? Q: A 105
  • 118. Web designers know how to work in a rapidly evolving field Edit!!! 106
  • 119. Web designers know how to work in a rapidly evolving field RuthlessEditing 107
  • 120. 108 Wireframe A Brave NUI World
  • 122. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 110
  • 123. 111 Wireframe We’re reaching the edges of what GUI can do
  • 124. Wireframe Most mobile smartphones have touchscreens with Natural User Interfaces 112
  • 125. 113 Wireframe GUIs Become Brittle on a Mobile Device
  • 130. Key differences between NUI and GUI Okay… let’s get started 118
  • 131. Defining Attributes of GUIs… 119
  • 132. Paper Prototype example GUI Mental Model = Computer as tool 120
  • 133. Paper Prototype example GUI = Recognition “What you see is what you get” 121
  • 134. Wireframe GUI = Metaphorics, containment and place 122
  • 135. GUIs = Heavy Chrome, Icons & Buttons 123
  • 136. Defining Attributes of NUIs… 124
  • 137. Paper Prototype example NUI Mental Model = Computer as media 125
  • 138. Paper Prototype example NUI = Intuition “What you do is what you get” 126
  • 139. 127 Wireframe NUI = Fluid, Unmediated, and Organic
  • 140. NUIs = Content is the Star It’s like a game of cards 128
  • 141. 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 129
  • 142. Paper Prototype example GUI = Experiences are anchored 130
  • 143. Paper Prototype example NUI = Experiences Unfold 131
  • 144. Paper Prototype example NUIs Unfold Like a Game 132
  • 145. NUIs Can Feel Anchor-less 133
  • 146. Differences in the mobile environment 134
  • 147. The Nested Doll Pattern 1 Sympathy to context principles 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
  • 148. Paper Prototype example Nested Doll Pattern 136
  • 149. Paper Prototype example Hub and Spoke Pattern 137
  • 150. Paper Prototype example Bento Box Pattern 138
  • 151. Paper Prototype example Filtered View Pattern 139
  • 152. How do you make interfaces that speak their power A Trick to unfolding = Information boulders to pebbles 140
  • 153. How do you make interfaces that speak their power A 141
  • 154. A 142
  • 155. Pivoting people through information Your Design Challenge! From GUI to NUI Activity 143
  • 156. Pivoting people through information Your Design Challenge! 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
  • 157. Pivoting people through information 145
  • 158. Pivoting people through information 146
  • 159. 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
  • 160. Differences in the mobile environment 148
  • 161. Paper In-Screen Prototypes Following Process documented by Diego Pulidovia UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine 149
  • 162. Paper Prototype example 1. Sketch screen layouts.      150 Photo courtesy of Diego Pulido and UX Magazine
  • 163. Paper Prototype example 1. Sketch screen layouts.   2. Scan or photograph the sketches.     151 Photo courtesy of Diego Pulido and UX Magazine
  • 164. Paper Prototype example 1. Sketch screen layouts.   2. Scan or photograph the sketches. 3. Making sizing adjustments to the files.         152 Photo courtesy of Diego Pulido and UX Magazine
  • 165. Paper Prototype example  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 Photo courtesy of Diego Pulido and UX Magazine
  • 166.  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.          154 Photo courtesy of Diego Pulido and UX Magazine
  • 167. Paper Prototype example 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.           155 Photo courtesy of Diego Pulido and UX Magazine
  • 168. Your Design Challenge! 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
  • 169. What we learned from the web steal this slide! Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 157
  • 170. Paper Prototype example Paper Prototyping 158
  • 171. 159
  • 172. Paper Prototype example Mobile Browser Prototypes 160
  • 173. Paper Prototype example Keynote/Powerpoint Prototypes 161
  • 175. Paper Prototype example LOGO Tagline Edit 163
  • 176. Paper Prototype example 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
  • 177. Paper Prototype example 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 165
  • 178. Paper Prototype example 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 166
  • 179. Paper Prototype example LOGO Tagline 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 Edit 167 167 Paper Prototype example
  • 180. Paper Prototype example LOGO Tagline Edit 168
  • 181. What we learned from the web 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
  • 182. What we learned from the web 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
  • 183. Paper Prototype example Motion: New Design Material 171
  • 184. What we learned from the web 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
  • 185. Paper Prototype example Twelve Basic Principles of Animation 173
  • 186. Paper Prototype example Principle One Squash and Stretch 174
  • 187. Paper Prototype example Principle One Squash and Stretch 175
  • 188. Paper Prototype example Principle Two Anticipation 176
  • 189. Paper Prototype example Principle Two Anticipation 177
  • 190. Paper Prototype example Principle Three Staging 178
  • 191. Paper Prototype example Principle Three Staging 179
  • 192. Paper Prototype example Principle Four Straight Ahead and Pose to Pose 180
  • 193. Paper Prototype example Principle Four Straight Ahead and Pose to Pose 181
  • 194. Paper Prototype example Principle Five Follow Through and Overlapping Action 182
  • 195. Paper Prototype example Principle Five Follow Through and Overlapping Action 183
  • 196. Paper Prototype example Principle Six Slow in and Out 184
  • 197. Paper Prototype example Principle Six Slow in and Out 185
  • 198. Paper Prototype example Principle Seven Arcs 186
  • 199. Paper Prototype example Principle Seven Arcs 187
  • 200. Paper Prototype example Principle Eight Secondary Action 188
  • 201. Paper Prototype example Principle Eight Secondary Action 189
  • 202. Paper Prototype example Principle Nine Timing 190
  • 203. Paper Prototype example Principle Nine Timing 191
  • 204. Paper Prototype example Principle Ten Exaggeration 192
  • 205. Paper Prototype example Principle Ten Exaggeration 193
  • 206. Paper Prototype example Principle Eleven and Twelve Solid Drawing and Appeal 194
  • 207. Paper Prototype example Specifying Transitions Sketches Courtesy of Greg NudelmenStoryboarding iPad Transitions 195
  • 208. What we learned from the web 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
  • 209. Paper Prototype example Motion is an Art. There are no formulas. 197
  • 211. Paper Prototype example Failure 199
  • 212. Paper Prototype example Prototyping is not a Panacea 200
  • 213. PC Prototypingis considered a A Um… duh! Luxury
  • 214. Mobile Prototyping is A Um… duh! Essential
  • 215. Thanks, and next up… Thank you! Email: rachel.hinman@nokia.com Templates and Online Resources: www.rachelhinman.com/mobile_prototyping_essentials
  • 216. Oh! By the way, I’m writing a book.. The Mobile Frontier A Guide for Designing Mobile Experiences Expected Publication: late 2011 Follow along…
  • 217. Q? Q&A: final break
  • 218. Different platforms express characteristics differently 206 Wireframe