Inplace Editor Edit
Problem summary
The user needs to easily and quickly edit a value on a page
Example
Usage
- Use when the user only needs to edit one value (or very few) and not many
- Use when the value the user needs to edit is of a simple format, i.e. a text string, in a dropdown box.
- Use when you have already authenticated the user (he is logged in) or if you do not care about his or her authenticity.
- Use if you want the user to be able to edit a value without actually going to an administration page, but by staying on the same page.
Solution
An element of a page, for instance a title, is shown as it would normally appear viewing the page without admin rights. However, once the logged in user has his mouse over the element, its background color is highlighted and a tooltip is shown prompting the user to click the element to edit it. Once the user clicks the element, it is transformed into an input field (text, dropdown, etc.) as well as a save button and a cancel button. Often, the input field matches the styling of the original element. So that if the original element was a header written in size 20pt, the size of the font in the input field would also be 20pt. This styling is made to ensure that the user can connect the original element with the new replaced editable element.
The user can then edit the value of the input field (which is the same as the original elements value) and click save or cancel. If ‘save’ is clicked, the value is saved through and AJAX call to the underlying database, and the view of the element is changed back to the original (for instance the header without the edit input field), but now with the new value. If cancel is clicked, the view element is changed back to the original without any changes that might have been written in the edit input field.
This pattern is often combined with an the AJAX technique, which is an asynchronous call to the server through javascript, that does not require a refresh of the page. There are many javascript libraries out there, that delivers ready-to-use inplace editors.
Rationale
An in-place editor provides an easy way to let the user edit parts of a page without having to be redirected to an edit page. Instead, the user can just click around on a page an edit the elements he or she wishes to change – without reloading the page.
The pattern is often associated with web 2.0 websites.
More example images of the 'Inplace Editor' pattern
-
-
Your status is edited via an in-place editor at facebook.com
This document is in version 1 and was last updated on Dec 25, 2008 by Anders. Edit this pattern.
Related information
Collection
Related patterns
- Forgiving Format
- Structured Format
- Fill In The Blanks
- Input Prompt
- Good Defaults
- Captcha
- Inplace Editor
- WYSIWYG
- Live Preview
- Password Strength Meter
- Input Feedback
- Calendar Picker
Related links
See it in action
Inplace Editor has 2 comments
-
almost 2 years ago
Lindsey
28 May 2008
Very useful! I love this feature in Google docs…I’m able to edit the title of a document without leaving the page or dealing with a popup window. One of the best UI developments I’ve seen recently.
-
over 1 year ago
Peter
15 Aug 2008
I would add a bullet to the usage list:
- Use when there is a clear distinction between verb and information (Don’t mix words that are links and actions with words that can be edited).
I.e. – the text that can be edited shouldn’t contain verbs (links, actions), only information. If the texts on the page are intermixed information and verbs, than do not use inline editing. This is based on maintaining a clear distinction between usage and administration.