[kde-guidelines] Styleguide: Inline editing

Heiko Tietze heiko.tietze at user-prompt.com
Thu Jul 4 10:41:10 UTC 2013


Unconstrained input
* For complex views with direct input provide inline editing. 

http://techbase.kde.org/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.


More information about the kde-guidelines mailing list