In the preceding chapters, we focused on designing for rich interactions.
The six principles are simple and straightforward.
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.
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.
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.
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.
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.
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.
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:
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.
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.