Also known as: In-place editing
What
Use a dynamic text editor to allow the user to edit text directly “in-place”.
Example image
Flickr.com - Flickr allows users to edit picture titles and descriptions in place. Note how Flickr offers Save and Cancel buttons for ending the edit session.
Use when
- Editing text is not the primary action
- The user may want to edit text only sometimes.
- The text to edit is in simple format and thus no formatting tools are needed.
- labels, text elements, etc.
- There are only few editable parts the user can edit
Why
- It is simple and fast to use. The user doesn’t need to go to an edit page. Instead, he can just click on an element he wants to edit and start typing.
How it works
- Invite the user to click the text providing a tooltip when the mouse is over the text the user wants to edit.
- For example, use phrase “Click to edit”, “Double-click to edit”, or just word “Edit”.
- …and also on mouse over, highlight the item to indicate it is editable.
- Add borders or change the background color.
- On click, load the text into an edit box, exactly in the same location as the original text. Otherwise it looks like it jumps.
- Finish editing when user presses tab or clicks outside the edit area
- OR provide “Save” and “Cancel” buttons instead.
History
The first version (1.0) was created on 14.01.2008 by Janne Lammi, and was last updated on 12.12.2008. It is inspired by several existing design patterns on the topic.
Pattern Gallery
Show Your Pattern Examples Here!
Add your examples to this pattern by adding them to flickr.com group UIPatternFactory.com and tagging with this tag:
More photos in Flickr group "UIPatternFactory.com" tagged with edit-in-place
This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.
2 Responses to “Edit-In-Place”
Leave a Reply