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

Single Field Inline Edit

Editing a single line of text in-context.

Multi-Field Inline Edit

Multi-Field Inline Edit

Editing more complex information in-context.

Overlay Edit

Overlay Edit

Editing in an overlay panel.

dwi_0112b (by Designing Web
Interfaces)

Table Edit

Editing items in a grid.

dwi_0113b (by Designing Web
Interfaces)

Group Edit

Changing a group of items directly.

dwi_0115c (by Designing Web
Interfaces)

Module Configuration

Configuring settings on a page directly.

 Chapter 4. Contextual Tools

dwi_0403c (by Designing Web
		Interfaces)

Always-Visible Tools

Place Contextual Tools directly in the content.

dwi_0408b (by Designing Web
		Interfaces)

Hover-Reveal Tools

Show Contextual Tools on mouse hover.

dwi_0419b (by Designing Web
		Interfaces)

Toggle-Reveal Tools

A master switch to toggle on/off Contextual Tools for the page.

dwi_0421c (by Designing Web
		Interfaces)

Multi-Level Tools

Progressively reveal actions based on user interaction.

dwi_0425c (by Designing Web
		Interfaces)

Secondary Menu

Show a secondary menu (usually by right-clicking on an object).

 Chapter 5. Overlays

dwi_0503b (by Designing Web
		Interfaces)

Dialog Overlay

Replaces old style browser pop ups.

dwi_0508b (by Designing Web
		Interfaces)

Detail Overlay

Allows an overlay to present additional information when the user clicks or hovers over a link or section of content.

dwi_0515c (by Designing Web
		Interfaces)

Input Overlay

Brings additional information for each input field tabbed into.

 Chapter 6. Inlays

dwi_0603 (by Designing Web
		Interfaces)

Dialog Inlay

Reveal additional interface elements within the context of the page.

dwi_0605b (by Designing Web
		Interfaces)

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.

dwi_0610c (by Designing Web
		Interfaces)

Detail Inlay

Reveals additional information in the context of the page.

dwi_0611 (by Designing Web
		Interfaces)

Tabs

Provides additional panels of information accessible by tab controls.

 Chapter 9. Static Invitations

dwi_0902c (by Designing Web
		Interfaces)

Call to Action Invitation

Invite users to primary task or tasks.

dwi_0907 (by Designing Web
		Interfaces)

Tour Invitation

Invite users to explore new features.

 Chapter 11. Transitional Patterns

dwi_1101b (by Designing Web
		Interfaces)

Brighten/Dim

Change focus by brightening and dimming items.

dwi_1106b (by Designing Web
		Interfaces)

Expand/Collapse

Transitions to open and close items.

dwi_1109b (by Designing Web
		Interfaces)

Self-Healing Fade

Removed items fade out and area "heals".

dwi_1109b (by Designing Web
		Interfaces)

Animation

Showing the transition between repositioned items.

dwi_1112c (by Designing Web
		Interfaces)

Spotlight

Using highlighting to focus user attention.

 Chapter 13. Lookup Patterns

dwi_1303a (by Designing Web
		Interfaces)

Auto Complete

As the user types matching input values are displayed.

dwi_1306 (by Designing Web
		Interfaces)

Live Suggest

As the user types search suggestions are displayed.

dwi_1312c (by Designing Web
		Interfaces)

Live Search

As the user types into a search box, direct search results are displayed on the same page in real-time.

dwi_1318 (by Designing Web
		Interfaces)

Refining Search

Modifying search filters refines search in real-time.

 Chapter 2. Drag and Drop

dwi_0203d (by Designing Web
Interfaces)

Drag and Drop Modules

Rearranging modules on a page.

dwi_0218c (by Designing Web
	Interfaces)

Drag and Drop List

Rearranging lists.

dwi_0223c (by Designing Web
	Interfaces)

Drag and Drop Object

Changing relationships between objects.

dwi_0233b (by Designing Web
	Interfaces)

Drag and Drop Action

