Introduction to the world of dialogs and notifications

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

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

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

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

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

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

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

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.

--

--

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