crafting rich web experiences

Crafting Rich Web ExperiencesDesigning Web Interfaces: Principles & patterns for rich interfaces

Bill ScottDirector, UI Engineering

background

6 principles for Crafting Rich Web Experiences

make it directkeep it lightweightstay on the pageprovide invitationsuse transitionsreact immediately

make it direct

Allow input wherever you have outputShorten the length of interactionMake objects directly actionable

make it direct

inline editing

make it direct

Yahoo! Bookmarks

make it direct. inline editing

discoverabilityinvitations

facebook. prompt-based invitation

disqus. explicit “edit” invitation

Y!photo. implicit

Y!photo. implicit flickr. on hover

considerationscomplex editingblending modes

backpackit. complex inline editing

Yahoo! 360 blast. blending display & edit modes

accessibility

flickr. alternate edit path

accessibility

flickr. alternate edit path

group editingsymmetry of interactiondiscoverability vs readability

iPhone. non-symmetrical; readability

basecamp. symmetry of interactioniPhone. non-symmetrical; readability

“If readability is more important than editing then keep the editing action hidden

until the user interacts with the content.”

drag and drop

make it direct

My Yahoo! drag and drop

make it direct. drag and drop

Take care of the interesting moments

discoverabilityhover invitation

interesting momentsactivation on mouse down

tip during alternate pathadditional visual affordances

netflix. few hints.

yahoo! teachers. hints during interesting moments

drag and dropNot for simply setting an attribute

Don’t construct artificial visual constructs

anti-pattern. artificial construct

keep it lightweight

digg. in page action

keep it lightweight. contextual tools

Key to digg’s early success -

Kevin Rose

the gap. remembered collections

y! news, netflix. rating an objectdigg. in page action

y! movies, y! answers. rating an object

flickr. in-context tools y! movies, y! answers. rating an object

Same as context menusOnly good for single objectsCan actually slow you down

Remove the “pain points”Shorten the pathKeep actions immediate and lightUse hover, blur, focus; avoid heavy events

netflix. ratings

click-weightdecision time

seek timesecond guessing

wait time

netflix. ratings

digg. vote

keep it lightweight. anti-patterns

y! teachers. anti-pattern. hover & cover

y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover. resolved

zooomr. anti-pattern. mystery meat

y! teachers. anti-pattern. tiny targets

stay on the page

overlaysdialog overlaydetail overlayinput overlay

considerationslightbox effectmodalityactivation

stay on the page. overlay

anti-pattern. y! photos. idiot boxes

anti-pattern. borders. hover & cover

anti-pattern. amazon. mouse trap

inlaysin-context configurationin-context insightparallel contentinlay vs. overlay

stay on the page. inlay

my y!. in-context configuration

bbc. in-context configuration

y! autos. accordion

bbc. in-context configuration roost. in-context insight

y! autos. accordion

stay on the page. virtual

Rethink paginguse scrolling for “owned” data

watch out for dual scroll bar issuehybrid of paging & scrolling

mlslistings. pagination

y! health. carousel

y! mail. on-demand scrolling

microsoft live. paged scrolling

y! health. carousel

y! mail. on-demand scrolling

Rethink pagingin-place paging

zoomable user interface (zui)

endless. seamless paging

hard rock cafe. zui

hard rock cafe. zui cool iris (piclens). zui

rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump

stay on the page. process flow

the gap. inline assistant

the gap. inline checkout

broadmoor hotel. one page checkoutthe gap. inline assistant

step by step?yes, sometimes works best

discover card. step by step

netflix. step by step

ebay. single page flow

the answer is in testing

stay on the page. anti-patterns

netflix. stalker overlay

netflix. simpler overlay

offer an invitation

offer an invitation. static invitation

unfinished lookdog-earempty slotsblank slate

yahoo login! dog-ear invite

netflix. rate invitiation (blank slots)

backpackit. blank slate invitation

netflix. rate invitiation (blank slots)

call to action1-2-3 messagingspotlighting or lightboxprovide a peek

discover! 1-2-3 call to action

yahoo! tour invitation

starz play! sneak peek in carousel

DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions

offer an invitation. dynamic invitation

flickr. hover invitation

backpackit. tooltip invitation + hover invitation + cursor invitation

y! movies. hover invitation

backpackit (fake). being too explicit

drag and dropuse the interesting momentsbefore, during and after

flickr. drop here invitation (static)

flickr. drop here invitation (interactive)

bridge the new with the oldhyperlinks as actions

reveal with hoversdrop down clues

the gap. button

y! mail. embedded buttons

the gap. button

backpackit. revealed hyperlinks/icons

the gap. button

backpackit. revealed hyperlinks/icons

flickr. drop down affordance

the gap. button

offer an invitation. anti-patterns

anti-pattern. y! maps. mouse trap

use transitions

Speak to the brainUnderstanding attention processing

use transitions

Speak to the brainUnderstanding attention processing

use transitions

Speak to the brainUnderstanding attention processingSending the wrong message

use transitions

flickr zeitgeist

use transitions

mac widgets

flickr zeitgeist

use transitions

backpackit. fade transition + self-healing transition.

use transitions

flickr. slide transition.

use transitions

flickr. active spotlight.

use transitions

flickr. active spotlight.

the gap. zoom box.

use transitions

you can...speed up time

slow down interactionshow state change

show relationships between objectsfocus attention

use transitions

Keep it sane“Cut it in-half ” rule of thumb

Use “contrast knob” approach

use transitions

use transitions. anti-patterns

anti-pattern. borders. needless fanfare

anti-pattern. amazon. animation gone wild

anti-pattern. afi. animation gone wild

anti-pattern. y! local. stalker

react immediately

y! answers. live suggest

react immediately

y! mail, kayak. auto complete

react immediately

netflix. periodic refresh

react immediately

y!mail. busy indicator

react immediately

y! small biz. live previews

y!mail. busy indicator

react immediately

Keep the goal in mindDesign for relevancyIs it narrowing or distracting

react immediately

Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible

react immediately

Shape user perceptionMake time pass faster

Make application feel more responsive

react immediately

Prevent errors before-handOunce of preventive design worth pound of error-handling

Look before you leap

react immediately

Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth

react immediately

Keep feedback focusedUse nuance

react immediately

Think “deeper interaction”Multi-variate datafocus + context

react immediately

6 principles for Crafting Rich Web Experiences

make it directkeep it lightweightstay on the pageprovide invitationsuse transitionsreact immediately

Upcoming Book:Designing Web Interfaces: Principles & Patterns for Rich InterfacesO’Reilly

This Presentation: http://billwscott.com/share/presentations/2008/ajaxworld

crafting rich web experiences

Business

inline editing group

complex inline editing

direct inline editingyahoo

direct drag

editing action hiddenuntil

length of interaction

explicit edit invitation

promptbased invitationdisqus