Lists and Tables

Guidelines | Controls for List and Tables

 

Guidelines

With touchscreens, it is easier to interact with items in lists by pointing than by dragging. Therefore, we propose:

  • Do not use conventional scrollbars for scrolling in lists or tables, even if they are enlarged. Especially, do not use a "thumb" for scrolling the list by dragging.
    Use pushbuttons for scrolling, instead.
    Provide pushbuttons for the important actions only, not the "whole set".
  • Do not use drag & drop for moving items between lists or tables. Use a special "transfer" buttons instead. However, drag & drop may be provided as an alternative interaction method.

Provide a means for selecting items in a list or table, such as

  • enlarged rows or columns for easier selection by pointing (-> see drum)
  • a fixed row or column that marks the selected item. Additional items may be selected by pointing, if multiple selection is used (otherwise the selection changes, and the selected item is moved into the fixed position)

 

Controls for List and Tables

Conventional list

List

Conventional list or table with pushbuttons for scrolling and the following features:

  • Four basic pushbuttons are used for the scroll functions:
    scroll one page backwards, scroll one line backwards, scroll one line forward, scroll one page forward.
  • The scrolling should be overlapping (different from R/3).
  • If a scroll button is pressed for a longer period of time, the button should repeat for easier scrolling.
  • One row or column may have a "permanent" selection.
  • Use lists for data display without manual selection of items through pointing.

 

Drum

Drum

Variant of the list. Drums are better suited to selection of items through fingers:

  • The list is distorted to enlarge the central row (or column) for easier selection of items by finger.
  • The distortion also allows to display the context of the central list element.
  • The items in a drum are arranged in a cyclic fashion, like in a real drum.
  • One row or column may have a permanent selection. Users may scroll items "into" this selection row or column in order to select them.

Note: The selected item should not be the central item, because it needs not to be pointed at.

Long list

Long list

Features additional buttons for accessing the first and/or last list element.

Long drum

Long drum

Features additional buttons for accessing the first and/or last list element.

Double list

Double list

Consists of two connected lists and allows to move items between the two lists (similar to "mover" dialogues).

  • Moved items are deleted in the source list.
  • The two lists have one common set of scroll buttons. One of the lists is active; the scroll buttons act on this list.
  • A "transfer" buttons between the two lists is used to move selected items from one list to the other (dragging may be provided as an additional interaction method).

Double drum

Double drum

Consists of two connected drums and allows to move items between the drums (similar to "mover" dialogues).

Otherwise similar to double list, but better suited to manual selection of items through fingers.

Stack List

Stack List

A stack list is one way to display a part of a hierarchy:

  • The list displays the items at the current bottom node.
  • The buttons at the top display the path in the hierarchy.

Buttons are added to the top, as the users moves deeper into the hierarchy by pointing at items in the list. Buttons are also used to quickly step up the hierarchy, which removes the buttons.

Stack Drum

Stack Drum

Like stack list, but with drum. Better suited to manual selection of items through fingers.

 

top top

Source:  Interaction Design Guide for Touchscreen Applications