Projects/Usability/HIG/SOU Workspace/Buttons: Difference between revisions
Beccascollan (talk | contribs) No edit summary |
No edit summary |
||
| (2 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
=== Buttons === | |||
A button initiates an action when the user clicks it. | A button initiates an action when the user clicks it. | ||
[[Image:buttons.png|Buttons in KDE]] | |||
''A set of buttons. The leftmost is active and currently hovered over, the middle one is invalid, the right one is active but not hovered'' | |||
==== Guidelines ==== | |||
* Label all text buttons with imperative verbs, using [[title capitalization]]. | * Label all text buttons with imperative verbs, using [[title capitalization]]. | ||
| Line 9: | Line 17: | ||
* Make invalid buttons insensitive (using visual feedback such as grayed-out text and no hover over affect), rather than popping up an error message when the user clicks them. | * Make invalid buttons insensitive (using visual feedback such as grayed-out text and no hover over affect), rather than popping up an error message when the user clicks them. | ||
* Indicate that a button is active with a hover over affect | * Indicate that a button is active with a hover over affect. | ||
* If a task offers multiple actions with one button set as default; indicate the default action with a highlighted line around the button. | * If a task offers multiple actions with one button set as default; indicate the default action with a highlighted line around the button. | ||
* If the button has more than one variation of the primary action, use a [[split menu button]]. | |||
* After pressing a button, the user should expect to see the result of their action within 1 second. | * After pressing a button, the user should expect to see the result of their action within 1 second. | ||
* Do not assign actions to double-clicking or right-clicking a button. Users are unlikely to discover these actions, and if they do, it will distort their expectations of other buttons. | * Do not assign actions to double-clicking or right-clicking a button. Users are unlikely to discover these actions, and if they do, it will distort their expectations of other buttons. | ||
Revision as of 09:13, 22 September 2008
Buttons
A button initiates an action when the user clicks it.
A set of buttons. The leftmost is active and currently hovered over, the middle one is invalid, the right one is active but not hovered
Guidelines
- Label all text buttons with imperative verbs, using title capitalization.
- If an action requires additional input from the user before it can be carried out, use an ellipsis (for example, Save As...).
- Format all buttons in a consistent way in a dialog. Keep all buttons the same height and do not use more than two different widths.
- Make invalid buttons insensitive (using visual feedback such as grayed-out text and no hover over affect), rather than popping up an error message when the user clicks them.
- Indicate that a button is active with a hover over affect.
- If a task offers multiple actions with one button set as default; indicate the default action with a highlighted line around the button.
- If the button has more than one variation of the primary action, use a split menu button.
- After pressing a button, the user should expect to see the result of their action within 1 second.
- Do not assign actions to double-clicking or right-clicking a button. Users are unlikely to discover these actions, and if they do, it will distort their expectations of other buttons.