Mobile Prototyping Essentials Workshop - Part One
Download as PPTX, PDF•48 likes•51,809 views
This document outlines an agenda for a workshop on mobile prototyping essentials. The morning session will discuss what makes mobile UX different from web design and include exercises on identifying mobile needs, ideating concepts, and creating prototypes. The afternoon session focuses on mobile prototyping and includes exercises on storyboarding, translating graphical interfaces to natural user interfaces, and creating in-screen prototypes. Key principles discussed for mobile design include designing experiences that are uniquely mobile, sympathetic to user context, and allow the interface to "speak its power" through intuitive interaction.
Mobile Prototyping Essentials Workshop - Part One
- 1. Mobile Prototyping Essentials Part I Rachel Hinman Senior Research Scientist Nokia Research Lab Palo Alto, California USA Hinman
- 2. 2004
- 3. Q: Where do I begin?
- 4. Q: What can we do with Q: mobile?
- 5. Q: Where do I begin?
- 6. Our plan for today… 8:30am - Noon What makes mobile UX different? Three Design/Mobile UX Exercises: • Identifying Mobile Needs • Ideating in the Wild • Creating a Good Hand Noon – 1:30pm - LUNCH 1:30pm – 5:30pm Mobile prototyping essentials Three Mobile Prototyping Exercises • Storyboarding • Practice Ruthless Editing/Translating GUI to NUI • Creating an In-Screen Prototype
- 7. 8:30am - Noon What makes mobile UX different? Similarities and differences between designing for web and mobile Three most important attributes of great mobile experiences A set of mobile design principles Three mobile design activities
- 8. 8:30am - Noon What makes mobile UX different? Similarities and differences between designing for web and mobile Three most important attributes of great mobile experiences A set of mobile design principles Three mobile design activities
- 9. 8:30am - Noon What makes mobile UX different? Similarities and differences between designing for web and mobile Three most important attributes of great mobile experiences A set of mobile design principles Three mobile design activities
- 10. 8:30am - Noon What makes mobile UX different? Similarities and differences between designing for web and mobile Three most important attributes of great mobile experiences A set of mobile design principles Three mobile design activities
- 11. Okay, let’s get started!
- 12. A Q: What are the similarities?
- 13. UX designers know how to work in a rapidly evolving field 13
- 14. UX designers understand how to create experiences within technical constraints 14
- 15. UX designers use similar tools and processes 15
- 16. QQ: A: What are the differences?
- 17. A mobile phone is not a computer 17
- 18. A umm…. duh!
- 19. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 19
- 20. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 20
- 21. Highly variable context and environment Small screen size and limited text input UI takes up the entire screen Difficult to multi-task and easy to get lost 21
- 22. 22
- 23. 23
- 24. 24
- 26. 26
- 27. 27 27
- 28. The Rearview Mirror Effect
- 29. Even in situations in which aa spirit of Even in situations in which spirit of exploration and freedom exist, where we are exploration and freedom exist, where faculty free free to experiment to work beyond physical are to experiment and work beyond physical and social constraints, our cognitive habits and social constraints, our cognitive habits often get in the way. often get in the way. Marshall McLuhan called called it Marshall McLuhan it “the rear-view mirrorrear-view mirror effect,” noting that “the effect,” noting that “We see the world “We see the world through a rear-view mirror. through a rear-view mirror. We march We march backwards into future.” backwards into the the future.”
- 30. Mobile presents an opportunity to invent new ways for users to interact with information. 30
- 31. Mobile phones aren’t really phones anymore 31
- 36. AQ: What’s the first step?
- 37. 3 Steps 37
- 38. Step One: Become familiar with the medium you’re designing for 38
- 39. NO EXCUSES! Buy a modern mobile device 39
- 40. Step Two: Mobile culture indoctrination 40
- 41. Images needed Observe the culture you’re designing for 41
- 42. Step Three: Brace yourself for a fast and exciting ride 42
- 43. “The rapid development of cell phones is killing early cell phones much faster than it's killing any of the early, older legacy technologies. I think that is a real principle... something you have to understand if you're going to be in this line of work. It's very romantic. It's very fast moving. You are building dead lumps of plastic. When people come out and they show you an iPhone, or an Android... they are showing you larval versions of something much more sophisticated. The world you are building right now is the ground floor for something much larger -- and the soil beneath that ground floor is violently unstable.” Rapid Evolution -- Mobile Monday Amsterdam – November 2008 43
- 44. Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 speak their power 3
- 45. Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 speak their power 3
- 46. Q: A Do you remember a time when the web was new?
- 47. ! A “We need a web presence!”
- 48. Brochureware 48
- 49. ! A “We need online commerce!”
- 50. What about shipping? 50
- 51. ! A “Let’s make our site like…”
- 52. 52
- 53. Lessons Learned from Web We borrowed broken models. Too focused on tactics. We confused the solution with the need. We didn’t focus on what the web could do well.
- 54. Q: A How do we NOT do that again?
- 55. Design Principles Uniquely Mobile Mobile is a unique & different medium - focus on what it can do well. Technology can guide, but should not be the focus. Focus on needs instead of tactics and solutions.
- 56. VS.
- 57. Design Principle: Uniquely Mobile Focus on what mobile can do well
- 58. vs 58
- 59. vs 59
- 60. Design Principle: Uniquely Mobile Technology can help guide, but should not be the focus
- 61. Design Principle: Uniquely Mobile Need vs. Solution
- 62. Research Techniques INVASIVE Prototype Deprivation Testing Study Diary Studies Contextual interviews RESEARCHER RESEARCHER NOT PRESENT PRESENT Online Survey Shadowing Traffic Shop Alongs Studies LESS INVASIVE 62
- 63. Research Techniques INVASIVE Prototype Deprivation Testing Study Use Two Techniques RESEARCHER Diary Studies Contextual interviews RESEARCHER NOT PRESENT PRESENT Online Survey Shadowing Traffic Shop Alongs Studies LESS INVASIVE 63
- 64. Solution Speak… Solution Need Database of Dr. Names Find a Doctor near me Map Get from point A to Point B Calendar I need to know what may happen Email I need to communicate Facebook Updates I need to feel connected LinkedIn I need to manage my identity Search I need to answer a question Picassa I need to share 64
- 65. Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 speak their power 3
- 66. Q: What exactly do you mean by A mobile “context” ?
- 67. A
- 70. ! A Context is complex!
- 71. Context is about A understanding human relationships to the people, places and thingsin the world.
- 72. Context Framework 72
- 73. Context Framework 73
- 74. Orchestration and Inflection 74
- 75. 75
- 76. Spatial 76
- 77. Temporal 77
- 78. Social 78
- 79. Semantic 79
- 80. Peanut butter in Melbourne right now? 80
- 81. The web is good at people and things. A The web is really good at semantic relationships. (and okay at social relationships)
- 82. Mobile is good at places… 82
- 83. Mobile is good at spatial and temporal relationships. 83
- 84. 84
- 85. There are currently not many technologies that help us understand place, and temporal and spatial relationships. 85
- 86. Q: How do we get that understanding?
- 87. Design Principles: Sympathy to Context Design for partial attention and interruption Reduce cognitive load and opportunity cost Ideate in the wild
- 88. Design for partial attention and interruption 88
- 89. Design for partial attention and interruption 89
- 90. Cognitive Load 90
- 91. Opportunity cost 91
- 92. Ideate in the wild… 92
- 93. Your Design Challenge! How might Starbucks use mobile devices to improve their customer experience? 93
- 94. Your Design Challenge! Step 1: Identifying Needs 1. Divide into groups 2. Head to the nearest Starbucks. 3. Develop a list of customer needs based on your observations using the needs worksheet. 25 Minutes 94
- 95. Go outside and brainstorm ideas 95
- 96. Your Design Challenge! Step 2: Sympathy to the mobile context 1. Head to the streets 2. Ideate in the wild – Create 2-3 concepts based on the needs your team identified 25 Minutes 96
- 97. 25 Minutes 97
- 98. 98
- 99. Mobile is good at places… 99
- 100. Mobile is good at places… 100
- 101. One Hour! 101
- 102. Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 speak their power 3
- 103. Q: A Huh?
- 104. 104
- 105. 105
- 106. 106
- 107. We can annotate expectations in the web world 107
- 108. Look inside the book Add to cart Shipping! Free two-day shipping REALLY! Get it new Look inside OR used! Collectible! the book Sell mine Maybe a kindle! 108
- 109. 109
- 110. Q: A How do I create mobile interfaces that “speak their power”?
- 111. Edit!!! 111
- 112. Ruthless Editing 112
- 113. “We made the web in the image of ourselves, and in the U.S., that means OBESE.” ~Jason Grigsby
- 114. A 114
- 115. 115
- 116. A 116
- 117. A 117
- 118. A 118
- 119. Josh Clark Example 119
- 120. Josh Clark Example 120
- 121. Historically, we start with structure…
- 122. Try hiding the structure…
- 123. Try starting with intuition.
- 124. It’s like a card game… 124
- 125. Each card speaks it’s power 125
- 126. You win with a good hand 126
- 127. Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 speak their power 3
- 128. LUNCH! 12 – 1pm
Editor's Notes
- #114: Instead, the web was built upon a static model – the web page. And we’ve allowed those pages to become bloated and unweildy…