All of the examples from the book are available on our companion flickr site. Below are the six design principles that organize the design patterns and best practices found in the book.
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.
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.
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.
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.
Animations, cinematic effects, and various other types of visual transitions can be
powerful techniques to enhance engagement and communication.
A responsive interface is an intelligent interface. This principle explores how to make
a rich experience by using lively responses.
Chapter 1. In-Page Editing
Single Field Inline Edit
Editing a single line of text in-context.
Multi-Field Inline Edit
Editing more complex information in-context.
Editing in an overlay panel.
Editing items in a grid.
Changing a group of items directly.
Configuring settings on a page directly.
Chapter 4. Contextual Tools
Place Contextual Tools directly in the content.
Show Contextual Tools on mouse hover.
A master switch to toggle on/off Contextual Tools for the page.
Progressively reveal actions based on user interaction.
Show a secondary menu (usually by right-clicking on an object).
Chapter 5. Overlays
Replaces old style browser pop ups.
an overlay to present additional information when the user clicks or hovers over a
link or section of content.
Brings additional information for each
input field tabbed into.
Chapter 6. Inlays
Reveal additional interface elements within the context of the page.
Works as an effective way to hide detail
until needed — while at the same time preserving space on the page for high-level overview
Reveals additional information in the context of the page.
Provides additional panels of information accessible by tab controls.
Chapter 9. Static Invitations
Call to Action Invitation
Invite users to primary task or tasks.
Invite users to explore new features.
Chapter 11. Transitional Patterns
Change focus by brightening and dimming items.
Transitions to open and close items.
Removed items fade out and area "heals".
Showing the transition between repositioned items.
Using highlighting to focus user attention.
Chapter 13. Lookup Patterns
As the user
types matching input values are displayed.
As the user types search suggestions are displayed.
As the user types into a search box, direct search results are displayed on the same page in real-time.
Modifying search filters refines search in real-time.
Chapter 2. Drag and Drop
Drag and Drop Modules
Rearranging modules on a page.
Drag and Drop List
Drag and Drop Object
Changing relationships between objects.
Drag and Drop Action
Invoking actions on a dropped object.
Drag and Drop Collection
Maintaining collections through drag and drop.
Chapter 3. Direct Selection
Checkbox or control-based selection.
Selection that spans multiple pages.
Direct object selection.
Combination of Toggle Selection and Object Selection.
Chapter 7. Virtual Pages
When data sets are large, virtual scrolling allows content to be dynamically scrolled in on demand.
When information needs to be chunked into pages, content can still be loaded dynamically.
A blending of inline paging and virtual scrolling.
A virtual canvas allows users the freedom to roam in two-dimensional
Zoomable User Interface
Allows the user freedom of motion in both 2D and 3D. Supports the concept
of an infinite interface.
Chapter 8. Process Flows
Interactive Single-Page Process
As the user interacts the workflow adapts.
Inline Assistant Process
Inline assistance for keeping workflows in-context.
Dialog Overlay Process
Encapsulating a process in an overlay.
Interactive process for configuring products.
Static Single-Page Process
One page workflow.
Chapter 10. Dynamic Invitations
Invitation during mouse hover.
Using the familiar as a bridge to the new.
Drag and Drop Invitation
Invitations during drag and drop.
Invitations during interaction.
More Content Invitation
Invitations for revealing more content.
Chapter 12. Purpose of Transitions
Slide In/Slide Out
Expose a slide out overlay.
Cross-fade between a main screen and configuration panel.
Flip between a main screen and configuration panel.
Component that slides open a panel while hiding the rest.
Animated scrolling of more content.
Transitions from one item to another.
Provides transition between different scales.
Using transitions to make operations feel faster.
Chapter 14. Feedback Patterns
As the user interacts results are previewed.
As the user interacts more interface elements are revealed.
During lengthy processes an indicator is used as feedback.
As new information appears it is revealed in real-time.