Messaging overview Pilot
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.
Warning callout
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.
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!
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.
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.
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.
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.
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!