Intro

Multi-message handling provides an overview of multiple messages, showing the type and number of messages, along with an action link to open a multi-message handling detail view in a bottom sheet (compact) or a popover (regular).

Multi-message handling detail view on compact screen (left) and regular screen (right)

Usage

Do

Use the multi-message handling view only when there is more than one message.

Don't

Don’t use the multi-message handling view when there is only one message.

  • Keep the text on the overview banner short and concise yet informational.
  • Show the total number of messages and types of messages.
  • Show the overview banner with the icon and color according to the highest urgency.
  • Use an optional filter only when there are multiple categories or when the number of messages is larger than the user can handle without a filter.
  • Customize the filter categories according to user needs.

Positive example of an overview banner with the type and number of messages

Negative example of messages with lower priority in the overview banner

Positive example of a filter to help narrow down the results in the detail view

Negative example of overusing the filter in a non-logical way

Anatomy

A. Header

The header contains the title, total number of messages, and a button to collapse the detail view.

B. Filter (Optional)

The filter is used to filter different types of messages.

C. Header Cell (Optional)

The header cell of a certain category of messages displays the number of messages and an optional “Clear” button to dismiss all the messages of this type.

D. Banner

The banner shows further message details. The link in the banner can navigate the user to the location of the table view cell or form cell with the error.

Anatomy of multi-message handling detail view

Behavior and Interaction

Expanding the Detail View

Dragging the handle expands or minimizes the size of the modal sheet (compact).

Scrolling: If there are more messages beyond the screen, scrolling is enabled to view all of them.

Collapsing the Detail View

Tapping on the “Close” icon button in the header or anywhere outside of the modal or popover collapses the detail view.

Expanding (left) and closing the detail view (right)

Filtering

Tapping on the dimension selector displays only one type of message. Tapping on “All” displays all messages.

All messages (left), filtering Information messages (right)

Tapping on the link in the banner navigates the user to the screen location that is related to the corresponding message.

Tapping link leads to relevant error

Clearing a Message

Tapping on the “Close” button in the banner, sliding the banner to left (compact) clears a single message.

Tapping on the “Clear” button in the header cell clears all messages of that type.

Tapping on the button (left) or sliding to left (middle) to clear a single message, or tapping on the ”Clear“ button (right) to clear a type of message

Adaptive Design

On compact screens, the multi-message handling detail view is shown in a bottom modal, while on regular screens, it appears in a popover. When the detail view is opened on a compact screen, the banner is automatically folded and reappears when the detail view is collapsed.

Multi-message handling detail view on compact screen (left) and regular screen (right)

Resources

Development: UIKit FUIBannerMultiMessageViewController, UIKit FUIBannerMessageView, UIKit FUIOfflineBannerMessageView, UIKit FUIProgressBannerMessageView, SwiftUI BannerMultiMessageSheet

SAP Fiori for Android: Multi-Message Handling

Human Interface Guidelines: Feedback

Related Components/Patterns: Banners, Error Handling