Indicators

Definition

Indicators are labels which convey small amounts of information such as a status, in a variety of visual forms, and can use color to communicate meaning.

Indicators have either one or two states, and may have an optional tool tip. They are not used to navigate to additional content.

Common Characteristics

All indicators have ALL-CAPS labels, or an icon.

All indicators are single-state (show/hide), or two-state (on/off).

Single-State Indicators

Single-state indicators are displayed in the UI when relevant, and hidden when not.

Flags

Flags are best used for words, not acronyms, and do not have tooltips.

Flags can be displayed horizontally with content, or diagonally over content. Any single item may have up to two horizontal flags, and/or one diagonal flag.

icon badges Flags can be used horizontally or diagonally

Icon Badges

Icon badges are visually identical to icon text buttons, but the only interaction is to display a tooltip on hover or tap.

icon badges

Two-State Indicators

Two-state indicators have color when relevant, and gray when not.

Auction Lights

auction lights

Auctions lights have tooltips in both on and off states.

Task Indicators

Task indicators indicate whether a task is complete or incomplete.

task indicator

Task indicators have tooltips in both states.