Projects/Usability/HIG/inline editing

Purpose

Inline editing is a feature of some controls. For example, list views are controls that can be used for editing purpose as well. When the user accesses an editable cell, usually by clicking the cell, its behavior (and appearance) is changed from viewing mode to an editing control. The input control can be applied as an unconstrained edit or as constrained input, e.g. selection from a predefined set using a drop-down list. The advance of direct input is a concise layout since no additional control is needed for input. The approach is usually less error-prone because a list with direct input has no dependency to other controls (in contrast to the combination of a list with an edit which needs to be enabled or disabled appropriate to the list entry the user clicks). The drawback is reduced discoverability for lists with restricted editing function, at least when only a few cells can be changed. User does not know which cell is editable and which is not. Furthermore, native access via tab or access key is not available within a list which means keyboard navigation needs to be implemented.

Guidelines

• Switch from viewing mode to edit mode after single click on the editable cell.
• Change appearance of cells when switching from viewing to editing. Editable cells have a lowered bevel; they look like they can be filled.
• Mark currently changed cells with a red corner.
• Define keyboard navigation within the list since the control receives focus as a whole. By pressing arrow-down key the next row is focused; respectively arrow-up for previous row. The arrow-left or arrow-right key navigates to adjacent columns if available.
• Use the appropriate control for constrained input. Show the control’s UI (e.g. arrow for drop-down list) not until the cell is in edit mode.
• Distinguish editable cells from those that are read-only.