Message Handling – Processing Multiple Items

Foundations / Best Practices / Global Patterns / Messaging / Message Handling – Processing Multiple Items

Intro

When a user selects multiple items from a table, it might not be possible to process all of the items at once.

Users therefore need clear and user-friendly information on:

The actions available for the selected items
Any issues that prevent items from being processed
Whether or not an action was successful for all items

Scenarios for Processing Results

This guideline outlines the message patterns and recommended message texts for the following scenarios:

Success: All items were processed successfully
Failure: No items can be processed / were processed
Partial Processing: Only some items can be processed. Others can’t be processed or require manual validation.

Enabling/Disabling Actions

guideline

Enable an action that:

Always works, regardless of whether or not items are selected
Can be applied to at least one of the selected items

Disable an action that:

Can’t be applied to any of the selected items
Doesn’t correspond to the number of selected items. For example, disable Compare if only one item is selected

For more details, see UI Element States.

After the action is applied, keep the items selected.

Success

When all items were processed successfully, show a message toast.

<div> <div>Message Toast</div> </div> <div> <div><strong>Text</strong></div> <div><em><number of items> <item name> were <action>.</em></div> </div>

Message toast

Message toast

style

column-section-1-1, no-footprint

style

column-section-1-1, no-footprint

Failure Cases

No items can be processed

When no items can be processed, disable the action button.

For example, if all the selected items are locked, disable the Edit button.

To help users understand why the action button is disabled, use the item states.

Disabled edit button

Disabled edit button

No items were processed

When no items were processed, show a message view in a dialog.

<div> <div><strong>Message View</strong></div> </div> <div> <div><strong>Header</strong></div> <div><strong><em>Summary</em></strong></div> </div> <div> <div><strong>First List Item</strong></div> <div><em>No <item names> were <action>.</em></div> </div> <div> <div><strong>Next List Items</strong></div> <div>Specific messages for each unprocessed item.</div> </div> <div> <div><strong>Button</strong></div> <div><em>Close</em></div> </div>

Message view with errors only

Message view with errors only

style

column-section-1-1, no-footprint

style

column-section-1-1, no-footprint

Partial Processing

Backend issues

When one or more of the selected items were processed successfully and one or more were not, due to backend issues, show a message view in a dialog.

<div> <div><strong>Message View</strong></div> </div> <div> <div><strong>Header</strong></div> <div><strong><em>Summary</em></strong></div> </div> <div> <div><strong>First List Item</strong></div> <div>Success Message <em><number of successful items> of <total number of items> <item name> were <action>.</em></div> </div> <div> <div><strong>Next List Items</strong></div> <div> <ul> <li>Specific error messages for unprocessed items</li> <li>Specific warning messages for processed items</li> </ul> </div> </div> <div> <div><strong>Button</strong></div> <div><em>Close</em></div> </div>

Message view with a mix of success, error, and warnings messages

Message view with a mix of success, error, and warnings messages

style

column-section-1-1, no-footprint

style

column-section-1-1, no-footprint

One or more items can’t be processed

Before processing, a warning message asks users whether they want to apply the action to remaining items.
After user confirmation the resulting message depends on the processing results:
- A message toast for successful processing
- A message view for when backend errors occurred during the processing

Messaging sequence for items that can't be processed

Messaging sequence for items that can't be processed

Before Processing

If the action cannot be applied to one or more items, a warning message asks the users whether they want to apply the action to the other items.

<div> <div><strong>Warning Message Box</strong></div> </div> <div> <div><strong>Message Text</strong></div> <div> <p><em><number of items ineligible for the action> of <total number of items> <item name> can’t be <action>.</em></p> <p><em>Do you still want to <action> the remaining <number of editable items> <item name>?</em></p> </div> </div> <div> <div><strong>Message Details</strong></div> <div> <p><strong><em>Possible Causes</em></strong></p> <p>Selected <item names> are excluded if:</p> <ul> <li><em>Somebody is working on the <item name> (a draft exists, or changes haven’t been saved).</em></li> <li><em><action> is not allowed on the <item name>.</em></li> </ul> </div> </div> <div> <div><strong>Buttons</strong></div> <div><em><Primary action>, Cancel</em></div> </div>

After User Confirmation

After the users confirm the primary action for the remaining items the resulting message depends on the processing results:

When all the remaining items were successfully processed, a message toast is displayed.
When one or more backend errors occurred during the processing, a Summary message view in a dialog is displayed. It includes:
1. Successfully processed items
2. The backend error or errors
3. An information message for each item excluded from the processing

Information message text: The <item name> can’t be <action>

Summary with backend errors and information messages for items excluded from processing

Summary with backend errors and information messages for items excluded from processing

Processing is blocked by items that require manual validation

Some warnings for individual items may require a user decision before processing can continue:

Case 1: Just one warning. The user can ignore the warning and process the item, or skip the item.
Case 2: More than one warning. The user can ignore the warnings and process all the items, or skip all the affected items. Processing is only interrupted once.

Case 1: One Item

When one item requires manual validation, show a warning message box with actions to:

Validate and process the item
Skip the item: When the users skip the item, in the message view in a dialog, show an information message for the skipped item in the message view.

<div> <div>Warning Message Box</div> </div> <div> <div><strong>Body Text</strong></div> <div> <p><em><item name> <item ID>: <message description></em></p> <p><em>You can <action> this <item name> anyway, or skip it for now.</em></p> </div> </div> <div> <div><strong>Show Details</strong></div> <div>Optional</div> </div> <div> <div><strong>Buttons</strong></div> <div><em><Primary action>, Skip</em></div> </div>

For the skipped item, in the Summary message view, add an information message text below the other (success, error, and warning) items.

<div> <div>Message View</div> </div> <div> <div><strong>Information Message Text</strong></div> <div><em>The <item name> was skipped and not <action>.</em></div> </div>

Manual validation flow for one item (message box)

Manual validation flow for one item (message box)

style

column-section-1-1, no-footprint

style

column-section-1-1, no-footprint

Case 2: More than One

When more than one item requires manual validation, show a warning message box with actions to:

Validate and process the items
Skip the items: When the users skip the items, in the message view in a dialog, show an information message for each skipped item.

<div> <div>Warning Message View</div> </div> <div> <div><strong>Header</strong></div> <div><strong><em>Warning</em></strong></div> </div> <div> <div><strong>Body Text</strong></div> <div> <p><em>Warnings exist for some of the selected <item name, plural>.</em></p> <p><em>You can choose “<primary action>” to ignore the warnings, or skip these <item name, plural> for now.</em></p> </div> </div> <div> <div><strong>Buttons</strong></div> <div><em><Primary action>, Skip</em></div> </div>

For each skipped item, in the Summary message view, add an information message text below the other (success, error, and warning) items.

<div> <div>Message View</div> </div> <div> <div><strong>Information Message Text</strong></div> <div><em>The <item name> was skipped and not <action>.</em></div> </div>

Manual validation flow for several items (message view)