Designing For Population

Tuesday, November 8, 2011
Designing for Mice and Men
Bill Scott Paypal
! too n me o dw n a * Designing for Mice & Men* Bill Scott! Net"ix
Current Experience Chaos #$%% SKUs&
UI16 Conference Nov. 2011. @ 2011 all materials
Net"ix 'Owned( Experience Across Devices
Net"ix Across Devices #in)house products&
Web
Tablet
Mobile
TV
2
HTML*
Net"ix Across Devices #in)house products&
HTML*
HTML*
HTML* HTML*
HTML*
Common Platform Across Devices
Web Browser
iOS Webkit
iOS Webkit
QT Webkit & Skia Webkit

3
HTML*
Why own the experience?

Known for valuing UX !! can"t do it if you don"t own it Love server!driven# testable# dynamic UIs Like agile Web better than rigid CE $rmware process Value %Learn Fast&Fail Quickly' The reality is any other path is chaos
Initial HTML* Experience: PS+ ) 'Special(
Alternate HTML* Experience: PS+ ) 'Plus(
Designing Across Platforms

Chose a portability layer (html)# css*# JS+ However# don"t use progressive enhancement since want the freedom to experiment with di,erent UX on di,erent platforms Design for user posture# input capabilities# navigation styles and display capabilities Embrace the constraints (design for mobile $rst!+
Designing for Mice & Men

Web TV .%/ UI Mobile Tablet
Input Indirect, Pointer-keyboard Navigation Controls & windows Posture Stationary Working
Input IndirectLRUD-OSK Navigation Panes Posture Lean Back Relaxing
Input DirectGesture-OSK Navigation Panes Posture On)the)go In Hand
Input DirectGesture-OSK Navigation Panes & Slideouts Posture On)the)go Lean back Shared Display Hi)Rez Medium! Near
Display Hi)Rez Large! Near
Display Hi)Rez Large Far)away
Display Hi)Rez Small Near
So what/s common?
design principles
fundamental# universal ideas that underpin good design across di,erent input methods# display capabilities and user posture but the application of principles varies across input posture navigation display
s e l p i c n i r P e e r Th
common design principles for multiple platform design
al 0. Get Physic
The Illusion of Physicality
Design for Physicality
alistic# ssible# add a re o p r e v e n tione h W to your applica n o si n e im d l physica ! Apple HIG
Use Metaphors to Embody Physicality
Physicality as Metaphor
Film Strip
Physicality as Metaphor
Book 'Books have pages( 'Pages turn(
Anti)Pattern: Broken Metaphor

e metaphor Don"t break th ying for the underl n modelo implementati
Location??
ntal model is The user/s me cushion, the experience
'Books have pages(

Page!!
10
Break the Metaphor with Magic

Tap to change page
Back to orig page
You are this far
You are here
You can go anywhere
Pages le. in chapter
lity Strict physica Use magic to world-
is hard work-
al simplify the re
To Flick or not to Flick

Page Binding
Page Depth
However# you can"t /ip or turn pages with your $nger
Page Choosing
Page"s animate a /ip via scrub bar
Page turning
11
Use Directness to Simulate Physicality
in .12$! this was physicality ) the scrollbar

UI16 Conference Nov. 2011. @ 2011 all materials 12
Scrollbar Evolution
From Controller to Indicator Content is scrolled instead of scrollbar
Controller Indicator
Flick to scroll
Thumbwheel is an evolution as well
It must feel real
ent Make sure ev nsistent handling is co
ers are Remember $ng is limited te ta es al Re t fa
13
Anti)Pattern: Mismatched Metaphor
anti #pattern: arti$cial construct
net! ix " rate an object- KISS-
cial visual tructing arti$ Beware of cons d drop an ag dr t or supp interfaces to
Anti)Pattern: Mismatched Metaphor
#Metaphors Gone Wild&

How Fat is Your Input?

Targeting Size Web #Pointer& Mobile-Tablet #Finger& Remote #LRUD& Remote #Pointer& .3 pixels #but accurate as . pixel& $$ pixels* $$ pixels $$ pixels
* Josh Clark/s recommendation ) Tapworthy
Physicality Across Platforms

