Projects/Usability/HIG/ListView: Difference between revisions

    From KDE TechBase
    < Projects‎ | Usability‎ | HIG
    (Created page with "__NOTOC__ == Purpose == A list view allows the user to select one or more items from a list. A list view may be used for single selection (users select one item from a list o...")
     
    m ([http://qt-project.org/doc/qt-4.8/qradiobutton.html QRadioButton] → {{qt|QRadioButton}})
    (17 intermediate revisions by 3 users not shown)
    Line 2: Line 2:


    == Purpose ==
    == Purpose ==
    A list view allows the user to select one or more items from a list. 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 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 multiple 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.  
     
    == Example ==
    <span style="color:blue">HT:</span>
    Todo: Add Check box feature
     
    == Guidelines ==
    == Guidelines ==
    * Use a list box for multiple selections with more than five options.
    === Is this the right control ===
    * 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.
    * 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:
    * 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
    ** 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
    * Do ''not'' provide extended multiple selection with Shift+Click or Ctrl+Click to select groups of contiguous or non-adjacent values, respectively. Instead, use the [[Projects/Usability/HIG/DualList| dual-list pattern]] if multiple items have to be selected, because it allows users to easily see which items are selected at any point, without having to scroll through the available options, and it can be used with only the mouse. (Once the list view is being revised this guideline is subject of change.)
     
    === Behavior ===
    * 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.
     
    ===  Appearance ===
    * Alternate row color (use theme settings). Use different keys (e.g. page up/down) when more lists should be accessible.
    * 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 resizeable 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.
    * If activating a choice affects the appearance or the enabled state of other controls, place them next to the list view.
    * If certain controls in a dialog are only relevant if a certain item is selected (i.e. they are dependent controls), disable them instead of hiding.
    * Label the list view with a descriptive caption to the top left (cf. [[Projects/Usability/HIG/Alignment| alignment]]).
    * Create a buddy relation so access keys are assigned.
    * Do not use ending punctuation (neither dot nor colon) for caption.
    * Use [[Projects/Usability/HIG/Capitalization|sentence style capitalization]] for list view items.
     
    == Implementation ==
    * {{qt|QListView}}, for single-column lists.
    * {{qt|QTreeView}}, for multi-column lists. Be sure to set the [http://qt-project.org/doc/qt-4.8/qtreeview.html#rootIsDecorated-prop rootIsDecorated property] to false if the items in your list do not have children.


    == Code snippets ==
    [[Category:Usability]][[Category:Behavior]][[Category:Editing_and_Manipulation]][[Category:Selection]]

    Revision as of 21:05, 3 August 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.

    Example

    Guidelines

    Is this the right control

    • Prefer a list view to show items that belong together and in case of sufficient space.
    • 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
    • Do not provide extended multiple selection with Shift+Click or Ctrl+Click to select groups of contiguous or non-adjacent values, respectively. Instead, use the dual-list pattern if multiple items have to be selected, because it allows users to easily see which items are selected at any point, without having to scroll through the available options, and it can be used with only the mouse. (Once the list view is being revised this guideline is subject of change.)

    Behavior

    • 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.

    Appearance

    • Alternate row color (use theme settings). Use different keys (e.g. page up/down) when more lists should be accessible.
    • 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 resizeable 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.
    • If activating a choice affects the appearance or the enabled state of other controls, place them next to the list view.
    • If certain controls in a dialog are only relevant if a certain item is selected (i.e. they are dependent controls), disable them instead of hiding.
    • Label the list view with a descriptive caption to the top left (cf. alignment).
    • Create a buddy relation so access keys are assigned.
    • Do not use ending punctuation (neither dot nor colon) for caption.
    • Use sentence style capitalization for list view items.

    Implementation