Designing Web Interfaces

Chapter 1. In-Page Editing

Content on web pages has traditionally been display-only. If something needs editing, a separate form is presented with a series of input fields and a button to submit the change. Letting the user directly edit content on the page follows the principle of Make It Direct.

This chapter describes a family of design patterns^[6] for directly editing content in a web page. There are six patterns that define the most common in-page editing techniques:

Single-Field Inline Edit

Editing a single line of text.

Multi-Field Inline Edit

Editing more complex information.

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.

The most direct form of In-Page Editing is to edit within the context of the page. First, it means we don’t leave the page. Second, we do the editing directly in the page.

The advantage of Inline Edit is the power of context. It is often necessary for users to continue to see the rest of the information on the page while editing. For example, it is helpful to see the photo while editing the photo’s title, as explained in the next section, Single-Field Inline Edit.

It is also useful when editing an element that is part of a larger set. Disqus, a global comment service, provides inline editing for comments (Figure 1-1). After posting a comment and before anyone replies to the comment, an edit link is provided. The editing occurs within ...