Informative & Decisional

How to choose the right messaging component

Linzi Berry
Oct 26, 2020 · 6 min read

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

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

  • 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

  • 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

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

Flow

  • 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

Info 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

  • 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

  • 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

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

Last thoughts

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!

Tap to Dismiss

Sweating the details so you don’t have to

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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