Mobile Prototyping Essentials Workshop: Part 1

1,688
-1

Published on

Published in: Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,688
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
137
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide
  • Instead, the web was built upon a static model – the web page. And we’ve allowed those pages to become bloated and unweildy…
  • Mobile Prototyping Essentials Workshop: Part 1

    1. 1. Mobile Prototyping Essentials Part IRachel HinmanSenior Research ScientistNokia Research LabPalo Alto, California USA Hinman
    2. 2. 2004
    3. 3. Q: Where do I begin?
    4. 4. Q: What can we do withQ: mobile?
    5. 5. Q: Where do I begin?
    6. 6. Our plan for today…8:30am - NoonWhat makes mobile UX different?Two Design/Mobile UX Exercises:• Identifying Mobile Needs• Ideating in the WildNoon – 1:30pm - LUNCH1:30pm – 5:30pmMobile prototyping essentialsThree Mobile Prototyping Exercises• Storyboarding• Practice Ruthless Editing/Translating GUI to NUI• Creating an In-Screen Prototype
    7. 7. 8:30am - NoonWhat 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 - NoonWhat 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 - NoonWhat 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 - NoonWhat 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 createexperiences 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 environmentSmall screen size and limited text inputUI takes up the entire screenDifficult to multi-task and easy to get lost 21
    22. 22. 22
    23. 23. 23
    24. 24. 24
    25. 25. 26
    26. 26. 2727
    27. 27. The Rearview Mirror Effect
    28. 28. Even in situations in which aa spirit of Even in situations in which spirit ofexploration and freedom exist, where we are exploration and freedom exist, where facultyfree free to experiment to work beyond physicalare 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 anopportunity to invent newways for users to interactwith information. 30
    30. 30. Mobile phones aren’t really phones anymore 31
    31. 31. AQ: What’s the first step?
    32. 32. 3Steps 37
    33. 33. Step One: Become familiarwith the medium you’re designing for 38
    34. 34. NOEXCUSES! Buy a modern mobile devices 39
    35. 35. Step Two: Mobile culture indoctrination 40
    36. 36. Images neededObserve 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 killingearly cell phones much faster than its killing anyof the early, older legacy technologies.I think that is a real principle... something youhave to understand if youre going to be in this lineof work. Its very romantic. Its very fast moving.You are building dead lumps of plastic.When people come out and they show you aniPhone, or an Android... they are showing yoularval versions of something much moresophisticated.The world you are building right now is the groundfloor for something much larger -- and the soilbeneath that ground floor is violently unstable.” Rapid Evolution-- Mobile Monday Amsterdam – November 2008 43
    39. 39. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
    40. 40. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
    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 PrinciplesUniquely 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 MobileFocus on what mobile can do well
    52. 52. A mobile phone is not a computer 57
    53. 53. 60
    54. 54. Design Principle: Uniquely MobileFocus on what mobile can do well• Small form factor • Gesture• Limited battery • Sound/Voice• Inconsistent network • Image/Videoaccess • GPS• Vast and unpredictable • Animationcontexts 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 MobileTechnology can help guide,but should not be the focus
    59. 59. Design Principle: Uniquely MobileNeed 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 NeedDatabase of Dr. Names Find a Doctor near meMap Get from pointA to Point BCalendar I need to know whatmay happenEmail I need tocommunicateFacebook Updates I need to feel connectedLinkedIn I need to manage my identitSearch I need to find information 70
    63. 63. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
    64. 64. Q: What exactly do you mean byA 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 aboutA 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 peopleand things.AThe web is really good atsemantic relationships.(and okay at social relationships)
    80. 80. Mobile is good at places… 90
    81. 81. Mobile is good at spatialand temporal relationships. 91
    82. 82. 92
    83. 83. There are currently notmany technologiesthat help us understandplace, and temporal andspatial 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 Needs1. Divide into groups2. Head to the nearest Starbucks.3. Observe mobile users in a mobile context4. 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 context1. Head to the streets2. Ideate in the wild – Create 2-3 concepts based on the needs your team identified30 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 mobile2 are sympathetic to context3 speak their power3
    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 insidethe book Add to cart Shipping! Free two-day shippingREALLY! Get it newLook 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 webin the image ofourselves, and inthe U.S., thatmeans 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 mobile2 are sympathetic to context3 speak their power3
    125. 125. LUNCH! 12 – 1pm
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×