Forms - Edit in Place

Problem

Users need to edit a value as quickly and as easily as possible.

Solution

Whenever possible, allow users the ability to edit values in the same place that they are displayed.

HTML code here
	

CSS code here
	

Why

It is only natural for a user 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 the user. this approach can cause people to lose their context and often slow the editing process down because it usually requires triggering a dialog.

Whenever possible provide editing in place functionality, unless there are difficulties preventing it, such as the need for complex validation or transactions.

How

It is fairly common to supply some sort of affordance when a user hovers over the item to be edited. A common approach is to outline the field containing the editable value and show anedit icon along with a tooltip that contains "click to edit."

When the user 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 the 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 application provides a hotkey for editing selected values, such as F2 in Windows and Enter on Mac, consider supporting those to trigger editing in place.

Examples