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.
Use Transitions
Animations, cinematic effects, and various other types of visual transitions can be powerful techniques to enhance engagement and communication.
React Immediately
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.
Overlay Edit
Editing in an overlay panel.
Table Edit
Editing items in a grid.
Group Edit
Changing a group of items directly.
Module Configuration
Configuring settings on a page directly.
Chapter 4. Contextual Tools
Always-Visible Tools
Place Contextual Tools directly in the content.
Hover-Reveal Tools
Show Contextual Tools on mouse hover.
Toggle-Reveal Tools
A master switch to toggle on/off Contextual Tools for the page.
Multi-Level Tools
Progressively reveal actions based on user interaction.
Secondary Menu
Show a secondary menu (usually by right-clicking on an object).
Chapter 5. Overlays
Dialog Overlay
Replaces old style browser pop ups.
Detail Overlay
Allows an overlay to present additional information when the user clicks or hovers over a link or section of content.
Input Overlay
Brings additional information for each input field tabbed into.
Chapter 6. Inlays
Dialog Inlay
Reveal additional interface elements within the context of the page.
List Inlay
Works as an effective way to hide detail until needed — while at the same time preserving space on the page for high-level overview information.
Detail Inlay
Reveals additional information in the context of the page.
Tabs
Provides additional panels of information accessible by tab controls.
Chapter 9. Static Invitations
Call to Action Invitation
Invite users to primary task or tasks.
Tour Invitation
Invite users to explore new features.
Chapter 11. Transitional Patterns
Brighten/Dim
Change focus by brightening and dimming items.
Expand/Collapse
Transitions to open and close items.
Self-Healing Fade
Removed items fade out and area "heals".
Animation
Showing the transition between repositioned items.
Spotlight
Using highlighting to focus user attention.
Chapter 13. Lookup Patterns
Auto Complete
As the user types matching input values are displayed.
Live Suggest
As the user types search suggestions are displayed.
Live Search
As the user types into a search box, direct search results are displayed on the same page in real-time.
Refining Search
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
Rearranging lists.
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
Toggle Selection
Checkbox or control-based selection.
Collected Selection
Selection that spans multiple pages.
Object Selection
Direct object selection.
Hybrid Selection
Combination of Toggle Selection and Object Selection.
Chapter 7. Virtual Pages
Virtual Scrolling
When data sets are large, virtual scrolling allows content to be dynamically scrolled in on demand.
Inline Paging
When information needs to be chunked into pages, content can still be loaded dynamically.
Scrolled Paging
A blending of inline paging and virtual scrolling.
Virtual Panning
A virtual canvas allows users the freedom to roam in two-dimensional space.
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.
Configurator Process
Interactive process for configuring products.
Static Single-Page Process
One page workflow.
Chapter 10. Dynamic Invitations
Hover Invitation
Invitation during mouse hover.
Affordance Invitation
Using the familiar as a bridge to the new.
Drag and Drop Invitation
Invitations during drag and drop.
Inference Invitation
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.
Faceplate
Cross-fade between a main screen and configuration panel.
Flip
Flip between a main screen and configuration panel.
Accordion
Component that slides open a panel while hiding the rest.
Carousel
Animated scrolling of more content.
Fade
Transitions from one item to another.
Zoom
Provides transition between different scales.
Perceived Performance
Using transitions to make operations feel faster.
Chapter 14. Feedback Patterns
Live Preview
As the user interacts results are previewed.
Progressive Disclosure
As the user interacts more interface elements are revealed.
Progress Indicator
During lengthy processes an indicator is used as feedback.
Periodic Refresh
As new information appears it is revealed in real-time.