DesigningInteresting.. - Bill Scott's Portfolio

Designing forInterestingMomentsBill ScottDirector, UI EngineeringNetflixIntuit - September 29, 2009

Simple Interaction? Events...Page load. Mouse hover. Mouse down. Draginitiated. Drag leaves original location. Dragre-enters original location. Drag re-entersoriginal location. Drag enters valid target.Drag exits valid target. Drag enters specificinvalid target. Drag is over no specific target.Drag hovers over valid target. Drag hoversover invalid target. Drop accepted. Droprejected. Drop on parent container.16+

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

EventsActors96Interesting Moments

Interesting Moments

Interesting Moments

Interesting Moments

Interesting Moments

Interesting Moments

Interesting Moments

Interesting MomentsCaptures microstates

Interesting MomentsCaptures microstatesSpeaks to the possibilities

Interesting MomentsCaptures microstatesSpeaks to the possibilitiesServes as a tickler

interaction (n).mutual orreciprocal action;interacting

6 principles

6 principlesfor designing interesting moments

Input whereyou output.- Alan Cooper

In Page Editinginline editing. fickr.com

In Page Editinginline editing. fickr.comAdditions:•Yellow spotlight/invitation•Tooltip invitation•Explicit Save/Cancel buttons

In Page EditingPay attention todiscoverabilityinline editing. fickr.comAdditions:•Yellow spotlight/invitation•Tooltip invitation•Explicit Save/Cancel buttons

In Page EditingPay attention todiscoverabilityinline editing. fickr.comAdditions:Use a clear“call to action”•Yellow spotlight/invitation•Tooltip invitation•Explicit Save/Cancel buttons

anti-pattern. non-symmetrical. iphone

anti-pattern. non-symmetrical. iphone

anti-pattern. non-symmetrical. iphone

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

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

Keep activation &deactivation symmetricalanti-pattern. non-symmetrical. iphonesymmetrical interaction. basecamp

Drag, Open & Dropdrag and drop. gmail

Drag, Open & DropMouse hover & initiationAnti-pattern: Tiny TargetsDrop acceptedWhat happened?Collapses immediately.drag and drop. gmail

Drag, Open & DropMouse hover & initiationAnti-pattern: Tiny TargetsReduce physical effort.Drop acceptedWhat happened?Collapses immediately.drag and drop. gmail

Drag, Open & DropMouse hover & initiationAnti-pattern: Tiny TargetsReduce physical effort.Drop acceptedWhat happened?Collapses immediately.Reduce mental effort.drag and drop. gmail

anti-pattern. artificial construct.

anti-pattern. artificial construct.rate an object. netflix.com

Avoid artificial constructs!rate an object. netflix.comanti-pattern. artificial construct.

Require alight footprint.

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 Actions (always visible)original digg site. digg.com 1.0in-page action. digg.com

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

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

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

In Page Actions (always visible)in-page action. digg.comrating an object. y!news, netflix

In Page Actions (always visible)in-page action. digg.comrating an object. y!news, netflixrating an object. y!movies, y!answers

In Page Actions (always visible)in-page action. digg.comrating an object. y!news, netflixremembered collections. gap.comrating an object. y!movies, y!answers

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

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

Contextual Tools (inline on hover)contextual tool menu. flickr.comcontextual tool actions. backpackit

Contextual Tools (inline on hover)Use for secondary actionsor to preserve readability.contextual tool menu. flickr.comcontextual tool actions. backpackit

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

Contextual Tools (overlay on hover)Balance readability & interactivity.contextual tool overlay. bing.com

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

Anti-Pattern: Hover & CoverPageRenderMouseoverobjectMouseleaves toollayerToolselectedIn ProgressCompleteCursorlink cursorActionableObjectWrappedby toollayerNormaldisplaymodeNormaldisplaymodeContextualToolsShow toollayerHide toollayerHide toollayeranti-pattern. hover & cover. yahoo! teachers

Anti-Pattern: Hover & CoverPageRenderMouseoverobjectMouseleaves toollayerToolselectedIn ProgressCompleteDon’t obscure contextor navigation.Cursorlink cursorActionableObjectWrappedby toollayerNormaldisplaymodeNormaldisplaymodeContextualToolsShow toollayerHide toollayerHide toollayeranti-pattern. hover & cover. yahoo! teachers

Hover & Cover Refactoredhover & cover resolved. y! teachers

Hover & Cover Refactoredhover & cover resolved. y! teachers

Maintain flow.

Exploratorium Exhibit

Spot the differences

Spot the differences

Now try again...

Now try again...

Now try again...Keep the moments within the page.

Keep the moments within the page.

Virtual Spaceendless scrolling. bing.com

Virtual Spacecarousel. paging. gallery. bing.comendless scrolling. bing.com

Virtual SpaceConsider the backstage.carousel. paging. gallery. bing.comendless scrolling. bing.com

Inlaysclick activated inlay. roost.com

InlaysUse inlays for strongcontextual association.click activated inlay. roost.com

