Context & 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.

Color assignment example

Color mapping
Priority	highest	high	medium	low
Severity	catastrophic	critical	moderate	marginal
Frequency	frequent / common	probable	occasionally	rarely / improbable
Time	currenty		will be / predicted	elapsed
Feedback	required		recommended	neglectable	desired	positively reinforcing

Color usage 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.

Shape examples

3. Symbol

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

Symbols	Description	Use for	Priority
	The exclamation mark emphasizes something as important, that demands immediate attention.	Warning, danger, alert, order (“must do”)	high
	The 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, Close	medium
	The 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, Accept	medium-low
	The info-i indicates available information. It does not carry any other meaning or concept.	Information	low

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.

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.

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.

5. Size

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

Size examples

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.

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.

Example animation: rotation

See also: Busy indicator

Example animation: visibility

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.

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.

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.

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”).

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!

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