Informative & Decisional

How to choose the right messaging component

Linzi Berry
Tap to Dismiss

--

Product designers and engineers frequently ask our team to add features to our messaging components. They say something like: “I want to use this component, but I need you to add a button to it.” In the beginning this caused a lot of frustration on both sides and frequently resulted in either the designer / engineer not using the component or the our team adding a feature we didn’t agree belonged there. Now — we ask them to take a step back and tell us what message they were trying to convey versus the component they want to use and then walk them through our messaging decision tree.

Our messaging set is a combination of basics from Apple’s HIG Views and Google’s Material Design Dialogs and a handful of new components specific to our needs — hopefully this is useful to you. Because we couldn’t find a messaging decision tree of the basics online, we decided to create our own. We start by organizing our components into two fundamental types of messaging: Informative and Decisional:

Decisional messaging

Decisional messaging components are meant for performing an action. “Would you like to try this new feature?” where the decision is yes or no or “how many passengers are you picking up?” where the decision is between a set of numbers. Consider the following questions:

Sheet

A manually initiated, bottom anchored panel that lets users initiate tasks. Most commonly used as a menu of equal weighted options. Based of off Apple’s Action Sheet and MD’s Bottom Sheet.

  • Optional — the decision is not mandatory to proceed, can be dismissed
  • Utilitarian — use when all choices are equal / there is no primary action
Sheet: Android (left) & iOS (right)

Prompt Screen

A manually initiated screen that appears over the current interface. Most commonly used as an educational modal when a large amount of content is needed to explain a concept.

  • Optional — the decision is not mandatory to proceed, can be dismissed
  • Promotional — needs a highly visible primary button
  • Blocking — the content on the screen behind it is not important to make the decision
Prompt Screen

Prompt Panel

A systematically or manually initiated panel that appears over the current interface to offer the user a choice. It can be systematically (with a timer) or manually dismissed. Most commonly used as lightweight education for new features with a button to try it out.

  • Optional — the decision is not mandatory to proceed, can be dismissed
  • Promotional — needs a highly visible primary button
  • Contextual — the content on the screen behind it is important to make the decision
Prompt Panel

Alert

A systematically initiated modal that conveys important information related to the state of the app or device, usually negative. Most commonly used for when a payment doesn’t go through or the app needs to be updated. Based of off Apple’s Alert and MD’s Alert.

  • Mandatory — the user must take an action to proceed
  • Unexpected — the decision is a surprise to the user
Alert

Flow

Part of the flow or “Golden Path” of the user experience and should use the current interface, panel or otherwise — not a messaging template.

  • Mandatory— the decision is mandatory to proceed
  • Promotional — needs a highly visible primary button
  • Blocking — the content on the screen behind it is not important to make the decision

We included this in our modal decision tree because it’s important to know when you should be designing into the actual interface vs using a modal.

Informative messaging

Informative messaging components are meant for consuming information. “This feature does x, y, and z” or “the action you performed was successful.” They do not provide actions outside of dismissal. Consider the following questions:

Info Panel

An Info Panel is the sister component to a Prompt Panel with the only difference being the lack of call to action. They are ideal for when a user taps a ‘more information’ button and the content on the screen is relevant to the content in the panel.

  • Responsive — appears in response to an action
  • Long —holds verbose information, including illustration
Info Panel

Over time we found that most of our designers still want a main button to acknowledge the information given and close the modal vs relying solely on the close button in the upper right-hand corner. If we were to do it all over again, Prompt Panel and Info Panel would be the same component.

Info Panel optional Content

Toast

Toasts are ideal for delivering timely lightweight information to users in response to an action they took. Based of off Apple’s Notifications and MD’s Snackbar.

  • Responsive — appears in response to an action
  • Brief — holds concise information, doesn’t include illustration
Toast

Designers love using Toasts because they’re so light-weight and appear over the screen content. Originally we avoided decisional Toasts to follow accessibility guidelines — it’s transient nature made it difficult for users with screen readers. However, a product team came to us with a viable use case for actionable Toasts (a missed call) and we worked with our accessibility team to #makeithappen. We still try to avoid them as much as possible and made it a requirement that the main copy in decisional toasts alludes to the action so the entire toast becomes a button.

Example of Toast with action

Banner

Similar content to an alert, but without the ability to take an action. Most commonly used to let the user know they’ve traveled outside of a service area or lost internet connection. Based off of MD’s Banner.

  • Instructional — information should guide the user
  • Universal — the information is relevant on any screen
Banner

We’re considering getting rid of this component because it is so rarely used.

Tooltip

A small modal with a tail used to draw attention to and give more information about a particular piece of UI. Most commonly used to call out new or updated features on UI packed screens. Based off of Apple’s Help Tags and MD’s Tooltip.

  • Instructional — information should guide the user
  • Anchored — always nearby and moves with an associated element
Tooltip

Last thoughts

Consider best practices for each platform (Android, iOS and web) before building a component that is intended to work for all. Build “building-block” components, like an image & text lock-up and stacked buttons, before building the larger messaging component so they can be easily reused and updated.

Thank you Kevyn Arnott for helping me to develop these components & framework. I’m Linzi Berry, currently product design manager of the team. My hope in documenting system design thinking and process is to contribute and learn from the design community at large. Please subscribe!

--

--