Also known as:
BannerConfirmationAcknowledgmentMessageAlert

Global Notification

A global notification is a message object used for system-level notifications that inform the user about system status such as logging in and background processes like data imports.

Need to know

  • A Global notification is always positioned at the top of the screen (above the Navigation Bar) and stretches the full width of the viewport.

Options

Modes:

  • Persistent
  • Dismissible

To keep in mind

Global Notifications are used to inform the user of system level messages.

  • Anatomy:
    • Description: a succinct description to inform the user.
    • Call to action (optional): hyperlinks can be included to provide the user with a clear call to action.
    • Unlike other notifications, the Global Notification does not require a heading, to ensure the whole message is considered critical.
  • Styles:
    • They are visually different to other notifications, to ensure screen prominence and importance.
    • A Global Notification is always positioned at the top of the screen (above the Navigation Bar) and stretches the full width of the viewport.
  • Global notifications are system triggered, not user triggered.
  • Dismissible or persistent:
    • Use Persistent notifications when the information continues to be relevant to the next task, e.g. The server is down, all pages will continue to be broken.
    • Use Dismissible notifications when the information has been acknowledged and the message is no longer relevant to the next task, e.g. your data import successfully finished. Refreshing the page on dismissible notifications will not remove them

When to use

  • Positive

    System messages: e.g. Account has been upgraded, new feature added. Background messages: e.g. Data import has successfully finished

  • Negative

    System messages, e.g. Server status - is down Background messages: e.g. Data import failed

  • Informative

    System messages, e.g. Logging in, To indicate demo data in use Background processes, e.g. Imported data is currently being processed

  • Cautionary

    System messages, e.g. Unreliable network connection Background processes, e.g. Data import finished successfully, but may have problems

When not to use

  • When you are speaking directly to a piece of content, use Inline Notifications which can be positioned closer to it.
  • When you are notifying a user of an action they have taken, provide visual feedback with a Toast Notification.
  • When an action is user triggered and you need to inform the user, use a Confirmation Modal with relevant Mood, e.g. Informative Confirmation Modal

See also

  • Inline notification: Inline notification appear within content areas as close as possible to the thing that it’s about. It is used for contextual information. \

  • Toast notification: Toast notification. It is used immediately after a specific event such as a user action that does not relate to an object on the page. For example, confirmation of deleted items.

External Links

Here are some examples of other existing design systems: