Processing Templates

Last Updated 19-Feb-2004

General Description

A user may select a function within an application that requires a long time to process. To give users the understanding that there is back end processing in progress, the use of Processing Templates is recommended. The methods for indicating back end processing described by these templates fall into two categories, Processing Pages and Status Indicator Icons and/or Hints. NOTE: Inline Processing using a Message Box is not recommended.

Guideline Attributes

Spec Version # - 3.1
Spec Contributors - Betsy Beier, Craig Louis
UI Models - all Models
Example Products - all Products
Related Guidelines - Page Templates, Messaging Templates, Messaging Flows, Inline Messaging and Tips, Message Box, Icon Repository for BLAF

Interaction and Usage Specifications

General Interaction Notes for Processing Templates

Valid Types of Processing

Processing Page Interaction Notes

Processing Pages are similar to Messaging Pages, in that they are displayed on their own page in the flow. Yet, Processing Templates have some unique features.

Unique Features of Processing vs. Messaging Pages:

Accessibility Issues

A page processing message allows the user to cancel the process, when possible. If the user does not cancel the process, once it is complete the browser page is automatically redrawn and the appropriate next page in the flow appears.

Processing Page Display Options

Below are high level time heuristics for when to use each processing display option:
Processing Type Duration Display Method
Continuous Processing No completion estimate in UI. Longer than 30 seconds to one or two minutes likely. Animated progress image:
- Continuous Spinning Clock Icon
Incremental Update Processing Longer than 30 seconds to one or two minutes likely. Completion percentage:
(x-y)% of {process type} {function type}
Where x = 100%, y = % remaining
Unit completion:
(x-y) of x {process type} {function type}
Where x = total units, y = units complete
Checklists:
- Items added as complete, or
- Items checked as completed
Background Processing Long run; More than 10 minutes. Displayed inline on application page.
Used only for long running background processing with no dependencies preventing user from performing other application activity.

Native Browser Processing Display

Current browsers provide some limited indication of ongoing processes. The following table describes native process display provided in current versions of popular browsers.
Processing Type Native Browser Processing Information
Continuous Processing
(No completion estimate)
Browser Icon Spinning/Animated
Processing Area Moving in Status Bar
Processing with Incremental Updates Reading file percentage, percentage of image downloaded
Checklist Processing
(May or may not include increments)
Nothing provided native to browser.

Common Components Used in Processing Templates

Processing Page: The page displayed while processing ensues. Process Completion Page: The page displayed after process is complete. Prior to process invocation: On the process launch/initiation page.

Visual Specifications and Examples

Visual Principles

The following style rules characterize the recommended Processing Page messaging layout.

Header with Icon

See the Header Component guideline for layout information.
See the Examples section of this document for the Header Icon.

Message Icons

See the Processing Graphics Iconography section of this guideline.

Message Text Definitions

Examples

Continuous Processing Example

Processing Page - Continuous Processing Example (Unknown Exact Status or Time Until Complete)
Processing Page Continuous Processing Example (Unknown Exact Status or Time Until Complete)

Incremental Processing Example - Number of Units Complete

Processing Page - Units Complete Example
Processing Page Units Complete Example

Percentage Complete Processing Example

Processing Page - Percentage Complete Example
Processing Page Percentage Complete Example

Growing Completion List Example

Processing Page - Growing Completion List Example
Processing Page Growing Completion List Example

Completion Checklist Example

Processing Page - Completion Checklist Example
Processing Page Checklist Example

Background Processing Example

Background Processing Example
Background Processing Example

Processing Icons

Animated or changing graphic images are used on Processing Pages, and as Status Indicator Icons on application pages for long term background processing. The following table shows the two images used for process status on the Processing Page, and a few samples of the Status Indicator Icons available for inline background processing status display and control. The complete selection can be found in the Icon Repository for BLAF guideline, in theInline Functional Icons and Inline Status Icons sections.
Processing Page Status Icons
Icon Name Where Used/Function
 process_animation.gif Clock Continuous process of undetermined duration.
Incremental Processing Example:
Percentage Complete

Gauge Incremental process in percentage or units increments
Inline Icons for Background Processing
Icon Name Where Used/Function
  inprogressind_status.gif In Progress Status-Only Indicator Denotes process is in progress. Status only.
  inprogressind_active.gif In Progress Indicator Denotes process is in progress. Active (clickable).
  warningind_active.gif Warning (Marginal) Indicator Denotes process is in progress but needs attention. Active (clickable).
  okind_status.gif OK (Acceptable) Status ONLY Indicator Denotes process is in progress. Active (clickable).
Note: These images are samples. Please use the Icon Repository for BLAF guideline.

Open/Closed Issues