Invoking actions on a dropped object.

dwi_0234c (by Designing Web
	Interfaces)

Drag and Drop Collection

Maintaining collections through drag and drop.

 Chapter 3. Direct Selection

dwi_0304c (by Designing Web
		Interfaces)

Toggle Selection

Checkbox or control-based selection.

dwi_0309b (by Designing Web
		Interfaces)

Collected Selection

Selection that spans multiple pages.

dwi_0312 (by Designing Web
		Interfaces)

Object Selection

Direct object selection.

dwi_0317 (by Designing Web
		Interfaces)

Hybrid Selection

Combination of Toggle Selection and Object Selection.

 Chapter 7. Virtual Pages

dwi_0703b (by Designing Web
		Interfaces)

Virtual Scrolling

When data sets are large, virtual scrolling allows content to be dynamically scrolled in on demand.

dwi_0706a (by Designing Web
		Interfaces)

Inline Paging

When information needs to be chunked into pages, content can still be loaded dynamically.

dwi_0711a (by Designing Web
		Interfaces)

Scrolled Paging

A blending of inline paging and virtual scrolling.

dwi_0714a (by Designing Web
		Interfaces)

Virtual Panning

A virtual canvas allows users the freedom to roam in two-dimensional space.

dwi_0715a (by Designing Web
		Interfaces)

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

dwi_0803b (by Designing Web
		Interfaces)

Interactive Single-Page Process

As the user interacts the workflow adapts.

dwi_0807b (by Designing Web
		Interfaces)

Inline Assistant Process

Inline assistance for keeping workflows in-context.

dwi_0809 (by Designing Web
		Interfaces)

Dialog Overlay Process

Encapsulating a process in an overlay.

dwi_0815 (by Designing Web
		Interfaces)

Configurator Process

Interactive process for configuring products.

dwi_0819 (by Designing Web
		Interfaces)

Static Single-Page Process

One page workflow.

 Chapter 10. Dynamic Invitations

dwi_1001b (by Designing Web
		Interfaces)

Hover Invitation

Invitation during mouse hover.

dwi_1008d (by Designing Web
		Interfaces)

Affordance Invitation

Using the familiar as a bridge to the new.

dwi_1010d (by Designing Web
		Interfaces)

Drag and Drop Invitation

Invitations during drag and drop.

dwi_1021 (by Designing Web
		Interfaces)

Inference Invitation

Invitations during interaction.

dwi_1025 (by Designing Web
		Interfaces)

More Content Invitation

Invitations for revealing more content.

 Chapter 12. Purpose of Transitions

dwi_1201a (by Designing Web
		Interfaces)

Slide In/Slide Out

Expose a slide out overlay.

dwi_1202b (by Designing Web
		Interfaces)

Faceplate

Cross-fade between a main screen and configuration panel.

dwi_1203b (by Designing Web
		Interfaces)

Flip

Flip between a main screen and configuration panel.

dwi_1208b (by Designing Web
		Interfaces)

Accordion

Component that slides open a panel while hiding the rest.

dwi_1206a (by Designing Web
		Interfaces)

Carousel

Animated scrolling of more content.

dwi_1217b (by Designing Web
		Interfaces)

Fade

Transitions from one item to another.

dwi_1218a (by Designing Web
		Interfaces)

Zoom

Provides transition between different scales.

dwi_1221e (by Designing Web
		Interfaces)

Perceived Performance

Using transitions to make operations feel faster.

 Chapter 14. Feedback Patterns

dwi_1407c (by Designing Web
		Interfaces)

Live Preview

As the user interacts results are previewed.

dwi_1410b (by Designing Web
		Interfaces)

Progressive Disclosure

As the user interacts more interface elements are revealed.

dwi_1416 (by Designing Web
		Interfaces)

Progress Indicator

During lengthy processes an indicator is used as feedback.

dwi_1418c (by Designing Web
		Interfaces)

Periodic Refresh

As new information appears it is revealed in real-time.