< Projects‎ | Usability‎ | HIG

Difference between revisions of "Projects/Usability/HIG/ListView"

(HIG moved to community)
 
(22 intermediate revisions by 5 users not shown)
Line 1: Line 1:
__NOTOC__
+
{{ Moved To Community | KDE_Visual_Design_Group/HIG/ListView }}
 
 
== Purpose ==
 
A list view is basically used to show some items. It offers orientation thereby and allows navigation without the need of other controls. Additionally, a list view may be used for single selection (users select one item from a list of mutually exclusive values) or multiple selection (selections in combination with the Shift key or Control key). However, because there is no common visual clue whether a list box’ mode is single or multiple and since other controls are more efficient for single selection, a list box should be used for single selection only.
 
<span style="color:blue">HT: Recommendation should be checked</span>
 
 
 
== Guidelines ==
 
* Use a list box for multiple selections with more than five options.
 
* Do not have blank list items; use meta-options, e.g. (None) instead.
 
* Place options that represent general options (e.g. All, None) at the beginning of the list.
 
* Provide extended multiple selection with Shift+Click or Ctrl+Click to select groups of contiguous or non-adjacent values, respectively.
 
* Sort list items in a logical order. Make sure sorting fits translation.
 
 
 
<span style="color:blue">DE:</span>
 
<pre>
 
QListView / QListWidget
 
http://static.davidedmundson.co.uk/hig/widgets/QListView.png
 
This can be single selection or multiple item selection
 
This can be checkable or based on selected items.
 
http://static.davidedmundson.co.uk/hig/widgets/QListView2.png
 
This can also be in a tree with a QTreeView
 
These can be more fancy (i.e Dolphin)
 
QComboBox
 
http://static.davidedmundson.co.uk/hig/widgets/QComboBox.png
 
KComboBox is exactly the same but with optional auto-completion
 
KEditListWidget
 
http://static.davidedmundson.co.uk/hig/widgets/KEditListWidget.png
 
KActionSelector
 
http://static.davidedmundson.co.uk/hig/widgets/KActionSelector.png
 
</pre>
 
<span style="color:blue">HT:</span>
 
Todo: Add Check box feature
 
 
 
<span style="color:blue">TP:</span>
 
* Use the check box list if it is easy for users to know which items are checked at any given time, for one or more of these reasons:
 
** There are no more than twice the number of options then are visible at a time
 
** The options are well-known (for example months of a year or days of a week)
 
** Usually the selected options are close to each other in the list
 
* In any other case, use the dual-list pattern because it allows users to easily see which items are selected at any point, without having to scroll through the available options
 
 
 
== Code snippets ==
 

Latest revision as of 11:26, 4 August 2016

This page is now on the community wiki.


This page was last edited on 4 August 2016, at 11:26. Content is available under Creative Commons License SA 4.0 unless otherwise noted.