Back to Collections

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
  2. Keep It Lightweight
  3. Stay on the Page
  4. Provide an Invitation
  5. Use Transitions
  6. React Immediately

  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.