Designing for population

8/13/2019 Designing for population

1/34

Tuesday, November 8, 2011

Designing for

Mice and Men


2/34

ce a d e

Designing for Mice & Men* Bill Scott!Net"ix*an

dwom

entoo

!

*andw

omen

too!

Current Experience Chaos #$%%SKUs&

UI16 Conference Nov. 2011. @ 2011 all materials 1


3/34

Net"ix'Owned(Experience Across Devices

Net"ix Across Devices #in)house products&

Web Tablet

Mobile TV



4/34

Net"ix Across Devices #in)house products&

HTML* HTML*

HTML* HTML*

Common Platform Across Devices

Web Browser iOS Webkit

iOS WebkitQT Webkit &

Skia Webkit



5/34

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(



6/34

Alternate HTML*Experience: PS+)'Plus(

Designing Across Platforms

Chose a portability layer (html)#css*#JS+

However#don"t use progressive enhancement since wantthe 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!+



7/34

Designing for Mice & Men

Input

Indirect,

Pointer-keyboard

Navigation

Controls & windows

PostureStationary

Working

Display

Hi)Rez

Large!

Near

Web

Input

Indirect-

LRUD-OSK

Navigation

Panes

PostureLean Back

Relaxing

Display

Hi)Rez

Large

Far)away

TV.%/UI

Input

Direct-

Gesture-OSK

Navigation

Panes

PostureOn)the)go

In Hand

Display

Hi)Rez

Small

Near

Mobile

Input

Direct-Gesture-OSK

Navigation

Panes & Slideouts

Posture

On)the)go

Lean back

Shared

Display

Hi)Rez

Medium!

Near

Tablet

So what/s common?

design principlesfundamental#universal ideas

that underpin good design

across di,erent input methods#display capabilities and user

posture

but the application of principles

varies across

inputposturenavigationdisplay



8/34

common design principles for

multiple platform design

ThreePrinciples

0.GetPhysical



9/34

The Illusion of Physicality

+

Wheneverpossible#addarealistic#

physicaldimensiontoyour

application-

!AppleHIG

Design for Physicality



10/34

Use Metaphors

to Embody

Physicality

Physicality as Metaphor

Film Strip



11/34

Physicality as Metaphor

Book

'Books have pages(

'Pages turn(

Anti)Pattern: Broken Metaphor

Location??

Page!!

Don"tbreakthemetaphor

fortheunderlying

implementationm

odel-

Theuser/sm

entalmodelis

theexperiencecushion,

'Books have pages(



12/34

Break the Metaphor with Magic

Back toorig page

You arethis far

You are

here

You can go

anywhere Pages le.

in chapter

Strictphysicalityishardwo

rk-

Usemagictosimplifyther

eal

world-

Tap to

change

page

To Flick or not to Flick

Page

Choosing

Page

Binding

PageDepth

However#you

can"t /ip or

turn pages

with your

$nger

Page

turning

Page"s

animate a

/ip via scrub

bar



13/34

Use Directness

to Simulate

Physicality

in .12$!this was physicality )the scrollbarUI16 Conference Nov. 2011. @ 2011 all materials 12


14/34

Scrollbar Evolution

From Controller to Indicator

Content is scrolled instead of scrollbar

Thumbwheel is an evolution as well

Controller

Indicator

Flick to

scroll

It must feel real

Makesureevent

handlingisconsistent

Remember$ngersare

fat-Realestateislimited



15/34

Anti)Pattern: Mismatched Metaphor

net!ix "rate an object-KISS-anti#pattern:arti$cial construct

Bewareofconstructingar

ti$cialvisual

interfacestosupportdrag

anddrop

Anti)Pattern: Mismatched Metaphor

#Metaphors Gone Wild&UI16 Conference Nov. 2011. @ 2011 all materials 14


16/34

How Fat is Your Input?

Targeting Size

Web

#Pointer& .3pixels #but accurate as .pixel&

Mobile-Tablet

#Finger& $$pixels*

Remote #LRUD& $$pixels

Remote #Pointer& $$pixels

* Josh Clark/s recommendation )Tapworthy

Physicality Across Platforms

Input Posture Navigation Display

Web

Pointer

Indirect

Fine)grained #pixel&

Stationary

#can support

sovereign apps&

Windows

Menus!Tabs & Links

Large size

High resolution

Near

Tablet

Finger

Direct

Course)grained

#4nger&

On)the)go

#Single Purpose

Apps&

Panes

Buttons & Gestures

Medium size

High resolution

Near

Mobile

Finger

Direct

Course)grained

#4nger&

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



17/34

05MaintainFlow

Exploratorium Exhibit



18/34

Spot the di6erences

Now try again,,,Changeblind

ness



19/34

Change Blindness

Thebraincannotseeacha

nge

happeningtoanelementthatithas

notyetstored!Wikipedia

Inotherwords#itdoesn"te

xpect

theworldtobediscontigu

