Complex Controls

Lists, Tables | Hierarchies, Stacks, etc.

Lists, Tables

With touchscreens, it is easier to interact with items in lists or tables 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)

Hierarchies, Stacks, etc.

Do not use conventional trees (e.g. as in the Windows Explorer) for presenting hierarchies, even if the trees are enlarged, because tey:

• Are cumbersome to use with fingers
• Consume much space if they are enlarged for use with fingers
• Show too much useless information, e.g. to few data, if they are enlarged for use with fingers.

Choose the presentation according to the task at hand and with considering ease of use and speed, especially with pointing for finger-operated touchscreens. Here are some hints for choosing a presentation.

Tabstrip

A tabstrip may be used to display the branches of a two-level hierarchy. The top level nodes (categories) serve as tabs or buttons for changing the view.

Criteria

Contrary to the stack the tabstrip provides easy access to all nodes of the same hierarchy level which makes comparison of items, though sequential, easier than in a stack.

Presentation

The view may be a list, drum, set of buttons, etc.

Stack

A stack can display part of a hierarchy of arbitrary depth, though only a handful of levels is recommended for touchscreens. A stack displays the path through a hierarchy and the nodes at the lowest level. Clicking a node adds this node to the path and displays the nodes of the next lower level. The path is represented as a set of buttons. Clicking a path button moves the user to the respective level and removes lower path buttons.

Presentation

Comparing items of the same hierarchy level is cumbersome with a stack. A stack is best suited to searching for items in a hierarchy.

View

The display of the nodes may be a list, drum, set of buttons, etc.

 top

Source:  Interaction Design Guide for Touchscreen Applications