Edit in place
The Design Need:
The user wants to make a small change to a page element.
Design Examples:
Design Solution:
Allow the user to edit an element directly where it is shown. Make sure the user understands what can be entered where. Some tips for designing a user-friendly “edit in place” feature:
- Indicate which elements are editable in place. There are two options here:
- Use indicators that show up when the user hovers over an editable element
- Show a small “edit” button next to the editable element
- If the user clicks on the editable element show an edit-field
- Let the edit field appear in the same place as the original element
- If possible show a “cancel” and “save” button next to the edit field
- Allow the use of the “enter” and “esc” keys
- Hitting the “enter” key, clicking outside the field or clicking on the “save” button saves the entered value
- Hitting the “esc” key or clicking on the “cancel” button cancels the entered value and restores the original value.
When to use:
Only use if a limited amount of content will be altered and if the input is not complex e.g. simple selection or text input.
Why use this solution (rationale):
Allowing users to edit values where they see them is a very intuitive interaction. As long as the editable elements are simple and no styling needs to be done, this is closest to the user’s mental model.
More info elsewhere:
- Edit-in-place design pattern on http://quince.infragistics.com/
- Inplace editor design pattern on www.ui-patterns.com
- Edit-in-place on www.usabilitythoughts.com