ous-

Reduce PageSwitching

to Maintain Flow



20/34

'Special(ExperiencePrinciplesfol

lowed:

Focus0context#Simple

navigation#UserControl

'Plus(Experience Principlesfollowed:

Contentisthe/ow-

InformationinContext-

Only1experience-



21/34

Which Won?

%Plus'experiencewon-

Reducespagetransitions#feelsmore

cinematic#lessjarring-

MaintainsFlow

Twitter as iPad AppMinimizepag

etransitions

withPageSlidepattern

Open#close&refresh

panelswithswipegest

ures

Scrollthecontentdirectly

Openwebcontent&

mediainplace



22/34

Page Slide

http://srobbin.com/blog/jquery-pageslide/

http://www.youtube.com/watch?v=WBv3fFg8t8g

PageSlidesextendtherea

lestateand

simplify%windowmanage

ment'

Twitter as Mac App

Navigatetootherareas

usingsmoothtransitions

(make/owvisible+

Anti!Pattern:breakingthe

/owwithmenus&

popouts-

Rethinkdesktopappsto

userealestatemore

creatively



23/34

Twitter as Web App

Minimizepagetransitions

withPageSlidepattern

Findmyselfannoyedwith

webpagesopeningin

anotherwindow

Findmyselfwantingto

substituteadragfora

swipe

Vs Hover & Cover

Wherepossiblereplace

annoyinghoverdetailswith

dedicateddetailpanes



24/34

Keep Navigation

Simple

to Maintain Flow

Mobile Navigation

Source: Tapworthy by Josh Clark

ThreetypesofiPhone

navigation:Flat#Tab#Tree

!JoshClark"Tapworthy#

Gowalla:Tab0Flat

!JoshClark"Tapworthy

#



25/34

Pulse & Flipboard iPad Apps

Maintaining Flow Across Platforms

Navigation Paging Scrolling Content Slide Panel Slide

WebPage!Tab!Back

Button

When page content

changes or step by

step "ow

Avoid too many

page changes

Better than paging

#easier on web thanon touch&

Carousels for media

or short relevancylists

Nice way to extend

real estate

MobileFlat!Tab & Tree,

.level back,

For content!steps in

"ow

Question scrolling!

prefer Flat

Limit use of in)page

sliding content

Avoid#except as

transition to replace

page&

TabletFlat!Tab!

Master-Detail,

.level)back

Swiping through

pages

Avoid too many

page changes

Short scrolling or

for Sliding content

Nice way to bring in

more in)page

content

Nice way to extend

real estate

TVFlat!Tab!Tree!

Master-Detail

When page content

changes or step by

step "ow

Avoid AvoidNice way to extend

real estate



26/34

0+BeResponsive

Use Transitions-

Animations

to Create

Responsiveness



27/34

Animation Can,,,Bereally#real

ly

annoying

Whatcanbedonewithles

sis

doneinvainwithmore-

!Occam

Makeallvisualdistinction

sas

subtleaspossible#butstill

clear

ande,ective-

!Tu.e%SmallestE,ective

Di,erence'



28/34

Web Apps Seem Prone to This

Snarkyanswer:Blame

itonFlash:!+

Mostlikelyanswer:Indirectnesso

fInput

Ontouchdevices

animationandinput

aresynchronized

However#slow

transitionscanstillbe

aproblem

Animation Can,,,Revealrelatio

nships

Improve

responsiveness

Showstatechange

Focusattention

Createdelight

Simulatephysicality



29/34

Use Invitations

to Create

Responsiveness

Just in Time Invitations at Drag Moments



30/34

Invitations at Reward Moments

Majorsourceof

obtainingratings

Mobile Invitations at Touch)Hold Moments



31/34

Content as an Invitation

Be Snappyto

Be Responsive



32/34

Performance is Not Always a Given

Wehadtoperformmagic

togetourWebkitcoreto

dothisonetransition!

%acceleratedcompositing'

ForEntryPricePoint

deviceswehavetoturno,

animationprogressively

Advances in HTML*



33/34

Responsiveness Across platforms

Input Animation Invitations Performance

WebPointer

Indirect

Make Indirect Input

Feel More DirectOn hover

Less of a

consideration

Tablet-

Mobile

Fingers

Direct

Make Direct Input

Feel Real

At touch-hold

endpoints

Can be a

consideration

TVRemoteIndirect

Make Indirect InputFeel More Direct

Reinforce the

Cinematic

Static hints

#usually once an

item is selected&

De4nitely an issue

on some low)end

devices

TV Experiences,,,



34/34

Can In"uence Website Experience

Presentationbillwscott-com&share&presentations&2311&uie14

Blogs

http:&&looksgoodworkswell-com

http:&&designingwebinterfaces-com

Follow me on twitter!@billwscott

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

Bookhttp:&&designingwebinterfaces -com

Videohttp:&&oreil-ly&dwivideo


Documents

Designing for population