Button User Experience Documentation

Author: Jindrich Dinga

1. Introduction

This document is the user experience specification for JavaFX CommandButton control.

2. Interaction Design

A command button is a button with a rectangular border that contains text, a graphic, or both. These buttons typically use button text, often a single word, to identify the action or setting that the button represents.

Command buttons in a dialog box can stand alone or appear in a row.

Command buttons that appear in toolbars are called "toolbar buttons.". Typically, they use button graphics instead of button text.

Figure 1 Toolbar Buttons

When a command button is unavailable, the dimmed appearance indicates that it cannot be used. The following figure shows the appearance of available, pressed (and focused), and unavailable command buttons.

Figure 2 Available, Pressed, and Unavailable Command Buttons
 

Users can click command buttons to specify a command or initiate an action, such as Save, Cancel, or Submit Changes.

To make command buttons without text more accessible, create tool tips that describe or name the functions of the buttons.

Default Command Buttons

One of the buttons in a window can be the default command button. Default command buttons typically appear in dialog boxes. The default command button is activated when users press Enter (or Return).

A default command button (such as Save in Figure 3) should represent the action most often performed (if that action does not lead to loss of user data).

Figure3 Default and Non default Command Buttons

The Enter and Return equivalents activate the default command button unless keyboard focus is currently on a component that accepts the Enter or Return key. For instance, if the insertion point is in a multiline text area and the user presses Enter, the insertion point moves to the beginning of a new line rather than activating a default button. Users can press Ctrl-Tab to move the focus out of the current component and then press Enter.

As with the Enter and Return keys for the default command button, the Cancel button should not require keyboard focus to be activated by the Escape key.

Combining Graphics With Text in Command Buttons

In some circumstances, you might use a graphic along with text to identify the action or setting represented by a command button.

In command buttons containing both text and graphics, place the text after or below the image.

In contexts that typically use graphical buttons, such as toolbars, place button text beneath the graphic or on the trailing edge (right in left-to-right locales) of the button. Consider giving users the choice of what to display and where to display it.

Use mnemonics in your command buttons--with the exception of the default and Cancel buttons.

Provide a way to display text in command buttons as an aid to low-vision users.

Using Ellipses in Command Buttons

When a command button does not fully specify an operation but instead that operation is completed by a dialog box, notify the user by placing an ellipsis mark after the button text. (Note that this applies only to text in buttons. No ellipsis is used in graphics-only buttons.) For example, after clicking a Print... button, users are presented with a dialog box in which to specify printer location, how many copies to print, and so forth. By contrast, a Print command that prints one copy to the default printer without displaying a dialog box would not require an ellipsis mark.

Note that there is no difference in behavior of Buttons on Desktop and Embedded, except that no mnemonics or tooltips are displayed on Embedded.

3. Navigation

Mouse Support

The following table describes actions that are performed when users click on:

Touch Support

The following table describes actions that are performed when users tap on:

Directional Keys + OK/Select Support

The following table describes actions that are performed when a button is focused and users press the following keys:

Keyboard Support

The following table describes actions that are performed when a button is focused and users press the following keys: