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

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(Purpose)
(Guidelines)
Line 6: Line 6:
  
 
== Guidelines ==
 
== Guidelines ==
* Use a list box for multiple selections with more than five options.
+
=== Usage ===
* Do not have blank list items; use meta-options, e.g. (None) instead.
+
* Prefer a list view to show items that belong together and in case of sufficient space.
* Place options that represent general options (e.g. All, None) at the beginning of the list.
+
=== Appearance ===
* Provide extended multiple selection with Shift+Click or Ctrl+Click to select groups of contiguous or non-adjacent values, respectively.
+
* Alternate row color (use theme settings). Use different keys (e.g. page up/down) when more lists should be accessible.
* Sort list items in a logical order. Make sure sorting fits translation.
+
* Enable browsing through list by cursor up/down.  
 +
* 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.  
 +
* Sort list items in a logical order. Make sure sorting fits translation.
 +
* For lists with more than one column view headers and enable sorting by clicking the header. Show sort order in header.
  
<span style="color:blue">DE:</span>
+
=== Selection ===
<pre>
+
<span style="color:blue">Check the following against recommendation</span>
QListView / QListWidget
+
* Use the list view for selection if it is easy for users to know which items are checked at any given time, for one or more of these reasons:
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
 
** 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)
 
** 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
 
** 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
+
<span style="color:blue">Choose a) or b)</span>
 +
a) * 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
 +
b) * Use a list box for multiple selections with more than five options.
 +
* Provide extended multiple selection with Shift+Click or Ctrl+Click to select groups of contiguous or non-adjacent values, respectively.
 +
<span style="color:blue">Make sure that KCB is feasonable</span>
 +
 
 +
* Add 'KCheckBoxes' to list items.
 +
- KCB are flat (no frame, no shadow, no bevel) for clear differentiation from normal check boxes.
 +
- KCB are hidden by default, that means when no list item is selected.
 +
- KCB have a fade-in effect on mouse over to introduce themselves to users.
 +
- KCB are transparent and therby clearly part of the list item.
 +
- Legacy keyboard use applies to KCB as well. Thus, the whole item can be clicked to toggle option.
  
 
== Code snippets ==
 
== Code snippets ==

Revision as of 13:45, 21 June 2013


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. HT: Recommendation should be checked

Guidelines

Usage

  • Prefer a list view to show items that belong together and in case of sufficient space.

Appearance

  • Alternate row color (use theme settings). Use different keys (e.g. page up/down) when more lists should be accessible.
  • Enable browsing through list by cursor up/down.
  • 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.
  • Sort list items in a logical order. Make sure sorting fits translation.
  • For lists with more than one column view headers and enable sorting by clicking the header. Show sort order in header.

Selection

Check the following against recommendation

  • Use the list view for selection 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

Choose a) or b) a) * 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 b) * Use a list box for multiple selections with more than five options.

  • Provide extended multiple selection with Shift+Click or Ctrl+Click to select groups of contiguous or non-adjacent values, respectively.

Make sure that KCB is feasonable

  • Add 'KCheckBoxes' to list items.

- KCB are flat (no frame, no shadow, no bevel) for clear differentiation from normal check boxes. - KCB are hidden by default, that means when no list item is selected. - KCB have a fade-in effect on mouse over to introduce themselves to users. - KCB are transparent and therby clearly part of the list item. - Legacy keyboard use applies to KCB as well. Thus, the whole item can be clicked to toggle option.

Code snippets


Content is available under Creative Commons License SA 4.0 unless otherwise noted.