Mobile Prototyping Essentials Workshop: Part 2
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Mobile Prototyping Essentials Workshop: Part 2

on

  • 2,118 views

 

Statistics

Views

Total Views
2,118
Views on SlideShare
1,956
Embed Views
162

Actions

Likes
14
Downloads
133
Comments
0

7 Embeds 162

http://rachelhinman.com 69
http://www.scoop.it 67
http://www.rachelhinman.com 15
http://pinterest.com 5
http://www.linkedin.com 3
http://www.pinterest.com 2
http://tr.pinterest.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

Mobile Prototyping Essentials Workshop: Part 2 Presentation Transcript

  • 1. Mobile Prototyping Essentials Part IIRachel HinmanSenior Research ScientistNokia Research LabPalo Alto, California USA Hinman
  • 2. Our plan for today…8: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. A 4
  • 5. 5:-(A
  • 6. A 6
  • 7. ? 7
  • 8. 8 8
  • 9. BadDecision-Making 9
  • 10. The final diamonds are where gooddesign decisions matter most……and where designers new to mobilehave the least domain specific skilland confidence. 10
  • 11. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 11
  • 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 don’t have the domain specific skills or heuristics to lean on… 13
  • 14. …and their instincts are notA tuned to the nuance of mobile. 14
  • 15. Try starting with instinct and intuition
  • 16. A Instinctnoun A natural or innate impulse, inclination, or tendency. 16
  • 17. PC Prototyping is considered a LuxuryA 17
  • 18. A Design involves Instincts 18
  • 19. Mobile Prototyping is EssentialA 19
  • 20. A Prototyping will help you developMobile Instincts 20
  • 21. A 21
  • 22. A Design involves Instincts 22
  • 23. A Prototyping will help you developMobile Instincts 23
  • 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 activities 24
  • 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 activities 25
  • 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 activities 26
  • 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 activities 27
  • 28. Okay, let’s get started! 28
  • 29. Prototyping 29
  • 30. “Whys” of prototyping Improve your design decision-making Communicate an Idea Gather User Feedback Explore the “Unknowns” Fine-tune an Idea 30
  • 31. Communicating an Idea or Experience YouTube Video 31
  • 32. Gather User Feedback 32
  • 33. Explore the Unknowns 33
  • 34. Fine-Tune an Idea 34
  • 35. Two Genres 35
  • 36. Experiential Prototyping 36
  • 37. Tactical Prototyping 37
  • 38. 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. 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 Matters 43
  • 44. Context will likely be your blindside 44
  • 45. Experiential Prototypingwill help you understand context 45
  • 46. Experiential Prototypes Body Storming Storyboarding Speed Dating Prototypes Concept Videos
  • 47. Experiential Prototypes Body Storming Storyboarding Speed Dating Prototypes Concept Videos
  • 48. Experiential Prototypes Body Storming Storyboarding Speed Dating Prototypes Concept 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: 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.
  • 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 Flickr 59
  • 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 60
  • 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. 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 Flickr 62
  • 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 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 capture the emotional tenor of mobile interactions 65
  • 63. Design in Context 66
  • 64. Experiential Prototypes Body Storming Storyboarding Speed Dating Prototypes Concept Videos
  • 65. Storyboarding 68
  • 66. Why Storyboard? 69
  • 67. 1. In mobile, Context Matters 70
  • 68. Even in situations in which a spirit of exploration and freedom exist, where facultyare“Hey, I’ve got this work beyond physical free to experiment to great idea …” 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.” 2. Qualify ideas
  • 69. 72
  • 70. 73
  • 71. Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. 74
  • 72. 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. 75
  • 73. 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. 76
  • 74. 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. 77
  • 75. 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. 78
  • 76. 79
  • 77. 80
  • 78. Select a concept… 81
  • 79. 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.
  • 80. 30Minutes
  • 81. Experiential Prototypes Body Storming Storyboarding Speed Dating Prototypes Concept Videos
  • 82. Speed Dating PrototypesIllustration courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 88
  • 83. Scott Davidoff of CMU •Few design tools •High Cost of Failure •Unpredictable social consequencesRapidly Exploring Application Design through Speed Dating 89
  • 84. Experiential Prototypes Body Storming Storyboarding Speed Dating Prototypes Concept 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 promisingconcepts 92
  • 87. Step TwoCreate storyboards thatdepict each conceptIllustration courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 93
  • 88. Step ThreePresent storyboards tousers & gather feedback 94
  • 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 Prototypes Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 99
  • 94. Tactical Prototypes Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 100
  • 95. Already talked about…. Great mobile UIs speak their power 101
  • 96. Already talked about…. Edit!!! 102
  • 97. Already talked about…. Ruthless Editing 103
  • 98. Already talked about…. A 104
  • 99. A Brave NUI World 105
  • 100. 106
  • 101. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 107
  • 102. We’re reaching the edges of what GUI can do 108
  • 103. Most mobile smartphoneshave touchscreens withNatural User Interfaces 109
  • 104. GUIs Become Brittle on a Mobile Device 110
  • 105. 113
  • 106. Eight Principles of NUIs1. Principle of Performance Aesthetics2. Principle of Direct Manipulation3. Principle of Scaffolding4. Principle of Contextual Environments5. Principle of Super Real6. Principle of Social Interaction7. Principle of Spatial Representation8. Principle of Seamlessness
  • 107. 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 115
  • 108. 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 116
  • 109. 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 asthe are placed on a Surface Table arean example of scaffolding. 117
  • 110. 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. 118
  • 111. 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 119
  • 112. 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 120
  • 113. 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. 121
  • 114. 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 122
  • 115. GUI/NUI Chasm 123
  • 116. Q:Q:
  • 117. Key differences between NUI and GUI 125
  • 118. Defining Attributes ofGUIs… 126
  • 119. GUI Mental Model =Computer as tool 127
  • 120. GUI = Recognition“What you see is what you get” 128
  • 121. GUI = Metaphorics, containment and place 129
  • 122. GUIs = Heavy Chrome, Icons & Buttons 130
  • 123. Defining Attributes ofNUIs… 131
  • 124. NUI Mental Model =Computer as media 132
  • 125. NUI = Intuition“What you do is what you get” 133
  • 126. NUI = Fluid, Unmediated, and Organic 134
  • 127. NUIs = Content is the Star 135
  • 128. GUI = Experiences are anchored 136
  • 129. NUI = Experiences Unfold 137
  • 130. NUIs Unfold Like a Game 138
  • 131. NUIs Can Feel Anchor-less 139
  • 132. 140
  • 133. 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 141
  • 134. Nested Doll Pattern 142
  • 135. Hub and Spoke Pattern 143
  • 136. Bento Box Pattern 144
  • 137. Filtered View Pattern 145
  • 138. 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. 146
  • 139. 147
  • 140. 148
  • 141. 149
  • 142. 150
  • 143. 151
  • 144. 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. 152
  • 145. GUI to NUI TranslationFocus on.... Boulder to Pebbles - Create UIs that speak their power with Ruthless Editing! NUI characteristics: • Computer as Media • What you DO is what you get • Content is the interface • Unfolding NUI Unfolding Patterns • Nested Doll • Hub and Spoke • Bento Box • Filtered View
  • 146. 30 Minutes
  • 147. Paper In-Screen PrototypesFollowing Process documented by Diego PulidoviaUX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine 155
  • 148. 1. Sketch screen layouts. 156Photo courtesy of Diego Pulido and UX Magazine
  • 149. 1. Sketch screen layouts. 2. Scan or photograph the sketches. 157Photo courtesy of Diego Pulido and UX Magazine
  • 150. 1. Sketch screen layouts. 2. Scan or photograph the sketches. 3. Making sizing adjustments to the files. 158Photo courtesy of Diego Pulido and UX Magazine
  • 151. 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. 159Photo courtesy of Diego Pulido and UX Magazine
  • 152. 4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly. 5. Import the files into the mobile device’s photo gallery. 160Photo courtesy of Diego Pulido and UX Magazine
  • 153. 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. 161Photo courtesy of Diego Pulido and UX Magazine
  • 154. 5-10 Minutes
  • 155. Q: Now you can really start to haveQ: some fun!
  • 156. • Gesture• Sound/Voice• Image/Video• GPS• Animation• Facial Recognition• Sensors
  • 157. Q:What revisions canQ: you make now?
  • 158. Design Challenge!From GUI to NUI Modifications 1 Now that your concept is on the device, what new interactions does the device inspire? Modify your existing interaction sequence 2 with at least one NUI-inspired interaction Create a new in-screen prototype using the 3 new NUI-inspired interaction 168
  • 159. 20 Minutes
  • 160. 3Key Learnings 170
  • 161. 1. Sketching Rocks! 171
  • 162. 2. Get into the NUI Paradigm to design for it
  • 163. 3. Get your work on a device as quickly as you can 173Photo courtesy of Diego Pulido and UX Magazine
  • 164. 3. GET YOUR WORK ON A DEVICE AS QUICKLY AS YOU CAN 174Photo courtesy of Diego Pulido and UX Magazine
  • 165. 175
  • 166. 176
  • 167. 177
  • 168. supermodel
  • 169. Use the medium you’re designing for
  • 170. Making it pretty…
  • 171. 181
  • 172. Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 182
  • 173. Keynote/Powerpoint Prototypes 183
  • 174. 184
  • 175. 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. 185
  • 176. http://keynotopia.com/ 186
  • 177. Even in situations in which a spirit of exploration and freedom exist, where facultyare free to experiment to workIn closing…. 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.”
  • 178. Fidelity 188
  • 179. Failure 189
  • 180. Prototyping is not a Panacea 190
  • 181. Mobile presents anopportunity to invent newways for users to interactwith information. 191
  • 182. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
  • 183. Q:Q:
  • 184. PC Prototyping is considered a LuxuryA
  • 185. Mobile Prototyping is EssentialA
  • 186. A Prototyping will help you develop Mobile Instincts 196
  • 187. Thank you!Email:rachelhinman@gmail.com