Buttons and Menus

Buttons, Targets

As touchscreens are mainly used for point-and-click applications, most touchscreens are filled with pushbuttons and areas for data display and entry. Therefore, buttons play an important factor in the design of touchscreens.

Button Size

minimum of 3/4 by 3/4 inch (2*2 cm) and at least 1/8 inch (3 mm) apart for finger-operated touchscreens.

Targets

Use large and discrete targets that are spread out on the screen (finger-operated touchscreens).

Button Icons

Use three different icons for indicating the state of buttons:

Default icon
"Will be activated" icon: Signals that the users touches a button as long as the button is being touched (for touchscreens only that initiate an action when the finger is released).
Highlight the whole button, not just the text, number or graphics on it, because the button is obscured by the touching finger.
"Has been activated" icon: Signals for a short period of time that a touch has been registered and that the corresponding action is initiated.
Highlight the whole button for better recognition of the feedback.

Uses

Buttons can be used for:

Offering choices, like options, alternatives, etc.
Initiating functions

Function buttons should - apart from standard functions - preferably have text labels (or text labels with graphics).

Menus

Menus consists of a number of elements from which the user has to selects one.

Button Groups

Often menus are realized as groups of buttons. The buttons may look like buttons or may simply be graphical elements (often supplemented with text labels).

Buttons within groups should be separated clearly so that no erroneous activation can occur.

Group buttons by the methods described for grouping screen elements (e.g. shape, color, background color etc.) to let button groups or menus appear as a unity.

For usage recommendations see Comparison.

Examples


Figure 1: A menu with buttons in different groups; the groups are differentiated by their shapes and styles (from Information Kiosk Systems)		Figure 2: A menu with graphical buttons which are not visualized as buttons (from Information Kiosk Systems)

Lists

Lists or link lists provide a text -based approach to menus.

The text links should be typically arranged from top to bottom. For few links, an arrangement from left to right is acceptable (preferably at the top or bottom of the screen), although it is harder to scan visually. Other arrangements should only be used, if a graphic-like look is wanted, but graphics are not available.

Note: Valid for western script systems only - other scripts system, may lead to different recommendations.

For further usage recommendations see Comparison.

Comparison

	Texts (Lists, Links)	Text-based Buttons	Graphical Buttons
Use it...	If text labels better identify the objects or actions, e.g. for abstract objects	For action buttons (actions are often better described through text labels) If text is better suited for identifying the objects (e.g. complex alternatives)	To offer options (e.g. concrete objects); Add text labels for a better understanding of the options To beautify the screen To attract users, customers
Use it if...	Screen space is scarce The screen is character-based	Screen space is relatively scarce The screen is character-based (semi-graphics) or graphical	Screen space is available The screen has colors and is graphical
Do not use it...	If better presentations are available (and sufficient space)		To offer complex choices, abstract objects, difficult to understand concepts etc.
Recommen- dations	Arrange from top to bottom Few options: left-to-right (at top or bottom of screen)	Arrange function buttons in place or in groupings that are clearly recognized as such	Arrange function buttons in place or in groupings that are clearly recognized as such

top