7. It is Better to “Own” the Experience
Netflix...
Thursday, December 8, 2011
8. It is Better to “Own” the Experience
Netflix...
Is known for valuing UX -- can’t do it if you don’t own it
Thursday, December 8, 2011
9. It is Better to “Own” the Experience
Netflix...
Is known for valuing UX -- can’t do it if you don’t own it
Lives by server-driven, testable, dynamic UIs
Thursday, December 8, 2011
10. It is Better to “Own” the Experience
Netflix...
Is known for valuing UX -- can’t do it if you don’t own it
Lives by server-driven, testable, dynamic UIs
Believes agile is better than rigid firmware process
Thursday, December 8, 2011
11. It is Better to “Own” the Experience
Netflix...
Is known for valuing UX -- can’t do it if you don’t own it
Lives by server-driven, testable, dynamic UIs
Believes agile is better than rigid firmware process
Values “Learn Fast/Fail Quickly”
Thursday, December 8, 2011
17. What Differs Across Devices?
Web
Input
Indirect.
Pointer/keyboard
Navigation
Controls & windows
Posture
Stationary
Working
Display
Hi-Rez
Large,
Near
Thursday, December 8, 2011
18. What Differs Across Devices?
Web TV
10’ UI
Input Input
Indirect. Indirect.
Pointer/keyboard LRUD/OSK
Navigation Navigation
Controls & windows Panes
Posture Posture
Stationary Lean Back
Working Relaxing
Display Display
Hi-Rez Hi-Rez
Large, Large
Near Far-away
Thursday, December 8, 2011
19. What Differs Across Devices?
Web TV Mobile
10’ UI
Input Input Input
Indirect. Indirect. Direct.
Pointer/keyboard LRUD/OSK Gesture/OSK
Navigation Navigation Navigation
Controls & windows Panes Panes
Posture Posture Posture
Stationary Lean Back On-the-go
Working Relaxing In Hand
Display Display Display
Hi-Rez Hi-Rez Hi-Rez
Large, Large Small
Near Far-away Near
Thursday, December 8, 2011
20. What Differs Across Devices?
Web TV Mobile Tablet
10’ UI
Input Input Input Input
Indirect. Indirect. Direct. Direct.
Pointer/keyboard LRUD/OSK Gesture/OSK Gesture/OSK
Navigation Navigation Navigation Navigation
Controls & windows Panes Panes Panes & Slideouts
Posture Posture Posture Posture
Stationary Lean Back On-the-go On-the-go
Working Relaxing In Hand Lean back
Shared
Display Display Display Display
Hi-Rez Hi-Rez Hi-Rez Hi-Rez
Large, Large Small Medium,
Near Far-away Near Near
Thursday, December 8, 2011
22. Netflix’s Strategy for Multi-Device
Chose a portability layer (html5, css3, JS)
Thursday, December 8, 2011
23. Netflix’s Strategy for Multi-Device
Chose a portability layer (html5, css3, JS)
Yet design for each constraint:
Thursday, December 8, 2011
24. Netflix’s Strategy for Multi-Device
Chose a portability layer (html5, css3, JS)
Yet design for each constraint:
user posture
Thursday, December 8, 2011
25. Netflix’s Strategy for Multi-Device
Chose a portability layer (html5, css3, JS)
Yet design for each constraint:
user posture
input capabilities
Thursday, December 8, 2011
26. Netflix’s Strategy for Multi-Device
Chose a portability layer (html5, css3, JS)
Yet design for each constraint:
user posture
input capabilities
navigation styles
Thursday, December 8, 2011
27. Netflix’s Strategy for Multi-Device
Chose a portability layer (html5, css3, JS)
Yet design for each constraint:
user posture
input capabilities
navigation styles
display capabilities
Thursday, December 8, 2011
28. Netflix’s Strategy for Multi-Device
Chose a portability layer (html5, css3, JS)
Yet design for each constraint:
user posture
input capabilities
navigation styles
display capabilities
Thursday, December 8, 2011
31. So what’s common?
design principles
fundamental, universal ideas
that underpin good design
across different input methods,
display capabilities and user
posture
Thursday, December 8, 2011
32. Design Principles
3
common design principles for
multiple platform design
Thursday, December 8, 2011
53. Anti-Pattern: Broken Metaphor
t break the metaphor
Don’
for the underlying
lementatio n model.
imp
Location??
user’s mental model is
The
the experience cushion.
“Books have pages”
Page!!
Thursday, December 8, 2011
56. Break the Metaphor with Magic
Back to
orig page
Thursday, December 8, 2011
57. Break the Metaphor with Magic
Back to You are
orig page this far
Thursday, December 8, 2011
58. Break the Metaphor with Magic
You are
Back to You are here
orig page this far
Thursday, December 8, 2011
59. Break the Metaphor with Magic
You are You can go
Back to You are here anywhere
orig page this far
Thursday, December 8, 2011
60. Break the Metaphor with Magic
You are You can go
Back to You are here anywhere Pages le/
orig page this far in chapter
Thursday, December 8, 2011
61. Break the Metaphor with Magic
Tap to
change
page
You are You can go
Back to You are here anywhere Pages le/
orig page this far in chapter
Thursday, December 8, 2011
62. Break the Metaphor with Magic
Tap to
change
page
You are You can go
Back to You are here anywhere Pages le/
orig page this far in chapter
hysicality is hard work.
Strict p
ic to simpli fy the real
Use mag
world.
Thursday, December 8, 2011
63. To Flick or not to Flick (iOS4)
Thursday, December 8, 2011
64. To Flick or not to Flick (iOS4)
Page
Binding
Thursday, December 8, 2011
65. To Flick or not to Flick (iOS4)
Page
Binding
Page
Depth
Thursday, December 8, 2011
66. To Flick or not to Flick (iOS4)
Page
Binding
Page
Depth
Page’s
animate a
flip via scrub
bar
Thursday, December 8, 2011
67. To Flick or not to Flick (iOS4)
Page
Binding
Page
Depth
However, you
can’t flip or
turn pages
with your
finger
Page’s
animate a
flip via scrub
bar
Thursday, December 8, 2011
68. To Flick or not to Flick (iOS4)
Page
Binding
Page
Depth
However, you
can’t flip or
turn pages
with your
finger
Page’s
animate a
flip via scrub Page
Page
bar turning
Choosing
Thursday, December 8, 2011
69. Then we have this! ABC News
iPad App
(Metaphors Gone Wild)
Thursday, December 8, 2011
77. Scrollbar Evolution
From Controller to Indicator
Content is scrolled instead of scrollbar
Controller
Indicator
Flick to
scroll
Thumbwheel is an evolution as well
Thursday, December 8, 2011
78. From Mouse to Touch...
Twitter
Thursday, December 8, 2011
86. Change Blindness
cannot see a change
The brain that it has
ppening to an element
ha
yet stored - Wikipedia
not
rds, it does n’t expect
In other wo contiguous.
the w o rld to be dis
Thursday, December 8, 2011
87. tegy
Stra
Reduce Page
Switching
to Maintain Flow
Thursday, December 8, 2011
96. Twitter as iPad App Minimize page transitio
ns
ern
w ith Page Slide patt
Thursday, December 8, 2011
97. Twitter as iPad App Minimize page transitio
ns
ern
w ith Page Slide patt
Open, c lose & refresh s
panels with swipe gesture
Thursday, December 8, 2011
98. Twitter as iPad App Minimize page transitio
ns
ern
w ith Page Slide patt
Open, c lose & refresh s
panels with swipe gesture
tly
Scroll the content direc
Thursday, December 8, 2011
99. Twitter as iPad App Minimize page transitio
ns
ern
w ith Page Slide patt
Open, c lose & refresh s
panels with swipe gesture
tly
Scroll the content direc
t&
Ope n web conten
m edia in place
Thursday, December 8, 2011
100. Pattern: Page Slide
http://srobbin.com/blog/jquery-pageslide/
Thursday, December 8, 2011
101. Pattern: Page Slide
eal estate and
Page Slide extends the r ”
management
simplifies “window
http://srobbin.com/blog/jquery-pageslide/
http://www.youtube.com/watch?v=WBv3fFg8t8g
Thursday, December 8, 2011
105. Twitter as Web App
s
Minimize page transition
n
with Page Slide patter
Thursday, December 8, 2011
106. Twitter as Web App
s
Minimize page transition
n
with Page Slide patter
ith
Find myself annoyed w
in
web p ages opening
ow
another wind
Thursday, December 8, 2011
107. Twitter as Web App
s
Minimize page transition
n
with Page Slide patter
ith
Find myself annoyed w
in
web p ages opening
ow
another wind
Find mys elf wanting to
ra
substi tute a drag fo
swipe
Thursday, December 8, 2011
108. VS - Twitter’s Previous Hover & Cover
Thursday, December 8, 2011
109. VS - Twitter’s Previous Hover & Cover
ce
Where possible repla th
annoying ho ver details wi
nes
dedicated detail pa
Thursday, December 8, 2011
118. Animation Can...
s is
done with les
What can be .
done in vain with more
- Occam
al d istinctions as
Make all visu r
ible , but still clea
subtle as poss
and effective.
nce”
est Effective Differe
- Tu/e “Small
Thursday, December 8, 2011
119. Web Apps Seem Prone to This
Thursday, December 8, 2011
120. Web Apps Seem Prone to This
Thursday, December 8, 2011
121. Web Apps Seem Prone to This
me
Snarky answer: Bla
it on Flash :-)
Thursday, December 8, 2011
122. Web Apps Seem Prone to This
me
Snarky answer: Bla
it on Flash :-)
er:
M ost likely answ
put
Ind i rectness of In
ices
On touch dev
animat ion and input
ed
are synchroniz
Thursday, December 8, 2011
123. Web Apps Seem Prone to This
me
Snarky answer: Bla
it on Flash :-)
er:
M ost likely answ
put
Ind i rectness of In
ices
On touch dev
animat ion and input
ed
are synchroniz
w
However, slo
transitions can still be
a problem
Thursday, December 8, 2011
125. Animation Can...
ps
Reveal relationshi
Thursday, December 8, 2011
126. Animation Can...
ps
Reveal relationshi
Improve
s
responsivenes
Thursday, December 8, 2011
127. Animation Can...
ps
Reveal relationshi
Improve
s
responsivenes
ge
Sh ow state chan
Thursday, December 8, 2011
128. Animation Can...
ps
Reveal relationshi
Improve
s
responsivenes
ge
Sh ow state chan
on
Focus attenti
Thursday, December 8, 2011
129. Animation Can...
ps
Reveal relationshi
Improve
s
responsivenes
ge
Sh ow state chan
on
Focus attenti
t
Create deligh
Thursday, December 8, 2011
130. Animation Can...
ps
Reveal relationshi
Improve
s
responsivenes
ge
Sh ow state chan
on
Focus attenti
t
Create deligh
y
Simu late physicalit
Thursday, December 8, 2011
