0
Mobile Prototyping Essentials                                                     Part IRachel HinmanSenior Research Scien...
2004
Q:     Where do I begin?
Q:      What can we do withQ:      mobile?
Q:     Where do I begin?
Our plan for today…8:30am - NoonWhat makes mobile UX different?Three Design/Mobile UX Exercises:• Identifying Mobile Needs...
8:30am - NoonWhat makes mobile UX different?   Similarities and differences between   designing for web and mobile   Three...
8:30am - NoonWhat makes mobile UX different?   Similarities and differences between   designing for web and mobile   Three...
8:30am - NoonWhat makes mobile UX different?   Similarities and differences between   designing for web and mobile   Three...
8:30am - NoonWhat makes mobile UX different?   Similarities and differences between   designing for web and mobile   Three...
Okay, let’s get started!
A    Q:         What are the similarities?
UX designers know how to work      in a rapidly evolving field                               13
UX designers understand how to createexperiences within technical constraints                                      14
UX designers use similar    tools and processes                      15
QQ:A:      What are the differences?
A mobile phone is not a computer                              17
A    umm…. duh!
Seated in a relatively predictable environment          Large screen enables multi-tasking             Keyboard and a mous...
Seated in a relatively predictable environment          Large screen enables multi-tasking             Keyboard and a mous...
Highly variable context and environmentSmall screen size and limited text inputUI takes up the entire screenDifficult to m...
22
23
24
26
2727
The Rearview Mirror Effect
Even in situations in which aa spirit of       Even in situations in which spirit ofexploration and freedom exist, where w...
Mobile presents anopportunity to invent newways for users to interactwith information.                             30
Mobile phones aren’t really phones anymore                                        31
AQ:      What’s the first step?
3Steps        37
Step One: Become familiarwith the medium you’re designing for                                   38
NOEXCUSES!   Buy a modern mobile device                            39
Step Two: Mobile culture indoctrination                                     40
Images neededObserve the culture you’re designing for                                      41
Step Three: Brace yourself for a fast and exciting ride                           42
“The rapid development of cell phones is killingearly cell phones much faster than its killing anyof the early, older lega...
Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
Q:A     Do you remember a time     when the web was new?
!A    “We need a web presence!”
Brochureware           48
!A    “We need online commerce!”
What about shipping?                  50
!A    “Let’s make our site like…”
52
Lessons Learned from Web  We borrowed broken models.  Too focused on tactics.  We confused the solution with the need.  We...
Q:A     How do we NOT     do that again?
Design PrinciplesUniquely Mobile  Mobile is a unique & different medium  - focus on what it can do well.  Technology can g...
VS.
Design Principle: Uniquely MobileFocus on what mobile can do well
vs     58
vs     59
Design Principle: Uniquely MobileTechnology can help guide,but should not be the focus
Design Principle: Uniquely MobileNeed vs. Solution
Research Techniques                             INVASIVE                                           Prototype              ...
Research Techniques                             INVASIVE                                           Prototype              ...
Solution Speak…Solution                NeedDatabase of Dr. Names   Find a Doctor near meMap                     Get from p...
Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
Q:     What exactly do you mean byA     mobile “context” ?
A
!A    Context is complex!
Context is aboutA    understanding    human relationships to the    people, places and    thingsin the world.
Context Framework                    72
Context Framework                    73
Orchestration and Inflection                          74
75
Spatial     76
Temporal       77
Social     78
Semantic       79
Peanut butter in Melbourne right now?                                    80
The web is good at peopleand things.AThe web is really good atsemantic relationships.(and okay at social relationships)
Mobile is good at places…                            82
Mobile is good at spatialand temporal relationships.                              83
84
There are currently notmany technologiesthat help us understandplace, and temporal andspatial relationships.              ...
Q:     How do we get that     understanding?
Design Principles:Sympathy to Context  Design for partial attention  and interruption  Reduce cognitive load  and opportun...
Design for partial attention and interruption                                            88
Design for partial attention and interruption                                            89
Cognitive Load             90
Opportunity cost               91
Ideate in the wild…                  92
Your Design Challenge!How might Starbucks use mobile devices to   improve their customer experience?                      ...
Your Design Challenge!Step 1: Identifying Needs1. Divide into groups2. Head to the nearest   Starbucks.3. Develop a list o...
Go outside and brainstorm ideas                             95
Your Design Challenge!Step 2: Sympathy to the mobile context1. Head to the streets2. Ideate in the wild –   Create 2-3 con...
25 Minutes             97
98
Mobile is good at places…                            99
Mobile is good at places…                            100
One Hour!            101
Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
Q:A     Huh?
104
105
106
We can annotate expectations            in the web world                          107
Look insidethe book                                                         Add to cart                                  S...
109
Q:A     How do I create     mobile interfaces that     “speak their power”?
Edit!!!          111
Ruthless Editing           112
“We made the webin the image ofourselves, and inthe U.S., thatmeans OBESE.”~Jason Grigsby
A    114
115
A    116
A    117
A    118
Josh Clark Example                 119
Josh Clark Example                 120
Historically, we start with structure…
Try hiding the structure…
Try starting with intuition.
It’s like a card game…                   124
Each card speaks it’s power                         125
You win with a good hand                      126
Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
LUNCH! 12 – 1pm
Mobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part One
Upcoming SlideShare
Loading in...5
×

