This is the first article in the series about all the different types of dialogs and notifications that are used in the Moon Design System. We will explore how to make a distinction between these types, and how our designers pick a certain type to deliver the right message to our product users.
There is a multitude of methods and ways to communicate important and not so important information to the product users. While it is pretty clear how to display urgent and important messages the rest might become quite confusing, especially for the designer is new to the design system and the product itself.
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.
Messages with high urgency are the ones that require the customer’s immediate action in order to have access to the full functionality of the product.
Example: ask the customer to go through KYC (Know Your Customer) procedure to unlock the possibility to deposit and withdraw from the product’s wallet.
Medium urgency messages are the ones notifying the customer about features and opportunities that will benefit them and improve the overall experience.
Example: notify the customer that their bonus code will soon expire.
Low urgency messages are status change messages like “Email verified” or “Transaction failed”, as well as action response messages like “Site language changed” or “Link copied”. They also include general information regarding the product’s services and functionality.
Example: information regarding minimum and maximum deposit amounts.
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.
In some design systems, a modal dialog can be dismissed after the user clicks or taps anywhere outside the dialog, in others, modal dialogs can be dismissed only by interaction with the dialog itself — clicking any of the dialog buttons or Close button.
In Moon Design System we call this component modal dialog and we leave it to the product designer to choose between different header options and if it will include the Close button or not. The overlay is mandatory. The ability to dismiss modal dialogs by clicking on the overlay or restricting is customisable.
MDS name: Modal Dialog
Message urgency: High
Similar components in other design systems: Basic Dialog (Material Design 3), Modal dialog (Carbon Design System), Dialog or Alert (Blueprint Design System), Modal dialog (Atlassian Design System).
Persistence: Customisable. Can be set up to appear one time (until site cookies are erased), once per session, or on every page refresh or navigation between pages.
Motion: appears on top of the main content, making the rest of the content not accessible until the customer interacts with the dialog. No additional animation.
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.
Also, designers might use a combination of different elements. For example, a snack bar displayed right after some action or event paired with a banner, displayed on a related page above the content.
Let’s look at the definitions and explore the differences between those types.
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.
In Moon Design System we provide a lot of variations for the popover component, which has anatomy very similar to the modal dialog component except for the overlay.
MDS name: Popover
Similar components in other design systems: Toast Notification (Carbon Design System), Dialog or Alert (Blueprint Design System), Inline Dialog (Atlassian Design System).
Message urgency: Medium
Persistence: Customisable
Motion: appears on top of the main content in the bottom of the page (mobile) or left bottom corner (desktop). Sliding animation when appearing and disappearing.
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.
In Moon Design System we restrict banner component usage to one per page, allowing our users to either dismiss it by using the Discard or Close button or ignore it altogether. The banner message should consist of no longer than a one-line header (optional), one-sentence description, and one primary call-to-action (optional). It could also include a link to another product page, where users can find more information regarding the notification.
MDS name: Banner
Similar components in other design systems: Snackbar (Material Design 2), Inline Notification (Carbon Design System), Toast & Callout (Blueprint Design System), Banner (Atlassian Design System).
Message urgency: Medium, Low
Persistence: Persistent. If dismissed reappears on page re-entry.
Motion: appears on top of the main content in the bottom of the page (mobile) or left bottom corner (desktop). Sliding animation when appearing and disappearing.
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.
Moon Design System now has a snackbar component to use for short status updates. It has a fixed width, allows 1 or 2 lines of text, and has an optional button and icon.
On the desktop layout, a snackbar appears in the bottom left corner. On the mobile snackbar position depends on the type of the message:
- Messages that require no interaction are displayed on top of the screen
- Messages that include a button are displayed on the bottom of the screen
Snackbar should be in contrasting colour for status messages (i.e. black if the background page color is white as default options). Also, the snackbar background is customisable. Designers can, for example, choose green for success messages, red for failure messages, or orange for warnings.
MDS name: Snackbar
Message urgency: Low
Similar components in other design systems: Banner (Material Design 2), Toast Notification (Carbon Design System), Toast (Blueprint Design System)
Persistence: Not persistent
Motion: Appears on top of the main content. Sliding animation when appearing and disappearing. No animation when the button is clicked.
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.
Moon Design System’s mission is to create a tool that will reduce the time spent on routine and provide an opportunity for inspiration and innovation. Taking our approach in selection and customisation of the most suitable components will improve overall design quality, efficiency, and agility.
