Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile Prototyping Essentials - Part II

4,889 views

Published on

Mobile prototyping workshop withe Rosenfeld Media - May 24

Published in: Design, Technology
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Mobile Prototyping Essentials - Part II

  1. 1. Mobile Prototyping Essentials Part IIRachel HinmanSenior Research ScientistNokia Research LabPalo Alto, California USA Hinman
  2. 2. 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
  3. 3. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
  4. 4. 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
  5. 5. Q: What makes mobile UX different?Q: 5
  6. 6. A 6
  7. 7. 7:-(A
  8. 8. A 8
  9. 9. ? 9
  10. 10. 10 10
  11. 11. BadDecision-Making 11
  12. 12. The final diamonds are where gooddesign decisions matter most……and where designers new to mobilehave the least domain specific skilland confidence. 12
  13. 13. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 13
  14. 14. 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
  15. 15. Designers new to mobileA don‟t have the domain specific skills or heuristics to lean on. 15
  16. 16. PrototypePrototypePrototypePrototypePrototypePrototypePrototypePrototype 16
  17. 17. PC Prototyping is considered a LuxuryA 17
  18. 18. Mobile Prototyping is EssentialA 18
  19. 19. The best wayto develop those skillsis to prototype earlyand often. 19
  20. 20. APrototypes are the ultimatedecision-making aid 20
  21. 21. 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. 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 22
  23. 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 23
  24. 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 24
  25. 25. 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
  26. 26. Okay, let‟s get started! 26
  27. 27. Prototyping 27
  28. 28. “Whys” of prototyping Improve your design decision-making Communicate an Idea Gather User Feedback Explore the “Unknowns” Fine-tune an Idea 28
  29. 29. Communicating an Idea or Experience YouTube Video 29
  30. 30. Gather User Feedback 30
  31. 31. Explore the Unknowns 31
  32. 32. Fine-Tune an Idea 32
  33. 33. Two Genres 33
  34. 34. Experiential Prototyping 34
  35. 35. Tactical Prototyping 35
  36. 36. 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
  37. 37. 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
  38. 38. Experiential Prototyping 38
  39. 39. 39
  40. 40. 40
  41. 41. Context Matters 41
  42. 42. Context will likely be your blindside 42
  43. 43. Context Framework 43
  44. 44. Context Framework 44
  45. 45. Experiential Prototypingwill help you understand context 45
  46. 46. 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.
  47. 47. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  48. 48. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  49. 49. Bodystorming 49
  50. 50. Through Lines
  51. 51. In reality… people‟s lives are messy
  52. 52. 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
  53. 53. 1. Select groups of five to eight participants in a troupe.Photo by Christian Crumlish (xian), 2009 on Flickr 57
  54. 54. 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
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. Bodystorming will help you capture the emotional tenor of mobile interactions 63
  60. 60. Design in Context 64
  61. 61. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  62. 62. Speed Dating PrototypesIllustration courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 66
  63. 63. Scott Davidoff of CMU •Few design tools •High Cost of Failure •Unpredictable social consequencesRapidly Exploring Application Design through Speed Dating 67
  64. 64. 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
  65. 65. Step OneIdentify mostpromisingconcepts 69
  66. 66. Step TwoCreate storyboardsthatdepict each conceptIllustration courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 70
  67. 67. Step ThreePresent storyboards tousers & gatherfeedback 71
  68. 68. Step FourCreate prototypesPhoto courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 72
  69. 69. Step FiveConduct user enactmentswith prototypesPhoto courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 73
  70. 70. Speed Dating Prototypes areespecially well-suited for gatheringuser impressions ofa new-to-the-world experience 74
  71. 71. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  72. 72. Storyboarding 76
  73. 73. 77
  74. 74. Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. 78
  75. 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. 79
  76. 76. 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
  77. 77. 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
  78. 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. Rough out the basic story Start filling in the cells. Rough out the complete story, then fill in details. 82
  79. 79. 83
  80. 80. 84
  81. 81. 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.
  82. 82. 30 Minutes
  83. 83. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  84. 84. Concept VideosNokia 888 communicator concept phone design by Tamer Nakisci 91
  85. 85. 92
  86. 86. 9393
  87. 87. Concept VideosPros•High Impact•Highly Shareable•Good for High-Level Ideas•Technology still in development 94
  88. 88. 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
  89. 89. Tactical Prototyping
  90. 90. Tactical Prototypes Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 97
  91. 91. Tactical Prototypes Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 98
  92. 92. Sketching 99
  93. 93. Great mobile UIsspeak their power 100
  94. 94. Ruthless Editing 101
  95. 95. A Brave NUI World 102
  96. 96. 103
  97. 97. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 104
  98. 98. We‟re reaching the edges of what GUI can do 105
  99. 99. Most mobile smartphoneshave touchscreens withNatural User Interfaces 106
  100. 100. GUIs Become Brittle on a Mobile Device 107
  101. 101. 110
  102. 102. GUI/NUI Chasm 111
  103. 103. Key differences between NUI and GUI 112
  104. 104. Defining Attributes ofGUIs… 113
  105. 105. GUI Mental Model =Computer as tool 114
  106. 106. GUI = Recognition“What you see is what you get” 115
  107. 107. GUI = Metaphorics, containment and place 116
  108. 108. GUIs = Heavy Chrome, Icons & Buttons 117
  109. 109. Defining Attributes ofNUIs… 118
  110. 110. NUI Mental Model =Computer as media 119
  111. 111. NUI = Intuition“What you do is what you get” 120
  112. 112. NUI = Fluid, Unmediated, and Organic 121
  113. 113. NUIs = Content is the Star 122
  114. 114. 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
  115. 115. GUI = Experiences are anchored 124
  116. 116. NUI = Experiences Unfold 125
  117. 117. NUIs Unfold Like a Game 126
  118. 118. NUIs Can Feel Anchor-less 127
  119. 119. 128
  120. 120. 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
  121. 121. Nested Doll Pattern 130
  122. 122. Hub and Spoke Pattern 131
  123. 123. Bento Box Pattern 132
  124. 124. Filtered View Pattern 133
  125. 125. A Trick to unfolding = Information boulders to pebbles 134
  126. 126. 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
  127. 127. 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
  128. 128. 137
  129. 129. 30 Minutes
  130. 130. Paper In-Screen PrototypesFollowing Process documented by Diego PulidoviaUX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine 139
  131. 131. 1. Sketch screen layouts. 140Photo courtesy of Diego Pulido and UX Magazine
  132. 132. 1. Sketch screen layouts. 2. Scan or photograph the sketches. 141Photo courtesy of Diego Pulido and UX Magazine
  133. 133. 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
  134. 134. 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
  135. 135. 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
  136. 136. 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
  137. 137. 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
  138. 138. Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 147
  139. 139. Keynote/Powerpoint Prototypes 148
  140. 140. 149
  141. 141. 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
  142. 142. 151
  143. 143. Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 152
  144. 144. Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
  145. 145. Shapeshifting
  146. 146. 156
  147. 147. “We made the webin the image ofourselves, and inthe U.S., thatmeans OBESE.”~Jason Grigsby
  148. 148. A 158
  149. 149. 159
  150. 150. 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
  151. 151. Q: “Our obsession with layout (carried over from print design)Q: keeps us from seizing much bigger opportunities on mobile.” ~ Luke Wroblewski 161
  152. 152. 162
  153. 153. Shapeshifting
  154. 154. Plans & Situated ActionMutual Reconfiguration
  155. 155. 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.
  156. 156. 168
  157. 157. Q:Q: Two Design Implications
  158. 158. Q:Q: 1. Shift in contextual assumptions
  159. 159. Q:Q: 2. Shift in our sensibilities around content as a design material
  160. 160. Q:Q: 1. Shift in contextual assumptions
  161. 161. A
  162. 162. A Throughout the design process, our work should be situated in the contexts where it will be used.
  163. 163. Go to the Gemba
  164. 164. Go to the Gemba
  165. 165. Go to the Gemba
  166. 166. Q:Q: 2. Shift in our sensibilities around content as a design material
  167. 167. Design as the manipulation of materials.
  168. 168. Q:Q: Pages and screens are not our design material
  169. 169. Content as a design material.
  170. 170. “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
  171. 171. “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
  172. 172. Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
  173. 173. Mark Weiser
  174. 174. Q:Q:
  175. 175. “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
  176. 176. Q:Q: Tab Pad Yard-Sized Board 1991
  177. 177. 2010
  178. 178. Mobile devices arethe gateway drug for ubicomp
  179. 179. Following toddlers into the future
  180. 180. “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
  181. 181. “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
  182. 182. “It’s almost like my blankie…”
  183. 183. Say Goodbye to Done
  184. 184. This should look familiar… 213
  185. 185. This should look familiar… The web has evolved around a task-efficiency model. Mobile can be different. 214
  186. 186. Tasks are about completion… 215
  187. 187. Tasks are about completion…Possibilities are interactions thataccrue over time… 216
  188. 188. Tasks are about completion…Possibilities are interactions thataccrue over time…… or facilitateexploration… 217
  189. 189. Tasks are about completion…Possibilities are interactions thataccrue over time… ..or are about… or facilitate SENSINGexploration… INTENT! 218
  190. 190. 219
  191. 191. 220
  192. 192. 221
  193. 193. 222
  194. 194. 223
  195. 195. 224
  196. 196. Fidelity 226
  197. 197. Failure 227
  198. 198. Prototyping is not a Panacea 228
  199. 199. PC Prototyping is considered a LuxuryA
  200. 200. Mobile Prototyping is EssentialA
  201. 201. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
  202. 202. Mobile presents anopportunity to invent newways for users to interactwith information. 232
  203. 203. Thank you!Email:rachel.hinman@nokia.comTemplates and Online Resources:www.rachelhinman.com/mobile_prototyping_essentials
  204. 204. Oh! By the way, I‟m writing a book..The Mobile FrontierA Guide for DesigningMobile ExperiencesExpected Publication: May 2012Follow along…

×