08 July 2013

Principles and Patterns for Rich Interaction

These principles are taken from the book Designing Web Interfaces and applies to dynamic, ajax-driven web interfaces. The book has a companion site which describes these design principles and some design patterns that build upon them. I encourage you to check it out.

Source: Designing Web Interfaces


The principles

  1. Make it Direct

    As Alan Cooper states: "Where there is output, let there be input." This is the principle of direct manipulation. For example, instead of going to a separate page to edit content it can be done inline, directly in the context of the page.

  2. Keep It Lightweight

    It's about keeping a light footprint. When the user interacts with the application it should be in a way that causes the least amount of physical and mental effort. A primary way to create a light footprint is through the use of Contextual Tools.

  3. Stay on the Page

    The page refresh is generally disruptive to the user's mental flow. The default on the web is to go from page-to-page for every action. Now that we are no longer bound by those technical limitations, we can decide when to keep the user on the page and in the flow.

  4. Provide an Invitation

    Discoverability is one of the primary challenges for rich interaction on the Web. A feature is useless if users don't discover it. A key way to improve discoverability is to provide invitations. Invitations cue the user to the next level of interaction.

  5. Use Transitions

    Animations, cinematic effects, and various other types of visual transitions can be powerful techniques to enhance engagement and communication.

  6. React Immediately

    A responsive interface is an intelligent interface. This principle explores how to make a rich experience by using lively responses.

1. Make it Direct

As Alan Cooper states: "Where there is output, let there be input." This is the principle of direct manipulation. For example, instead of going to a separate page to edit content it can be done inline, directly in the context of the page.

2. Keep It Lightweight

It's about keeping a light footprint. When the user interacts with the application it should be in a way that causes the least amount of physical and mental effort. A primary way to create a light footprint is through the use of Contextual Tools.

3. Stay on the Page

The page refresh is generally disruptive to the user's mental flow. The default on the web is to go from page-to-page for every action. Now that we are no longer bound by those technical limitations, we can decide when to keep the user on the page and in the flow.

4. Provide an Invitation

Discoverability is one of the primary challenges for rich interaction on the Web. A feature is useless if users don't discover it. A key way to improve discoverability is to provide invitations. Invitations cue the user to the next level of interaction.

5. Use Transitions

Animations, cinematic effects, and various other types of visual transitions can be powerful techniques to enhance engagement and communication.

6. React Immediately

A responsive interface is an intelligent interface. This principle explores how to make a rich experience by using lively responses.

Tags

  • UI design

Related collections

Shneiderman's "Eight Golden Rules of Interface Design"

8 principles


Ben Shneiderman

First Principles of Interaction Design

19 principles


Bruce Tognazzini

Material Design

5 principles


Google

Google Calendar's design principles

4 principles


Google

The Four C's of Form Design

4 principles


Jessica Enders