final virtual seminar_mobile_frontier
DESCRIPTION
TRANSCRIPT
The Mobile Frontier
Rachel Hinman Senior Research Scientist Nokia Research Lab Palo Alto, California USA
Hinman
I used to be a web designer, too!
2
Mobile has arrived…
Mobile = Wild West
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.”!
“Hey, I’ve got this great idea for an app…”
The Rearview Mirror Effect
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 we are free to experiment and 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.”
11!
Mobile presents an
opportunity to invent new ways for users to interact with information.
Where to Look?
Shapeshifting 1
A Brave NUI World
Comfortable Computing
Emergent Mobile Topics
2
3
Shapeshifting 1
A Brave NUI World
Comfortable Computing
Emergent Mobile Topics
2
3
Shapeshifting
18!
“We made the web in the image of ourselves, and in the U.S., that means OBESE.”
~Jason Grigsby
A!
20!
21!
Q:!
“I think a lot of web design in the past five to ten years is actually just a reflection of print again. We’ve been designing for one context, which isn’t much better than a PDF document.”
~ Bryan Rieger
Q:
22!
Q:!
“Our obsession with layout (carried over from print design) keeps us from seizing much bigger opportunities on mobile.”
~ Luke Wroblewski
Q:
23!
24!
Shapeshifting
Plans & Situated Action
Mutual Reconfiguration
Q:!
Suchman’s theory of mutual reconfiguration suggests a person’s 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.
Q:
30
Q:! Two Design Implications
Q:
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.
Q:!
“Right now many designers end up focusing a lot of energy on the overlying view – the whole template and look and feel. But the smaller the screen gets, the less that stuff matters.
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
Q:
Q:!
“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 interaction and visual UI design are needed.”
~Mike Kruzeniski
How?
2 steps
1.
A!
Think of ways to integrate context considerations into your design process.
62!
Text entry will never be easy!
Ideate in the wild…
Test prototypes with users
early and often
Modifications to your design process will be necessary.
2.
Lead with the content
?
Shapeshifting 1
A Brave NUI World
Comfortable Computing
Emergent Mobile Topics
2
3
71!
72!
Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
73!
We’re reaching the edges of what GUI can do
74!
75!
GUIs become brittle on a mobile device
78!
79!
Key differences between NUI and GUI
Defining Attributes of
GUIs…
82!
GUI Mental Model = Computer as tool
83!
GUI = Recognition “What you see is what you get”
84!
GUI = Metaphorics, containment and place
85!
GUIs = Heavy Chrome, Icons & Buttons
Defining Attributes of
NUIs…
87!
NUI Mental Model = Computer as media
88!
NUI = Intuition “What you do is what you get”
89!
NUI = Fluid, Unmediated, and Organic
NUIs = Content is the Star
90!
91!
GUI = Experiences are anchored
92!
NUI = Experiences Unfold
93!
NUIs Unfold Like a Game
94!
NUIs Can Feel Anchor-less
95
The Nested Doll Pattern 1
Mobile Experiences Unfold Patterns for how mobile experiences unfold and progressively reveal their nature
The Hub and Spoke Pattern 2
The Bento Box Pattern 3
The Filtered View Pattern 4
97!
Nested Doll Pattern
98!
Hub and Spoke Pattern
99!
Bento Box Pattern
100!
Filtered View Pattern
The Nested Doll Pattern 1
Mobile Experiences Unfold Patterns for how mobile experiences unfold and progressively reveal their nature
The Hub and Spoke Pattern 2
The Bento Box Pattern 3
The Filtered View Pattern 4
A!
102!
Trick to unfolding =
Information boulders to pebbles
A!
103
A!
104
Your Design Challenge! From GUI to NUI
105!
Your Design Challenge! From GUI to NUI
Identify an interaction sequence you’d like to recreate using NUI principles.
Sketch out the interaction using the templates provided.
Identify how you’d like your mobile experience to unfold.
1
2
3
106!
107!
108!
109!
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.
110
111!
Paper In-Screen Prototypes
Following Process documented by Diego Pulido via UX Magazine – Paper In-Screen Prototypes Photos courtesy of Diego Pulido and UX Magazine
1. Sketch screen layouts. ! ! !! !
Photo courtesy of Diego Pulido and UX Magazine 112
1. Sketch screen layouts. 2. Scan or photograph the sketches.
Photo courtesy of Diego Pulido and UX Magazine 113
1. Sketch screen layouts. 2. Scan or photograph the sketches.
3. Making sizing adjustments to the files.
Photo courtesy of Diego Pulido and UX Magazine!114
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.
Photo courtesy of Diego Pulido and UX Magazine 115
116!
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.
Photo courtesy of Diego Pulido and UX Magazine!
Paper Prototype example!
117!
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.
Photo courtesy of Diego Pulido and UX Magazine
Q:!
Q:
?
Shapeshifting 1
A Brave NUI World
Comfortable Computing
Emergent Mobile Topics
2
3
Mark Weiser
Q:!
Q:
Q:!
Q: “The most profound technologies are those that disappear.
They weave themselves into the fabric of everyday life until they are indistinguishable from it.”
~ Mark Weiser The Computer for the 21st Century
Q:!
Q:
1991
Tab Pad Yard-Sized Board
2010
Mobile devices are the gateway drug for ubicomp
Following toddlers into the future
Q:!
Q: “I like cuddling up in bed with Netflix on the iPad instead of sitting in front of the TV. It’s more comfortable to go to bed with a movie the same way I used to go to bed with a book”
~ Norbert iPad Study Participant
Q:!
Q: “It’s almost like my blankie… I curl up in bed with it, or on the couch. I usually have it with me, regardless of extenuating circumstances ”
~ Erin iPad Study Participant
“It’s almost like my blankie…”
Say Goodbye to Done
137!
This should look familiar…
138!
The web has evolved around a task-efficiency model.
Mobile can be different.
This should look familiar…
139!
Tasks are about completion…
140!
Tasks are about completion…
Possibilities are interactions that accrue over time…
… or facilitate exploration…
141!
Tasks are about completion…
Possibilities are interactions that accrue over time…
… or facilitate exploration…
142!
Tasks are about completion…
Possibilities are interactions that accrue over time…
..or are about SENSING INTENT!
143!
144!
145!
146!
147!
148!
Shapeshifting 1
A Brave NUI World
Comfortable Computing
Emergent Mobile Topics
2
3
151!
Mobile presents an
opportunity to invent new ways for users to interact with information.
Oh! By the way… I’m writing a book!
Expected Publication: April 2011
! ! !