Mobile Prototyping Essentials - Part II
Upcoming SlideShare
Loading in...5
×
 

Mobile Prototyping Essentials - Part II

on

  • 3,034 views

Mobile prototyping workshop withe Rosenfeld Media - May 24

Mobile prototyping workshop withe Rosenfeld Media - May 24

Statistics

Views

Total Views
3,034
Views on SlideShare
3,022
Embed Views
12

Actions

Likes
30
Downloads
228
Comments
0

7 Embeds 12

http://mink7.com 5
http://www.linkedin.com 2
http://tweetedtimes.com 1
http://escolasustentavel.com 1
http://nadine.pinterest.com 1
http://www.pinterest.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Instead, the web was built upon a static model – the web page. And we’ve allowed those pages to become bloated and unweildy…

Mobile Prototyping Essentials - Part II Mobile Prototyping Essentials - Part II Presentation Transcript

  • Mobile Prototyping Essentials Part IIRachel HinmanSenior Research ScientistNokia Research LabPalo Alto, California USA Hinman
  • Our plan for today…8:30am - NoonWhat makes mobile UX different?Three Design/Mobile UX Exercises:• Identifying Mobile Needs• Ideating in the Wild• Creating a Good HandNoon – 1:30pm - LUNCH1:30pm – 5:30pmMobile prototyping essentialsThree Mobile Prototyping Exercises• Storyboarding• Translating GUI to NUI• Creating an In-Screen Prototype
  • Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3 View slide
  • Our plan for today…8:30am - NoonWhat makes mobile UX different?Three Design/Mobile UX Exercises:• Identifying Mobile Needs• Ideating in the Wild• Creating a Good HandNoon – 1pm - LUNCH1pm – 5pmMobile prototyping essentialsThree Mobile Prototyping Exercises• Storyboarding• Translating GUI to NUI• Creating an In-Screen Prototype View slide
  • Q: What makes mobile UX different?Q: 5
  • A 6
  • 7:-(A
  • A 8
  • ? 9
  • 10 10
  • BadDecision-Making 11
  • The final diamonds are where gooddesign decisions matter most……and where designers new to mobilehave the least domain specific skilland confidence. 12
  • Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 13
  • Highly variable context and environmentSmall screen size and limited text inputUI takes up the entire screenDifficult to multi-task and easy to get lost 14
  • Designers new to mobileA don‟t have the domain specific skills or heuristics to lean on. 15
  • PrototypePrototypePrototypePrototypePrototypePrototypePrototypePrototype 16
  • PC Prototyping is considered a LuxuryA 17
  • Mobile Prototyping is EssentialA 18
  • The best wayto develop those skillsis to prototype earlyand often. 19
  • APrototypes are the ultimatedecision-making aid 20
  • Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview of six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities 21
  • Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities 22
  • Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities 23
  • Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities 24
  • Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities 25
  • Okay, let‟s get started! 26
  • Prototyping 27
  • “Whys” of prototyping Improve your design decision-making Communicate an Idea Gather User Feedback Explore the “Unknowns” Fine-tune an Idea 28
  • Communicating an Idea or Experience YouTube Video 29
  • Gather User Feedback 30
  • Explore the Unknowns 31
  • Fine-Tune an Idea 32
  • Two Genres 33
  • Experiential Prototyping 34
  • Tactical Prototyping 35
  • Experiential Prototyping:Best suited for design explorations where: 1 You are working on a “broader” mobile project. 2 Target mobile hardware and software scope is unknown. (perhaps being created). 3 The design space is relatively unchartered. 36
  • Tactical Prototyping:Best suited for design explorations where: 1 You are working on a “focused” mobile project. 2 Target mobile hardware and software scope is known. 3 The design space is relatively known. 37
  • Experiential Prototyping 38
  • 39
  • 40
  • Context Matters 41
  • Context will likely be your blindside 42
  • Context Framework 43
  • Context Framework 44
  • Experiential Prototypingwill help you understand context 45
  • Experiential Prototyping:Best suited for design explorations where: You are working on a “broader” 1 mobile project. 2 Target mobile hardware and software scope is unknown. (perhaps being created). 3 The design space is relatively unchartered.
  • Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  • Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  • Bodystorming 49
  • Through Lines
  • In reality… people‟s lives are messy
  • Similar to improvisational theater, body storminginvolves acting out possible scenarios or usecases with actors and props. Unlike computer-based technology that is logic based and onlymakes visible the conditions that existedbefore, people areillogical, perceptive, aware, and self-correcting.Body storming is a technique that helps captureand harness these messy yet essential aspectsof human behavior and account for them in themobile design process. 56
  • 1. Select groups of five to eight participants in a troupe.Photo by Christian Crumlish (xian), 2009 on Flickr 57
  • 1. Select groups of five to eight participants in a troupe. 2. Identify 3-5 experience scenarios for your troupe to “perform.” Examples: Purchasing a cup of coffee with my iPhone, selecting which phone to purchase in a carrier‟s store.Photo by Christian Crumlish (xian), 2009 on Flickr 58
  • 3. Every player must have a role; there should be no “trees” that are just for background. Use large cards that label the roles people are playing. 59Photo by Christian Crumlish (xian), 2009 on Flickr
  • 4. Props can have feelings, thoughts, and the ability to speak. Use thought-bubble cards to show what a participant is thinking versus saying.Photo by Christian Crumlish (xian), 2009 on Flickr 60
  • 5. Have a narrator or color commentator who can explain things. The narrator can pretend the scenario is like television, using a remote to stop action, rewind, or fast-forward.Photo by Christian Crumlish (xian), 2009 on Flickr 61
  • 6. De-brief after each scenario. What did the group learn? What was surprising? What seemed important? Capture what you learned from the exercise and discuss how you can integrate it into what happens next. Photo by Christian Crumlish (xian), 2009 on Flickr 62
  • Bodystorming will help you capture the emotional tenor of mobile interactions 63
  • Design in Context 64
  • Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  • Speed Dating PrototypesIllustration courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 66
  • Scott Davidoff of CMU •Few design tools •High Cost of Failure •Unpredictable social consequencesRapidly Exploring Application Design through Speed Dating 67
  • Speed Dating PrototypesBuilds on three theories: 1 Abundance brings perspective. Need to cross boundaries to know 2 they exist. Multiple low-cost engagements with 3 multiple concepts enables a broader perspective to emerge. 68
  • Step OneIdentify mostpromisingconcepts 69
  • Step TwoCreate storyboardsthatdepict each conceptIllustration courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 70
  • Step ThreePresent storyboards tousers & gatherfeedback 71
  • Step FourCreate prototypesPhoto courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 72
  • Step FiveConduct user enactmentswith prototypesPhoto courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 73
  • Speed Dating Prototypes areespecially well-suited for gatheringuser impressions ofa new-to-the-world experience 74
  • Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  • Storyboarding 76
  • 77
  • Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. 78
  • Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces. 79
  • Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces. Rough out a basic story. 80
  • Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces. Rough out a basic story. Start filling in the cells. Rough out the complete story, then fill in details. 81
  • Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces. Rough out the basic story Start filling in the cells. Rough out the complete story, then fill in details. 82
  • 83
  • 84
  • Your Design Challenge!Storyboarding 1 Select one concept you‟d like to explore more deeply using the storyboarding technique. Storyboard one scenario using the templates 2 provided. Remember to identify the key issues the 3 character faces and rough out the complete story before filling in details.
  • 30 Minutes
  • Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  • Concept VideosNokia 888 communicator concept phone design by Tamer Nakisci 91
  • 92
  • 9393
  • Concept VideosPros•High Impact•Highly Shareable•Good for High-Level Ideas•Technology still in development 94
  • Concept VideosPros Cons•High Impact •Resource Intensive!!!•Highly Shareable •Skill Intensive•Good for High-Level •Cultural Fit Ideas •Concept videos don‟t•Technology still in make bad ideas good. development 95
  • Tactical Prototyping
  • Tactical Prototypes Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 97
  • Tactical Prototypes Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 98
  • Sketching 99
  • Great mobile UIsspeak their power 100
  • Ruthless Editing 101
  • A Brave NUI World 102
  • 103
  • Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 104
  • We‟re reaching the edges of what GUI can do 105
  • Most mobile smartphoneshave touchscreens withNatural User Interfaces 106
  • GUIs Become Brittle on a Mobile Device 107
  • 110
  • GUI/NUI Chasm 111
  • Key differences between NUI and GUI 112
  • Defining Attributes ofGUIs… 113
  • GUI Mental Model =Computer as tool 114
  • GUI = Recognition“What you see is what you get” 115
  • GUI = Metaphorics, containment and place 116
  • GUIs = Heavy Chrome, Icons & Buttons 117
  • Defining Attributes ofNUIs… 118
  • NUI Mental Model =Computer as media 119
  • NUI = Intuition“What you do is what you get” 120
  • NUI = Fluid, Unmediated, and Organic 121
  • NUIs = Content is the Star 122
  • Highly variable context and environmentSmall screen size and limited text inputUI takes up the entire screenDifficult to multi-task and easy to get lost 123
  • GUI = Experiences are anchored 124
  • NUI = Experiences Unfold 125
  • NUIs Unfold Like a Game 126
  • NUIs Can Feel Anchor-less 127
  • 128
  • Mobile Experiences UnfoldPatterns for how mobile experiences unfoldand progressively reveal their nature 1 The Nested Doll Pattern 2 The Hub and Spoke Pattern 3 The Bento Box Pattern 4 The Filtered View Pattern 129
  • Nested Doll Pattern 130
  • Hub and Spoke Pattern 131
  • Bento Box Pattern 132
  • Filtered View Pattern 133
  • A Trick to unfolding = Information boulders to pebbles 134
  • Your Design Challenge!From GUI to NUI 1 Identify an interaction sequence you‟d like to recreate using NUI principles. 2 Sketch out the interaction using the templates provided. 3 Identify how you‟d like your mobile experience to unfold. 135
  • REMEMBER!It‟s easy to go crazy and try to do it all.Instead, focus on applying what we‟ve covered… Understanding the differences between graphical and natural user interfaces. Experimenting with how your mobile experience can unfold and and progressively reveal its nature. Play around with the unfolding patterns that have been presented… or invent some of your own. 136
  • 137
  • 30 Minutes
  • Paper In-Screen PrototypesFollowing Process documented by Diego PulidoviaUX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine 139
  • 1. Sketch screen layouts. 140Photo courtesy of Diego Pulido and UX Magazine
  • 1. Sketch screen layouts. 2. Scan or photograph the sketches. 141Photo courtesy of Diego Pulido and UX Magazine
  • 1. Sketch screen layouts. 2. Scan or photograph the sketches. 3. Making sizing adjustments to the files. 142Photo 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. 143Photo 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. 144Photo courtesy of Diego Pulido and UX Magazine
  • 4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly. 5. Import the files into the mobile device‟s photo gallery. 6. Click and swipe away. 145Photo courtesy of Diego Pulido and UX Magazine
  • Your Design Challenge!Create an in-screen prototype. Hang your screen designs on the wall. Photograph each design. Transfer photos from the camera to computer and make any sizing adjustments. Sync images to your mobile device and swipe away…. 146
  • Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 147
  • Keynote/Powerpoint Prototypes 148
  • 149
  • Reasons for Prototypingin Keynote/Powerpoint It‟s super efficient and fast! Level of fidelity is high – gives you an end result that looks and feels like a real app. Supports *some* gestures and transitions. It‟s as close as you can get to the real thing without digging into code. 150
  • 151
  • Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 152
  • Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
  • Shapeshifting
  • 156
  • “We made the webin the image ofourselves, and inthe U.S., thatmeans OBESE.”~Jason Grigsby
  • A 158
  • 159
  • Q: “I think a lot of web design in the past five to ten years is actuallyQ: just a reflection of print again. We‟ve been designing for one context, which isn‟t much better than a PDF document.” ~ Bryan Rieger 160
  • Q: “Our obsession with layout (carried over from print design)Q: keeps us from seizing much bigger opportunities on mobile.” ~ Luke Wroblewski 161
  • 162
  • Shapeshifting
  • Plans & Situated ActionMutual Reconfiguration
  • Q: Suchman‟s theory of mutual reconfiguration suggests a person‟sQ: capacity to act (their agency) is reconfiguredwhen it comes into contact with another thing or person - thathuman action is constantly constructed and reconstructed from dynamic interactions with the material and social worlds.
  • 168
  • Q:Q: Two Design Implications
  • Q:Q: 1. Shift in contextual assumptions
  • Q:Q: 2. Shift in our sensibilities around content as a design material
  • Q:Q: 1. Shift in contextual assumptions
  • A
  • A Throughout the design process, our work should be situated in the contexts where it will be used.
  • Go to the Gemba
  • Go to the Gemba
  • Go to the Gemba
  • Q:Q: 2. Shift in our sensibilities around content as a design material
  • Design as the manipulation of materials.
  • Q:Q: Pages and screens are not our design material
  • Content as a design material.
  • “Right now many designers end upfocusing a lot of energy on the overlyingQ:view – the whole template and look andfeel. But the smaller the screen gets, theQ:less that stuff matters.One of the most important things we‟vestarted looking at is writing and workingwith APIs rather than designing „pages‟for one context.”~Stephanie Rieger
  • “For so much digital content, there is nogood metaphor to render anymore – thecontent is just information, text andimages – so new approaches toQ:interaction and visual UI design areneeded.”~Mike Kruzeniski
  • Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
  • Mark Weiser
  • Q:Q:
  • “The most profound technologiesQ:are those that disappear.Q:They weave themselves into thefabric of everyday life until they areindistinguishable from it.”~ Mark WeiserThe Computer for the 21st Century
  • Q:Q: Tab Pad Yard-Sized Board 1991
  • 2010
  • Mobile devices arethe gateway drug for ubicomp
  • Following toddlers into the future
  • “I like cuddling up in bed with NetflixQ:on the iPad instead of sitting in frontof the TV. It‟s more comfortable toQ:go to bed with a movie the sameway I used to go to bed with abook”~ NorbertiPad Study Participant
  • “It‟s almost like my blankie…Q:I curl up in bed with it, or on thecouch. I usually have it withQ:me, regardless of extenuatingcircumstances ”~ EriniPad Study Participant
  • “It’s almost like my blankie…”
  • Say Goodbye to Done
  • This should look familiar… 213
  • This should look familiar… The web has evolved around a task-efficiency model. Mobile can be different. 214
  • Tasks are about completion… 215
  • Tasks are about completion…Possibilities are interactions thataccrue over time… 216
  • Tasks are about completion…Possibilities are interactions thataccrue over time…… or facilitateexploration… 217
  • Tasks are about completion…Possibilities are interactions thataccrue over time… ..or are about… or facilitate SENSINGexploration… INTENT! 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • Fidelity 226
  • Failure 227
  • Prototyping is not a Panacea 228
  • PC Prototyping is considered a LuxuryA
  • Mobile Prototyping is EssentialA
  • Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
  • Mobile presents anopportunity to invent newways for users to interactwith information. 232
  • Thank you!Email:rachel.hinman@nokia.comTemplates and Online Resources:www.rachelhinman.com/mobile_prototyping_essentials
  • Oh! By the way, I‟m writing a book..The Mobile FrontierA Guide for DesigningMobile ExperiencesExpected Publication: May 2012Follow along…