[kde-guidelines] Styleguide: Tables
Heiko Tietze
heiko.tietze at user-prompt.com
Thu Sep 26 10:44:42 UTC 2013
As discussed recently [1] I added a page about tables (aka grids) that referes
to this control(s) regardless of being a QTableView or a special QTreeView.
Because tables provide almost always inline editing [2, 3], which guideline
was hidden until now, I think it's a good idea to merge this information into
the table guideline.
Editing and Manipulation > Unconstrained input
* Use a table view to arrange data in rows and columns with inline editing
feature.
http://techbase.kde.org/Projects/Usability/HIG/TableView
== Purpose ==
A ''table'' (also known as ''grid'' or spreadsheet) is a graphical control to
present data in an ordered arrangement of rows and columns. The intersection
of a row and a column is a cell. The elements of a table may be grouped,
segmented, or arranged in many different ways, and even nested recursively. It
provides a familiar way to convey information that might otherwise not be
obvious or readily understood.
Tables provide inline editing with the advance of 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.
== Example ==
== Guidelines ==
=== Is this the right control ===
* Use a table to arrange data in two dimensions.
* Use a table for a concise layout with inline editing feature.
* Do not use a table for read only purpose. In this case use a simple
[[Projects/Usability/HIG/ListView| list view]] or a
[[Projects/Usability/HIG/TreeView| tree view]] with multiple columns.
=== Behavior ===
* 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 table 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. Do not change tab key navigation to allow users
to switch to other controls.
* Use the appropriate control for constrained input. Show the control’s UI
(e.g. arrow for [[Projects/Usability/HIG/DropDown|drop-down list]]) not until
the cell is in edit mode.
* Distinguish editable cells from those that are read-only.
* Allow tables to be extended by users in both directions.
* Provide copy/paste feature for single as well as multiple selected cells, if
appropriate.
=== Appearance ===
* Avoid horizontal scrollbars. Size the table to a reasonable width.
* Use fixed column header.
* Label the table with a descriptive caption to the top left (cf.
[[Projects/Usability/HIG/Alignment| alignment]]).
* Create a buddy relation so access keys are assigned.
== Implementation ==
[[Category:Usability]][[Category:Behavior]]
[[Category:Editing_and_Manipulation]][[Category:Unconstrained_input]]
--
[1] http://mail.kde.org/pipermail/kde-guidelines/2013-August/000437.html
[2] http://mail.kde.org/pipermail/kde-guidelines/2013-July/000301.html
[3] http://techbase.kde.org/Projects/Usability/HIG/inline_editing
More information about the kde-guidelines
mailing list