Designing for Interesting Moments

Designing for Interesting Moments - Presentation Transcript

Designing for Interesting Moments Bill Scott Director, UI Engineering Netflix Microsoft - August 24, 2009

Me

Simple Interaction?

Simple Interaction? Events... Page load. Mouse hover. Mouse down. Drag initiated. Drag leaves original location. Drag re-enters original location. Drag re-enters original location. Drag enters valid target. Drag exits valid target. Drag enters speciﬁc invalid target. Drag is over no speciﬁc target. Drag hovers over valid target. Drag hovers over invalid target. Drop accepted. Drop rejected. Drop on parent container. 16+

Simple Interaction? Actors... Page. Cursor. Tool Tip. Drag Object. Drag Object’s Parent Container. Drop Target. 6+

Actors Events 96 Interesting Moments

Interesting Moments

interaction (n). mutual or reciprocal action; interacting

interaction. interplay between system and user

interaction. sequence tells a story

interactivity. cyclic process between two or more active agents in which each agent alternatively listens, thinks, and speaks. Chris Crawford Interactive Storytelling

Interesting Moments Captures minute interplay Serves as tickler for nuances Speaks to the possibilities

6 principles

6 principles for designing interesting moments

wh ere Input put. out you - Ala n Co oper

In Page Editing inline editing. animoto.com

In Page Editing Interesting Moments Page load Not editing: - Mouse enters edit area - Mouse exits edit area - Mouse click in edit area Editing: - Mouse exits edit area - Mouse click outside edit inline editing. animoto.com

Analyzing the Moments Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; ﬁeld invitational ﬁeld white new value text background

Analyzing the Moments 1 Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; ﬁeld invitational ﬁeld white new value text background 1

Analyzing the Moments 1 2 Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; ﬁeld invitational ﬁeld white new value text background 1 2

Analyzing the Moments 1 2 3 Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; ﬁeld invitational ﬁeld white new value text background 1 2 3

Analyzing the Moments 1 2 3 4 Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; ﬁeld invitational ﬁeld white new value text background 1 2 3 4

Analyzing the Moments 1 2 3 4 5 Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; ﬁeld invitational ﬁeld white new value text background 1 2 3 4 5

Analyzing the Moments 1 2 3 4 5 6 Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; ﬁeld invitational ﬁeld white new value text background 1 2 3 4 5 6

Analyzing the Moments 1 2 3 4 5 6 7 Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; ﬁeld invitational ﬁeld white new value text background 1 2 3 4 5 6 7

Refactoring the Moments Not editing: Editing: Not editing: Editing: Mouse Mouse clicks Mouse click Editing: Click Page Render Mouse exits Mouse exits enters edit in edit area outside edit Save Button edit area edit area area area Cursor link cursor normal i-beam normal normal normal dotted dotted Saving... Saving... hint at edit outline; hidden edit outline; Edit Area solid outline message; message; ﬁeld invitational ﬁeld white new value new value text background Show Save/ Hide Save/ Buttons? Cancel Cancel buttons buttons Show edit Edit Link? link?

In Page Editing inline editing. ﬁckr.com

In Page Editing inline editing. ﬁckr.com Additions: •Yellow spotlight/invitation •Tooltip invitation •Explicit Save/Cancel buttons

In Page Editing o Pay attention t ity discoverabil inline editing. ﬁckr.com Additions: •Yellow spotlight/invitation •Tooltip invitation •Explicit Save/Cancel buttons

In Page Editing o Pay attention t ity discoverabil inline editing. ﬁckr.com Use a clear “c all to action” Additions: •Yellow spotlight/invitation •Tooltip invitation •Explicit Save/Cancel buttons

anti-pattern. non-symmetrical. iphone

anti-pattern. non-symmetrical. iphone symmetrical interaction. basecamp

& Keep activation al deactivatio n symmetric anti-pattern. non-symmetrical. iphone symmetrical interaction. basecamp

Drag, Open & Drop drag and drop. gmail

Drag, Open & Drop Mouse hover & initiation Anti-pattern: Tiny Targets Drop accepted What happened? Collapses immediately. drag and drop. gmail

