Projects/Usability/HIG/ListView: Difference between revisions

From KDE TechBase
< Projects‎ | Usability‎ | HIG
(→‎Subsection 1: Remove aspects which are already done by default.)
(Moved TODO items to Contributing)
Line 3: Line 3:
== Purpose ==
== 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.  
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 ==
== Guidelines ==
<span style="color:blue">Add subsections</span>
=== Subsection 1 ===
=== Subsection 1 ===
* Prefer a list view to show items that belong together and in case of sufficient space.  
* Prefer a list view to show items that belong together and in case of sufficient space.  
Line 19: Line 17:


=== Selection ===
=== Selection ===
<span style="color:blue">Check the following against recommendation</span>
* 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:
* 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
** 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
<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.
* 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 09:34, 27 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.

Guidelines

Subsection 1

  • Prefer a list view to show items that belong together and in case of sufficient space.
  • Alternate row color (use theme settings). Use different keys (e.g. page up/down) when more lists should be accessible.
  • 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, show headers and enable sorting by clicking the header. Show sort order in header.
  • Always give list controls a label, positioned above or to the left of the list, in sentence capitalization.
  • Make the list control large enough that it can show at least four items at a time without scrolling.
  • If the list appears in a dialog or utility window, consider making the window and the list within it resizable so that the user can choose how many list items are visible at a time without scrolling. Each time the user opens this dialog, set its dimensions to those that the user last resized it to.

Selection

  • 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
  • Provide extended multiple selection with Shift+Click or Ctrl+Click to select groups of contiguous or non-adjacent values, respectively.

Code snippets

Retrieved from "https://techbase.kde.org/index.php?title=Projects/Usability/HIG/ListView&oldid=80204"