InlaysUse inlays for strongcontextual association.click activated inlay. roost.comhover activated accordian. nasa.gov

InlaysUse inlays for strongcontextual association.hover activated accordian. brown.educlick activated inlay. roost.comhover activated accordian. nasa.gov

InlaysUse inlays for strongcontextual association.hover activated accordian. brown.educlick activated inlay. roost.comhover activated accordian. nasa.govhover activated accordian. apple.com

InlaysUse inlays for strongcontextual association.hover activated accordian. brown.educlick activated inlay. roost.comActivate inlays with click,not hover.hover activated accordian. nasa.govhover activated accordian. apple.com

Overlayshover details. netflix.comhover dialog. netflix.com

Overlayshover details. netflix.comhover dialog. netflix.com

OverlaysWait 1/2 second toactivate hover details.hover details. netflix.comhover dialog. netflix.com

OverlaysWait 1/2 second toactivate hover details.Immediatelydeactivate hoverdetails on mouse exit.hover details. netflix.comhover dialog. netflix.com

OverlaysWait 1/2 second toactivate hover details.Immediatelydeactivate hoverdetails on mouse exit.hover details. netflix.comChange context or captureflow in overlay dialog.hover dialog. netflix.com

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

Anti-Pattern: Idiot Boxes“Don’t stop the proceedingswith idiocy.” - Alan Cooperanti-pattern. idiot box. yahoo! photos

Nav Bars: Seamless Contextnav status bar. thesixtyone.comnav status bar. facebook.comnav status bar. digg.com

Nav Bars: Seamless Contextnav status bar. thesixtyone.comnav status bar. facebook.comnav status bar. digg.com

Nav Bars: Seamless ContextMaintain context across pages.nav status bar. thesixtyone.comnav status bar. facebook.comnav status bar. digg.com

Invite interaction.

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

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

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

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

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

Hover Invitationshover invitation. y!movies

Hover Invitationshover invitation. y!moviestooltip, hover & cursor invitation. flickr.com

Hover Invitationshover invitation. y!movieshover & tool invitation. backpackittooltip, hover & cursor invitation. flickr.com

Hover Invitationshover invitation. y!movieshover & tool invitation. backpackitAid discoverability withhover invitations.tooltip, hover & cursor invitation. flickr.com

Blank Slate Invitationdog-ear invitation. login.yahoo.com

Blank Slate Invitationfill-in-the-blanks invitation. netflixdog-ear invitation. login.yahoo.com

Blank Slate Invitationfill-in-the-blanks invitation. netflixdog-ear invitation. login.yahoo.comblank-slate invitation. backpackit

Blank Slate InvitationRecycle blank areas forpromoting your features.fill-in-the-blanks invitation. netflixdog-ear invitation. login.yahoo.comblank-slate invitation. backpackit

Tour Invitationtour invitation. gmail

Tour Invitationtour invitation. yahoo.comtour invitation. gmail

Tour Invitationtour invitation. gmailUse new visits topromote new features.tour invitation. yahoo.com

Prompt Invitationfacebook.com

Prompt Invitationfacebook.com

Prompt Invitationfacebook.comdelicious.com

Prompt Invitationfacebook.comUse questions or commandsto prompt for input.delicious.com

utton. the gap

utton. the gap

utton. the gaphyperlink. backpackit

utton. the gaphyperlink. backpackit

hyperlink. backpackitbutton. the gapdrop down arrow. flickr

hyperlink. backpackitbutton. the gapdrop down arrow. flickr

hyperlink. backpackitbutton. the gapBridge new interactionstyles with familiar idioms.drop down arrow. flickr

Drag & Drop Invitationdrag invitation. google mapsdrag invitation. google maps

Drag & Drop Invitationdrop invitation. google mapsdrag invitation. google mapsdrag invitation. google maps

Drag & Drop InvitationMind your moments.drop invitation. google mapsdrag invitation. google mapsdrag invitation. google maps