Drag, Open & Drop Mouse hover & initiation Anti-pattern: Tiny Targets Reduce physical effort. Drop accepted What happened? Collapses immediately. drag and drop. gmail

Drag, Open & Drop Mouse hover & initiation Anti-pattern: Tiny Targets Reduce physical effort. Drop accepted What happened? Collapses immediately. Reduce m ental effort. drag and drop. gmail

anti-pattern. artiﬁcial construct.

rate an object. netﬂix.com anti-pattern. artiﬁcial construct.

No artificia l constructs! rate an object. netflix.com anti-pattern. artificial construct.

re a int. qui tpr Re foo li ght

In Page Actions (always visible) original digg site. digg.com 1.0

In Page Actions (always visible) original digg site. digg.com 1.0 in-page action. digg.com

In Page Actions (always visible) original digg site. digg.com 1.0 ary actions. Use for prim in-page action. digg.com

In Page Actions (always visible) in-page action. digg.com

In Page Actions (always visible) in-page action. digg.com rating an object. y!news, netﬂix

In Page Actions (always visible) in-page action. digg.com rating an object. y!news, netﬂix rating an object. y!movies, y!answers

In Page Actions (always visible) in-page action. digg.com rating an object. y!news, netﬂix remembered collections. gap.com rating an object. y!movies, y!answers

In Page Actions (always visible) in-page action. digg.com rating an object. y!news, netﬂix t.” he “click weigh Use to reduce t •# of interaction steps •Decision time •Seek time •Second guessing •Wait time remembered collections. gap.com http://genesisconduit.wordpress.com/2008/07/13/click-weight/ rating an object. y!movies, y!answers http://www.amazon.com/Designing-Both-Sides-Screen-Collaborate/dp/0672321513

Contextual Tools (inline on hover) contextual tool menu. ﬂickr.com

Contextual Tools (inline on hover) contextual tool menu. ﬂickr.com contextual tool actions. backpackit

Contextual Tools (inline on hover) ns Use for sec ondary actio ity. or to prese rve readabil contextual tool menu. ﬂickr.com contextual tool actions. backpackit

Contextual Tools (overlay on hover) contextual tool overlay. bing.com

Contextual Tools (overlay on hover) ctivity. readab ility & intera Balance contextual tool overlay. bing.com

Anti-Pattern: Hover & Cover anti-pattern. hover & cover. yahoo! teachers

Anti-Pattern: Hover & Cover Mouse Mouse Page Tool over leaves tool In Progress Complete Render selected object layer Cursor link cursor Wrapped Normal Normal Actionable by tool display display Object layer mode mode Contextual Show tool Hide tool Hide tool Tools layer layer layer anti-pattern. hover & cover. yahoo! teachers

Anti-Pattern: Hover & Cover Mouse Mouse Page Tool over leaves tool In Progress Complete Render selected object layer ext Don’t obscure contCursor link cursor . o r navigation Wrapped Normal Normal Actionable by tool display display Object layer mode mode Contextual Show tool Hide tool Hide tool Tools layer layer layer anti-pattern. hover & cover. yahoo! teachers

Hover & Cover Refactored hover & cover resolved. y! teachers

Contextual Tools (overlay on hover) hover details. linkedin.com

Contextual Tools (overlay on hover) uld Hover a ctivation sho lay be 1 /2 second de hover details. linkedin.com

Contextual Tools (overlay on hover) uld Hover a ctivation sho lay be 1 /2 second de Time-based y. targeting is trick hover details. linkedin.com

Contextual Tools (overlay on hover) uld Hover a ctivation sho lay be 1 /2 second de Time-based y. targeting is trick Mouse path . targe ting is tricky hover details. linkedin.com

anti-pattern. double duty. amazon.com

Hover: shows contextual tool overlay. Click: goes to details page. anti-pattern. double duty. amazon.com

Hover: shows contextual tool overlay. Click: goes to details page. anti-pattern. double duty. amazon.com l. Do one thing wel