Input
Pointer Indirect Fine)grained #pixel& Finger Direct Course)grained #4nger& Finger Direct Course)grained #4nger&
Posture
Stationary #can support sovereign apps&
Navigation
Display
Large size High resolution Near
Web
Windows Menus! Tabs & Links
Tablet
On)the)go #Single Purpose Apps&
Panes Buttons & Gestures
Medium size High resolution Near
Mobile
On)the)go #Single Purpose Apps&
Panes & Buttons
Small size High resolution Near
TV
Remote Control Indirect Course)grained #. object at a time&
Leisure #supports consumption! media apps&
Panes & Content
Large size High resolution Far away
15
Flow n i a t n i a M 5 0
Exploratorium Exhibit
16
Spot the di6erences
Now try again,,,
Change blindn
ess
17
Change Blindness
nge not see a cha The brain can it has element that n a to g in n e p hap ! Wikipedia not yet stored xpect s# it doesn"t e In other word ousbe discontigu the world to
Reduce Page Switching to Maintain Flow

'Special( Experience
Principles follo
wed:
t# Simple Focus 0 contex r Control se U # n tio ga navi
'Plus( Experience
Principles follo
wed:
/owContent is the Contextin n io at rm Info enc rie pe ex Only 1
19
Which Won?
%Plus' experie
nce wonre
ls mo ansitions# fee tr e g a p s ce u d Re jarringcinematic# less Maintains Flo w
Twitter as iPad App
transitions Minimize page pattern e id Sl with Page
refresh Open# close & ipe gestures sw ith w ls pane
ent directly Scroll the cont
ntent & Open web co e ac pl in ia med
20
Page Slide
estate and tend the real Page Slides ex ent' dow managem simplify %win
http://srobbin.com/blog/jquery-pageslide/
http://www.youtube.com/watch?v=WBv3fFg8t8g
Twitter as Mac App

her areas Navigate to ot nsitions tra using smooth le+ sib vi ow / e (mak breaking the Anti!Pattern: us & /ow with men s ut popo
p apps to Rethink deskto more use real estate creatively
21
Twitter as Web App

transitions Minimize page pattern e id Sl with Page
noyed with Find myself an ing in en op s ge web pa w do in another w
anting to Find myself w ag for a dr a e ut tit bs su swipe
Vs Hover & Cover
le replace Where possib r details with ve annoying ho il panes dedicated deta
22
Keep Navigation Simple to Maintain Flow
Mobile Navigation
iPhone Three types of # Tab# Tree at Fl n: navigatio
! Josh Clark " Tapworthy#
Gowalla: Tab
!
0 Flat
worthy# Josh Clark " Tap
Source: Tapworthy by Josh Clark
23
Pulse & Flipboard iPad Apps
Maintaining Flow Across Platforms

Navigation Paging Scrolling Content Slide Panel Slide
When page content changes or step by Better than paging Carousels for media step "ow Nice way to extend #easier on web than or short relevancy real estate on touch& lists Avoid too many page changes
Web
Page! Tab! Back Button
Mobile
Avoid #except as Flat! Tab & Tree, For content! steps in Question scrolling! Limit use of in)page transition to replace . level back, "ow prefer Flat sliding content page& Swiping through pages Avoid too many page changes When page content changes or step by step "ow
Tablet
Flat! Tab! Master-Detail, . level)back
Short scrolling or for Sliding content
Nice way to bring in Nice way to extend more in)page real estate content
TV
Flat! Tab! Tree! Master-Detail
Avoid
Avoid
Nice way to extend real estate
24
sive n o p s e R e B + 0
Use TransitionsAnimations to Create Responsiveness

Animation Can,,,
ly Be really# real annoying
is done with less What can be e or m ith w done in vain

! Occam
as al distinctions Make all visu t still clear bu # le ib ss po subtle as and e,ective! Tu.e %Small est E,ective Di ,erence'
26
Web Apps Seem Prone to This

: Blame Snarky answer it on Flash :!+
swer: Most likely an Input of ss ne ct Indire ces On touch devi put in d an n io at anim d ize on hr nc are sy
w However# slo ill be st n ca s on iti trans m le ob a pr
Animation Can,,,
Reveal relatio nships Improve s responsivenes
Show state ch
ange
Focus attentio
Create delight
Simulate phys
icality
27
Use Invitations to Create Responsiveness
Just in Time Invitations at Drag Moments
28
Invitations at Reward Moments

of Major source gs obtaining ratin
Mobile Invitations at Touch)Hold Moments
29
Content as an Invitation
Be Snappy to Be Responsive
Performance is Not Always a Given

