O'Reilly logo

Designing Web Interfaces by Theresa Neil, Bill Scott

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 the context of the rest of the comments shown on the page.

Tip

If editing needs the context of the page, perform the editing inline.

Disqus allows comments to editing inline within the context of other comments

Figure 1-1. Disqus allows comments to editing inline within the context of other comments

The first two patterns, Single-Field Inline Edit and Multi-Field Inline Edit, describe techniques for bringing direct inline editing into the page.

Single-Field Inline Edit

The simplest type of In-Page Editing is when editing a single field of text inline. The editing happens in place instead of in a separate window or on a separate page. Flickr provides us a canonical example of Single-Field Inline Edit (Figure 1-2).

image with no caption
Flickr provides a straightforward way to edit a photo's title directly inline

Figure 1-2. Flickr provides a straightforward way to edit a photo's title directly inline

Considerations

The flow is simple. Click on the title to start editing. When you are done, hit the "Save" button, and the title is saved in place. Flickr was one of the first sites to employ this type of in-page editing. As a testament to its usefulness, the interaction style first designed has not changed much over the last few years.

But there are some challenges to consider.

Discoverability

Just how discoverable is this feature? In this example, there are a number of cues that invite the user to edit. The invitations include:

  • Showing a tool tip ("Click to edit")

  • Highlighting the background of the editable area in yellow

  • Changing the cursor to an edit cursor (I-beam)

But all these cues display after the user pauses the mouse over the title (mouse hover). Discoverability depends on the user hovering over the title and then noticing these invitations.[7]

To make the feature more discoverable, invitational cues could be included directly in the page. For example, an "edit" link could be shown along with the title. Clicking the link would trigger editing. By showing the link at all times, the edit feature would be made more discoverable.

But this has to be balanced with how much visual noise the page can accommodate. Each additional link or button makes the page harder to process and can lead to a feature not being utilized due to the sheer volume of features and their hints shown on the page.

Tip

If readability is more important than editability, keep the editing action hidden until the user interacts with the content.

Yahoo! Photos[8] took this approach for editing titles (Figure 1-3). When showing a group of photos, it would be visually noisy to display edit links beside each title. Instead, the titles are shown without any editing adornment. As the mouse hovers over a photo title, the text background highlights. Clicking on the title reveals an edit box. Clicking outside of the edit field or tabbing to another title automatically saves the change. This approach reduces the visual noise both during invitation and during editing. The result is a visually uncluttered gallery of photos.

image with no caption
image with no caption
image with no caption
image with no caption
Editing titles in Yahoo! Photos keeps visual clutter to a minimum; it simply turns on a visible edit area during editing

Figure 1-3. Editing titles in Yahoo! Photos keeps visual clutter to a minimum; it simply turns on a visible edit area during editing

Accessibility

Another concern that arises from inline editing is the lack of accessibility. Accessibility affects a wider range of users than you might first consider. Assistive technologies help those with physical impairments, medical conditions, problems with sight, and many other conditions.

Assistive technologies generally parse the page's markup to find content, anchors, alternate titles for images, and other page structure. If the inline edit feature does not contain explicit markup built into the page (such as an explicit, visible edit link), assistive technologies cannot easily discover the inline edit feature.

In a sense, relying on the mouse to discover features will prevent some users from being able to edit inline. As mentioned before, providing an explicit edit link helps with discoverability (as shown previously in Figure 1-1). But as a by-product it also makes the feature more accessible.

Tip

Providing an alternative to inline editing by allowing editing on a separate page can improve accessibility.

There is a natural tension between direct interaction and a more indirect, easily accessible flow. It is possible to relieve this tension by providing both approaches in the same interface. Flickr actually does this by offering an alternate, separate page for editing (Figure 1-4).

image with no caption
Flickr allows you to also edit a photo's title, description, and tags in a separate page

Figure 1-4. Flickr allows you to also edit a photo's title, description, and tags in a separate page



[6] We use the term "design patterns" to denote common solutions to common problems. Design patterns originate from Christopher Alexander's book A Pattern Language (Oxford University Press). You can read a series of essays from me (Bill) and others on design patterns at http://www.lukew.com/ff/entry.asp?347

[7] While the Yahoo! Design Pattern Library (http://developer.yahoo.com/ypatterns/) was being launched, this pattern was not included in the initial set of patterns due to an internal debate over this issue of discoverability. In fact, one of the reviewers, a senior designer and frequent user of Flickr, had only recently discovered the feature. As a result, we withheld the pattern from the public launch.

[8] Yahoo! Photos was replaced in 2007 with Flickr.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required