Mobile user experience is a new frontier. Untethered from a keyboard and mouse, this rich design space is lush with opportunity to invent new and more human ways for people to interact with information. Invention requires casting off many anchors and conventions inherited from the last 50 years of computer science and traditional design and jumping head first into a new and unfamiliar design space. In this talk, Rachel will provide: Insight into how designers and UX professionals can navigate the unfamiliar and fast-changing mobile landscape with grace and solid thinking. In-depth information on advanced mobile design topics UX professionals will spend the next 10+ years pioneering Tools and frameworks necessary to begin tackling mobile UX problems in this rapidly changing design space.

1. The Mobile Frontier
Interactions 2012
Rachel Hinman
Senior Research Scientist
Nokia Research Lab
Palo Alto, California USA
Hinman
Title!

2. 2
I used to be a web designer, too!

3. Mobile has arrived…

4. Mobile = Wild West

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.”!

9. The Rearview Mirror Effect

10. 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 faculty
free 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.”

11. Mobile presents an
opportunity to invent
new ways for users to
interact with information.
11!

13. Where to Look?

14. Emergent Mobile Topics
1 Shapeshifting
2 A Brave NUI World
3 Comfortable Computing

15. Emergent Mobile Topics
1 Shapeshifting
2 A Brave NUI World
3 Comfortable Computing

16. Shapeshifting

18. 18!

19. “We made the web
in the image of
ourselves, and in
the U.S., that
means OBESE.”
~Jason Grigsby

20. A!
20!

21. 21!

22. Q:
“I think a lot of web design in the
past five to ten years is actually
Q:!
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!

23. Q: “Our obsession with layout
(carried over from print design)
Q:!
keeps us from seizing much
bigger opportunities on mobile.”
~ Luke Wroblewski
23!

24. 24!

25. Shapeshifting

26. Plans & Situated Action
Mutual Reconfiguration

28. Q: Suchman’s theory of mutual
reconfiguration suggests a person’s
Q:!
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.

30. 30

31. Two
Q:
Q:!
Design Implications

32. Q:
Q:!
1. Shift in contextual assumptions

33. Q:
Q:!
2. Shift in our sensibilities
around content as a design material

34. Q:
Q:!
1. Shift in contextual assumptions

41. A!

42. A!
Throughout the design process,
our work should be situated in
the contexts where it will be used.

43. Go to the Gemba

44. Go to the Gemba

45. Go to the Gemba

46. Q:
Q:!
2. Shift in our sensibilities
around content as a design material

48. Design as the manipulation of materials.

49. Q:
Q:!
Pages and screens
are not our design material

50. Content as a design material.

51. “Right now many designers end up
focusing a lot of energy on the overlying
Q:
view – the whole template and look and
feel. But the smaller the screen gets, the
less that stuff matters.
Q:!
One of the most important things we’ve
started looking at is writing and working
with APIs rather than designing ‘pages’
for one context.”
~Stephanie Rieger

52. “For so much digital content, there is
no good metaphor to render anymore
– the content is just information, text
and images – so new approaches to
Q:!
interaction and visual UI design are
needed.”
~Mike Kruzeniski

57. Q:
Q:!

58. Emergent Mobile Topics
1 Shapeshifting
2 A Brave NUI World
3 Comfortable Computing

59. 59!

60. Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
60!

61. We’re reaching the edges
of what GUI can do
61!

62. 62!

63. GUIs become brittle
on a mobile device
63!

66. 66!

67. 67!

68. Key differences between
NUI and GUI

69. Defining Attributes of
GUIs…

70. GUI Mental Model =
Computer as tool
70!

71. GUI = Recognition
“What you see is what you get”
71!

72. GUI = Metaphorics, containment and place
72!

73. GUIs = Heavy Chrome, Icons & Buttons
73!

74. Defining Attributes of
NUIs…

75. NUI Mental Model =
Computer as media
75!

76. NUI = Intuition
“What you do is what you get”
76!

77. NUI = Fluid, Unmediated, and Organic
77!

78. NUIs = Content is the Star
78!

79. GUI = Experiences are anchored
79!

80. NUI = Experiences Unfold
80!

81. NUIs Unfold Like a Game
81!

82. NUIs Can Feel Anchor-less
82!

83. 83

84. Mobile Experiences Unfold
Patterns for how mobile experiences unfold
and 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

85. Nested Doll Pattern
85!

86. Hub and Spoke Pattern
86!

87. Bento Box Pattern
87!

88. Filtered View Pattern
88!

89. Mobile Experiences Unfold
Patterns for how mobile experiences unfold
and 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

90. Q:
Q:!

91. Emergent Mobile Topics
1 Shapeshifting
2 A Brave NUI World
3 Comfortable Computing

92. Mark Weiser

93. Q:
Q:!

94. “The most profound technologies
Q:
are those that disappear.
Q:!
They weave themselves into the
fabric of everyday life until they
are indistinguishable from it.”
~ Mark Weiser
The Computer for the 21st Century

95. Q:
Q:!
Tab Pad Yard-Sized Board
1991

96. 2010

98. Mobile devices are
the gateway drug for ubicomp

99. Following toddlers into the future

101. “I like cuddling up in bed with
Q:
Netflix on the iPad instead of
sitting in front of the TV. It’s more
Q:!
comfortable to go to bed with a
movie the same way I used to go
to bed with a book”
~ Norbert
iPad Study Participant

102. “It’s almost like my blankie…
Q:
I curl up in bed with it, or on the
couch. I usually have it with me,
Q:!
regardless of extenuating
circumstances ”
~ Erin
iPad Study Participant

103. “It’s almost like my blankie…”

107. Say Goodbye to Done

108. This should look familiar…
108!

109. This should look familiar…
The web has evolved around a
task-efficiency model.
Mobile can be different.
109!

110. Tasks are about completion…
110!

111. Tasks are about completion…
Possibilities are interactions that
accrue over time…
111!

112. Tasks are about completion…
Possibilities are interactions that
accrue over time…
… or facilitate
exploration…
112!

113. Tasks are about completion…
Possibilities are interactions that
accrue over time…
..or are about
… or facilitate SENSING
exploration… INTENT!
113!

114. 114!

115. 115!

116. 116!

117. 117!

118. 118!

119. 119!

121. Emergent Mobile Topics
1 Shapeshifting
2 A Brave NUI World
3 Comfortable Computing

122. Mobile presents an
opportunity to invent
new ways for users to
interact with information.
122!

123. Thank you!
Email:
rachel.hinman@nokia.com
Thanks, and next up…!

124. Oh! By the way…
I’m writing a book!
Expected Publication:
April 2011
! ! !