Designing Web Interfaces

Principles and Patterns for Rich Interaction

In the preceding chapters, we focused on designing for rich interactions.

The Principles

The six principles are simple and straightforward.

Make It Direct

The principle of WYSIWIG (What You See Is What You Get) has been proven over and over again during the last quarter of a century. Allowing users to directly edit content in context (In-Page Editing), control the interface with Drag and Drop, and directly manipulate objects (Direct Selection) all work toward creating an intelligent interface.

Keep It Lightweight

Respecting the user’s level of effort is key to producing an effortless interface. Understanding the user’s intent and providing just the right amount of interface (Contextual Tools) within the current context is critical to providing a lightweight experience.

Stay on the Page

Instead of breaking into the user’s normal workflow with repeated page refreshes, we can now create an experience that more closely matches the user’s flow. The proper use of Overlays, Inlays, Virtual Space, and Process Flows is integral to matching the way the user wants to work—not the way we forced them to work in the past.

Provide an Invitation

With an array of interactions at our disposal, it would be easy to have most of our features go unnoticed and unused. Throwing out contextual “welcome mats” within the page both statically and dynamically (Affordance Invitation, Call to Action Invitation, Blank Slate Invitation, Tour Invitation, Hover Invitation, Drag ...