[kde-guidelines] Styleguide: Buttons

[Thomas Pfeiffer]

On Friday 20 September 2013 12:23:54 Heiko Tietze wrote:
> Viewing and Navigation > Access functions
> * Use a push button to initiate an action when the user clicks it.
> 
> http://techbase.kde.org/Projects/Usability/HIG/Buttons
> 
> == Purpose ==
> A ''push button'' initiates an action when the user clicks it.
> 
> Buttons are graphical controls that provides the user a simple way to
> initiates an action. A button indicates it's functionality by changing the
> frame corresponding to system’s theme on mouse hover. Buttons become active
> when user tabs to it. Active buttons are indicated as those by a frame. When
> the user clicks or presses the button the shading is changed.

Do we need that detailed description of the appearance? If people use the 
correct widget, all that comes automatically...

> Buttons have the benefit of affordance, i.e. their visual properties (they
> look like they can be pushed) suggest how they are used.
> 
> == Guidelines ==
> === Is this the right control ===
> Buttons are available in several flavors:
> * Command button
> ** Use a command button to initiate an immediate action.
> ** Do not use a command button for navigation to another page (prefer a
> [[Projects/Usability/HIG/Links|link]] in this case).
> ** Do not use a command button embedded in a body of text.
> ** Do not use command buttons for a group of actions. Consider to use radio
> buttons with one 'Apply' option or a menu button.
> * Menu button
> ** Use a menu button when you need to execute one action out of a small set
> of related functions.
> ** Indicate the menu by a single downward-pointing triangle.
> ** Clicking the button will drop down the menu only.

I do not get the distinction between "a group of actions" and "a small set 
of related functions" here. What's the difference between the two?

> * Split button
> ** Apply a split button when one of the commands is used by default.
> ** Clicking the left part (or right in case of RTL alignment) of a split
> button starts the default action; clicking the split area opens the menu.
> ** Change the default item to the last action when the user is likely to
> repeat the command.

> * Toggle button
> ** A toggle button is not a push button. Guidelines can be found
> [[Projects/Usability/HIG/Toggle_Buttons|here]].

> ===  Behavior ===
> * Buttons are not dynamic: their icon and label should not change depending
> on the context (except special split buttons).
> * Do not initiate an action on right-click or double-click.
> * Provide feedback when user is not aware to results or when results are not
> available instantaneous. Display a busy pointer or present a progress bar
> to users (see [[Projects/Usability/HIG/ProgressIndicator|progress
> indicator]]). * Denote the relationship between buttons with other controls
> by placing them logically together.
> ===  Appearance ===
> * Indicate a command that needs additional information (including
> confirmation) by adding an ellipsis at the end of the button label.
> * Buttons have an elevated appearance; do not make buttons flat (except in
> toolbars).
> * Prefer using icons on buttons only for OK, Apply or Cancel like actions.
> Passive actions like those in the "System Settings => Application Appearance
> => Fonts" do not have icons.

Except in toolbars if they are configured to show icons.

> * If icons are applied (or not), this style should be used consistently for
> a group of buttons.
> * For buttons with text labels, use a minimum button width of 96px and the
> standard button height. Don't use narrow, short, or tall buttons with text
> labels.
> * If the same button appears in more than one window, use the same label and
> access key. Locate them in approximately the same place in each window. *
> Use [[Projects/Usability/HIG/Capitalization|title style capitalization]]
> for the label.
> * Use a verb or verb phrase for the title of a push button.
> ==  Implementation ==
> *
> [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKPushButton.ht
> ml KPushButton]

All else: +1 from me