Mobile Prototyping Essentials Workshop - Part One

8,588

Published on

Mobile prototyping essentials workshop with Rosenfeld Media - May 24th

Published in: Design, Business, Technology
0 Comments
47 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,588
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
217
Comments
0
Likes
47
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…
  • Transcript of "Mobile Prototyping Essentials Workshop - Part One"

    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?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. 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 device 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. VS.
    52. 52. Design Principle: Uniquely MobileFocus on what mobile can do well
    53. 53. vs 58
    54. 54. vs 59
    55. 55. Design Principle: Uniquely MobileTechnology can help guide,but should not be the focus
    56. 56. Design Principle: Uniquely MobileNeed vs. Solution
    57. 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. 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. 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. 60. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
    61. 61. Q: What exactly do you mean byA mobile “context” ?
    62. 62. A
    63. 63. !A Context is complex!
    64. 64. Context is aboutA understanding human relationships to the people, places and thingsin the world.
    65. 65. Context Framework 72
    66. 66. Context Framework 73
    67. 67. Orchestration and Inflection 74
    68. 68. 75
    69. 69. Spatial 76
    70. 70. Temporal 77
    71. 71. Social 78
    72. 72. Semantic 79
    73. 73. Peanut butter in Melbourne right now? 80
    74. 74. The web is good at peopleand things.AThe web is really good atsemantic relationships.(and okay at social relationships)
    75. 75. Mobile is good at places… 82
    76. 76. Mobile is good at spatialand temporal relationships. 83
    77. 77. 84
    78. 78. There are currently notmany technologiesthat help us understandplace, and temporal andspatial relationships. 85
    79. 79. Q: How do we get that understanding?
    80. 80. Design Principles:Sympathy to Context Design for partial attention and interruption Reduce cognitive load and opportunity cost Ideate in the wild
    81. 81. Design for partial attention and interruption 88
    82. 82. Design for partial attention and interruption 89
    83. 83. Cognitive Load 90
    84. 84. Opportunity cost 91
    85. 85. Ideate in the wild… 92
    86. 86. Your Design Challenge!How might Starbucks use mobile devices to improve their customer experience? 93
    87. 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. 88. Go outside and brainstorm ideas 95
    89. 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. 90. 25 Minutes 97
    91. 91. 98
    92. 92. Mobile is good at places… 99
    93. 93. Mobile is good at places… 100
    94. 94. One Hour! 101
    95. 95. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
    96. 96. Q:A Huh?
    97. 97. 104
    98. 98. 105
    99. 99. 106
    100. 100. We can annotate expectations in the web world 107
    101. 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. 102. 109
    103. 103. Q:A How do I create mobile interfaces that “speak their power”?
    104. 104. Edit!!! 111
    105. 105. Ruthless Editing 112
    106. 106. “We made the webin the image ofourselves, and inthe U.S., thatmeans OBESE.”~Jason Grigsby
    107. 107. A 114
    108. 108. 115
    109. 109. A 116
    110. 110. A 117
    111. 111. A 118
    112. 112. Josh Clark Example 119
    113. 113. Josh Clark Example 120
    114. 114. Historically, we start with structure…
    115. 115. Try hiding the structure…
    116. 116. Try starting with intuition.
    117. 117. It’s like a card game… 124
    118. 118. Each card speaks it’s power 125
    119. 119. You win with a good hand 126
    120. 120. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
    121. 121. 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.

    ×