O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Mobile Prototyping Essentials Workshop: Part 1

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 146 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Mobile Prototyping Essentials Workshop: Part 1 (20)

Anúncio

Mais recentes (20)

Mobile Prototyping Essentials Workshop: Part 1

  1. 1. Mobile Prototyping Essentials Part I Rachel Hinman Senior Research Scientist Nokia Research Lab Palo Alto, California USA Hinman
  2. 2. 2004
  3. 3. Q: Where do I begin?
  4. 4. Q: What can we do with Q: mobile?
  5. 5. Q: Where do I begin?
  6. 6. Our plan for today… 8:30am - Noon What makes mobile UX different? Two Design/Mobile UX Exercises: • Identifying Mobile Needs • Ideating in the Wild 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. 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. 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. 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. 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. 11. Okay, let’s get started!
  12. 12. A Q: What are the similarities?
  13. 13. UX designers know how to work in a rapidly evolving field 13
  14. 14. UX designers understand how to create experiences within technical constraints 14
  15. 15. UX designers use similar tools and processes 15
  16. 16. QQ: A: What are the differences?
  17. 17. A mobile phone is not a computer 17
  18. 18. A umm…. duh!
  19. 19. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 19
  20. 20. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 20
  21. 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. 22
  23. 23. 23
  24. 24. 24
  25. 25. 26
  26. 26. 27 27
  27. 27. The Rearview Mirror Effect
  28. 28. 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.”
  29. 29. Mobile presents an opportunity to invent new ways for users to interact with information. 30
  30. 30. Mobile phones aren’t really phones anymore 31
  31. 31. AQ: What’s the first step?
  32. 32. 3 Steps 37
  33. 33. Step One: Become familiar with the medium you’re designing for 38
  34. 34. NO EXCUSES! Buy a modern mobile devices 39
  35. 35. Step Two: Mobile culture indoctrination 40
  36. 36. Images needed Observe the culture you’re designing for 41
  37. 37. Step Three: Brace yourself for a fast and exciting ride 42
  38. 38. “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
  39. 39. Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 speak their power 3
  40. 40. Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 speak their power 3
  41. 41. Q: A Do you remember a time when the web was new?
  42. 42. ! A “We need a web presence!”
  43. 43. Brochureware 48
  44. 44. ! A “We need online commerce!”
  45. 45. What about shipping? 50
  46. 46. ! A “Let’s make our site like…”
  47. 47. 52
  48. 48. 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.
  49. 49. Q: A How do we NOT do that again?
  50. 50. 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.
  51. 51. Design Principle: Uniquely Mobile Focus on what mobile can do well
  52. 52. A mobile phone is not a computer 57
  53. 53. 60
  54. 54. Design Principle: Uniquely Mobile Focus on what mobile can do well • Small form factor • Gesture • Limited battery • Sound/Voice • Inconsistent network • Image/Video access • GPS • Vast and unpredictable • Animation contexts of use • Facial Recognition • Highly personal • Sensors • Microphone and • Touchscreen Speaker
  55. 55. VS.
  56. 56. vs 64
  57. 57. vs 65
  58. 58. Design Principle: Uniquely Mobile Technology can help guide, but should not be the focus
  59. 59. Design Principle: Uniquely Mobile Need vs. Solution
  60. 60. 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 68
  61. 61. 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 69
  62. 62. 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 identit Search I need to find information 70
  63. 63. Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 speak their power 3
  64. 64. Q: What exactly do you mean by A mobile “context” ?
  65. 65. A
  66. 66. ! A Context is complex!
  67. 67. Context Matters 77
  68. 68. Context will likely be your blindside 78
  69. 69. Context is about A understanding human relationships to the people, places and thingsin the world.
  70. 70. Context Framework 80
  71. 71. Context Framework 81
  72. 72. Orchestration and Inflection 82
  73. 73. 83
  74. 74. Spatial 84
  75. 75. Temporal 85
  76. 76. Social 86
  77. 77. Semantic 87
  78. 78. Peanut butter in Melbourne right now? 88
  79. 79. The web is good at people and things. A The web is really good at semantic relationships. (and okay at social relationships)
  80. 80. Mobile is good at places… 90
  81. 81. Mobile is good at spatial and temporal relationships. 91
  82. 82. 92
  83. 83. There are currently not many technologies that help us understand place, and temporal and spatial relationships. 93
  84. 84. Q: How do we get that understanding?
  85. 85. A
  86. 86. A Throughout the design process, our work should be situated in the contexts where it will be used.
  87. 87. Go to the Gemba
  88. 88. Go to the Gemba
  89. 89. Go to the Gemba
  90. 90. Ideate in the wild… 106
  91. 91. Your Design Challenge! How might Starbucks use mobile devices to improve their customer experience? 107
  92. 92. Your Design Challenge! Step 1: Identifying Needs 1. Divide into groups 2. Head to the nearest Starbucks. 3. Observe mobile users in a mobile context 4. Develop a list of customer needs based on your observations using the needs worksheet. 30 Minutes 108
  93. 93. 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 30 Minutes 109
  94. 94. Go outside and brainstorm ideas 110
  95. 95. 25 Minutes 111
  96. 96. 112
  97. 97. Mobile is good at places… 113
  98. 98. Mobile is good at places… 114
  99. 99. One Hour! 115
  100. 100. Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 speak their power 3
  101. 101. Q: A Huh?
  102. 102. 118
  103. 103. 119
  104. 104. 120
  105. 105. We can annotate expectations in the web world 121
  106. 106. 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! 122
  107. 107. 123
  108. 108. Q: A How do I create mobile interfaces that “speak their power”?
  109. 109. Edit!!! 125
  110. 110. Ruthless Editing 126
  111. 111. “We made the web in the image of ourselves, and in the U.S., that means OBESE.” ~Jason Grigsby
  112. 112. A 128
  113. 113. 129
  114. 114. 131
  115. 115. A 132
  116. 116. A 133
  117. 117. A 134
  118. 118. Josh Clark Example 139
  119. 119. Josh Clark Example 140
  120. 120. Historically, we start with structure…
  121. 121. Try hiding the structure…
  122. 122. Try starting with instinct and intuition
  123. 123. More on this after lunch…
  124. 124. Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 speak their power 3
  125. 125. LUNCH! 12 – 1pm

Notas do Editor

  • Instead, the web was built upon a static model – the web page. And we’ve allowed those pages to become bloated and unweildy…

×