Push button

Push button (or simply button) is the most popular UI control, that is used to trigger some action or command.

Appearance

Components

Push button consists of the following parts:

  • Button area, typically rectangle with rounded corners, that indicates the click or touch sensitive area of the button. Also the design of this rectangle indicates the state of the button — whether it is normal, disabled or pressed, among others.
  • Label, that describes button action.
  • Icon, that helps to identify the button and emphasize it. 
  • (Optional) Tooltip, that can describe button action in details.

Actually, all these parts are optional, but it affects the overall affordance and usability of the button. 

States

  • Normal — basic state of the button, when it is active and the user doesn’t manipulate it.
  • Hovered — visual state of the button, when the user hovers the mouse cursor above the button. It is used to additionally indicate that the button is interactive and you can press it (especially for flat design themes).
  • Pressed — state of the button when it is pressed by cursor/touch, or was pressed previously (similar to ON state).
  • Disabled — state of the button, when it is temporary not available by some reason, and the user can’t trigger the command right now.
  • Focused — state of the button, that is ready for keyboard triggering. In most UI paradigms the user can trigger focused button action by Enter or Space key.

Visual hierarchy statuses

  • Normal button — basic (neutral) button in current visual hierarchy.
  • Primary / Default button — emphasized button with highest priority. There can be only one primary button in specific UI region (window or screen).
  • Secondary button — button with less priority, typically less emphasized by visual appearance.

It is necessary to mention special Escape (Cancel) button, that is typically not differentiated by appearance, but has a specific behavior and role. It is recognized as pressed (with the corresponding action of the button triggered), when the user presses ESC keyboard key anywhere in UI region, related to this button.

Behavior

The atomic interaction workflow of button is described below:

  • The user moves the mouse pointer or his own finger to the button
  • If the button has hover state, the visual style of the button changes, when the user moves the pointer above it.
  • If there is a tooltip, after some delay it is shown above the button.
  • The user presses left mouse button or touches the button. 
  • The button changes its state to pressed state.
  • The user releases left mouse button or his finger from the button while it is still inside the area.
  • The button action is triggered immediately, and the button changes its state back to default.

If the user releases left mouse button or his finger outside the button area by moving pointer or finger, the button goes back to default state without triggering the action. It is used to add basic protection from unintentional clicks/presses.

Factors to consider

  1. The length of the button label shouldn’t be too long — one or two words are preferred. Short labels are perceived by the users as icons, because their form is recognized immediately.
  2. The size of the button shouldn’t be too small to make easier to press it. It is especially important for touch screen interfaces—minimum size of the button is not less than 8 mm in both dimensions, but 15 mm is recommended.
  3. Additional feedback. In some cases pressing the button can give additional feedback, that imitates physical response of the button. It can be both a click sound or slight and short vibration, that is especially useful for people with disabilities.

Variations

  • Hold button
  • On/Off button
  • Multiple states button
  • Checkbox
  • Radiobutton

History

Software push button is the direct digital ancestor of hardware buttons, that are also widely used among hardware control surfaces and multiple devices.