Notification

Notifications provide feedback about the system status and activity.

Usage

When to use

Use notifications in the following cases:

  • To interrupt the user, for a specific reason.
  • To alert the user about system activities.
  • To inform the user about the change in system status or any other expected event.
  • To share information to the user without blocking the whole screen.
  • To notify users about asynchronous events.
  • To help the user to make an immediate decision, use a confirm dialog box instead.
  • To show a message close to a specific section of the screen - for example when validating a form - use a message instead.

Types

There are the following notification types:

Error/Alert

Use an error/alert notification to notify the user about an action or system failure.

Error / alert
Error/Alert notification

Warning

Use a warning notification to notify the user about a potential trouble or during an unexpected behavior of the system.

Warning
Warning notification

Success

Use a success notification to notify the user when an action successfully completes.

Success
Success notification

Info

Use an info notification to inform the user about useful and relevant information.

Info
Info notification

General construction

A notification consists of the following elements:

Notification general construction
1. Severity icon, 2. Title, 3. Description, 4. Show/Hide details expander, 5. Optional data, 6. Close button, 7. Background

1. Severity icon

  • Use the icon to emphasize the meaning of the notification.

2. Title

  • All notifications have a title, which should be short and descriptive.

3. Description

  • The description should have a maximum length of three lines.
  • Make sure that the notification provides enough information to help the user understand the current or the next steps.

4. Show/Hide details expander (optional)

  • Expands and collapses the additional information. It is collapsed by default.

5. Optional data

  • This can be tabular data or a key-value list.
  • It is recommended to display the source and timestamp. But it can also have arbitrary content.

6. Close button

  • Use this button to close the notification.

7. Background

  • The background color matches the severity.

A notification

  • Describes the current activity.
  • Is short and precise.
  • Uses the appropriate severity for the content.

Behavior

Close notification

Notifications can be actively dismissed by clicking the close button.

Close notification
Close notification

Placement

The notification appears on the top right corner of the screen.

Notification Position
Notification position in screen

Dialog and notifications

Notifications are always in front of a dialog or confirm dialog.

Dialog and notifications
Dialog and notifications z-index

Do’s & Don’ts

Express everything in simple words

Try not to use technical jargon

  • Use simple words.
  • Do not use only technical jargon. Always add an explanation.

  • Use an appropriate severity color that matches the content of the notification.
  • Do not mix the color and content of the notification arbitrarily.

Style

This chapter shows several notifications in the design system.

Overview

Error/Alert notification

Warning notification

Success notification

Info notification

Expanded warning notification

Mouseover close button

Mouseover expander

Example of single notification in an app.

Example of multiple notifications in an app.

Typography

The following table gives reference to the different font sizes and weights:

Name State Font-family Font-size Line-height Text-align
Title all Siemens Sans Bold 14px 20px left
Description all Siemens Sans Roman 14px 20px left
Expander, Optional data all Siemens Sans Roman 12px 16px left

Sizing and spacing

The following measurements show the dimensions for this component:

Sizing for notification

Clickable areas

Spacing of collapsed content

Spacing of expanded content

Border radius

Shadow layer

Outer spacings

Spacings for mobile

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