Web App Masters: Designing for Interesting Moments

by Luke Wroblewski April 29, 2010

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

  • User experience is all an illusion. What feels like tangible elements in software is just code. Interactivity is both in the details and in the performance. In order to create an effective illusion, you need to consider many details and think about how they perform. The slightest mistake can break an illusion.
  • 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.
  • Getting the nuance right only matters if all the details are considered in context.

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.
  • 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 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.
    • Try to strike a balance between readability and interactivity.
    • Hover and cover anti-pattern: don’t overlay content people will want to access with hovers.

    Principle 3: Maintain Flow

    • Change blindness: our brain expects continuous change. Single page changes sometimes leave things unnoticed because the change is too drastic.
    • People can loose their context when moving from page to page. 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. Idiot boxes that state the obvious break flow.
    • 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.

    Principles 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.
    • 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.
    • 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. 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.
    • Moments communicate: speed things up, slow things down.

    Principle 6: Be reactive.

    • Netflix replaces movies with related movies after you rate them (in the ratings section) to drive further taste inputs.
    • Live feedback can let people know what’s happening and if they are making progress toward their goals.
    • Create a tight feedback loop with users: let them know what their changes mean.
    • Narrow towards a goal rather than distracting from it. Google and Yahoo! Search suggest help get people closer to their goals. Inline validation in forms helps prevent people from making errors.