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.”!
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.”
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!
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.
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
96. 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
101. 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
102. A!
Trick to unfolding =
Information boulders to pebbles
102!
106. 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!
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. 109!
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
111!
112. 1. Sketch screen layouts. !
!
!
! !
112
Photo courtesy of Diego Pulido and UX Magazine
113. 1. Sketch screen layouts.
2. Scan or photograph
the sketches.
113
Photo courtesy of Diego Pulido and UX Magazine
114. 1. Sketch screen layouts.
2. Scan or photograph
the sketches.
3. Making sizing
adjustments to the
files.
114
Photo courtesy of Diego Pulido and UX Magazine!
115. 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.
115
Photo courtesy of Diego Pulido and UX Magazine
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.
116!
Photo courtesy of Diego Pulido and UX Magazine!
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.
117!
Photo courtesy of Diego Pulido and UX Magazine
Paper Prototype example!
123. “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
130. “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
131. “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
140. Tasks are about completion…
Possibilities are interactions that
accrue over time…
140!
141. Tasks are about completion…
Possibilities are interactions that
accrue over time…
… or facilitate
exploration…
141!
142. Tasks are about completion…
Possibilities are interactions that
accrue over time…
..or are about
… or facilitate SENSING
exploration… INTENT!
142!