rform magic We had to pe kit core to eb W to get our ition ! ns do this one tra positing' m co d te ra le %acce
Point For Entry Price ve to turn o, devices we ha ressively animation prog
Advances in HTML*
31
Responsiveness Across platforms

Input Animation Invitations Performance
Web
Pointer Indirect
Make Indirect Input Feel More Direct
On hover
Less of a consideration
TabletMobile
Fingers Direct
Make Direct Input Feel Real
At touch-hold endpoints
Can be a consideration
TV
Remote Indirect
Make Indirect Input Feel More Direct Reinforce the Cinematic
Static hints De4nitely an issue #usually once an on some low)end item is selected& devices
TV Experiences,,,
32
Can In"uence Website Experience
Presentation
billwscott-com&share&presentations&2311&uie14
Blogs http:&&looksgoodworkswell-com http:&&designingwebinterfaces-com Follow me on twitter! @billwscott Book

http:&&designingwebinterfaces-com
Video
http:&&oreil-ly&dwivideo
Picture Credits (Creative Commons+

http:&&www-/ickr-com&photos&rsms& http:&&www-/ickr-com&photos&lalegranegra&5622)64417& http:&&www-/ickr-com&photos&tim_d&28)28)75&sizes&l& http:&&www-/ickr-com&photos&miradesduna$cionat&5)182*4777&sizes&z& http:&&www-/ickr-com&photos&zetson& http:&&www-/ickr-com&photos&spencereholtaway&1511766*)1&in&photostream& http:&&creativecommons-org&ns
33

Designing For Population

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Designing For Population

Uploaded by

Copyright:

Available Formats

Tuesday, November 8, 2011

Designing for Mice and Men

Bill Scott Paypal

! too n me o dw n a * Designing for Mice & Men* Bill Scott! Net"ix

Current Experience Chaos #$%% SKUs&

UI16 Conference Nov. 2011. @ 2011 all materials

Net"ix 'Owned( Experience Across Devices

Net"ix Across Devices #in)house products&

Net"ix Across Devices #in)house products&

Common Platform Across Devices

QT Webkit & Skia Webkit

Why own the experience?

Initial HTML* Experience: PS+ ) 'Special(

UI16 Conference Nov. 2011. @ 2011 all materials

Alternate HTML* Experience: PS+ ) 'Plus(

Designing Across Platforms

UI16 Conference Nov. 2011. @ 2011 all materials

Designing for Mice & Men

Input IndirectLRUD-OSK Navigation Panes Posture Lean Back Relaxing

Input DirectGesture-OSK Navigation Panes Posture On)the)go In Hand

Display Hi)Rez Large! Near

Display Hi)Rez Large Far)away

Display Hi)Rez Small Near

UI16 Conference Nov. 2011. @ 2011 all materials

UI16 Conference Nov. 2011. @ 2011 all materials

The Illusion of Physicality

Design for Physicality

alistic# ssible# add a re o p r e v e n tione h W to your applica n o si n e im d l physica ! Apple HIG

UI16 Conference Nov. 2011. @ 2011 all materials

Use Metaphors to Embody Physicality

UI16 Conference Nov. 2011. @ 2011 all materials

Book 'Books have pages( 'Pages turn(

Anti)Pattern: Broken Metaphor

ntal model is The user/s me cushion, the experience

'Books have pages(

UI16 Conference Nov. 2011. @ 2011 all materials

Break the Metaphor with Magic

Back to orig page

You are this far

You are here

You can go anywhere

Pages le. in chapter

lity Strict physica Use magic to world-

To Flick or not to Flick

However# you can"t /ip or turn pages with your $nger

Page"s animate a /ip via scrub bar

UI16 Conference Nov. 2011. @ 2011 all materials

Use Directness to Simulate Physicality

in .12$! this was physicality ) the scrollbar

Thumbwheel is an evolution as well

It must feel real

ent Make sure ev nsistent handling is co

ers are Remember $ng is limited te ta es al Re t fa

UI16 Conference Nov. 2011. @ 2011 all materials

Anti)Pattern: Mismatched Metaphor

anti #pattern: arti$cial construct

net! ix " rate an object- KISS-

cial visual tructing arti$ Beware of cons d drop an ag dr t or supp interfaces to

Anti)Pattern: Mismatched Metaphor

#Metaphors Gone Wild&

How Fat is Your Input?

* Josh Clark/s recommendation ) Tapworthy