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 14: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


KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal