Your SlideShare is downloading. ×
0
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Mobile Prototyping Essentials
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Prototyping Essentials

18,240

Published on

Presentation on mobile prototyping presented at Web Directions Unplugged in Seattle, May 12 - 13, 2011

Presentation on mobile prototyping presented at Web Directions Unplugged in Seattle, May 12 - 13, 2011

Published in: Design, Technology
3 Comments
74 Likes
Statistics
Notes
No Downloads
Views
Total Views
18,240
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
576
Comments
3
Likes
74
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Title<br />Mobile Prototyping EssentialsWeb Directions Unplugged<br />Rachel Hinman<br />Senior Research Scientist <br />Nokia Research Lab <br />Palo Alto, California USA<br />
  • 2. I used to be a web designer, too<br />
  • 3. How can we streamline the checkout process<br />What makes mobile UX different?<br />Q:<br />Q:<br />
  • 4. Where do I begin<br />
  • 5. Where do I begin<br />“I would have made different choices.”<br />
  • 6. Where do I begin<br />Key Difference = <br />Different Design Choices<br />
  • 7. Our plan for today…<br />Our plan for today<br />Identify where things usually go wrong during the mobile UX process<br />
  • 8. Our plan for today…<br />Our plan for today<br />Identify where things usually go wrong during the mobile UX process<br />Review the four “whys” of prototyping<br />
  • 9. Our plan for today…<br />Our plan for today<br />Identify where things usually go wrong during the mobile UX process<br />Review the four “whys” of prototyping<br />Identify the two genres of mobile prototyping<br />
  • 10. Our plan for today…<br />Our plan for today<br />Identify where things usually go wrong during the mobile UX process<br />Review the four “whys” of prototyping<br />Identify the two genres of mobile prototyping<br />Overview/how-to of six mobile prototyping methods<br />
  • 11. Along the way…<br />Along the way<br />Watch for slides with this orange label!<br />Slides Worth Keeping<br />Design Principles<br />Design Activities<br />Shameless Opinion<br />
  • 12. Okay, let’s get started!<br />Okay… let’s get started<br />
  • 13. A<br />What are the similarities<br />
  • 14. A<br />What are the similarities<br />
  • 15. A<br />What are the similarities<br />
  • 16. ?<br />16<br />Web designers know how to work in a rapidly evolving field<br />
  • 17. 17<br />Web designers know how to work in a rapidly evolving field<br />
  • 18. Bad Decision-Making<br />18<br />Web designers know how to work in a rapidly evolving field<br />
  • 19. The final diamond is where good design decisions matter most…<br />19<br />
  • 20. The final diamond is where good design decisions matter most…<br />…and where designers new to mobile have the least domain specific skill and confidence.<br />20<br />Web designers know how to work in a rapidly evolving field<br />
  • 21. Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />21<br />Prototype<br />
  • 22. PC Prototypingis considered a <br />Luxury<br />A<br />Um… duh!<br />
  • 23. Mobile Prototyping is<br />Essential<br />A<br />Um… duh!<br />
  • 24. 24<br />Differences in the mobile environment<br />Seated in a relatively predictable environment<br />Large screen enables multi-tasking<br />Keyboard and a mouse for input<br />
  • 25. Differences in the mobile environment<br />Highly variable context and environment<br /> Small screen size and limited text input<br /> UI takes up the entire screen <br /> Difficult to multi-task and easy to get lost<br />25<br />
  • 26. Designers new to mobile don’t have the domain specific skills or heuristics to lean on.<br />A<br />Um… duh!<br />
  • 27. The best way to develop those skills is to prototype early and often.<br />A<br />Um… duh!<br />
  • 28. Prototypes are the ultimate <br />decision-making aid. <br />A<br />Um… duh!<br />
  • 29. What we learned from the web<br />steal this slide!<br />“Whys” of prototyping<br />Improve your design decision-making<br />Communicate an Idea<br />Gather User Feedback<br />Explore the “Unknowns”<br />Fine-tune an Idea<br />
  • 30. Communicating an Idea or Experience<br />YouTube Video<br />
  • 31. Hypothesis vs. Agenda<br />Gather User Feedback<br />
  • 32. Hypothesis vs. Agenda<br />Exploring the Unknowns<br />
  • 33. Hypothesis vs. Agenda<br />Fine-Tune an Idea<br />
  • 34. Two Genres<br />34<br />Web designers know how to work in a rapidly evolving field<br />
  • 35. Tactical Prototyping<br />
  • 36. Hypothesis vs. Agenda<br />Experiential Prototyping<br />
  • 37. You are working on a “focused” mobile project.<br />1<br />Sympathy to context principles<br />Tactical Prototyping:<br />Best suited for design explorations where:<br />steal this slide!<br />2<br />Target mobile hardware and software scope is known.<br />3<br />The design space is relatively known.<br />
  • 38. You are working on a “broader” mobile project.<br />1<br />Sympathy to context principles<br />Experiential Prototyping:<br />Best suited for design explorations where:<br />steal this slide!<br />2<br />Target mobile hardware and software scope is unknown.(perhaps being created).<br />3<br />The design space is relatively unchartered. <br />
  • 39. Hypothesis vs. Agenda<br />Tactical Prototyping<br />
  • 40. What we learned from the web<br />steal this slide!<br />Tactical Prototypes<br />Sketching<br />In-Screen Mobile Prototypes<br />Mobile Browser Prototypes<br />Keynote/Powerpoint Prototypes<br />Flash Prototype<br />Platform Specific Prototype<br />
  • 41. What we learned from the web<br />steal this slide!<br />Tactical Prototypes<br />Sketching<br />In-Screen Mobile Prototypes<br />Mobile Browser Prototypes<br />Keynote/Powerpoint Prototypes<br />Flash Prototype<br />Platform Specific Prototype<br />
  • 42. Hypothesis vs. Agenda<br />Sketching<br />
  • 43. Hypothesis vs. Agenda<br />Great Mobile UIs Speak their Power<br />
  • 44. Speak their power?<br />Huh?<br />Q:<br />A<br />
  • 45. A light switch<br />
  • 46. Shopping cart<br />46<br />
  • 47. Shopping cart<br />47<br />
  • 48. We can annotate expectations in the web world<br />48<br />We can annotate expectations in the web world<br />
  • 49. We can annotate expectations in the web world<br />Free two-day shipping<br />Look inside the book<br />REALLY!Look inside the book<br />Get it new OR used!<br />Sell mine<br />Add to cart<br />Shipping!<br />Collectible!<br />Maybe a kindle!<br />
  • 50. Options have to be apparent and intuitive in mobile for people to <br />
  • 51. 51<br />Text entry will never be easy<br />Design for partial attention and interruption<br />
  • 52. How do you make interfaces that speak their power<br />How do I create mobile interfaces that “speak their power”?<br />Q:<br />A<br />
  • 53. Edit!!!<br />53<br />Web designers know how to work in a rapidly evolving field<br />
  • 54. RuthlessEditing<br />54<br />Web designers know how to work in a rapidly evolving field<br />
  • 55. Each card speaks it’s power<br />55<br />It’s like a game of cards<br />
  • 56. Let the Content be the Star<br />56<br />It’s like a game of cards<br />
  • 57. Pivoting people through information<br />57<br />
  • 58. Pivoting people through information<br />Claiming you can’t draw get’s you labeled a “whiner”<br />58<br />
  • 59. What we learned from the web<br />steal this slide!<br />Tips for Ruthless Editing<br />What’s the primary purpose of this screen?<br />What are the 3-5 secondary actions this screen must support?<br />What is the most intuitive way to visualize this information?<br />Will users know how to interact with the screen within three seconds?<br />Is the information on this screen too dense? What can be removed?<br />
  • 60. Paper In-Screen Prototypes<br />Following Process documented by Diego Pulidovia UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine<br />60<br />http://www.uxmag.com/design/paper-in-screen-prototyping <br />
  • 61. Paper Prototype example<br />1. Sketch screen layouts. <br /> <br />  <br />61<br />Photo courtesy of Diego Pulido and UX Magazine<br />
  • 62. Paper Prototype example<br />1. Sketch screen layouts. <br /> <br />2. Scan or photograph <br /> the sketches. <br /> <br />  <br />62<br />Photo courtesy of Diego Pulido and UX Magazine<br />
  • 63. Paper Prototype example<br />1. Sketch screen layouts. <br /> <br />2. Scan or photograph <br /> the sketches. <br />3. Making sizing<br /> adjustments to the<br /> files.<br /> <br /> <br /> <br /> <br />63<br />Photo courtesy of Diego Pulido and UX Magazine<br />
  • 64. Paper Prototype example<br /> 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.<br /> <br /> <br /> <br />64<br />Photo courtesy of Diego Pulido and UX Magazine<br />
  • 65.  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<br />5. Import the files into the mobile device’s photo gallery. <br /> <br />  <br /> <br /> <br />65<br />Photo courtesy of Diego Pulido and UX Magazine<br />
  • 66. Paper Prototype example<br />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<br />5. Import the files into the mobile device’s photo gallery. <br />6. Click and swipe away. <br /> <br /> <br /> <br /> <br /> <br />66<br />Photo courtesy of Diego Pulido and UX Magazine<br />
  • 67. Paper Prototype example<br />Paper Prototyping<br />67<br />
  • 68. 68<br />
  • 69. Paper Prototype example<br />Mobile Browser Prototypes<br />69<br />
  • 70. Paper Prototype example<br />Keynote/Powerpoint Prototypes<br />70<br />
  • 71. Paper Prototype example<br />71<br />
  • 72. What we learned from the web<br />steal this slide!<br />Reasons for Prototyping in Keynote/Powerpoint<br />It’s super efficient and fast!<br />Level of fidelity is high – gives you an end result that looks and feels like a real app.<br />Supports *some* gestures and transitions.<br />It’s as close as you can get to the real thing without digging into code. <br />
  • 73. What we learned from the web<br />steal this slide!<br />Reasons for Prototyping in Keynote/Powerpoint<br />It’s super efficient and fast!<br />Level of fidelity is high – gives you an end result that looks and feels like a real app.<br />Supports *some* gestures and transitions.<br />It’s as close as you can get to the real thing without digging into code. <br />
  • 74. Paper Prototype example<br />SCROLL<br />GUI = “Desktop” and “Pages” as Anchors<br />74<br />
  • 75. NUIs Can Feel Anchor-less<br />75<br />
  • 76. Paper Prototype example<br />[<br />]<br />+<br />=<br />76<br />
  • 77. Paper Prototype example<br />=<br />77<br />
  • 78. What we learned from the web<br />Animation & TransitionsA new design elements that can:<br />steal this slide!<br />Reinforce cognition.<br />Help users form a mental model of how information will “unfold”.<br />Provide cues for interaction.<br />Help make your experience feel more intuitive for users. <br />
  • 79. Paper Prototype example<br />79<br />
  • 80. Practice<br />80<br />
  • 81. How to prototype interactive iPad applications in 30 minutes or less using Apple KeynoteBy Amir Khella<br />Photo courtesy of Amir Khella<br />81<br />
  • 82. Hypothesis vs. Agenda<br />Experiential Prototyping<br />
  • 83. 83<br />Context Framework<br />Context Framework<br />steal this slide!<br />
  • 84. 84<br />Context Framework<br />Context Framework<br />steal this slide!<br />
  • 85. 85<br />Relationships Chording<br />Orchestration and Inflection<br />
  • 86. You are working on a “broader” mobile project.<br />1<br />Sympathy to context principles<br />Experiential Prototyping:<br />Best suited for design explorations where:<br />steal this slide!<br />2<br />Target mobile hardware and software scope is unknown.(perhaps being created).<br />3<br />The design space is relatively unchartered. <br />
  • 87. What we learned from the web<br />Experiential Prototypes<br />Storyboarding<br />Body Storming<br />Speed Dating Prototypes<br />Concept Videos<br />
  • 88. Paper Prototype example<br />Storyboarding<br />88<br />
  • 89. 89<br />“in the wild” ideation<br />
  • 90. What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate. <br />
  • 91. What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate. <br />Create a character and identify the key issues he/she currently faces. <br />
  • 92. What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate. <br />Create a character and identify the key issues he/she currently faces. <br />Rough out the basic story <br />
  • 93. What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate. <br />Create a character and identify the key issues he/she currently faces. <br />Rough out the basic story <br />Start filling in the cells. Rough out the complete story, then fill in details. <br />
  • 94. What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate. <br />Create a character and identify the key issues he/she currently faces. <br />Rough out the basic story <br />Start filling in the cells. Rough out the complete story, then fill in details. <br />
  • 95. Paper Prototype example<br />95<br />
  • 96. Paper Prototype example<br />96<br />
  • 97. Paper Prototype example<br />Bodystorming<br />97<br />
  • 98. Through Lines<br />Company Secret<br />© 2010 Nokia August 2010 Hinman<br />98<br />
  • 99.
  • 100.
  • 101.
  • 102.
  • 103. In reality… people’s lives are messy<br />
  • 104. Paper Prototype example<br />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.<br />104<br />
  • 105. Select groups of five to eight participants in a troupe. <br />Photo by Christian Crumlish (xian), 2009 on Flickr<br />105<br />
  • 106. Paper Prototype example<br />Select groups of five to eight participants in a troupe. <br />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. <br />Photo by Christian Crumlish (xian), 2009 on Flickr<br />106<br />
  • 107. Paper Prototype example<br />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.<br /> <br />107<br />Photo by Christian Crumlish (xian), 2009 on Flickr<br />
  • 108. Paper Prototype example<br /> 4. Props can have feelings, thoughts, and the ability to speak. Use thought-bubble cards to show what a participant is thinking versus saying. <br />Photo by Christian Crumlish (xian), 2009 on Flickr<br />108<br />
  • 109. Paper Prototype example<br />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.<br />Photo by Christian Crumlish (xian), 2009 on Flickr<br />109<br />
  • 110. Paper Prototype example<br />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. <br />Photo by Christian Crumlish (xian), 2009 on Flickr<br />110<br />
  • 111. Paper Prototype example<br />Design in Context<br />111<br />
  • 112. Paper Prototype example<br />Speed Dating Prototypes<br />Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating<br />112<br />
  • 113. Paper Prototype example<br />Scott Davidoff of CMU<br /><ul><li>Few design tools
  • 114. High Cost of Failure
  • 115. Unpredictable social consequences</li></ul>Rapidly Exploring Application Design through Speed Dating<br />113<br />
  • 116. Speed Dating Prototypes<br />Builds on three theories:<br />Abundance brings perspective.<br />1<br />Sympathy to context principles<br />2<br />Need to cross boundaries to know they exist.<br />3<br />Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge. <br />
  • 117. 115<br />“in the wild” ideation<br />
  • 118. Paper Prototype example<br />1. Need Validation<br />Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating<br />116<br />
  • 119. Paper Prototype example<br />1. Need Validation<br />117<br />
  • 120. Paper Prototype example<br />2. User Enactments<br />Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating<br />118<br />
  • 121. Paper Prototype example<br />2. User Enactments<br />Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating<br />119<br />
  • 122. Paper Prototype example<br />Concept Videos<br />Nokia 888 communicator concept phone design by Tamer Nakisci<br />120<br />
  • 123. Paper Prototype example<br />121<br />
  • 124. Paper Prototype example<br />122<br />
  • 125. Paper Prototype example<br />Concept Videos<br />Pros<br /><ul><li>High Impact
  • 126. Highly Shareable
  • 127. Good for High-Level Ideas
  • 128. Technology still in development </li></ul>123<br />
  • 129. Paper Prototype example<br />Concept Videos<br />Pros<br />Cons<br /><ul><li>High Impact
  • 130. Highly Shareable
  • 131. Good for High-Level Ideas
  • 132. Technology still in development
  • 133. Resource Intensive!!!
  • 134. Skill intensive
  • 135. Cultural Fit
  • 136. Concept videos don’t make bad ideas good.</li></ul>124<br />
  • 137. Paper Prototype example<br />Things to remember…<br />125<br />
  • 138. Paper Prototype example<br />Fidelity<br />126<br />
  • 139. Paper Prototype example<br />Failure<br />127<br />
  • 140. Paper Prototype example<br />Prototyping is not a Panacea<br />128<br />
  • 141. Our plan for today…<br />Our plan for today<br />Identify where things usually go wrong during the mobile UX process<br />Review the four “whys” of prototyping<br />Identify the two genres of mobile prototyping<br />Overview/how-to of six mobile prototyping methods<br />
  • 142. PC Prototypingis considered a <br />Luxury<br />A<br />Um… duh!<br />
  • 143. Mobile Prototyping is<br />Essential<br />A<br />Um… duh!<br />
  • 144. Good luck<br />Good luck!<br />
  • 145. Thanks, and next up…<br />Thank you!<br />Email:<br />rachel.hinman@nokia.com<br />
  • 146. Oh! By the way, I’m writing a book..<br />The Mobile Frontier<br />A Guide for Designing Mobile Experiences<br />Expected Publication: late 2011<br />Follow along…<br />
  • 147. Q?<br />Q&A: final break<br />

×