Edit-in-Place
Problem
People need to edit some value as easily as possible.
Solution
Whenever possible, let people edit values in the same place that they are displayed.
Context
- You display a value that people need to edit.
- You can support the validation and transactional requirements for the values while allowing for editing in place.
Rationale
It’s only natural for a person to see a value that they need to change and to directly act on that value as it is displayed. Correspondingly, requiring separate edit dialogs is not natural for persons. They can cause people to lose their context and often slow the editing process down because it usually requires somehow triggering the dialog (or finding it in the case of, e..g., a Property Sheet, finding that value in a separate interface).
You should prefer editing in place unless there are difficulties preventing it, such as technical difficulty or need for complex validation or transactions.
Implementation
It is fairly common to supply some sort of affordance (à la an Invitation) when a person hovers over the item that can be edited. A common approach is to outline the editable value and show some sort of edit icon along with a tooltip that says “click to edit”or, if you need to, “double-click to edit.” Single-click to edit is better if you can do it without conflicting with other clicking needs (such as if you are showing commands like hyperlinks in text that you want to be editable).
When the person clicks (or double-clicks), replace the displayed value with the appropriate editor/input affordance (e.g., a text box, Date Picker, color Drop Down Chooser, etc.). Be sure to maintain the existing value in the editor until it is changed.
When a user hits Enter or clicks outside of the editor, save the value. If the user presses Escape, cancel the edit. Try to support Undo when possible.
If the platform has a hotkey for editing selected values, such as F2 in Windows and Enter on Mac, consider supporting those to trigger editing in place.
Help Me Get There
Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.
ASP.NET
Edit-In-Place pattern is implemented in the following ASP.NET controls: WebDataGrid, WebGrid. Check out the samples browser to see it in action.
Windows Forms
You can use the NetAdvantage for Windows Forms controls: WinGrid, WinCombo, WinTree, WinListView, WinComboEditor, WinDayView, WinWeekView to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called WinGrid Samples to see it in action.
WPF
You can implement this pattern using the NetAdvantage for WPF controls: XamDataGrid and XamDataCarousel. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called Add Record to see it in action.
JavaServer Faces
Edit in place is built in to the NetAdvantage for JSF’s grid control. To see edit-in-place in action, go to componentsforjsf.com and review the Grid area of the online demo section.
Examples
37signals Basecamp uses this pattern in a few places. Thi is an example from the to-do list. When you choose Edit, it's pretty nifty--animates and expands out in place to let you edit the to-do item.
http://quince.infragistics.com/11as
The primary example is from Microsoft Visio 2007 and shows its interface when you double-click to edit a shape’s text.
http://quince.infragistics.com/11fv
Windows Explorer (shown in Vista) is a common example of this pattern. When you click on a selected file (or press F2), the file name is displayed inside a text editor where you can change the value. The gesture that you need to edit it is not very intuitive. If the file you want to rename is not already selected, you need to do two clicks, with a long enough period between the two, to avoid confusing the gesture with a double click.
http://quince.infragistics.com/111g
Flickr lets you edit image names in place, while showing a tooltip Invitation. Note that they provide Save or Cancel buttons; presumably this helps gives some people a sense of confidence in terms of what to do to save or cancel, so you may want to consider that depending on your user base.
http://quince.infragistics.com/10yi
Sources
Jennifer Tidwell, Designing Interfaces
Tags