prevención y recuperación de la salud a través del proyecto mejoramiento del acceso alos servicios de salud realizando seguimiento a la contratación a través de la Interventoria.La secretaria de salud Municipal ha logrado el 86.83 % de registros validados por elMinisterio de Protección Social- (BDUA- Base de datos única de afiliados), meta logradacon las actividades de actualización y depuración realizada a la base de datos delrégimen subsidiado de Cali en conjunto con las EPS-S y ESE Municipales realizandoeventos de actualización de información, de carnetización por reemplazos, afiliaciones,restituciones y reactivaciones.La Secretaria de Salud Publica buscando fortalecer los lazos con los prestadores deservicios de Salud ha generado espacios que permitan el fortalecimiento de la red públicaa través de la implementación de sistemas de gestión de calidad exitosos en cada una delas ESE, lo que ha permitido que 2 ESE (Oriente y Ladera) estén realizando el proceso dela ruta hacia la acreditación con asistencia técnica del Ministerio de la Protección Social.Así mismo, se realizó un diagnostico de las ESE el cual incluye una evaluación quepermite determinar la suficiencia técnica, financiera y social de cada una como elementosorientadores para garantizar su sostenibilidad.El componente Intersectorial ha sido una estrategia que se ha aplicado en:La promoción de la afiliación al Sistema General de Seguridad Social en Salud,mediante el trabajo conjunto con la comunidad, Organizaciones no gubernamentales,representantes de poblaciones laborales especificas entre ellas madres sustitutas ycomunitarias del ICBF, nodos de escuela saludable, centros de estética y belleza,casas fúnebres, taxistas y tenderos, lo que ha permitido la difusión de los deberes yderechos de la población.La identificación de la población pobre y vulnerable susceptible de ser afiliada alrégimen subsidiado a través de los listados censales con entidades tales como:ancianatos para la identificación del adulto mayor sin capacidad de pago ubicada encentros de protección, ICBF para la afiliación de población de menores de edad bajola protección del ICBF , Acción Social para la afiliación de la población encondiciones de desplazamiento forzado, con la arquidiócesis de Cali, para laidentificación de la población habitante de la calle, cabildos indígenas, entre otros.

anti-pattern. needless fanfare. macintosh turbo tax

anti-pattern. needless fanfare. macintosh turbo taxagain in slow-motion...

anti-pattern. needless fanfare. macintosh turbo taxagain in slow-motion...

anti-pattern. needless fanfare. macintosh turbo taxagain in slow-motion...Always question “why”when using transitions.

Attention processing ishard-wired into the brainIt is chemistry. You can’thelp it.

Attention processing ishard-wired into the brainYou can’t help looking at“dancing” mortgage adsIt is chemistry. You can’thelp it.

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

anti-pattern. needless fanfare. roost.comanti-pattern. needless fanfare. nasa.govDesigning Visual Interfaces. Kevin Mullet & Darrell Sano

anti-pattern. needless fanfare. pbs.organti-pattern. needless fanfare. roost.comanti-pattern. needless fanfare. nasa.govDesigning Visual Interfaces. Kevin Mullet & Darrell Sano

anti-pattern. needless fanfare. pbs.organti-pattern. needless fanfare. roost.comImagine an animation knob.Dial in animation carefully.anti-pattern. needless fanfare. nasa.govDesigning 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!Use the “cut it in-half”rule of thumb.current. no animation on drop. my yahoo!

Moments Communicate

Moments Communicateprogress indicator

Moments CommunicateSpeed up time.progress indicator

Moments CommunicateSpeed up time.progress indicatorearlier version of my yahoo!

Moments CommunicateSpeed up time.progress indicatorSlow down time.earlier version of my yahoo!

Moments Communicatemint.comSpeed up time.progress indicatorSlow down time.earlier version of my yahoo!

Moments CommunicateShow state change.mint.comSpeed up time.progress indicatorSlow down time.earlier version of my yahoo!

Moments CommunicateShow state change.mint.comSpeed up time.progress indicatorSlow down time.the gapearlier version of my yahoo!

Moments CommunicateShow state change.mint.comShow relationships.progress indicatorSpeed up time.Slow down time.the gapearlier version of my yahoo!

Moments CommunicateShow state change.mint.comShow relationships.progress indicatorSpeed up time.Slow down time.the gapflickr organizrearlier version of my yahoo!

Moments CommunicateShow state change.mint.comShow relationships.progress indicatorSpeed up time.Slow down time.the gapFocus attention.flickr organizrearlier version of my yahoo!

Be reactive.

experiment on home page

dedicated areaexperiment on home page

Live Feedbacklive feedback. wundrbar

Live Feedbacklive feedback. flickrlive feedback. wundrbar

Live Feedbacklive feedback. flickrlive feedback. wundrbarlive feedback. google maps

Live FeedbackCreate a tight feedbackloop with the user.live feedback. flickrlive feedback. wundrbarlive feedback. google maps

Live Suggestlive suggest. google (early version)

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

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

Live Suggestlive suggest. google (early version)live suggest. yahoo searchlive suggest. early yahoo search experimentNarrow toward a goalrather than distract from it.

Live Previewslive preview. volkswagen car configurator

Live Previewslive preview. volkswagen car configuratorlive suggest. apple search

Live Previewslive preview. volkswagen car configuratorUse live previews.live suggest. apple search

Live Filteringrefining search. bing tweets

Live FilteringReduce search effortwith live filtering.refining search. bing tweets

Live Formslive forms. yahoo! small business

Live Formslive forms. yahoo! small businesslive forms. google account creation

Live Formslive forms. yahoo! small businessPrevent errors beforehandwith live forms.live forms. google account creation

Auto Completeauto complete. kayak

Auto CompleteReduce user effort byautocompleting correctly.auto complete. kayak

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

Flickr Creditshttp://tr.im/t6EwPresentationbillwscott.com/share/presentations/2009/intuitBloglooksgoodworkswell.comWeb usernamebillwscottBookdesigningwebinterfaces.comO’Reilly