Contextual Tools (overlay on click) google maps

Contextual Tools (overlay on click) google maps bing.com

Contextual Tools (overlay on click) google maps bing.com everyblock.com

Contextual Tools (overlay on click) ol Open c ontextual to k. ys with a clic google maps overla bing.com everyblock.com

What about new Yahoo page? embedded application overlay - hover activated. yahoo.com 2009

What about new Yahoo page? Overlay stays open. embedded application overlay - hover activated. yahoo.com 2009

What about new Yahoo page? Overlay stays open. On mouse hover/delay switches to new app. embedded application overlay - hover activated. yahoo.com 2009

What about new Yahoo page? Mouse exits. Overlay closes. Overlay stays open. On mouse hover/delay switches to new app. embedded application overlay - hover activated. yahoo.com 2009

What about new Yahoo page? Mouse exits. Overlay closes. The good? • Doesn’t obscure other navigation. • Doesn’t collapse erratically. Overlay stays open. On mouse hover/delay switches to new app. embedded application overlay - hover activated. yahoo.com 2009

What about new Yahoo page? Mouse exits. Overlay closes. The good? • Doesn’t obscure other navigation. • Doesn’t collapse erratically. The not so good? • Activation delay feels sluggish (however delay is necessary). • Not all menus activate a panel. • Accidental triggering (result in obscuring content). Overlay stays • Gigantic overlays activated by hover open. On mouse hover/delay switches to new app. embedded application overlay - hover activated. yahoo.com 2009

What about new Yahoo page? Mouse exits. Overlay closes. The good? • Doesn’t obscure other navigation. • Doesn’t collapse erratically. The not so good? • Activation delay feels sluggish (however delay is necessary). • Not all menus activate a panel. • Accidental triggering (result in obscuring content). Overlay stays • Gigantic overlays activated by hover open. On mouse hover/delay switches to new app. See also: Jakob Nielsen’s research on embedded application overlay - hover activated. yahoo.com“Mega Menus”: http://tr.im/twnC 2009

in ﬂow. Mainta

Exploratorium Exhibit

Spot the differences

Now try again...

Now try again... e. oments wi thin the pag Keep the m

epage. me nts within th Keep the mo

Overlays hover details. netﬂix.com hover dialog. netﬂix.com

Overlays o Wait 1/2 second t s. activate hover detail hover details. netﬂix.com hover dialog. netﬂix.com

Overlays o Wait 1/2 second t s. activate hover detail Immediately ver d eactivate ho details on mouse exit. hover details. netﬂix.com hover dialog. netﬂix.com

Overlays o Wait 1/2 second t s. activate hover detail Immediately ver d eactivate ho details on mouse exit. re hover details. netflix.com Change con text or captu . flow in o verlay dialog hover dialog. netflix.com

Anti-Pattern: Idiot Boxes anti-pattern. idiot box. yelp.com

Anti-Pattern: Idiot Boxes anti-pattern. idiot box. yahoo! photos

Anti-Pattern: Idiot Boxes s h e proceeding “Don’t stop t - Alan Cooper with idiocy.” anti-pattern. idiot box. yahoo! photos

Overlays: Hover Initiated anti-pattern. shifting overlay. ui-patterns.com

Overlays: Hover Initiated anti-pattern. shifting overlay. ui-patterns.com better implementation of shifting overlay. instructables

Overlays: Hover Initiated anti-pattern. shifting overlay. ui-patterns.com better implementation of shifting overlay. instructables anti-pattern. shifting overlay. wikirank

Overlays: Hover Initiated ouse . ot follow the m Over lays should n anti-pattern. shifting overlay. ui-patterns.com better implementation of shifting overlay. instructables anti-pattern. shifting overlay. wikirank

Inlays click activated inlay. roost.com

Inlays g Use inl ays for stron . contextua l association click activated inlay. roost.com

Inlays g Use inl ays for stron . contextua l association click activated inlay. roost.com hover activated accordian. nasa.gov

