Web App Masters: Designing for Interesting Moments

by Luke Wroblewski March 24, 2010

In his Designing for Interesting Moments presentation at the Web App Masters Tour in San Diego, CA, Bill Scott outlined several rich interaction design principles and showed them in action within several Web applications.

  • There are more than 16 different events and 96 interesting moments in a typical drag and drop interaction.
  • Interesting moments are opportunities to engage with the user through reciprocal interactions. They consist of microstates.
  • Principle 1: Input where there’s output.
  • In page editing: pay attention to discoverability (yellow spotlight/invitation, tooltip invitation); use a clear call to action (save/cancel buttons).
  • Non-symmetrical interaction anti-pattern: they way you activate something should be the way you deactivate it.
  • Tiny targets anti-pattern: make interactions too subtle –harder to interact with. You should aim to reduce physical effort. Remember Fitt’s Law.
  • Drag and drop doesn’t necessarily make interactions better. Sometimes just selecting something is enough.
  • Artificial construct anti-pattern: creating UI elements to enable interactions that are not required.
  • Principle 2: Require only a light footprint -make things easier for the user to get things done.
  • Be mindful of click weight: number of interaction steps, decisions time, seek time, second guessing, weight time all add up to a measure of how hard something is to accomplish.
  • Always make primary actions visible. Preserve readability by hiding secondary actions until they are needed.
  • You can do more with a click -consider using hover-less interfaces. Clicks are usually more intentional than hovers.
  • Try to strike a balance between readability and interactivity.
  • Principle 3: Invite interactions
  • Hover and cover anti-pattern: don’t overlay content people will want to access with hovers.
  • Change blindness: our brain expects continuous change. Single page changes sometimes leave things unnoticed because the change is too drastic.
  • Principle 4: Maintain flow -overlays can encapsulate alternate workflows without removing context.
  • Idiot boxes anti-pattern: don’t interrupt a user’s flow with pop-up boxes that ask for/provide confirm is there’s a more in-context inlay solution available.
  • Virtual space: consider providing access to a backstage area for actions and content.
  • Use a clear call to action to make the outcomes of interactions clear.
  • Don’t use tours as a band-aid for bad interactions.
  • Blank slate invitations are pre-populated with content and invite people to change the defaults.
  • Hover invitations and state changes can encourage interactions.
  • Principle 5: Show transitions: can help explain interactions through changes in the user interface.
  • Needless fanfare anti-pattern: don’t use animations without purpose. Animation is a supporting actor it should not take center stage.
  • Occam: what can be done with less is done in vain with more.
  • Use the “cut in half” rule of thumb to focus animations on what matters.
  • Moments communicate: speed things up, slow things down.
  • Be reactive. Live feedback can let people know what’s happening and if they are making progress toward their goals.
  • Narrow towards a goal rather than distracting from it.
  • Live previews can prevent errors before they happen.