Inline Edit

Also known as: In-Place Editing, Edit-in-Place, Inline Editing, In-Page Editing

Tags: actions, content, contextual tools, forms

Inline edit allows the user to edit text directly in the page without requiring going to a separate page. It makes the interaction more direct and intuitive as the user can edit the text in the same place where it is shown.

When the user hovers over an editable area, the background color of the element changes to light yellow and a tooltip saying “click to edit” is displayed. When clicked, the text becomes editable, and usually “Save” and “Cancel” buttons appear below the text. The edit session can be ended by clicking the buttons or hitting “Enter” or “Esc”.

Flickr: Photo titles and descriptions can be edited inline.

What problem does the pattern solve?

  • Consider using inline edit whenever there is text that the user might need to edit.
  • Use it only when the user needs to edit the text occasionally. If the primary action on the page is to edit content, then it should always be in edit mode.

When to use it?

  • Consider using inline edit whenever there is text that the user might need to edit.
  • Use it only when the user needs to edit the text occasionally. If the primary action on the page is to edit content, then it should always be in edit mode.

How to use it?

The inline edit process has usually four different states it can be in: non-edit state, invitation to edit, edit state, and ending state.

Non-edit state

  • The text is in view mode, no edit actions are available.

Invitation to edit

  • Invite the user to click the text providing a tooltip when the mouse is over the text the user wants to edit. Use phrase “Click to edit” or just word “Edit”.
  • On hover, change the mouse cursor to an edit cursor.
  • Highlight the element by changing the background of the element to yellow or add borders around it.
  • See Hover invitation pattern for details on how to provide an invitation.
  • An alternative way to invite the user to edit is to show an edit link beside the element the user needs to edit. If the edit link is always visible, the discoverability of this feature improves. If good readability if essential, show the link only on hover.

Edit state

  • When the user clicks on the element / edit link, load the text into a text box in the same location as the original text to make the transition as smooth as possible.
  • Show buttons for completing and canceling the edit.
  • An alternative for the buttons is to save the changes when the user clicks outside the edit area or tabs away from it. It is visually simpler, but doesn’t leave the user a chance to cancel the changes unless you use undo. This technique is most commonly used to edit values in a data table.

Ending state

  • Let the user know that the text is being saved. During the progress, consider replacing the edited text with the text “Saving…” or show a progress indicator.
  • When the change has occurred, consider using Spotlight effect pattern to help the user understand what just happened.

Why to use it?

It is simple and fast to use. The user doesn’t need to go to a separate edit page. Instead, he can just click on an element he wants to edit and start typing.

Accessibility

The problem with Inline edit is that isn’t very accessible. However, there are few ways to improve the accessibility:

  • Always show a separate edit link along the element.
  • In addition to inline edit, consider providing an alternative way to edit content (a separate page).
  • Consider using a non-scripting solution of inline edit.

Sources

The pattern is inspired by “Edit-in-Place” from Jenifer Tidwell’s book “Designing Interfaces: Patterns for Effective Interaction Design”.

+ Add

Useful linksUseful links icon

+ Add

Code snippetsCode snippets icon

+ Add

Example Images (7 examples)

Comments

  • There are no comments posted yet. Be the first one!