Introduction to the world of dialogs and notifications

Definition of urgency

There’re three commonly used levels of urgency: high, medium, and low. Each message and notification should be carefully assessed by the degree of its urgency in order to deliver it to the customer in the best way.

Message urgency: High

Modal dialog

For urgent and important messages, especially ones that require immediate action from the users, designers usually use modal dialog (also called pop-up or just modal). It blocks all interaction with the main product interface. The modal dialog that has a semi-transparent overlay (scrim) is sometimes called a lightbox.

Message urgency: Medium to low

Now, there is a multitude of ways to show non-urgent information: via toast or snack bar, banner, blindspot, bottom sheet or drawer, popover, tooltip, even using the same modal dialog, but without the overlay.

Popover

The main distinction from other types of dialogs and notifications for the popover is that its appearance is always triggered by the customer’s actions. Popovers in general are often used for displaying dropdown menus, filter options, or date and time selectors. In some design systems, popovers are a subset of dialogs containing a call-to-action button.

Banner

Banners are used to convey general messages or notifications specific to certain tasks or pages. Banners are displayed as a part of content unlike other notifications described above, having the same width as content on the page it is displayed on.

Message urgency: Low

Snackbar

By definition, a snackbar (or a toast) is meant to display a short status message without much interruption or distracting users from their activities. It is usually at the bottom of the screen in the middle or in the left corner depending on layout. The snackbar will pop up, stay displayed for a defined period of time and then disappear in the same manner. Usually, there are options to display snackbar messages with an icon, action buttons such as Undo or Retry, or even make it persistent and add a Close button.

  • Messages that include a button are displayed on the bottom of the screen

Conclusion

In this article, we defined urgency and had a quick review of the dialog and notification components in the Moon Design System that designers can choose from based on the message to be delivered to the customer.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store