Button
Usage | Types | Design-relevant Attributes | Related Controls
|
Buttons are used for explicit functions that refer to a given object or serve for navigational purposes |
| Figure 1: Example of an iView containing groups with buttons and two buttons belonging to the iView itself | |
Usage
Use buttons only for few and very important functions. A lot of buttons make a screen look heavy and complex. Therefore, when in doubt about whether to use a link or a button, go with a link. Because of their optical weight and their visual dominance, buttons qualify for this purpose.
Note: For a detailed discussion of when to use buttons and when to use links, see Link.
Pressing the Enter key activates the default function (mostly, but not necessarily, identical to the emphasized button's function).
Usage guidelines for the different button types and sizes are presented below.
Labeling
Use title case for button labels. Use the ellipsis character ("...") on button labels to indicate that the command needs further information to execute. Typically, the user is presented a dialog to fill in missing information.
Note: Title case means that the first letter of each word is capitalized, except for certain small words, such as articles and short prepositions.
Choose the button's function description carefully; try to be as explicit as possible. For complex interactions, use verb-noun combinations, e.g. "Search Database". If the context is clear, i.e. if the action can only be applied to one object, it is sufficient to use a single verb as the button's label ("Search"). For shufflers and comparable elements, you can also use a simple "Go".
Positioning and Design Alternatives
For detailed button positioning rules see Button Positioning.
Buttons are similar in function to links. For a discussion of when to use buttons and when to use links, see Link.
Types
HTMLB offers three different button types (attribute design, values STANDARD, SMALL, EMPHASIZED):
|
|
Figure 2: Standard, small, and emphasized button
In the following, we list usage guidelines for these types.
Usage - Emphasized Buttons vs. Standard Button
For functions that complete a task, always use an emphasized button.
In all other cases use a standard button, or a small button (see below).
Rationale: Users need to realize that a certain
function completes a task and know about - possibly negative - consequences.
The emphasized button is always the leftmost button if it is a member of a button group.
Usage - Standard Button vs. Small Button
- Use standard size buttons for frequently-used functions
- Use small size buttons for seldom-used functions
- Use small buttons in (exceptional) cases where space is scarce
- Do not mix both sizes within groups of elements
Design-relevant Attributes
All buttons are available in an enabled and disabled state (Boolean attribute disabled).
|
|
Figure 3: Disabled buttons
Usage - Disabled Buttons vs. Hidden Buttons
Disabled buttons indicate that a function is not available. Therefore, use disabled buttons for functions that are temporarily disabled. For example, a certain system state, such as an error, may prevent that the user can execute a function.
Hide buttons that are permanently not available for a user. For example, a user may not have the permission to perform certain actions.