Mobile Prototyping Essentials Workshop - Part One
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Mobile Prototyping Essentials Workshop - Part One

on

  • 8,418 views

Mobile prototyping essentials workshop with Rosenfeld Media - May 24th

Mobile prototyping essentials workshop with Rosenfeld Media - May 24th

Statistics

Views

Total Views
8,418
Views on SlideShare
5,299
Embed Views
3,119

Actions

Likes
47
Downloads
210
Comments
0

20 Embeds 3,119

http://blog.i2fly.com 2184
http://thumbtribe.tumblr.com 271
http://tonyplus.tumblr.com 197
http://www.linkedin.com 196
http://192.168.0.228 65
http://kobewan.com 64
http://mink7.com 55
http://kobewan.tumblr.com 23
http://tonyplus.me 20
http://kobewan.posterous.com 14
http://flavors.me 6
http://webcache.googleusercontent.com 4
https://twitter.com 4
http://localhost 4
http://www.google.co.za 3
http://www.twylah.com 3
http://us-w1.rockmelt.com 3
http://ranksit.com 1
http://www.udemy.com 1
https://www.linkedin.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 One Presentation Transcript

  • 1. Mobile Prototyping Essentials Part IRachel HinmanSenior Research ScientistNokia Research LabPalo Alto, California USA Hinman
  • 2. 2004
  • 3. Q: Where do I begin?
  • 4. Q: What can we do withQ: mobile?
  • 5. Q: Where do I begin?
  • 6. 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• Practice Ruthless Editing/Translating GUI to NUI• Creating an In-Screen Prototype
  • 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: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. 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. 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. 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 createexperiences 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 environmentSmall screen size and limited text inputUI takes up the entire screenDifficult to multi-task and easy to get lost 21
  • 22. 22
  • 23. 23
  • 24. 24
  • 25. 26
  • 26. 2727
  • 27. The Rearview Mirror Effect
  • 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. Mobile presents anopportunity to invent newways for users to interactwith information. 30
  • 30. Mobile phones aren’t really phones anymore 31
  • 31. AQ: What’s the first step?
  • 32. 3Steps 37
  • 33. Step One: Become familiarwith the medium you’re designing for 38
  • 34. NOEXCUSES! Buy a modern mobile device 39
  • 35. Step Two: Mobile culture indoctrination 40
  • 36. Images neededObserve the culture you’re designing for 41
  • 37. Step Three: Brace yourself for a fast and exciting ride 42
  • 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. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
  • 40. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
  • 41. Q:A Do you remember a time when the web was new?
  • 42. !A “We need a web presence!”
  • 43. Brochureware 48
  • 44. !A “We need online commerce!”
  • 45. What about shipping? 50
  • 46. !A “Let’s make our site like…”
  • 47. 52
  • 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. Q:A How do we NOT do that again?
  • 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. VS.
  • 52. Design Principle: Uniquely MobileFocus on what mobile can do well
  • 53. vs 58
  • 54. vs 59
  • 55. Design Principle: Uniquely MobileTechnology can help guide,but should not be the focus
  • 56. Design Principle: Uniquely MobileNeed vs. Solution
  • 57. 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
  • 58. 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
  • 59. Solution Speak…Solution NeedDatabase of Dr. Names Find a Doctor near meMap Get from point A to Point BCalendar I need to know what mayhappenEmail I need to communicateFacebook Updates I need to feel connectedLinkedIn I need to manage my identitySearch I need to answer a questionPicassa I need to share 64
  • 60. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
  • 61. Q: What exactly do you mean byA mobile “context” ?
  • 62. A
  • 63. !A Context is complex!
  • 64. Context is aboutA understanding human relationships to the people, places and thingsin the world.
  • 65. Context Framework 72
  • 66. Context Framework 73
  • 67. Orchestration and Inflection 74
  • 68. 75
  • 69. Spatial 76
  • 70. Temporal 77
  • 71. Social 78
  • 72. Semantic 79
  • 73. Peanut butter in Melbourne right now? 80
  • 74. The web is good at peopleand things.AThe web is really good atsemantic relationships.(and okay at social relationships)
  • 75. Mobile is good at places… 82
  • 76. Mobile is good at spatialand temporal relationships. 83
  • 77. 84
  • 78. There are currently notmany technologiesthat help us understandplace, and temporal andspatial relationships. 85
  • 79. Q: How do we get that understanding?
  • 80. Design Principles:Sympathy to Context Design for partial attention and interruption Reduce cognitive load and opportunity cost Ideate in the wild
  • 81. Design for partial attention and interruption 88
  • 82. Design for partial attention and interruption 89
  • 83. Cognitive Load 90
  • 84. Opportunity cost 91
  • 85. Ideate in the wild… 92
  • 86. Your Design Challenge!How might Starbucks use mobile devices to improve their customer experience? 93
  • 87. Your Design Challenge!Step 1: Identifying Needs1. Divide into groups2. Head to the nearest Starbucks.3. Develop a list of customer needs based on your observations using the needs worksheet.25 Minutes 94
  • 88. Go outside and brainstorm ideas 95
  • 89. 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 identified25 Minutes 96
  • 90. 25 Minutes 97
  • 91. 98
  • 92. Mobile is good at places… 99
  • 93. Mobile is good at places… 100
  • 94. One Hour! 101
  • 95. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
  • 96. Q:A Huh?
  • 97. 104
  • 98. 105
  • 99. 106
  • 100. We can annotate expectations in the web world 107
  • 101. 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! 108
  • 102. 109
  • 103. Q:A How do I create mobile interfaces that “speak their power”?
  • 104. Edit!!! 111
  • 105. Ruthless Editing 112
  • 106. “We made the webin the image ofourselves, and inthe U.S., thatmeans OBESE.”~Jason Grigsby
  • 107. A 114
  • 108. 115
  • 109. A 116
  • 110. A 117
  • 111. A 118
  • 112. Josh Clark Example 119
  • 113. Josh Clark Example 120
  • 114. Historically, we start with structure…
  • 115. Try hiding the structure…
  • 116. Try starting with intuition.
  • 117. It’s like a card game… 124
  • 118. Each card speaks it’s power 125
  • 119. You win with a good hand 126
  • 120. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
  • 121. LUNCH! 12 – 1pm