Notification and feedback patterns

Use these notification and feedback patterns to communicate timely information to users.

Status
alpha

This is an ALPHA pattern, and we need your feedback!

If you have feedback or ideas on this particular pattern, please create a GitHub Discussion. If you have feedback on the documentation of patterns as a whole, please let us know. We need your feedback to make our patterns better!


Ingredients#

Each notification or feedback pattern uses one or more of these components.

Alert

Component composition

Create a composition with Card, Heading, and Paragraph for in-page messaging.

// import all components for Notification and feedback patterns
import {
Alert,
Toast,
Input, Label, HelpText,
Button, Modal, ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading,
Card,
Heading,
Paragraph
} from '@twilio-paste/core';

Usage#

General usage#

Pairing thoughtful content writing with the appropriate UI elements can help you establish trust with customers by notifying them of relevant information at just the right time. Use these patterns only when the user needs to be notified.

In general, notifications should close when a user leaves the page. A notification should follow a user through the product only in the most critical cases, like an alert informing a customer that their paid account won’t renew soon because of expired billing information.

Too many notifications that appear for too long may lead to alert fatigue, causing users to ignore important information.

There are 3 levels of notifications and feedback:

  • System-initiated notifications: Information that’s not triggered by a user action and is related to system issues.
  • Feedback indicators: Acknowledgment of a user action, like submitting a form or pressing a “Copy code” button.
  • Notification centers and reminders: Currently, these are highly specific to products’ business needs and should be treated as a product feature, rather than a pattern. While the implementation of a notification center might use Paste components, guidelines specific to a notification center won’t be covered in this page.

Notifications in high-emotion or high-stress situations

For high-emotion or high-stress parts of the customer journey, use a component that appropriately matches the customer's level of emotion. For example, to confirm that a customer has successfully upgraded their account, you may want to use a full-page confirmation that celebrates the moment, instead of a simple toast.

Notifications and feedback can come in 4 variants:

  • Success: Confirms a successful or completed action.
  • Error: Communicates critical information that's actively preventing a user from continuing a flow.
  • Warning: Communicates critical information that will help a user avoid a potential issue, but won’t prevent them from continuing their immediate goal.
  • Neutral: Informs a user of general changes, or processes that have been triggered by a user action but will take time to finish.

Accessibility#

Give users enough time to read a notification message, make a decision, and act on their decision. Users’ reading speeds, vision levels, literacy levels, dexterity, and familiarity with Twilio products can all affect how much time they’ll need to interact with a notification.

Visit the Alert, Modal, Form element, and Toast pages for more specific guidelines on how to implement each component accessibly.

Notification and feedback levels#

System-initiated notifications#

To communicate information from the system that isn't triggered by a user action, use an alert, especially for high-priority or time-sensitive changes to the system.

Screen with alert informing users of a server error

Feedback indicators#

To communicate feedback on a user action, use a toast, modal, inline messaging, and/or in-page messaging (e.g., full-page confirmation).

While you’ll only need one type of feedback indicator in most cases, pairing 2 feedback indicators can help give users more clarity in completing a complex flow. For example, when a user submits a long form with errors, you can show an error toast that lets users know they need to fix a form, while also showing inline errors on each incorrect field.

Standard feedback indicator (Toast)#

Use a Toast when

  • You’re communicating a direct response to a user action. Example: "asset.jpg" successfully added.
  • You're providing only one link or button to help a user continue a flow.
  • There’s no other way for a user to immediately know that their action was acknowledged. For example, a Toast may not be needed when a modal closes after a user presses “Save” in it. The modal dismissal may sufficiently communicate that the information in the modal was saved, without needing further messaging.

Screen with toast confirming a password reset email has been sent

Toasts in Flex and SendGrid?

While the recommendation is to migrate to Paste Toast components to acknowledge user actions, Flex and SendGrid currently use banners for this purpose.

These banners generally exist at the top of the page, especially for page-level actions, with a limit of 3 per page. The oldest one is removed when a new one displays. In Flex, banners may be placed at the top of a specific section where the action was taken.

Interruptive feedback indicator (Modal)#

Use a Modal when

  • You’re interrupting a user flow.
  • You’re focusing a user’s attention and confirming a definitive action at the end of a Modal flow.
  • You’re providing lengthy text, multiple links, or multiple buttons to help a user continue a flow.

Modal congratulating a user at the end of a Modal flow

Contextual feedback indicator (Inline messaging)#

Use contextual, inline messaging (e.g., inline errors on form fields) when

  • You’re communicating a direct response to a user action.
  • You’re providing links or buttons that are contextual to a UI element and help a user continue a flow.
  • You’re communicating dynamically changing content, like a progress bar.

Screen with inline error with anchor on a form field

High-emotion feedback indicator (In-page messaging)#

Use in-page messaging (e.g., full-page confirmation composition) when

  • You’re communicating a direct response to a high-emotion user action or flow.
  • You’re providing information that a user might want to copy, screenshot, or save, like a confirmation number or invoice details.

Full-page congratulations message on setting up a Twilio Messaging Service with SIDs to copy

Starter kits#

CodeSandbox#

Coming soon

Sketch#

Coming soon

Support

If you need support, please open a new issue in our GitHub repository. Please try to provide as much detail as possible in your issue.

Contributing

The Paste design system is open source and contributions are welcome. Check out the project on GitHub to learn more about contributing.

Copyright © 2020 Twilio, Inc.