Archived version of the User Experience Toolkit for Insights Hub and Industrial IoT website, version 2.8.1

# 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.

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

### 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.

1. Important states: different forms, 2. Non-important states: similar forms

Importance |  | Shape
--- | --- | ---
mayor ↔ minor | = | different ↔ alike

### 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.

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

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.

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

1. More important, 2. Less important

### Size examples

This Empty state attracts most attention by covering the screen.

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.

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.

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

### 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.

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.

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.

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

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!

Vertical indicator

Horizontal indicator

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

1. Subtle indicator, 2. Prominent indicator

- System icons
- Badge
- Busy indicator
- Confirm dialog
- Empty state
- Message
- Notification
- Switch
- Form validation

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