Pushbuttons

Guidelines | Button Examples

Generally, there are myriads of buttons with text, with graphics or with both of them. You find good examples in multimedia applications, in some "fancy" applications (like those from Kai Krause...), and on the Web.Therefore, I just pick some typical examples. Most of them are more or less usable on touchscreens, provided they are large enough (for fingers).

Guidelines

• Size: At least 3/4 (ca. 2 cm) inch wide and high and 1/8 inch (ca. 3 mm) apart.
• Grid: We propose to divide the touchscreen, which usually has a fixed and relatively small size, into a grid that defines the basic "cell size" for buttons and other screen elements.
  Example: For a 640*480 screen, a grid cell of 64*64 pixels seems adequate. This provides a 10*7 grid with room for a status line at the bottom.
• Grouping: Group pushbuttons by using frames, form, color, background color or texture; use attributes redundantly for easier identification of groups.
• Feedback: Buttons should give some sort of feedback as to their state (on/off, active/inactive, activated (transient), etc.).
  Note: Nowadays, feedback is often given, while the mouse pointer is over the pushbutton. However, this behavior cannot be implemented on 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.

Button Examples

 top

Source:  Interaction Design Guide for Touchscreen Applications