Mobile UX Essentials

  • 5,662 views
Uploaded on

Slides from Mobile UX Essentials workshop at UX Australia, 2010

Slides from Mobile UX Essentials workshop at UX Australia, 2010

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,662
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
257
Comments
2
Likes
33

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mobile UX EssentialsUX Australia 2010
    Rachel Hinman
    Senior Research Scientist
    Nokia Research Lab
    Palo Alto, California USA
    Title
  • 2. 2004
    I used to be a web designer, too
  • 3. Where do I begin?
    Q:
    Where do I begin
  • 4. How can we streamline the checkout process
    What can we do with mobile?
    Q:
    Q:
  • 5. Where do I begin?
    Q:
    Where do I begin
  • 6. Our plan for today…
    Our plan for today
    Similarities and differences between designing for web and mobile
  • 7. Our plan for today…
    Our plan for today
    Similarities and differences between designing for web and mobile
    Three most important attributes of great mobile experiences
  • 8. Our plan for today…
    Our plan for today
    Similarities and differences between designing for web and mobile
    Three most important attributes of great mobile experiences
    A set of mobile design principles
  • 9. Our plan for today…
    Our plan for today
    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. Along the way…
    Along the way
    Watch for slides with this orange label!
    Slides Worth Keeping
    Design Principles
    Design Activities
    Shameless Opinion
  • 11. Okay, let’s get started!
    Okay… let’s get started
  • 12. A
    What are the similarities
    What are the similarities?
    Q:
  • 13. UX designers know how to work
    in a rapidly evolving field
    13
    Web designers know how to work in a rapidly evolving field
  • 14. UX designers understand how to create experiences within technical constraints
    14
    Ability to work within technical constraints
  • 15. UX designers use similar tools and processes
    15
    Similar Tools… Similar processes
  • 16. What are the differences?
    What are the differences?
    A
    Q:
  • 17. A mobile phone is not a computer
    17
    A mobile phone is not a computer
  • 18. umm…. duh!
    A
    Um… duh!
  • 19. 19
    Differences in the mobile environment
    Seated in a relatively predictable environment
    Large screen enables multi-tasking
    Keyboard and a mouse for input
  • 20. 20
    Differences in the mobile environment
    Seated in a relatively predictable environment
    Large screen enables multi-tasking
    Keyboard and a mouse for input
  • 21. Differences in the mobile environment
    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
    Mobile phones started out as a one-to-one
  • 23. They evolved
    23
  • 24. Mobile phones evolved from the landline phone
    24
  • 25.
  • 26. 26
    Smartphone… added
  • 27. 27
    Smartphone… added
    Opinion!
    27
  • 28. Hypothesis vs. Agenda
    The Rearview Mirror
  • 29. Hypothesis vs. Agenda
    Even in situations in which a spirit of exploration and freedom exist, where faculty are free to experiment to work beyond physical and social constraints, our cognitive habits often get in the way. Marshall McLuhan called it “the rear-view mirror effect,” noting that “We see the world through a rear-view mirror. We march backwards into the future.”
    Even in situations in which a spirit of exploration and freedom exist, where faculty are free to experiment to work beyond physical and social constraints, our cognitive habits often get in the way. Marshall McLuhan called it“the rear-view mirror effect,” noting that“We see the world through a rear-view mirror. We march backwards into the future.”
  • 30. 30
    Mobile presents an opportunity to invent new ways…
    Opinion!
    Mobile presents an opportunity to invent new ways for users to interact with information.
  • 31. 31
    iPhone
    Mobile phones aren’t really phones anymore
  • 32. Hypothesis vs. Agenda
  • 33. Hypothesis vs. Agenda
  • 34. Hypothesis vs. Agenda
  • 35.
  • 36. Hypothesis vs. Agenda
  • 37. Hypothesis vs. Agenda
  • 38. What are the differences?
    What’s the first step?
    A
    Q:
  • 39. 39
    Shift your perspective and point of view
    Step One: Know the medium you’re designing for
  • 40. 40
    Shift your perspective and point of view
    NO EXCUSES!
    Buy a modern mobile device
  • 41. 41
    Shift your perspective and point of view
    Mobile Culture Indoctrination
  • 42. 42
    Shift your perspective and point of view
    Mobile Culture Indoctrination
  • 43. 43
    Shift your perspective and point of view
    Images needed
    Step Two: Observe the culture you’re designing for
  • 44. 44
    Shift your perspective and point of view
    Step Three: Brace yourself for a fast and exciting ride
  • 45. Shift your perspective and point of view
    “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.”
    -- Mobile Monday Amsterdam – November 2008
    Rapid Evolution
    45
  • 46. 1
    are uniquely mobile
    Great Mobile user experiences
    steal this slide!
    Great Mobile Experiences:
    2
    are sympathetic to context
    3
    speak their power
  • 47. Great Mobile Experiences:
    1
    are uniquely mobile
    Great Mobile user experiences
  • 48. Do you remember a time…
    Do you remember a time when the web was new?
    Q:
    A
  • 49. Do you remember a time…
    “We need a web presence!”
    !
    A
  • 50. 50
    Solution: Brochure - online
    Brochureware
  • 51. “we need a web presence”
    “We need online commerce!”
    !
    A
  • 52. 52
    Online commerce
    What about shipping?
  • 53. Make it like the world
    “Let’s make our site like…”
    !
    A
    A
  • 54. 54
    Southwest airlines
  • 55. What we learned from the web
    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.
  • 56. How do we not do that again?
    How do we NOT do that again?
    Q:
    A
    A
  • 57. What we learned from the web
    steal this slide!
    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.
  • 58. What we learned from the web
    Design Principle: Uniquely Mobile Focus on what mobile can do well
  • 59. What we learned from the web
    Design Principle: Uniquely Mobile Technology can help guide, but should not be the focus
  • 60. What we learned from the web
    Design Principle: Uniquely Mobile Need vs. Solution
  • 61. Identify your assumptions
    Research Techniques
    INVASIVE
    Prototype
    Testing
    Deprivation
    Study
    Contextual
    interviews
    Diary Studies
    RESEARCHER
    PRESENT
    RESEARCHER
    NOT PRESENT
    Online
    Survey
    Shadowing
    Shop Alongs
    Traffic
    Studies
    LESS INVASIVE
    61
  • 62. Identify your assumptions
    Research Techniques
    INVASIVE
    Prototype
    Testing
    Deprivation
    Study
    Use Two Techniques
    Contextual
    interviews
    Diary Studies
    RESEARCHER
    PRESENT
    RESEARCHER
    NOT PRESENT
    Online
    Survey
    Shadowing
    Shop Alongs
    Traffic
    Studies
    LESS INVASIVE
    62
  • 63. Identify your assumptions
    Research Techniques
    INVASIVE
    Prototype
    Testing
    Deprivation
    Study
    Contextual
    interviews
    Diary Studies
    RESEARCHER
    PRESENT
    RESEARCHER
    NOT PRESENT
    Online
    Survey
    Shadowing
    Shop Alongs
    Traffic
    Studies
    LESS INVASIVE
    63
  • 64. 64
    Identify your assumptions
    Your Design Challenge!
    Step 1: Identifying Mobile Needs
    Activity
    Divide into groups
    Read your design challenge
    Develop a list of mobile needs
    Identify top 3-5 mobile needs
    20 Minutes
  • 65. are uniquely mobile
    1
    Great Mobile user experiences
    Great Mobile Experiences:
    are sympathetic to context
    2
  • 66. Pictures of mobile contexts
    What exactly do you mean by mobile “context” ?
    Q:
    A
  • 67. Pictures of mobile contexts
    A
  • 68. More pictures of mobile contexts
  • 69. Social context
  • 70. Context is complex
    Context is complex!
    !
    A
  • 71. Context is about understanding human relationships to the people,places and things in the world.
    A
    Context is about understanding the relationships
  • 72. 72
    Context Framework
    Context Framework
    steal this slide!
  • 73. 73
    Context Framework
    Context Framework
    steal this slide!
  • 74. 74
    Relationships Chording
    Orchestration and Inflection
  • 75. 75
    Peanut butter
  • 76. 76
    Google: Facebook
    Spatial
  • 77. 77
    Temporal
    Temporal
  • 78. Spatial - peanut butter
    Social
    78
  • 79. Google: Facebook
    Semantic
    79
  • 80. 80
    Peanut butter in Denver
    Peanut butter in Melbourne right now?
  • 81. The web is good at people and things.
    The web is good at semantic relationships.
    (and okay at social relationships)
    A
    Context is about understanding the relationships
  • 82. Context Framework
    Mobile is good at places…
    steal this slide!
    82
  • 83. Context Framework
    Mobile is good at spatial and temporal relationships.
    steal this slide!
    83
  • 84. 84
    Google maps - PC vs. Mobile
  • 85. Temporal and spatial relationships are underserved
    There are currently not many technologiesthat help us understand place, and temporal and spatial relationships.
    85
  • 86. How do you get that understanding?
    How do we get that understanding?
    Q:
  • 87. Design for partial attention and interruption
    1
    Sympathy to context principles
    Design Principles:
    Sympathy to Context
    steal this slide!
    2
    Reduce cognitive load and opportunity cost
    3
    Ideate in the wild
  • 88. Design for partial attention and interruption
    88
    Text entry will never be easy
  • 89. 89
    Text entry will never be easy
    Design for partial attention and interruption
  • 90. Opportunity cost
    90
  • 91. 91
    Text entry will never be easy
    Ideate in the wild…
  • 92. 92
    Wand in the world
    Your Design Challenge!
    Step 2: Sympathy to the mobile context
    Activity
    Divide into groups
    Head to the streets
    Ideate in the wild – Create 2-3 concepts based on the needs your team identified
    20-30 Minutes
  • 93. 93
    “in the wild” ideation
    Activity
    Go outside and brainstorm ideas
  • 94. 94
    “in the wild” ideation
    Activity
    20-30 Minutes
  • 95. Context Framework
    Mobile is good at places…
    steal this slide!
    95
  • 96. Context Framework
    Mobile is good at places…
    steal this slide!
    96
  • 97. Great Mobile Experiences:
    are uniquely mobile
    1
    Great Mobile user experiences
    are sympathetic to context
    2
    speak their power
    3
  • 98. Speak their power?
    Huh?
    Q:
    A
  • 99. A light switch
    99
  • 100. Shopping cart
    100
  • 101. Shopping cart
    101
  • 102. We can annotate expectations in the web world
    102
    We can annotate expectations in the web world
  • 103. We can annotate expectations in the web world
    Free two-day shipping
    Look inside the book
    REALLY!Look inside the book
    Get it new OR used!
    Sell mine
    Add to cart
    Shipping!
    Collectible!
    Maybe a kindle!
    We can annotate expectations in the web world
    103
  • 104. Options in mobile have to be readily apparent
    104
    Options have to be apparent and intuitive in mobile for people to
  • 105. How do you make interfaces that speak their power
    How do I create mobile interfaces that “speak their power”?
    Q:
    A
  • 106. Say good bye to done
    steal this slide!
    Design Principles:
    Interfaces that speak their power
    Understand the characteristics of GUI, NUI, OUI interfaces
    1
    2
    Grow ruthless editing skills
    3
    Say good-bye to done
  • 107. steal this slide!
    107
    Wireframe
  • 108. 108
    Wireframe
    We’re reaching the edges of what GUI can do
  • 109. 109
    Wireframe
    It’s not longer “what you see it what you get…”
  • 110. 110
    Wireframe
    …now it’s “what you do is what you get”
  • 111. 111
    Wireframe
    Different platforms express characteristics differently
  • 112. steal this slide!
    112
    Wireframe
  • 113. 113
    Wireframe
    Ruthless editing is part of the NUI design process
  • 114. Say Goodbye do done
    114
    Wireframe
  • 115. This should look familiar…
    115
    Wireframe
  • 116. 116
    Wireframe
    This should look familiar…
    The web has evolved around a task-efficiency model.
    Mobile is different.
  • 117. Mobile is different….
    117
    Mobile is different
  • 118. Mobile is different….
    118
    Mobile is different
  • 119. 119
    Mobile is different
    Mobile is different….
    Mobile is about pivoting people through information quickly.
    It’s about exposing possibilities.
  • 120. What’s the point?
    “What can happen?”
    “What’s the point?”
    TASK
    POSSIBILITIES
  • 121. Tasks are about completion…
    121
    Tasks are about completion
  • 122. 122
    Tasks are about completion
    Tasks are about completion…
    Possibilities are interactions that accrue over time…
  • 123. Tasks are about completion
    Tasks are about completion…
    Possibilities are interactions that accrue over time…
    … or facilitate exploration…
    123
  • 124. … or facilitate exploration…
    124
    Tasks are about completion
    Tasks are about completion…
    Possibilities are interactions that accrue over time…
    ..or are about SENSING
    INTENT!
  • 125. 125
    Example -
  • 126. 126
    Example -
  • 127. 127
    Example -
  • 128. 128
    Example -
  • 129. 129
    Example -
  • 130. 130
    Example -
  • 131. How do you make interfaces that speak their power
    How do I design for possibilities?
    Q:
    A
  • 132. How do you make interfaces that speak their power
    A
    132
  • 133. How do you make interfaces that speak their power
    A
    133
  • 134. How do you make interfaces that speak their power
    A
    134
  • 135. It’s like a card game…
    135
    It’s like a game of cards
  • 136. Each card speaks it’s power
    136
    It’s like a game of cards
  • 137. You win with a good hand
    137
    It’s like a game of cards
  • 138. Pivoting people through information
    Your Design Challenge!
    Step 3: Creating a good hand
    Activity
    138
  • 139. Pivoting people through information
    139
  • 140. Pivoting people through information
    Create a winning hand.
    Activity
    140
  • 141. Pivoting people through information
    Create a winning hand.
    Activity
    Stitch cards together to answer the question
    Allow people to pivot through information quickly
    141
  • 142. Prototype
    Prototype
    Prototype
    Prototype
    Prototype
    Prototype
    142
    Prototype
  • 143. 143
    Analogy of cards
    Process
    Prototype at every stage
  • 144. 144
    Analogy of cards
    Process
    Prototyping “Swirl”
  • 145. Pivoting people through information
    145
  • 146. Pivoting people through information
    146
  • 147. Paper Prototype example
    147
  • 148. Pivoting people through information
    148
  • 149. High fidelity prototype example
  • 150. Can users grok it?
    Can users grok it?
    Does each screen speak it’s power?
    Can I simplify this?
    Is this intuitive?
    Q:
    Q:
    Q:
    Q:
    150
  • 151. Analogy of cards
    steal this slide!
    Tips for mobile prototyping
    Plan for a lot of it!
    1
    Work at scale and print it out!
    2
    Get it on the device as soon as you can.
    2
    151
  • 152. Analogy of cards
    Some info about mobile web/ and app programming:
    iPhone Apps = Xcode
    1
    Android Apps = Java (managed code)
    2
    Mobile Web Sites = Mobile Design and Development: Practical Concepts and Techniques for Creating Mobile Sites andWeb Apps by Brian Fling
    152
  • 153. Where do I begin?
    Where do I begin?
    Q:
  • 154. are uniquely mobile
    1
    Great Mobile user experiences
    steal this slide!
    Great Mobile Experiences:
    are sympathetic to context
    2
    speak their power
    3
  • 155. Everybody starts somewhere
    Everybody starts somewhere….
  • 156. Good luck
    Good luck!
  • 157. Thank you!
    Email:
    rachel.hinman@nokia.com
    Thanks, and next up…
  • 158. Resources:
    MOBILE RESOURCESUltimate iPhone Stencil for Omnigrafflehttp://graffletopia.com/stencils/413
    mooTools http://mootools.netiUI iPhone navigation (javascript):http://code.google.com/p/iui/
    jQuery (javascript):http://jquery.com/
    TweenMax (actionscript):http://blog.greensock.com/tweenmaxas3/
    Bruce Sterling speaks on the future of mobilehttp://tinyurl.com/6m7kwc
    RESOURCES
  • 159. Q?
    Q&A: final break