Selection, Menus

Guidelines | Static Menus | Dynamic Menus

Guidelines

Selection on touchscreens is usually done with fingers. Therefore, for selection controls the same size requirements exists as do exist for pushbuttons.

Selections may also be done indirectly. The Selection:

Can be moved through the items via pushbuttons, e.g. directional pushbuttons
May stay fixed; the items are moved to the selection area through pushbuttons, e.g. directional pushbuttons

Static Menus

	Keyboard menu: An "alphabet menu" for selecting the beginning letter of a word or even for entering text (Lexikon der Musik). A little too fancy for "everyday use" (and too small for fingers). Single selection only!
	Static menu (button bar): A button bar for selecting "rooms" where different processing is applied to images (Soap 1.0). The button bar appears, when the cursor is moved over the button "Plan".
	Static button menu for a menu page using buttons which are easily recognizable as buttons. The primary button menu offers choices for the users. There is a second button menu providing functions; not usuable functions are hidden (or grayed-out).
	Static button menu for a menu page using graphical buttons. The graphical buttons are not recognizable as buttons. In addition text labels are added to make the options clearer.
	Static button menu for a menu page using text-based buttons (graphic text). The text menu is optically enhanced by a flower background graphic.

Dynamic Menus

	Popup menu: A "remote control" that acts as a sort of "menu bar" (Soap 1.0)
	Drawer (1): The drawer acts like a pulldown or popup menu. It provides a number of choices that are displayed on user request. In this case, the drawer does not give any hint on its items. However, the drawer may have a textual or graphical label classifying the items, or it may display the selected item.
	Drawer (2): The drawer principle may be extended by displaying a small set of items (the favorites) on the drawer. The selected item(s) is/are highlighted.
	Drawer (3): The drawer may also be used as an entry field that allows to enter data that are not provided within the drawer. This corresponds to a dropdown combination box.
	Drawer (2a): The drawer opened. It provides a set of tools or options where the user may select from. The drawer is closed, after the user clicks the handle again.
	Drawer (2b): The same drawer, after the user clicked the sketch block in the above example. Now tools for handling images and files are displayed.

Source: Interaction Design Guide for Touchscreen Applications