mobile prototyping essentials workshop: part 2

Download Mobile Prototyping Essentials Workshop: Part 2

If you can't read please download the document

Post on 27-Jan-2015

105 views

Category:

Design

1 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. Mobile Prototyping EssentialsPart IIRachel HinmanSenior Research ScientistNokia Research LabPalo Alto, California USA Hinman

2. Our plan for today8:30am - NoonWhat makes mobile UX different?Two Design/Mobile UX Exercises: Identifying Mobile Needs Ideating in the WildNoon 1pm - LUNCH1:30pm 5:30pmMobile prototyping essentialsThree Mobile Prototyping Exercises Storyboarding Practice Ruthless Editing/Translating GUI to NUI Creating an In-Screen Prototype 3. Q: What makes mobile UX different?Q: 3 4. A4 5. 5:-(A 6. A6 7. ?7 8. 88 9. BadDecision-Making9 10. The final diamonds are where gooddesign decisions matter mostand where designers new to mobilehave the least domain specific skilland confidence. 10 11. Seated in a relatively predictable environmentLarge screen enables multi-tasking Keyboard and a mouse for input11 12. Highly variable context and environmentSmall screen size and limited text inputUI takes up the entire screenDifficult to multi-task and easy to get lost 12 13. Designers new to mobileA dont have the domainspecific skills or heuristics tolean on 13 14. and their instincts are notA tuned to the nuance ofmobile. 14 15. Try starting with instinct and intuition 16. AInstinctnounA natural or innate impulse,inclination, or tendency. 16 17. PC Prototypingis considered aLuxuryA17 18. ADesign involvesInstincts18 19. Mobile Prototyping isEssentialA 19 20. APrototypingwill help you developMobile Instincts20 21. A21 22. ADesign involvesInstincts22 23. APrototypingwill help you developMobile Instincts23 24. Our plan for this afternoon 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 activities24 25. Our plan for this afternoon 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 activities25 26. Our plan for this afternoon 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 activities26 27. Our plan for this afternoon 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 Three hands-on activities27 28. Okay, lets get started! 28 29. Prototyping29 30. Whys of prototypingImprove your design decision-makingCommunicate an IdeaGather User FeedbackExplore the UnknownsFine-tune an Idea30 31. Communicating an Idea or Experience YouTube Video31 32. Gather User Feedback 32 33. Explore the Unknowns 33 34. Fine-Tune an Idea34 35. Two Genres 35 36. Experiential Prototyping 36 37. Tactical Prototyping 37 38. Experiential Prototyping:Best suited for design explorations where: 1You are working on a broadermobile project. 2Target mobile hardware and softwarescope is unknown.(perhaps being created). 3The design space is relativelyunchartered.38 39. 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. 39 40. Experiential Prototyping 40 41. 41 42. 42 43. Context Matters43 44. Context will likely beyour blindside 44 45. Experiential Prototypingwill help you understandcontext 45 46. Experiential PrototypesBody StormingStoryboardingSpeed Dating PrototypesConcept Videos 47. Experiential PrototypesBody StormingStoryboardingSpeed Dating PrototypesConcept Videos 48. Experiential PrototypesBody StormingStoryboardingSpeed Dating PrototypesConcept Videos 49. Q: users are just trying to muddle through situations in their lives.Q: They often act without rationalizing. ~ Andrew Hinton Interactions 2012 50. Plans & Situated ActionMutual Reconfiguration 51. Q: Suchmans theory of mutual reconfiguration suggests a personsQ: 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. 52. 54 53. 55 54. Bodystorming 57 55. 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 existed before,people are illogical, 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. 58 56. 1. Select groups of five to eight participants in a troupe.Photo by Christian Crumlish (xian), 2009 on Flickr59 57. 1. Select groups of five to eightparticipants in a troupe. 2. Identify 3-5 experiencescenarios for your troupe toperform.Examples: Purchasing a cup ofcoffee with my iPhone, selectingwhich phone to purchase ina carriers store.Photo by Christian Crumlish (xian), 2009 on Flickr 60 58. 3. Every player must have arole; there should be notrees that are just forbackground. Use largecards that label the rolespeople are playing. 61Photo by Christian Crumlish (xian), 2009 on Flickr 59. 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 Flickr62 60. 5. Have a narrator or color commentator whocan explain things. The narrator canpretend the scenario is like television,using a remote to stop action, rewind,or fast-forward.Photo by Christian Crumlish (xian), 2009 on Flickr 63 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 64 62. Bodystorming will help you capturethe emotional tenor of mobileinteractions 65 63. Design in Context66 64. Experiential PrototypesBody StormingStoryboardingSpeed Dating PrototypesConcept Videos 65. Storyboarding68 66. Why Storyboard?69 67. 1. In mobile, Context Matters70 68. Even in situations in which a spirit of exploration and freedom exist, where facultyareHey, Ive got this work beyond physicalfree to experiment to great idea and social constraints, our cognitive habitsoften get in the way.Marshall McLuhan called it the rear-view mirror effect, noting that We see the worldthrough a rear-view mirror. We marchbackwards into the future. 2. Qualify ideas 69. 72 70. 73 71. Mobile UX StoryboardingIdentify the central idea(s) you aretrying to communicate. 74 72. Mobile UX StoryboardingIdentify the central idea(s) you aretrying to communicate.Create a character and identify the keyissues he/she currently faces.75 73. Mobile UX StoryboardingIdentify the central idea(s) you aretrying to communicate.Create a character and identify the keyissues he/she currently faces.Rough out a basic story.76 74. Mobile UX StoryboardingIdentify the central idea(s) you aretrying to communicate.Create a character and identify the keyissues he/she currently faces.Rough out a basic story.Start filling in the cells. Rough out thecomplete story, then fill in details.77 75. Mobile UX StoryboardingIdentify the central idea(s) you aretrying to communicate.Create a character and identify the keyissues he/she currently faces.Rough out the basic storyStart filling in the cells. Rough out thecomplete story, then fill in details.78 76. 79 77. 80 78. Select a concept81 79. Your Design Challenge!Storyboarding 1 Select one concept youd 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. 80. 30Minutes 81. Experiential PrototypesBody StormingStoryboardingSpeed Dating PrototypesConcept Videos 82. Speed Dating PrototypesIllustration courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating88 83. Scott Davidoff of CMU Few design tools High Cost of Failure Unpredictable social consequencesRapidly Exploring Application Design through Speed Dating 89 84. Experiential PrototypesBody StormingStoryboardingSpeed Dating PrototypesConcept Videos 85. 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. 91 86. Step OneIdentify most promisingconcepts92 87. Step TwoCreate storyboards thatdepict each conceptIllustration courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 93 88. Step ThreePresent storyboards tousers & gather feedback94 89. Step FourCreate prototypesPhoto courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 95 90. Step FiveConduct user enactmentswith prototypesPhoto courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 96 91. Speed Dating Prototypes areespecially well-suited for gatheringuser impressions ofa new-to-the-world experience 97 92. Tactical Prototyping 93. Tactical PrototypesSketching/Paper PrototypingIn-Screen Mobile PrototypesMobile Browser PrototypesKeyn