A benefits modal is an entry point for existing users that focuses their attention on a large or impactful update (for information on how we size first impressions see user journey sizes). The modal can be followed by a series of spotlights to highlight changes and benefits at the right time and place.
The benefits modal component is made up of the following elements:
Illustration: Should be composed of metaphorical imagery that relates to the content or benefit (see best practices below).
Title: A primary heading (h600). The title provides a concise overview of the contents of the journey.
Message: The contents of the dialog. See content guidelines below.
Actions: Contains a maximum of two centered buttons. A primary action and some sort of dismiss button. The main action should be self-describing action verbs ('Get started' instead of 'OK').
Blanket: Covers the content underneath the modal, so that the focus is on the modal, and the content beneath is not accidentally selected.
All first impressions should complement rather than compete with each other. Walk through the entire end-to-end journey that your new experience is a part of. This can help highlight where you may be repetitive or where steps may not be needed. Less is more.
Try not to overwhelm users with too much information at once. Focus on the top two to three benefits and then gradually introduce changes over time.
Offer a dismiss option at each point in the journey.
make complex ideas more accessible
should be displayed as a spot hero image that is metaphorical and designed in conjunction with UI copy
are used to efficiently convey brand personality
are a tool to guide people in the right direction or let them know what to expect
Use the title to communicate the main benefit in an active and personalized way, for example:
"Manage your issues", instead of "Issue types"
"Easily add fields", instead of "Fields"
Titles are a good place to add wink.
Try to personalize where you can, for example:
"A better experience for your team", instead of "Better team experiences"
Try to limit titles to three words, although four words are permissible if you are using a short article like “an”, “a”, or “the”.
Try to keep message length to less than three lines at the product's minimum supported size.
Don't just point out what the feature or functionality is. Tell people why it's important at this point in time.
Be considerate of people's time and patience. Be short and to the point, and avoid using company jargon.
Include copy to supplement illustrations.
Use alt text for illustrations.