ProgressIndicator User Experience Documentation

1. Introduction

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

2. Overview

Progress indicators are useful for communicating that a job is in-process. This feedback, at minimum, reassures the user that something is happening and, ideally, also lets the user know approximately how long the job will take to complete.

The Progress Indicator must be available in the following three designs:

1. Determinate Progress Bar,
2. Indeterminate Progress Bar, and
3. Busy Indicator.

The Determinate and Indeterminate Progress Bar indicators include graphical bars to demonstrate job progress. The Determinate Progress Bar is used to represent the percentage of a given job that has been completed. The Indeterminate Progress Bar is used when estimates of job completion cannot be provided, yet the job is being performed. Determinate and Indeterminate Progress Bar indicators may also include a textual description of the job, a textual description of the current job status, and any related controls such as Pause, Resume and/or Cancel buttons to halt the associated job.

The Busy indicator is not a bar-type indicator, but a circular animation. It is used when space is very constrained, and is suitable for demonstrating progress for events which cannot be synchronized to the backend process.

Figure 1 Progress Indicator Elements

• Job Title - The Job Title Text is a text string that is positioned above the progress bar. It identifies the overall job, for example "Analyzing Hosts". Use this text string as a title for a single job, which may or may not be composed of one or more steps. 
  
  If the job consists of one or more steps, they may be included in the Job Title. In this case, add a sub-title for steps after the primary Job Title text. The sub-title would refresh dynamically as the job progresses through the steps, while the primary title for the Job Title would remain constant. For example: "Analyzing Hosts: Analyzing Hard Drives, "Analyzing Hosts: Analyzing CPUs and etc.". Keep the text string to a minimum so that it does not wrap to more than one line.
  
  
• Progress Bar - Display the progress bar after the Job Title text, if present. The bar should indicate progress for the overall job and not for each individual step within the job.

• Status Text - Below the progress bar a text string may be presented to describe details about the job. It may be used to indicate the percentage of job completion, with the estimations for time remaining. The text string can update and refresh dynamically.

Determinate Progress Bar

The Determinate Progress Bar provides feedback to the user that a job is in-process and indicates approximately how long it will take to complete. It should be used for a single measurable job composed of one or more steps.

Progress is visually represented by a horizontal/vertical progress bar which progressively fills a trough area. The progress bar fills the trough in proportion to the job progress. Corresponding status text can be presented with the progress bar to offer detailed information about the job status. Status text offers narrative details regarding the percentage of job completion and estimated time remaining. Button controls can be included for actions supported by the application.

Please note that if space is very constrained, please use circular indicator instead.

The Determinate Progress Bar may be presented in a pop-up window, or inline within a component or page.

Figure 2 Determinate Progress Bar (horizontal indicator, circular indicator, indication of finished job)

Indeterminate Progress Bar

The Indeterminate Progress Bar is used to provide feedback to the user that a job is in-process in the absence of measurable progress information. It should be used when there’s no way to accurately determine how long it will take a job to complete.

Progress is visually represented by a progress bar animation, which goes from one side to another and back while the job is in progress. Corresponding status text can be presented with the progress bar to offer any available information about the job status. Button controls may be included to support job actions.

The Indeterminate Progress Bar may be presented in a pop-up window, or inline within a component or page.

Figure 3 Indeterminate Progress Bar

Busy Indicator

The Busy Indicator is a simple animated graphic. It is used when no measurable progress can be reported. It is a not a bar, but a circular graphical indicator. Unlike the other progress indicators it can be used in contexts where space is constrained.

Figure 4 Busy Indicator

The animation of the Busy Indicator loops endlessly until the operation finishes or the user acts to stop the operation. The animation reassures users that an otherwise invisible activity is still in progress and the system has not crashed.

The Busy Indicator may be used as an inline ‘placeholder’ when data loading from the server affects the content presentation. For example, if redrawing a chart image causes a delay in repainting the screen, the busy indicator could be presented in the interim.

Error Message

A Dynamic Error Message may be presented when a job fails. If presented, the progress bar is dismissed and an inline error message takes its place. The error message consists of an error icon and associated error text. The intended use for this feature is for situations where only the progress bar itself is being presented to the user, such as in a table display. In other contexts alternate presentations may be preferable.

3. Interaction Design

As mentioned above, Progress indicators are useful for communicating that a job is in-process. Even if the ProgressIndicators are occupied with buttons, there is no difference in behavior of ProgressIndicators on Desktop and Embedded.