Inplace Editor
From Interaction-Patterns.org
Kategorie:Interface Interaction
Contents |
[edit] Inplace Editor
[edit] Quick Summary
Just click in the field/cell and edit the data. No reload needed. No change of mode needed. The user needs to easily and quickly edit a value on a page.
[edit] Visual Examples
| Found at www.extjs.com | Found at www.flickr.com |
[edit] Examples found on the World Wide Web
[edit] Use When
- 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.
[edit] Possible 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 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.
[edit] 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
[edit] The pattern is being used to
[edit] Source
