Web App Masters: Designing for Interesting Moments

by Luke Wroblewski July 13, 2010

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

  • An example of details in interaction design: 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. You can manage interesting moments in a grid to give you a sense of all the points of engagement that need to be designed and developed.
  • Interesting moments capture the details and the performance of an interaction. Getting the nuance right only matters if all the details are considered in context.
  • Inspiration for interesting moments come from: animation (storyboards), comics (key frames), magic (illusions).

Principle 1: Keep your moments direct.

  • In page editing: pay attention to discoverability (yellow spotlight/invitation, tooltip invitation); use a clear call to action (save/cancel buttons).
  • Activation/deactivation moments allow people to turn things on and off. Make sure the way you activate/deactivate is consistent.
  • Non-symmetrical interaction anti-pattern: they way you activate something should be the way you deactivate it.
  • Tiny targets anti-pattern: making interactions too subtle or small. This makes things harder to interact with. You should aim to reduce physical effort. Remember Fitt’s Law.
  • Drag and drop doesn’t necessarily make interactions better. It is a pretty have interaction. Sometimes just selecting something is enough.

Principle 2: Require only a light footprint

  • When Digg moved from a two-step process to an inline process for digging a story, usage went through the roof.
  • Don’t add unnecessary steps. Avoid “idiot boxes” that stop the proceedings. 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. Idiot boxes that state the obvious break flow.
  • Make it 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. With hover, you don’t really now what people wanted to do. You are guessing.
  • Distracting moments get in the way of interactions by taking focus away from key tasks. Hover and cover anti-pattern: don’t overlay content people will want to access with hovers.
  • Try to strike a balance between readability and interactivity.

Principle 3: Maintain Flow

  • Change blindness: our brain expects continuous change. Single page changes sometimes leave things unnoticed because the change is too drastic. This happens with page refreshes on the Web –people don’t notice what changed.
  • People can loose their context when moving from page to page. Overlays can encapsulate alternate workflows without removing context. Netflix applied this approach to their “add to queue” flow. This approach created a huge increase in additions.
  • Interrupting Moments: don’t interrupt flow to state the obvious. Consider using inline feedback instead to communicate change.
  • Moments in context: bring detailed view inline when people ask for them (click not hover).
  • Virtual space: consider providing access to a backstage area for actions and content. Example: page curl in iPad Maps application.
  • Use a clear call to action to make the outcomes of interactions clear.

Principle 4: Invite Interactions

  • New moments: you can introduce people to new features with call-outs. But don’t use tours as a band-aid for bad interactions.
  • Visual affordances can help trigger interactions: reveal a portion of an image or feature but not the whole thing.
  • Blank slate invitations are pre-populated with content and invite people to change the defaults. Don’t just use an empty page.
  • Prompting moments: use questions or commands to encourage input and create moments of discoverability.
  • Hover invitations and state changes can encourage interactions. But don’t overwhelm people with choices. When Netflix used bigger movie box shots and less choices, more people made selections.
  • Calls to action need to be simple. Avoid having too many calls to action at any given time.
  • Use familiarity in moments. Display links and buttons that people know how to use within interactions.

Principle 5: Show transitions

  • You can help explain interactions through changes in the user interface.
  • Needless fanfare anti-pattern: don’t use animations without purpose.
  • We should ban all animated menus and animated drop-down menus from the Web. Menus are supporting actors.
  • Animation is a supporting actor it should not take center stage. Always question why you are using animations. Occam: what can be done with less is done in vain with more. Consider the least effective difference to communicate change.
  • Use the “cut in half” rule of thumb to focus animations on what matters. Generally what you do now is going to look cheesy in a year. Opt for more minimalism up front.
  • As you move more toward engagement, animations may be more useful.
  • Moments communicate: speed things up, slow things down.