Projects/Usability/HIG/ListView: Difference between revisions

    From KDE TechBase
    < Projects‎ | Usability‎ | HIG
    Line 23: Line 23:
    ** 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>
    <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
    * 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.
    * 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>
    <span style="color:blue">Make sure that KCB is feasonable</span>

    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