Usage & Type 
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. Buttons have optical weight and visual dominance. Therefore, when in doubt about whether to use a link or a button, go with a link.
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).
Usage - Disabled Buttons vs. Invisible 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 a user from executing a function.
Invisible buttons are buttons that are never available for the user, for example because he or she does not have the permission to perform a certain action.
Positioning Buttons
Buttons are used for explicit functions that refer to a given object or serve for navigational purposes. See Figure 1.
Positioning
Place buttons below the object they refer to. If space is scarce, place the buttons to the right of the object (for several objects place them to the right of the bottom object).
How to make clear which object(s) a button refers to:
Place the buttons inside, or close to the object.
Example: Place buttons inside group boxes, place buttons close to the fields they refer to.
Figure 3: Example of a button inside a group referring to a list box
Left-align button and object.
Example: Left align buttons referring to a field with the field label:
Figure 4: Example of left-aligned buttons inside a group
Place button(s) on the same level (area, group box) as the objects which are affected by the action.
Example: Place buttons that refer to fields in a group box or area within that group box, or area (figure 3 and 4).
Show/hide objects: When an object is hidden, buttons are also hidden.
Example: If a table is hidden, the related buttons are also hidden.
Figure 5: Example of a left-aligned button group containing an emphasized button
If an emphasized button (see Types) is a member of a button group, it is the leftmost button in this group.
Navigational buttons are placed at the bottom left of a screen (or screen area).
Overview of Positioning Rules
The following table summarizes the rules for button placement.
Object |
Example |
Placement |
|---|---|---|
Single Object |
Field |
Right to the object |
Several Objects |
Field Group |
Default case: left-aligned below the bottom object If space is scarce: to the right of the bottom object (see figure 4). |
Area, tabstrip, group box |
Group Box |
At the bottom, left-aligned (see figure 3) |
Table View (fixed size) |
Table based on Table View control or Portal Data Viewer |
Below the table, left-aligned with the table. |
Special case: Long table |
Scrolling table |
Above and below the table, left-aligned Alternative: Implement a special frame for buttons above a table, which does not scroll. |
Usage guidelines for the different button types and sizes are presented in Button.