Difference between revisions of "KDE Visual Design Group/HIG/SOU Workspace/Buttons"

*>Beccascollan
(New page: A button initiates an action when the user clicks it. * Label all text buttons with imperative verbs, using title capitalization. * If an action requires additional input from the...)
 
(Move notice)
 
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
{{Note|This page is outdated, please refer to [[https://hig.kde.org/ https://hig.kde.org/]]}}
 +
 +
=== 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]].
  
* If an action requires additional input from the user before it can be carried out, use an ellipsis (for example, Save As...).
+
* 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.
 
* 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.
Line 9: Line 19:
 
* 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 [open office uses a  slight background color change, dark line top and bottom – THIS IS UP FOR DEBATE]
+
* 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.

Latest revision as of 16:20, 5 February 2019

Note
This page is outdated, please refer to [https://hig.kde.org/]


Buttons

A button initiates an action when the user clicks it.

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

  • 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.

This page was last edited on 5 February 2019, at 16:20. Content is available under Creative Commons License SA 4.0 unless otherwise noted.
-->