The message popover control can display multiple messages of different types in one list. For example, it might show several messages related to entries in a form, or messages triggered by a finalizing action, such as Save.

The message popover is used in conjunction with a technical message manager, which populates the message list. If an error occurs at a validation point, the corresponding message is added to message popover automatically, without interrupting the user.

Users can browse messages by type and navigate to the message details. In some cases, they can also jump directly from the message to the affected field on the UI.

When to Use

Use the message popover if:

• You want to display multiple messages to the user.
• You do not want to interrupt users while they are performing an action.

Do not use the message popover if:

• You need to interrupt the user. In this case, use a message box.
  (Typically, interrupting the user is only necessary for technical problems, such as network errors and connection issues.)

Components

(1) Filter bar
(2) Short description
(3) Subtitle
(4) Section/subsection on the UI
(5) Message button
(6) Navigation to message details
(7) Counter for aggregated messages

Filter Bar

Initially, the filter bar shows all the different message types in the list (1).

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success, and information).

List

Short Description (2)

A simple and helpful short message text. It’s the same message as the one attached to the UI control where the issue occurred.

Subtitle (3)

You can use the subtitle to give your message an identifier. If the message relates to a specific field, show the label of the field where the error occurred. Based on the subtitle, the user should be able to identify the corresponding UI control on the UI (for example, the input field in a form).

Section/Subsection (4)

Messages in the list are grouped by the section and subsection on the UI. This helps the user to find the part of the UI that triggered the message.

Usually, the grouping reflects the hierarchy of the page. However, some messages relate to issues that do not belong to a particular field on a page, but result from an action. In this case, the group title is as follows:

• Last Action: <Action Label> (Example: Last Action: Save)
• Last Action (fallback solution)

Navigation to Message Details (6)

If message details are provided, the message popover automatically provides a chevron on the right-hand side for navigating to the message details page.

If the popover contains only one message that also has message details, the message details page is displayed by default (see Behavior and Interaction).

Aggregated Messages (7)

If you want to aggregate messages, you can use the counter property of each list item.

• The message popover only provides the counter property. The aggregation itself must be implemented by the app team.
• When 2 or more messages are aggregated, the message short text cannot be a link because there would be multiple targets.

Message Button

Message Details

Behavior and Interaction

Responsiveness

Size S (Smartphone)

Top Tips

• Whenever possible, provide a navigation link from the message to the relevant field on the UI.
• Use the message subtitle to indicate the field label.
• In forms, also highlight the individual fields, and change their value state according to the type of message. For more information, see Form Field Validation.

Related Topics