The Mobile FrontierRachel HinmanSenior Research ScientistNokia Research LabPalo Alto, California USA   Hinman
2I used to be a web designer, too!
Mobile has arrived…
Mobile = Wild West
Even in situations in which a spirit of exploration and freedom exist, where faculty “Hey, I’ve got this great idea for an...
The Rearview Mirror Effect
Even in in situations in whichaaspirit of        Even situations in which spirit of exploration and freedom exist, where w...
Mobile presents anopportunity to inventnew ways for users tointeract with information.                             11!
Where to Look?
Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
Shapeshifting
18!
“We made the webin the image ofourselves, and inthe U.S., thatmeans OBESE.”~Jason Grigsby
A!     20!
21!
Q:    “I think a lot of web design in the    past five to ten years is actuallyQ:!    just a reflection of print again.    W...
Q:    “Our obsession with layout      (carried over from print design)Q:!      keeps us from seizing much      bigger oppo...
24!
Shapeshifting
Plans & Situated ActionMutual Reconfiguration
Q:    Suchman’s theory of mutual      reconfiguration suggests a person’sQ:!      capacity to act (their agency) is      re...
30
TwoQ:Q:!      Design Implications
Q:Q:!      1. Shift in contextual assumptions
Q:Q:!               2. Shift in our sensibilities      around content as a design material
Q:Q:!      1. Shift in contextual assumptions
A!
A!     Throughout the design process,     our work should be situated in     the contexts where it will be used.
Go to the Gemba
Go to the Gemba
Go to the Gemba
Q:Q:!               2. Shift in our sensibilities      around content as a design material
Design as the manipulation of materials.
Q:Q:!               Pages and screens      are not our design material
Content as a design material.
“Right now many designers end upfocusing a lot of energy on the overlyingQ:view – the whole template and look andfeel. But...
“For so much digital content, there isno good metaphor to render anymore– the content is just information, textand images ...
How?
2steps
1.
A!     Think of ways to integrate context     considerations into your design     process.
Ideate in the wild…                                                   62!Text entry will never be easy!
Test prototypes with users           early and often
Modifications to your design process will be necessary.
2.
Lead with the content
?
Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
71!
Seated in a relatively predictable environment          Large screen enables multi-tasking             Keyboard and a mous...
We’re reaching the edges      of what GUI can do                      73!
74!
GUIs become brittle on a mobile device                 75!
78!
79!
Key differences between      NUI and GUI
Defining Attributes ofGUIs…
GUI Mental Model =Computer as tool                     82!
GUI = Recognition“What you see is what you get”                            83!
GUI = Metaphorics, containment and place                                      84!
GUIs = Heavy Chrome, Icons & Buttons                                       85!
Defining Attributes ofNUIs…
NUI Mental Model =Computer as media                     87!
NUI = Intuition“What you do is what you get”                            88!
NUI = Fluid, Unmediated, and Organic                                       89!
NUIs = Content is the Star                         90!
GUI = Experiences are anchored                             91!
NUI = Experiences Unfold                      92!
NUIs Unfold Like a Game                          93!
NUIs Can Feel Anchor-less                       94!
95
Mobile Experiences UnfoldPatterns for how mobile experiences unfoldand progressively reveal their nature 1 The Nested Doll...
Nested Doll Pattern                 97!
Hub and Spoke Pattern                   98!
Bento Box Pattern                    99!
Filtered View Pattern                   100!
Mobile Experiences UnfoldPatterns for how mobile experiences unfoldand progressively reveal their nature 1 The Nested Doll...
A!                Trick to unfolding =     Information boulders to pebbles                                   102!
A!     103
A!     104
Your Design Challenge!From GUI to NUI                         105!
Your Design Challenge!From GUI to NUI 1 Identify an interaction sequence you’d like    to recreate using NUI principles. 2...
107!
108!
REMEMBER!It’s easy to go crazy and try to do it all.Instead, focus on applying what we’ve covered…  Understanding the diffe...
110
Paper In-Screen PrototypesFollowing Process documented by Diego Pulido viaUX Magazine – Paper In-Screen PrototypesPhotos c...
1. Sketch screen layouts. !                                                  !                                            ...
1. Sketch screen layouts.                                                 2. Scan or photograph                           ...
1. Sketch screen layouts.                                                  2. Scan or photograph                          ...
4. Save the resized                                                 images in a file format                                ...
4. Save the resized                                                  images in a file format                               ...
4. Save the resized                                                       images in a file format                          ...
Q:Q:!
?
Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
Mark Weiser
Q:Q:!
“The most profound technologiesQ:are those that disappear.Q:!They weave themselves into thefabric of everyday life until t...
Q:Q:!      Tab   Pad          Yard-Sized Board                  1991
2010
Mobile devices arethe gateway drug for ubicomp
Following toddlers into the future
“I like cuddling up in bed withQ:Netflix on the iPad instead ofsitting in front of the TV. It’s moreQ:!comfortable to go to...
“It’s almost like my blankie…Q:I curl up in bed with it, or on thecouch. I usually have it with me,Q:!regardless of extenu...
“It’s almost like my blankie…”
Say Goodbye to Done
This should look familiar…                             137!
This should look familiar…       The web has evolved around a           task-efficiency model.          Mobile can be differe...
Tasks are about completion…                              139!
Tasks are about completion…Possibilities are interactions thataccrue over time…                                      140!
Tasks are about completion…Possibilities are interactions thataccrue over time…… or facilitateexploration…                ...
Tasks are about completion…Possibilities are interactions thataccrue over time…                               ..or are abo...
143!
144!
145!
146!
147!
148!
Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
Mobile presents anopportunity to inventnew ways for users tointeract with information.                             151!
Thank you!                        Email:                        rachel.hinman@nokia.comThanks, and next up…!
Oh! By the way…I’m writing a book!Expected Publication:April 2011!      !       !
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Upcoming SlideShare
Loading in...5
×

