AjaxWorld session: Bill Scott
Crafting rich web interfaces
Six principles for crafting rich web experiences:
- make it direct
- keep it lightweight
- stay on the page
- provide invitations
- use transitions
- react immediately
Make interactions direct: keep prompt and input close to each other. Inline editing. Discoverability: how easily can users discover what they can do with the interface. Readability is important: hide edit affordances until the user requests editing action.
Make it direct: drag and drop. Drag-and-drop has a large number of moments (variable elements); not easy to get right. Drag-and-drop often not very discoverable. Techniques for enhancing discoverability (see slides). Dont’ use dnd for setting basic parameters, unless perhaps it’s a game setting.
Keep it lightweight: contextual tools. Provide key interactions with as few additional steps for the user as possible. Identify and remove pain points. “Click weight” measure of number of clicks, how long it takes to find the click location, how quick the reaction is. Analyse click weight when reviewing an interface.
Anti-patterns. “Hovering cover” – pop-up label covers wanted content. Opaque icons (“mystery can”).
Change-blindness - people lose context when there’s a gap between page refreshes. Try to keep on the same page. (link to change detection puzzle).
Anti-pattern: Idiot boxes. Say things that don’t need to be said to guard against idiot behaviour. Anti-pattern: hover and cover. Overuse of pop-up hovers.
Better to use inlays than overlays. Accordians - show info in context, but can hide new changes. Good example: roost.com.
Re-think paging: maybe use scrolling of components to avoid paging the whole page.
Keeping process flow. OK to inject step-by-step if the user really should be interrupted.
Dynamic invitation: make something look unfinished, engages user in next step in the interaction. Give a peek of next/previous items.
Transitions: grab the users attention and cause them to look somewhere. Make sure the users are looking at the right thing. Can speed up or slow down time. Show relationships. Focus user’s attention.
React immediately. Good example wundrbar. parses natural language query dynamically, shows structured result. create a really tight feedback loop with user.
This was a really good presentation, rather spoiled by Bill having to go into hyperdrive to finish on time. He pretty-much skipped the last third of his slides. I would have happily listened to him for twice the length of time he talked for. Ah well. The presentation is available online.