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 and Drop Invitation, Inference Invitation, and More Content Invitation) invites users to explore new idioms, improving their overall experience.

Use Transitions

Not just for those annoying mortgage ads, Transitions are necessary for both communication and engagement. With a wide variety of cinematic effects at our disposal (Brighten and Dim, Expand/Collapse, Self-Healing, Animation, Spotlight, Lightbox Effect, Faceplate, Flip, Carousel, Accordion, Slide In and Slide Out, and Zoom), we can either overwhelm our user with Animation Gone Wild or Needless Fanfare, or we can use these effects to explain happenings, show relationships, focus attention, improve performance, and create the illusion of virtual space.

Be Reactive

For every action there should be an equal and opposite reaction. This is the physics of our interfaces. Providing Auto Complete, Live Suggest, Live Search, Refining Search, Live Previews, Progressive Disclosure, Progress Indicators, and Periodic Refresh form the tools for creating a lively, reactive interface.

Staying Up to Date

The Web is constantly evolving, and it is impossible to always have the most up-to-date examples, and to capture emerging patterns in a book. We provide two resources to keep this work updated and relevant:

Designing Web Interfaces companion site

Please visit http://designingwebinterfaces.com for up-to-date information on this book as well as updated examples, principles, and patterns. You can also contact the authors at this site.

Designing Web Interfaces Flickr site

All of the figures are available on http://flickr.com/photos/designingwebinterfaces/. In addition, for many of the figures there are companion screencasts (movies) showing the interactions in action.

Get Designing Web Interfaces now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.