Final virtual seminar_mobile_frontier

2,479

Published on

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

No Downloads
Views
Total Views
2,479
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
87
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Final virtual seminar_mobile_frontier

  1. 1. The Mobile FrontierRachel HinmanSenior Research ScientistNokia Research LabPalo Alto, California USA Hinman
  2. 2. 2I used to be a web designer, too!
  3. 3. Mobile has arrived…
  4. 4. Mobile = Wild West
  5. 5. Even in situations in which a spirit of exploration and freedom exist, where faculty “Hey, I’ve got this great idea for an app…”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.”!
  6. 6. The Rearview Mirror Effect
  7. 7. Even in in situations in whichaaspirit of Even situations in which spirit of exploration and freedom exist, where we are exploration and freedom exist, where facultyfree to experiment and to work beyond physical are free to experiment work beyond physical and social constraints, and social constraints, our cognitive habits our cognitive habits often get in
 the way. often get in the way. Marshall McLuhan called called it Marshall McLuhan it “the rear-view “the rear-viewnoting that “We noting that mirror effect,” mirror effect,” see the world“We see the world through a rear-view mirror. through a rear-view mirror. We march We march backwards intofuture.”! backwards into the the future.”
  8. 8. Mobile presents anopportunity to inventnew ways for users tointeract with information. 11!
  9. 9. Where to Look?
  10. 10. Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
  11. 11. Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
  12. 12. Shapeshifting
  13. 13. 18!
  14. 14. “We made the webin the image ofourselves, and inthe U.S., thatmeans OBESE.”~Jason Grigsby
  15. 15. A! 20!
  16. 16. 21!
  17. 17. Q: “I think a lot of web design in the past five to ten years is actuallyQ:! just a reflection of print again. We’ve been designing for one context, which isn’t much better than a PDF document.” ~ Bryan Rieger 22!
  18. 18. Q: “Our obsession with layout (carried over from print design)Q:! keeps us from seizing much bigger opportunities on mobile.” ~ Luke Wroblewski 23!
  19. 19. 24!
  20. 20. Shapeshifting
  21. 21. Plans & Situated ActionMutual Reconfiguration
  22. 22. Q: Suchman’s theory of mutual reconfiguration suggests a person’sQ:! capacity to act (their agency) is reconfigured when it comes into contact with another thing or person - that human action is constantly constructed and reconstructed from dynamic interactions with the material and social worlds.
  23. 23. 30
  24. 24. TwoQ:Q:! Design Implications
  25. 25. Q:Q:! 1. Shift in contextual assumptions
  26. 26. Q:Q:! 2. Shift in our sensibilities around content as a design material
  27. 27. Q:Q:! 1. Shift in contextual assumptions
  28. 28. A!
  29. 29. A! Throughout the design process, our work should be situated in the contexts where it will be used.
  30. 30. Go to the Gemba
  31. 31. Go to the Gemba
  32. 32. Go to the Gemba
  33. 33. Q:Q:! 2. Shift in our sensibilities around content as a design material
  34. 34. Design as the manipulation of materials.
  35. 35. Q:Q:! Pages and screens are not our design material
  36. 36. Content as a design material.
  37. 37. “Right now many designers end upfocusing a lot of energy on the overlyingQ:view – the whole template and look andfeel. But the smaller the screen gets, theless that stuff matters.Q:!One of the most important things we’vestarted looking at is writing and workingwith APIs rather than designing ‘pages’for one context.”~Stephanie Rieger
  38. 38. “For so much digital content, there isno good metaphor to render anymore– the content is just information, textand images – so new approaches toQ:!interaction and visual UI design areneeded.”~Mike Kruzeniski
  39. 39. How?
  40. 40. 2steps
  41. 41. 1.
  42. 42. A! Think of ways to integrate context considerations into your design process.
  43. 43. Ideate in the wild… 62!Text entry will never be easy!
  44. 44. Test prototypes with users early and often
  45. 45. Modifications to your design process will be necessary.
  46. 46. 2.
  47. 47. Lead with the content
  48. 48. ?
  49. 49. Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
  50. 50. 71!
  51. 51. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 72!
  52. 52. We’re reaching the edges of what GUI can do 73!
  53. 53. 74!
  54. 54. GUIs become brittle on a mobile device 75!
  55. 55. 78!
  56. 56. 79!
  57. 57. Key differences between NUI and GUI
  58. 58. Defining Attributes ofGUIs…
  59. 59. GUI Mental Model =Computer as tool 82!
  60. 60. GUI = Recognition“What you see is what you get” 83!
  61. 61. GUI = Metaphorics, containment and place 84!
  62. 62. GUIs = Heavy Chrome, Icons & Buttons 85!
  63. 63. Defining Attributes ofNUIs…
  64. 64. NUI Mental Model =Computer as media 87!
  65. 65. NUI = Intuition“What you do is what you get” 88!
  66. 66. NUI = Fluid, Unmediated, and Organic 89!
  67. 67. NUIs = Content is the Star 90!
  68. 68. GUI = Experiences are anchored 91!
  69. 69. NUI = Experiences Unfold 92!
  70. 70. NUIs Unfold Like a Game 93!
  71. 71. NUIs Can Feel Anchor-less 94!
  72. 72. 95
  73. 73. Mobile Experiences UnfoldPatterns for how mobile experiences unfoldand progressively reveal their nature 1 The Nested Doll Pattern 2 The Hub and Spoke Pattern 3 The Bento Box Pattern 4 The Filtered View Pattern
  74. 74. Nested Doll Pattern 97!
  75. 75. Hub and Spoke Pattern 98!
  76. 76. Bento Box Pattern 99!
  77. 77. Filtered View Pattern 100!
  78. 78. Mobile Experiences UnfoldPatterns for how mobile experiences unfoldand progressively reveal their nature 1 The Nested Doll Pattern 2 The Hub and Spoke Pattern 3 The Bento Box Pattern 4 The Filtered View Pattern
  79. 79. A! Trick to unfolding = Information boulders to pebbles 102!
  80. 80. A! 103
  81. 81. A! 104
  82. 82. Your Design Challenge!From GUI to NUI 105!
  83. 83. Your Design Challenge!From GUI to NUI 1 Identify an interaction sequence you’d like to recreate using NUI principles. 2 Sketch out the interaction using the templates provided. 3 Identify how you’d like your mobile experience to unfold. 106!
  84. 84. 107!
  85. 85. 108!
  86. 86. REMEMBER!It’s easy to go crazy and try to do it all.Instead, focus on applying what we’ve covered… Understanding the differences between graphical and natural user interfaces. Experimenting with how your mobile experience can unfold and and progressively reveal its nature. Play around with the unfolding patterns that have been presented… or invent some of your own. 109!
  87. 87. 110
  88. 88. Paper In-Screen PrototypesFollowing Process documented by Diego Pulido viaUX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine 111!
  89. 89. 1. Sketch screen layouts. !  !   ! ! ! 112Photo courtesy of Diego Pulido and UX Magazine
  90. 90. 1. Sketch screen layouts. 2. Scan or photograph the sketches. 113Photo courtesy of Diego Pulido and UX Magazine
  91. 91. 1. Sketch screen layouts. 2. Scan or photograph the sketches. 3. Making sizing adjustments to the files. 114Photo courtesy of Diego Pulido and UX Magazine!
  92. 92. 4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly. 115Photo courtesy of Diego Pulido and UX Magazine
  93. 93. 4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly. 5. Import the files into the mobile device’s photo gallery. 116!Photo courtesy of Diego Pulido and UX Magazine!
  94. 94. 4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly. 5. Import the files into the mobile device’s photo gallery. 6. Click and swipe away. 117! Photo courtesy of Diego Pulido and UX MagazinePaper Prototype example!
  95. 95. Q:Q:!
  96. 96. ?
  97. 97. Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
  98. 98. Mark Weiser
  99. 99. Q:Q:!
  100. 100. “The most profound technologiesQ:are those that disappear.Q:!They weave themselves into thefabric of everyday life until theyare indistinguishable from it.”~ Mark WeiserThe Computer for the 21st Century
  101. 101. Q:Q:! Tab Pad Yard-Sized Board 1991
  102. 102. 2010
  103. 103. Mobile devices arethe gateway drug for ubicomp
  104. 104. Following toddlers into the future
  105. 105. “I like cuddling up in bed withQ:Netflix on the iPad instead ofsitting in front of the TV. It’s moreQ:!comfortable to go to bed with amovie the same way I used to goto bed with a book”~ NorbertiPad Study Participant
  106. 106. “It’s almost like my blankie…Q:I curl up in bed with it, or on thecouch. I usually have it with me,Q:!regardless of extenuatingcircumstances ”~ EriniPad Study Participant
  107. 107. “It’s almost like my blankie…”
  108. 108. Say Goodbye to Done
  109. 109. This should look familiar… 137!
  110. 110. This should look familiar… The web has evolved around a task-efficiency model. Mobile can be different. 138!
  111. 111. Tasks are about completion… 139!
  112. 112. Tasks are about completion…Possibilities are interactions thataccrue over time… 140!
  113. 113. Tasks are about completion…Possibilities are interactions thataccrue over time…… or facilitateexploration… 141!
  114. 114. Tasks are about completion…Possibilities are interactions thataccrue over time… ..or are about… or facilitate SENSINGexploration… INTENT! 142!
  115. 115. 143!
  116. 116. 144!
  117. 117. 145!
  118. 118. 146!
  119. 119. 147!
  120. 120. 148!
  121. 121. Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
  122. 122. Mobile presents anopportunity to inventnew ways for users tointeract with information. 151!
  123. 123. Thank you! Email: rachel.hinman@nokia.comThanks, and next up…!
  124. 124. Oh! By the way…I’m writing a book!Expected Publication:April 2011! ! !
  1. A particular slide catching your eye?

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

×