Messaging overview

Messaging patterns detail how we communicate errors, warnings, successes, recommendations and general information on system status. Messages can be either generated immediately after a user performs an action, or can be generated by the system automatically in order to help someone understand and navigate a product.

A message is different from a status indicator in that it includes a more detailed written explanation.

Principles

Timely

Alerts, confirmations and information should be surfaced at the time that they are needed.

Brief

Messages should be brief and should not distract a user or get in the way of
completing a task. They shouldn’t appear too often in the experience.

Relevant

The information or alerts provided should be relevant to the surface a user is currently working on, and be placed near the sections they relate to.

Use cases

Below is a brief user journey of how messages work together along with other components and patterns based on practical use cases from Pinterest products.

Meet Claire

Claire Ọyáwálé is a Pinner who loves architecture, fine art and fashion. She also has a Pinterest Business account through her employer—a high-end shoe brand. Let's take a look at how she might typically interact with Messaging in the Pinterest product.

Alert indicator

Claire opens Pinterest on her phone to see a red dot on her Avatar. This isn’t a highly urgent issue, so we don’t display a prominent modal, banner or other message component just yet; just a little nudge that tells her she needs to look at her profile.

Mobile phone screen of a Pin close-up. There is a small red dot next to the user's profile in the bottom nav bar.
Note: Alert indicator is not currently a Gestalt component, but a Variant in other components like Tabs.

Warning bannercallout

Tapping on her profile leads her to a warning banner about needing to set a password for better security. Being that it’s prominent and at the top of the page, she figures it’s important, so she taps on the primary banner button to update her password.

Mobile phone screen of a Pinner profile with a BannerCallout Banner warning the user of an issue that needs to be fixed.

Success toast

After setting her new password, Claire gets a short and brief success toast just to verify that the changes went through. She is now ready to start pinning!

Mobile phone screen with a success toast message.

Error modal

As she Pins, Claire accidentally taps a link that leads to harmful content. Luckily, we can stop this by throwing an ModalAlert letting her know why she can’t continue. Claire goes back to find some other pins, then decides it’s time to get back to work.

Mobile phone screen with an error modal message.

Recommendation banner

Claire goes to her desktop to resume ads work for her employer, Dressy. She opens her Pinterest Business account on her desktop and navigates to the ads page. A recommendation message is placed right beneath the ad campaign that it refers to so she knows which ad campaign could use improvements. The recommendation is dismissible since it’s not required and may get in the way of glancing at all the other campaigns.

Desktop screen with a recommendation inside of a data table showing ad campaigns.

Confirmation modal

Claire decides to skip the recommendation for a moment and create an Idea Pin that needs more attention for an Ad campaign. As she organizes and deletes images and videos in her pins, she gets a confirmation modal confirming that she wants to delete an image, as this is irreversible. Being that this may happen multiple times in her edit flows, the option to not show again also appears. For destructive, irreversible tasks that are not part of creating and editing, we don’t provide a “don’t show again” option.

Desktop screen with a message confirming an action

Success banner vs Toast

Claire completes the Idea Pin and turns it into an ad campaign. After publishing it, she gets a Success Banner at the top of the page instead of a Toast since the messaging requires more wording for clarity. Luckily, the banner is still dismissible.

Desktop screen showing a success banner.

Time to relax

After a clear and easy messaging session, it’s time for Claire to relax and call it a day. Have fun Claire!