The Mobile FrontierWebVisions 2011<br />Rachel Hinman<br />Senior Research Scientist  <br />Nokia Research Lab <br />Palo ...
Mobile = Wild West<br />
A<br />
Do you remember a time…<br />Do you remember a time when the web was new?<br />Q:<br />A<br />
Do you remember a time…<br />“We need a web presence!”<br />!<br />A<br />
6<br />Solution: Brochure - online<br />Brochureware<br />
“we need a web presence”<br />“We need online commerce!”<br />!<br />A<br />
8<br />Online commerce<br />What about shipping?<br />
Make it like the world<br />“Let’s make our site like…”<br />!<br />A<br />A<br />
10<br />Southwest airlines<br />
Hypothesis vs. Agenda<br />The Rearview Mirror<br />
Hypothesis vs. Agenda<br />Even in situations in which a spirit of exploration and freedom exist, where faculty are free t...
Hypothesis vs. Agenda<br />
Hypothesis vs. Agenda<br />
Hypothesis vs. Agenda<br />
Hypothesis vs. Agenda<br />
A<br />Do you remember a time…<br />The definition of insanity is doing the same thing over and over and expecting differe...
18<br />Mobile presents an opportunity to invent new ways…<br />Opinion!<br />Mobile presents an opportunity to invent new...
A mobile phone is not a computer <br />19<br />
umm…. duh!<br />A<br />Um… duh!<br />
22<br />iPhone<br />Mobile phones aren’t really phones anymore<br />
23<br />iPhone<br />
Hypothesis vs. Agenda<br />Mobile Devices are the Gateway Drug for Ubicomp<br />
Hypothesis vs. Agenda<br />Following toddlers into the future<br />
Mobile = Wild West<br />
Where to Look?<br />
Great Mobile user experiences<br />Emergent Mobile UX Topics<br />1<br />Contextual Computing<br />2<br />A Brave NUI Worl...
Contextual Computing<br />
Pictures of mobile contexts<br />What exactly do you mean by mobile “context” ?<br />Q:<br />A<br />
Pictures of mobile contexts<br />A<br />
More pictures of mobile contexts<br />
Social context<br />
Context is complex<br />Context is complex!<br />!<br />A<br />
Context is about understanding human relationships to the people,places and things in the world.<br />A<br />Context is ab...
37<br />Context Framework<br />Context Framework<br />steal this slide!<br />
38<br />Context Framework<br />Context Framework<br />steal this slide!<br />
39<br />Relationships Chording<br />Orchestration and Inflection<br />
40<br />Peanut butter<br />
41<br />Google: Facebook<br />Spatial<br />
42<br />Temporal<br />Temporal<br />
Spatial - peanut butter<br />Social<br />43<br />
Google: Facebook<br />Semantic<br />44<br />
45<br />Peanut butter in Denver<br />Peanut butter in Melbourne right now?<br />
The web is good at people and things.<br />The web is good at semantic relationships.<br />(and okay at social relationshi...
Context Framework<br />Mobile is good at places…<br />steal this slide!<br />47<br />
Context Framework<br />Mobile is good at spatial and temporal relationships.<br />steal this slide!<br />48<br />
49<br />Google maps - PC vs. Mobile<br />
Temporal and spatial relationships are underserved<br />There are currently not many technologiesthat help us understand p...
What we learned from the web<br />Contextual Computing Questions<br />What is the “URL” for place?<br />How might we break...
59<br />Wireframe<br />A Brave NUI World<br />
60<br />Differences in the mobile environment<br />Seated in a relatively predictable environment<br />Large screen enable...
61<br />Wireframe<br />We’re reaching the edges of what GUI can do<br />
62<br />Wireframe<br />
Hypothesis vs. Agenda<br />
Hypothesis vs. Agenda<br />
65<br />Wireframe<br />
66<br />Wireframe<br />steal this slide!<br />
67<br />Wireframe<br />It’s not longer “what you see it what you get…”<br />
68<br />Wireframe<br />…now it’s “what you do is what you get”<br />
69<br />Wireframe<br />Different platforms express characteristics differently<br />
Paper Prototype example<br />GUI = Computer as tool, NUI = Computer as Media<br />70<br />
71<br />Wireframe<br />GUI = Metaphorics, containment and place<br />
72<br />Wireframe<br />NUI = Fluid, Unmediated, and Organic<br />
Paper Prototype example<br />GUIs = Heavy Chrome, Icons & Buttons<br />73<br />
NUIs = Let the Content be the Star<br />74<br />It’s like a game of cards<br />
Paper Prototype example<br />SCROLL<br />GUI = “Desktop” and “Pages” as Anchors<br />75<br />
NUIs Can Feel Anchor-less<br />76<br />
Paper Prototype example<br />[<br />]<br />+<br />=<br />77<br />
Paper Prototype example<br />=<br />78<br />
What we learned from the web<br />Animation & TransitionsA new design elements that can:<br />steal this slide!<br />Reinf...
Say Goodbye to Done<br />80<br />Wireframe<br />
This should look familiar…<br />81<br />Wireframe<br />
82<br />Wireframe<br />This should look familiar…<br />The web has evolved around a task-efficiency model.<br />Mobile is ...
83<br />Mobile is different<br />Mobile is different….<br />Mobile is about pivoting people through information quickly.<b...
What’s the point?<br />“What can happen?”<br />“What’s the point?”<br />TASK<br />POSSIBILITIES<br />
Tasks are about completion…<br />85<br />Tasks are about completion<br />
86<br />Tasks are about completion<br />Tasks are about completion…<br />Possibilities are interactions that accrue over t...
Tasks are about completion…<br />Possibilities are interactions that accrue over time…<br />… or facilitate exploration…<b...
… or facilitate exploration…<br />88<br />Tasks are about completion<br />Tasks are about completion…<br />Possibilities a...
89<br />Example - <br />
90<br />Example - <br />
91<br />Example - <br />
92<br />Example - <br />
93<br />Example - <br />
94<br />Example - <br />
What we learned from the web<br />Brave NUI World Questions<br />What’s beyond tasks?<br />What’s after “computer as media...
Shape Shifting<br />
We can annotate expectations in the web world<br />97<br />
How do you make interfaces that speak their power<br />A<br />99<br />
A<br />100<br />
A<br />101<br />
Hypothesis vs. Agenda<br />
Hypothesis vs. Agenda<br />
Hypothesis vs. Agenda<br />
Hypothesis vs. Agenda<br />
Hypothesis vs. Agenda<br />
Paper Prototype example<br />108<br />
How do you make interfaces that speak their power<br />A<br />109<br />
How do you make interfaces that speak their power<br />A<br />110<br />
In reality… people’s lives are messy<br />
Through Lines<br />
Good luck<br />
Good luck<br />
Good luck<br />
What we learned from the web<br />Shapeshifting Questions<br />What’s after the desktop and “web pages”?<br />Are metaphor...
Great Mobile user experiences<br />Emergent Mobile UX Topics<br />1<br />Contextual Computing<br />2<br />A Brave NUI Worl...
Shift your perspective and point of view<br />“The rapid development of cell phones is killing early cell phones much fast...
Thank you!<br />Email:<br />rachel.hinman@nokia.com<br />Thanks, and next up…<br />
The Mobile Frontier<br />A Guide for Designing Mobile Experiences<br />Expected Publication: late 2011<br />
Upcoming SlideShare
Loading in...5
×

The Mobile Frontier

6,575

Published on

Presentation from WebVisions 2011

Published in: Design
1 Comment
27 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,575
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
178
Comments
1
Likes
27
Embeds 0
No embeds

No notes for slide
  • White more can we do besides blue tooth?
  • People weren’t sure how to act sociallyNo established norms for this type of experience
  • We have made the internet in the image of ourselves – and in the US, that means OBESE. (Jason Grigsby)
  • Pandora, Twitter, Facebook, and Netflix are all “media” experiences with lightweight interactivity…
  • And we’re starting to see these experiences get prismed through multiple devices.
  • Which is awesome…models to look to- figure out how to do this successfully…
  • Not so awesome… because these lovely neat ecosystem depicted in this slide isn’t reality for most people.
  • This is the reality for most people….You shouldn’t have to have a computer science degree to connect your TV to your computer…
  • Notion of Throughlines.
  • The Mobile Frontier

    1. 1. The Mobile FrontierWebVisions 2011<br />Rachel Hinman<br />Senior Research Scientist <br />Nokia Research Lab <br />Palo Alto, California USA<br />Twitter: @Hinman<br />Title<br />
    2. 2. Mobile = Wild West<br />
    3. 3. A<br />
    4. 4. Do you remember a time…<br />Do you remember a time when the web was new?<br />Q:<br />A<br />
    5. 5. Do you remember a time…<br />“We need a web presence!”<br />!<br />A<br />
    6. 6. 6<br />Solution: Brochure - online<br />Brochureware<br />
    7. 7. “we need a web presence”<br />“We need online commerce!”<br />!<br />A<br />
    8. 8. 8<br />Online commerce<br />What about shipping?<br />
    9. 9. Make it like the world<br />“Let’s make our site like…”<br />!<br />A<br />A<br />
    10. 10. 10<br />Southwest airlines<br />
    11. 11. Hypothesis vs. Agenda<br />The Rearview Mirror<br />
    12. 12. Hypothesis vs. Agenda<br />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.”<br />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.”<br />
    13. 13. Hypothesis vs. Agenda<br />
    14. 14. Hypothesis vs. Agenda<br />
    15. 15. Hypothesis vs. Agenda<br />
    16. 16. Hypothesis vs. Agenda<br />
    17. 17. A<br />Do you remember a time…<br />The definition of insanity is doing the same thing over and over and expecting different results.<br />
    18. 18. 18<br />Mobile presents an opportunity to invent new ways…<br />Opinion!<br />Mobile presents an opportunity to invent new ways for users to interact with information.<br />
    19. 19. A mobile phone is not a computer <br />19<br />
    20. 20. umm…. duh!<br />A<br />Um… duh!<br />
    21. 21.
    22. 22. 22<br />iPhone<br />Mobile phones aren’t really phones anymore<br />
    23. 23. 23<br />iPhone<br />
    24. 24.
    25. 25. Hypothesis vs. Agenda<br />Mobile Devices are the Gateway Drug for Ubicomp<br />
    26. 26. Hypothesis vs. Agenda<br />Following toddlers into the future<br />
    27. 27. Mobile = Wild West<br />
    28. 28. Where to Look?<br />
    29. 29. Great Mobile user experiences<br />Emergent Mobile UX Topics<br />1<br />Contextual Computing<br />2<br />A Brave NUI World<br />3<br />Shapeshifting<br />
    30. 30. Contextual Computing<br />
    31. 31. Pictures of mobile contexts<br />What exactly do you mean by mobile “context” ?<br />Q:<br />A<br />
    32. 32. Pictures of mobile contexts<br />A<br />
    33. 33. More pictures of mobile contexts<br />
    34. 34. Social context<br />
    35. 35. Context is complex<br />Context is complex!<br />!<br />A<br />
    36. 36. Context is about understanding human relationships to the people,places and things in the world.<br />A<br />Context is about understanding the relationships<br />
    37. 37. 37<br />Context Framework<br />Context Framework<br />steal this slide!<br />
    38. 38. 38<br />Context Framework<br />Context Framework<br />steal this slide!<br />
    39. 39. 39<br />Relationships Chording<br />Orchestration and Inflection<br />
    40. 40. 40<br />Peanut butter<br />
    41. 41. 41<br />Google: Facebook<br />Spatial<br />
    42. 42. 42<br />Temporal<br />Temporal<br />
    43. 43. Spatial - peanut butter<br />Social<br />43<br />
    44. 44. Google: Facebook<br />Semantic<br />44<br />
    45. 45. 45<br />Peanut butter in Denver<br />Peanut butter in Melbourne right now?<br />
    46. 46. The web is good at people and things.<br />The web is good at semantic relationships.<br />(and okay at social relationships)<br />A<br />Context is about understanding the relationships<br />
    47. 47. Context Framework<br />Mobile is good at places…<br />steal this slide!<br />47<br />
    48. 48. Context Framework<br />Mobile is good at spatial and temporal relationships.<br />steal this slide!<br />48<br />
    49. 49. 49<br />Google maps - PC vs. Mobile<br />
    50. 50. Temporal and spatial relationships are underserved<br />There are currently not many technologiesthat help us understand place, and temporal and spatial relationships.<br />50<br />
    51. 51.
    52. 52.
    53. 53.
    54. 54.
    55. 55.
    56. 56.
    57. 57.
    58. 58. What we learned from the web<br />Contextual Computing Questions<br />What is the “URL” for place?<br />How might we break our 1:1 relationship with devices?<br />Nature of the relationship between devices?<br />Instead of burrowing into the world behind the LCD screen, how can devices help us connect us to the world around us?<br />
    59. 59. 59<br />Wireframe<br />A Brave NUI World<br />
    60. 60. 60<br />Differences in the mobile environment<br />Seated in a relatively predictable environment<br />Large screen enables multi-tasking<br />Keyboard and a mouse for input<br />
    61. 61. 61<br />Wireframe<br />We’re reaching the edges of what GUI can do<br />
    62. 62. 62<br />Wireframe<br />
    63. 63. Hypothesis vs. Agenda<br />
    64. 64. Hypothesis vs. Agenda<br />
    65. 65. 65<br />Wireframe<br />
    66. 66. 66<br />Wireframe<br />steal this slide!<br />
    67. 67. 67<br />Wireframe<br />It’s not longer “what you see it what you get…”<br />
    68. 68. 68<br />Wireframe<br />…now it’s “what you do is what you get”<br />
    69. 69. 69<br />Wireframe<br />Different platforms express characteristics differently<br />
    70. 70. Paper Prototype example<br />GUI = Computer as tool, NUI = Computer as Media<br />70<br />
    71. 71. 71<br />Wireframe<br />GUI = Metaphorics, containment and place<br />
    72. 72. 72<br />Wireframe<br />NUI = Fluid, Unmediated, and Organic<br />
    73. 73. Paper Prototype example<br />GUIs = Heavy Chrome, Icons & Buttons<br />73<br />
    74. 74. NUIs = Let the Content be the Star<br />74<br />It’s like a game of cards<br />
    75. 75. Paper Prototype example<br />SCROLL<br />GUI = “Desktop” and “Pages” as Anchors<br />75<br />
    76. 76. NUIs Can Feel Anchor-less<br />76<br />
    77. 77. Paper Prototype example<br />[<br />]<br />+<br />=<br />77<br />
    78. 78. Paper Prototype example<br />=<br />78<br />
    79. 79. What we learned from the web<br />Animation & TransitionsA new design elements that can:<br />steal this slide!<br />Reinforce cognition.<br />Help users form a mental model of how information will “unfold”.<br />Provide cues for interaction.<br />Help make your experience feel more intuitive for users. <br />
    80. 80. Say Goodbye to Done<br />80<br />Wireframe<br />
    81. 81. This should look familiar…<br />81<br />Wireframe<br />
    82. 82. 82<br />Wireframe<br />This should look familiar…<br />The web has evolved around a task-efficiency model.<br />Mobile is different.<br />
    83. 83. 83<br />Mobile is different<br />Mobile is different….<br />Mobile is about pivoting people through information quickly.<br />It’s about exposing possibilities.<br />
    84. 84. What’s the point?<br />“What can happen?”<br />“What’s the point?”<br />TASK<br />POSSIBILITIES<br />
    85. 85. Tasks are about completion…<br />85<br />Tasks are about completion<br />
    86. 86. 86<br />Tasks are about completion<br />Tasks are about completion…<br />Possibilities are interactions that accrue over time…<br />
    87. 87. Tasks are about completion…<br />Possibilities are interactions that accrue over time…<br />… or facilitate exploration…<br />87<br />Tasks are about completion<br />
    88. 88. … or facilitate exploration…<br />88<br />Tasks are about completion<br />Tasks are about completion…<br />Possibilities are interactions that accrue over time…<br />..or are about SENSING<br />INTENT!<br />
    89. 89. 89<br />Example - <br />
    90. 90. 90<br />Example - <br />
    91. 91. 91<br />Example - <br />
    92. 92. 92<br />Example - <br />
    93. 93. 93<br />Example - <br />
    94. 94. 94<br />Example - <br />
    95. 95. What we learned from the web<br />Brave NUI World Questions<br />What’s beyond tasks?<br />What’s after “computer as media”?<br />How can we create interfaces that sense intent without going to the creepy “Hal” place?<br />Can information objects be defined less by how they are and more by how they move?<br />
    96. 96. Shape Shifting<br />
    97. 97. We can annotate expectations in the web world<br />97<br />
    98. 98.
    99. 99. How do you make interfaces that speak their power<br />A<br />99<br />
    100. 100. A<br />100<br />
    101. 101. A<br />101<br />
    102. 102. Hypothesis vs. Agenda<br />
    103. 103. Hypothesis vs. Agenda<br />
    104. 104. Hypothesis vs. Agenda<br />
    105. 105. Hypothesis vs. Agenda<br />
    106. 106. Hypothesis vs. Agenda<br />
    107. 107.
    108. 108. Paper Prototype example<br />108<br />
    109. 109. How do you make interfaces that speak their power<br />A<br />109<br />
    110. 110. How do you make interfaces that speak their power<br />A<br />110<br />
    111. 111.
    112. 112.
    113. 113.
    114. 114.
    115. 115. In reality… people’s lives are messy<br />
    116. 116. Through Lines<br />
    117. 117. Good luck<br />
    118. 118. Good luck<br />
    119. 119. Good luck<br />
    120. 120. What we learned from the web<br />Shapeshifting Questions<br />What’s after the desktop and “web pages”?<br />Are metaphors dead? If not, can we get beyond our “lizard brain” need for physicality?<br />How might we enable convergence with existing technology? Is retiring old technology the price of entry?<br />
    121. 121. Great Mobile user experiences<br />Emergent Mobile UX Topics<br />1<br />Contextual Computing<br />2<br />A Brave NUI World<br />3<br />Shapeshifting<br />
    122. 122. Shift your perspective and point of view<br />“The rapid development of cell phones is killing early cell phones much faster than it's killing any of the early, older legacy technologies.<br />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.<br />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.<br />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.”<br />-- Mobile Monday Amsterdam – November 2008<br />Rapid Evolution<br />122<br />
    123. 123. Thank you!<br />Email:<br />rachel.hinman@nokia.com<br />Thanks, and next up…<br />
    124. 124. The Mobile Frontier<br />A Guide for Designing Mobile Experiences<br />Expected Publication: late 2011<br />
    1. A particular slide catching your eye?

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

    ×