Web App Masters: Designing for Interesting Moments

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.

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.

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.

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.