Feedback

An event that needs a message has one right place for it. Two questions choose it: who caused the event, and whether it needs your decision before anything else happens.

Choosing the component

Toast

Your action changed something out of view, or can be undone.

Candidate archived

Inline message

A condition of the page or panel you are on.

Some notifications did not load.

Dialog

An act that cannot be undone needs your decision.

Delete this board for everyone?

The board and its items are deleted for everyone. This cannot be undone.

Notification

Something happened elsewhere, or someone else did it.

Projects9:42Ana Horvatmoved Sita Gurung to Offer sent

The change shows where you made it: No message: the change is the confirmation
Your action did not go through: Error toast, or an error inline message when the page cannot go on
A value the form cannot accept: Error under the field
Work is under way: Skeleton, progress bar or spinner

The other events, and where they go.

Match the weight to the event

Interrupt only for a decision.

A dialog stops your work and a toast passes by. An inline message waits at the top of its page, and a notification waits under the bell until you look.

Confirm what you cannot see. You expect most actions to work, so a message about one that did not matters more than a message about one that did.

Undo before confirm

When an action can be reversed, do it at once and offer Undo in a toast. Keep the confirmation dialog for what cannot come back, such as deleting a board for everyone.

Sita GurungWelder, Nepal
Ram ThapaWelder, India11 Sep

You press Archive

Ram ThapaWelder, India11 Sep

Candidate archived

It is done, and Undo is one press away

One event, one message

An event produces one message in one place. When an offer is not sent, you see one error, not also a notification. A mention you are already reading does not arrive again as a notification. While a dialog is open, a message about its work appears inside the dialog, where you are looking.

What a screen reader hears

The page keeps one polite live region. Toasts, the end of a long task and newly loaded content speak through it once. Only an error that appears after you act speaks as an alert. No message takes focus, except a dialog and the message at the top of a form.

<!-- present from the moment the page loads, and kept -->
<div role="status" aria-live="polite" class="visually-hidden"></div>

Permitted and not permitted

Permitted

Archive at once, then Undo in a toast
You keep working and can still take it back.

Not permitted

Are you sure? before archiving
Archiving can be undone. The question only slows you down.
A toast and a notification for one offer that was not sent
You hear about one event twice.

NextModality

Feedback

Maps each event that needs a message to one place: a toast, an inline message, a field error, a notification, a dialog or a progress indicator.

Kind: pattern
Page: https://design.werklist.com/patterns/feedback
Version: 2.1.2

When to use it

Deciding how to report the result of an action
Deciding how to report a condition, a failure or an arrival

When not to use it

Two messages for one event
A dialog for an action that can be undone
A toast for a condition that lasts
A notification for what is already on screen

Rules

The change shows where the reader made it: no message. The change is the confirmation.
The reader's action changed something out of view, or can be undone: a toast.
The reader's action did not go through: an error toast, or an error inline message when the page cannot go on.
A condition of the page or panel the reader is on: an inline message at its top.
A value the form cannot accept: an error under the field.
Something happened elsewhere, or someone else did it: a notification.
An act that cannot be undone needs a decision: a dialog.
Work is under way: a skeleton, a progress bar or a spinner.
Interrupt only for a decision.
Undo before confirm. A reversible action runs at once and offers Undo in a toast. A dialog is kept for what cannot come back.
One event, one message, one place. When an offer is not sent, you see one error, not also a notification. A message about the work of an open dialog appears inside the dialog.

Accessibility

The page keeps one polite live region, present from the moment it loads.
Toasts, the end of a long task and newly loaded content speak through it once.
Only an error raised by the reader's action speaks as an alert.
No message takes focus, except a dialog and the message at the top of a form.

Content

The result, in the past tense: 'Candidate archived'
The condition, then what it means: 'You are offline. Some actions wait until the connection is back.'
The failure, then the next step: 'The offer was not sent. Try again.'

JSON

{
  "title": "Feedback",
  "path": "/patterns/feedback",
  "url": "https://design.werklist.com/patterns/feedback",
  "text": "https://design.werklist.com/agent/patterns/feedback",
  "summary": "Which of toast, inline message, dialog and notification answers which event.",
  "version": "2.1.2",
  "kind": "pattern",
  "name": "Feedback",
  "purpose": "Maps each event that needs a message to one place: a toast, an inline message, a field error, a notification, a dialog or a progress indicator.",
  "use": [
    "Deciding how to report the result of an action",
    "Deciding how to report a condition, a failure or an arrival"
  ],
  "avoid": [
    "Two messages for one event",
    "A dialog for an action that can be undone",
    "A toast for a condition that lasts",
    "A notification for what is already on screen"
  ],
  "rules": [
    "The change shows where the reader made it: no message. The change is the confirmation.",
    "The reader's action changed something out of view, or can be undone: a toast.",
    "The reader's action did not go through: an error toast, or an error inline message when the page cannot go on.",
    "A condition of the page or panel the reader is on: an inline message at its top.",
    "A value the form cannot accept: an error under the field.",
    "Something happened elsewhere, or someone else did it: a notification.",
    "An act that cannot be undone needs a decision: a dialog.",
    "Work is under way: a skeleton, a progress bar or a spinner.",
    "Interrupt only for a decision.",
    "Undo before confirm. A reversible action runs at once and offers Undo in a toast. A dialog is kept for what cannot come back.",
    "One event, one message, one place. When an offer is not sent, you see one error, not also a notification. A message about the work of an open dialog appears inside the dialog."
  ],
  "accessibility": [
    "The page keeps one polite live region, present from the moment it loads.",
    "Toasts, the end of a long task and newly loaded content speak through it once.",
    "Only an error raised by the reader's action speaks as an alert.",
    "No message takes focus, except a dialog and the message at the top of a form."
  ],
  "content": [
    "The result, in the past tense: 'Candidate archived'",
    "The condition, then what it means: 'You are offline. Some actions wait until the connection is back.'",
    "The failure, then the next step: 'The offer was not sent. Try again.'"
  ]
}

Raw file: https://design.werklist.com/agent/patterns/feedback