Hierarchies

Guidelines

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

they are cumbersome to use with fingers
they consume much space if they are enlarged for use with fingers
they 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.
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.
Criteria: Comparing items of the same hierarchy level is cumbersome with a stack. A stack is best suited to searching for items in a hierarchy.
The display of the nodes may be a list, drum, set of buttons, etc.

Tabstrip and Stack

	Tabstrip with List A tabstrip serves to display a two-level hierarchy: The tabs at the top (or elsewhere) display the categories. The list displays the items of the current category. Tabs at the top display the categories. The user clicks the tabs to change the view (category).
	Tabstrip with Drum Like tabstrip with list, but with drum. Better suited to manual selection of items with finger.
	Tabstrip with Button Group Like tabstrip with list, but with drum. Better suited to manual selection of items with finger.
	Stack with List A stack list is one way to display a part of a hierarchy of arbitrary depth: 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 with Drum Like stack list, but with drum. Better suited to manual selection of items with finger.
	Stack with Button Group Like stack list, but with button group. Better suited to manual selection of items with finger.

top

Hierarchies

Guidelines

Tabstrip and Stack

Source: Interaction Design Guide for Touchscreen Applications