Context & status

Communicate state of an application, component or object through status.

Importance of status

It is important to convey the state of an application, component or asset to the user in a consistent and clear manner.

General construction

A status describes the condition of an item at a particular time. Common status are for example warnings, errors or form validation.

Status indicators highlight page elements and communicate severity. They are an important visual tool to help users identify the condition of events, assets or processes and decide on their course of action. Status indicators use different elements (colors, symbols, shapes and labels) and combine them to help users identify the states they represent.

1. Color

Use signal colors only where important information takes place.

Color evaluation

The used range can vary depending on the use case, therefore the highest value / escalation level is always assigned to red.

states-usage-color-evaluation

1. Negative → less negative, 2. Neutral, 3. Positive

Color assignment example

Color mappingstates-usage-dots-redstates-usage-dots-orangestates-usage-dots-yellowstates-usage-dots-greystates-usage-dots-bluestates-usage-dots-green
Priorityhighesthighmediumlow  
Severitycatastrophiccriticalmoderatemarginal  
Frequencyfrequent / commonprobableoccasionallyrarely / improbable  
Timecurrenty will be / predictedelapsed  
Feedbackrequired recommendedneglectabledesiredpositively reinforcing

Color usage example

states-usage-color-example

See also: Message and notification

2. Shape

States can additionally be represented by easily distinguishable shapes. The different states shall be distinguishable, the more reasonable it is to mark them with very different forms. This makes recognition easier, especially for visually impaired users.

Circular shapes are general and flexible to use, square / diamond shapes indicate a warning, whereas triangular shapes are used to indicate danger and a critical state.

states-usage-shape

1. Important states: different forms, 2. Non-important states: similar forms
Importance Shape
mayor ↔ minor=different ↔ alike

Shape examples

states-usage-shape-example

3. Symbol

Status is indicated by commonly used symbols which should make them recognizeable through different use cases and apps.

SymbolsDescriptionUse forPriority
Symbols - Exclamation markThe exclamation mark emphasizes something as important, that demands immediate attention.Warning, danger, alert, order (“must do”)high
Symbols - XThe x represents a negation. It is most often seen in the context of misuse (wrong use or input) and the concept of “don’t” (cancel, close)Wrong, Error, Failure, No (don’t do), Unavailability, Cancel, Closemedium
Symbols - CheckmarkThe checkmark represents a positive confirmation. It is most often seen in the context of correct use (right use or input) and the concept of “acceptance”Correct, Success, Yes (do), Availability, Confirm, Create, Acceptmedium-low
Symbols - Info/iThe info-i indicates available information. It does not carry any other meaning or concept.Informationlow

There are three different icon styles: Regular, bold and filled. The filled icon style should be used as the default for status because it attracts maximum attention.

symbol-styles

See also: System icons

4. Position & reference

The positioning of information in the visible area should also be deliberately structured, based on the reading direction of the target audience. In Europe (and English-speaking countries) this means from left to right and from top to bottom.

states-usage-position

1. Most important, 2. Least important

The position context in content hierarchy and proximity of status and item are the main factors to understand the relationship between them.

  • Place the status at the top (e.g. close to the title) if the status applies to a complete page or component.
  • Place the status at the left-hand side if the status applies to a single line of content (e.g. table row).
  • If a status applies to a specific element, place it in direct proximity.

Place status in context

Place status at the top in close proximity of the title. Don't use it as 'one more piece of information' connected to a specific piece of content.

Place status icon next to item state

Status should be placed at the beginning of a row in close proximity to time of occurrence; If additional icons are used for the same status, both should be placed together.

Place status icon next to item state

Don't place status next to other entries or labels. If placed too far from an indicator they could be perceived as two different status.

Place status icon next to item state

Place the status icon as close to the beginning of an item as possible, e.g. next to the item title. Don't place the status icon at the end of an item or too far apart to avoid ambiguous situations.

5. Size

Important information should be given more space. The order in which content is consumed can be controlled by changing its size.

states-usage-size

1. More important, 2. Less important

Size examples

states-usage-size-examples-1

This Empty state attracts most attention by covering the screen.

states-usage-size-examples-2

This Empty state is much less obtrusive. It could also appear together with other similar patterns at once.

See also: Empty state

6. Label, semantic & consistency

The terms and labels chosen for states should be used consistently. Labels are textual descriptions of the respective status. They should be used whenever there is enough space available or when additional clarification is necessary.

  • Always use the same icon, color and text in combination.
  • Avoid using different terms for already assigned icon/text combinations.
  • Avoid combining low priority symbols with high priority shapes (or vice versa).
  • Choose colors with matching priority level.

Do and don't: combine
Combine appropriate colors with matching shape and avoid combining low priority symbols with high priority shapes.

7. Animation

Animations are time-bound changes of graphic variables. Movement is perceived preferentially because the recognition of movements is particularly well-developed.

Animation is well suited to generate attention, to visualise current processes, to make objects/groupings recognisable and to support areal perception.

states-usage-animation

1. Visibility, 2. Color, 3. Position, 4. Orientation / Rotation, 5. Size | t = time

Example animation: rotation

states-usage-animation-example-0

See also: Busy indicator

Example animation: visibility

states-usage-animation-example-1

System notifications for example appear ‘above’ the existing user interface, catching the users attention by animating their visibility and being displayed above all other elements.

See also: Notification

8. Indicator type

The different available elements are combined into visual indicators, that have unique uses for different contexts. Choose from available indicators whenever possible.

Icon indicator

Used as main application of status. Use anywhere you want to draw full attention to a status, even with limited space.

Indicator type: icon

The icon indicator is mainly used in data tables, content, dashboards and notifications.

Badge indicator (with numbers)

Choose when the number of status occurrences is of particular interest; it is often used in conjunction with icons or content groups, to indicate number of contained status.

Indicator type: badge

The badge indicator can be used to indicate the number of e.g. events or notifications.

Badge indicator (dot)

Choose for a compact indication where numbers or labels are not necessarily needed; it is frequently used in conjunction with icons to indicate new or not yet visited content.

Indicator type: badge

Badge indicator used for compact indication.

Badge indicator (label)

Used as label within content, depending on placement/proximity (e.g. placement next to the title of a content indicates the entire content as “failed”).

Indicator type: badge

Badge indicator with label placed right next to an object.

Highlight indicator

Choose when users need to scan lists or find specific sections within long (scrollable) content.

Direction

The vertical indicator is intended for highlighting of table rows, expandable groups and sections within content. The horizontal indicator is intended for card grids or similar layouts. Never combine vertical and horizontal indicators!

Indicator type: vertical

Vertical indicator

Indicator type: Horizontal

Horizontal indicator

Depending on the relevance the indicator can be thinner or thicker.

Indicator thicknesses

1. Subtle indicator, 2. Prominent indicator
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top