Label User Experience Documentation

Author: Jindrich Dinga

1. Introduction

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

2. Overview

A label is the simplest text component that exists. A label is usually associated with another component and describes its function.

It consists of read-only text, graphics, or both. Labels serve two functions in an application:

• To identify components and enable navigation to components that don't have their own text strings
• To communicate status and other information

Users cannot select a label or any of its parts.

Labels That Identify Controls

You can associate a label with a component (such as a text field, slider, or checkbox) to describe the use of the component.

Figure 1 Label That Describes the Use of a Slider

You can also use a label to describe a group of components.

In the following picture, the Color label describes a group of three radio buttons. The other text (Red, Green, and Blue) is part of the radio buttons and not a separate component. The Color label is not a separate component for the purpose of navigation.

Figure 2 Label That Describes a Radio Button Group

Available and Unavailable Labels

You can make a label available or unavailable so that its state is the same as that of the component it describes. The following picture shows an available and unavailable label.

Figure 3 Available and Unavailable Labels

Mnemonics in Labels

You can specify a mnemonic for a label. When the mnemonic is activated, it gives focus to the component that the label describes. This technique is often used with a label that accompanies an editable text field. In the following picture, the text field gets focus when users press Alt-N.

Figure 4 Label With a Mnemonic
 

Labels That Communicate Status and Other Information

You can use a label to communicate status or give information to users. In addition, you can instruct your application to alter a label to show a change in state.

The progress bar in the following picture uses two labels. The top label is static and the bottom one changes as the operation progresses.

Figure 5 Labels That Clarify the Meaning of a Progress Bar

Use sentence capitalization in the text of a label that communicates status. Do not provide end punctuation unless the text is a complete sentence.

3. Interaction Design

As mentioned above, labels serve two functions in an application:

• To identify components and enable navigation to components that don't have their own text strings
• To communicate status and other information

Users cannot select a label or any of its parts.

There is no difference in behavior of labels on Desktop and Embedded.