Inlays g Use inl ays for stron . l association hover activated accordian. brown.edu contextua click activated inlay. roost.com hover activated accordian. nasa.gov

Inlays g Use inl ays for stron . l association hover activated accordian. brown.edu contextua click activated inlay. roost.com hover activated accordian. nasa.gov hover activated accordian. apple.com

Inlays g Use inl ays for stron . l association hover activated accordian. brown.edu contextua click activated inlay. roost.com k, Activate in lays with clic not hover. hover activated accordian. nasa.gov hover activated accordian. apple.com

ch Don’t infer too mu about the user’s intent er. from a mouse hov

Virtual Space endless scrolling. bing.com

Virtual Space carousel. paging. gallery. bing.com endless scrolling. bing.com

Virtual Space e. Consider the backstag carousel. paging. gallery. bing.com endless scrolling. bing.com

Seamless Context you are here. idea.org

Seamless Context you are here. idea.org seamless paging. magcloud

Seamless Context you are here. idea.org ext M aintain cont . across pages seamless paging. magcloud

Nav Bars: Extend the moment nav status bar. thesixtyone.com nav status bar. facebook.com nav status bar. digg.com

Nav Bars: Extend the moment nav status bar. thesixtyone.com . ain context across pages Maint nav status bar. facebook.com nav status bar. digg.com

acti on. e in ter In vit

http://dustincurtis.com/images/twitter/green_spill.jpg

all to action. Use a clear c http://dustincurtis.com/images/twitter/green_spill.jpg

Anti-Pattern: No clear action anti-pattern. no clear action. bing.com

Anti-Pattern: No clear action tion . Use a cl ear call to ac anti-pattern. no clear action. bing.com

Hover Invitations hover invitation. y!movies

Hover Invitations hover invitation. y!movies tooltip, hover & cursor invitation. ﬂickr.com

Hover Invitations hover invitation. y!movies hover & tool invitation. backpackit tooltip, hover & cursor invitation. ﬂickr.com

Hover Invitations hover invitation. y!movies hover & tool invitation. backpackit h Aid discov erability wit hover invitations. tooltip, hover & cursor invitation. ﬂickr.com

Blank Slate Invitation dog-ear invitation. login.yahoo.com

Blank Slate Invitation ﬁll-in-the-blanks invitation. netﬂix dog-ear invitation. login.yahoo.com

Blank Slate Invitation ﬁll-in-the-blanks invitation. netﬂix dog-ear invitation. login.yahoo.com blank-slate invitation. backpackit

Blank Slate Invitation for Recycle blank areas . our features promoting y ﬁll-in-the-blanks invitation. netﬂix dog-ear invitation. login.yahoo.com blank-slate invitation. backpackit

Tour Invitation tour invitation. gmail

Tour Invitation tour invitation. yahoo.com tour invitation. gmail

Tour Invitation tour invitation. yahoo.com Use new visits to es. e new featur tour invitation. gmail promot

Drag & Drop Invitation drag invitation. google maps drag invitation. google maps

Drag & Drop Invitation drop invitation. google maps drag invitation. google maps drag invitation. google maps

Drag & Drop Invitation s. Mind y our moment drop invitation. google maps drag invitation. google maps drag invitation. google maps

Prompt Invitation facebook.com

Prompt Invitation facebook.com delicious.com

Prompt Invitation s s or command Use question facebook.com t. to pro mpt for inpu delicious.com

button. the gap

hyperlink. backpackit button. the gap

hyperlink. backpackit button. the gap drop down arrow. ﬂickr

hyperlink. backpackit n button. the gap Bridge n ew interactio s. amiliar idiom styles with f drop down arrow. ﬂickr

itio ns. ans Show tr

anti-pattern. needless fanfare. macintosh turbo tax

anti-pattern. needless fanfare. macintosh turbo tax again in slow-motion...

anti-pattern. needless fanfare. macintosh turbo tax Always qu estion “why” . when usin g transitions again in slow-motion...

Attention processing is hard-wired into the brain It is chemistry. You can’t help it.

Attention processing is hard-wired into the brain lp looking at It is chemistry. You can’t You can’t he ads “dancing” mortgage help it.

anti-pattern. needless fanfare. roost.com Designing Visual Interfaces. Kevin Mullet & Darrell Sano

anti-pattern. needless fanfare. roost.com anti-pattern. needless fanfare. nasa.gov Designing Visual Interfaces. Kevin Mullet & Darrell Sano

anti-pattern. needless fanfare. pbs.org anti-pattern. needless fanfare. roost.com anti-pattern. needless fanfare. nasa.gov Designing Visual Interfaces. Kevin Mullet & Darrell Sano

anti-pattern. needless fanfare. pbs.org anti-pattern. needless fanfare. roost.com b. n imation kno Imagine an a y. a tion carefull Dial in anim anti-pattern. needless fanfare. nasa.gov Designing Visual Interfaces. Kevin Mullet & Darrell Sano

original. animation on drop. my yahoo!

original. animation on drop. my yahoo! current. no animation on drop. my yahoo!

original. animation on drop. my yahoo! alf” Use the “cut it in-h b. rule of thum current. no animation on drop. my yahoo!

Moments Communicate

Moments Communicate progress indicator

Moments Communicate Speed up time. progress indicator

Moments Communicate Speed up time. progress indicator earlier version of my yahoo!

Moments Communicate Speed up time. progress indicator . Slow down time earlier version of my yahoo!

Moments Communicate mint.com Speed up time. progress indicator . Slow down time earlier version of my yahoo!

Moments Communicate . Show state change mint.com Speed up time. progress indicator . Slow down time earlier version of my yahoo!

Moments Communicate . Show state change mint.com Speed up time. progress indicator . Slow down time the gap earlier version of my yahoo!

Moments Communicate . Show state change mint.com Speed up time. hips. Sh ow relations progress indicator . Slow down time the gap earlier version of my yahoo!

Moments Communicate . Show state change mint.com Speed up time. hips. Sh ow relations progress indicator . Slow down time the gap ﬂickr organizr earlier version of my yahoo!

Moments Communicate . Show state change mint.com Speed up time. hip s. Sh ow relations progress indicator . Slow down time the gap ion. Focus attent ﬂickr organizr earlier version of my yahoo!

active. e Be r

experiment on home page

experiment on home page dedicated area

Live Feedback live feedback. wundrbar

Live Feedback live feedback. ﬂickr live feedback. wundrbar

Live Feedback live feedback. ﬂickr live feedback. wundrbar live feedback. google maps

Live Feedback k Create a t ight feedbac loop w ith the user. live feedback. ﬂickr live feedback. wundrbar live feedback. google maps

Live Suggest live suggest. google (early version)

Live Suggest live suggest. google (early version) live suggest. yahoo search

Live Suggest live suggest. google (early version) live suggest. yahoo search live suggest. early yahoo search experiment

Live Suggest live suggest. google (early version) live suggest. yahoo search live suggest. early yahoo search experiment l Narrow toward a goa . dis tract from it rather than

Live Previews live preview. volkswagen car conﬁgurator

Live Previews live preview. volkswagen car conﬁgurator live suggest. apple search

Live Previews live preview. volkswagen car conﬁgurator ws. Us e live previe live suggest. apple search

Live Filtering reﬁning search. bing tweets

Live Filtering Reduce search effort g. wit h live ﬁlterin reﬁning search. bing tweets

Live Forms live forms. yahoo! small business

Live Forms live forms. yahoo! small business live forms. google account creation

Live Forms and live forms. yahoo! small business Prevent er rors beforeh . wi th live forms live forms. google account creation

Auto Complete auto complete. kayak

Auto Complete by Reduc e user effort tly. autocompl eting correc auto complete. kayak

Input where you output. Maintain ﬂow. Require a light footprint. Invite interaction. Show transitions. Be reactive.

Flickr Credits http://tr.im/t6Ew Presentation billwscott.com/share/ presentations/2009/ms Blog looksgoodworkswell.com Web username billwscott Book designingwebinterfaces.com O’Reilly