In this article, Iâll explain how to choose the right UI component for the type of message you want to deliver to your users. For this purpose, I created a friction scale which rates UI components according to the level of friction they create for users.
UI components friction scale are from 1 to 10 where 10 has the highest friction
Why do we need this?
Communicating with users is crucial.
Messages can be delivered in many ways and by different mediums. Different stakeholders in the company want to deliver different kinds of messages â product owners might want to let users know about new features, marketing managers want to upsell or advertise, and support agents want to help users complete certain tasks or flows.
Creating a structured scale for different types of messages will help us organize and prioritize our messages. This will help our users understand us better and hopefully, even love us.
So, how do we make the right choice?
Push Notifications
(10) Highest friction
Push Notifications
When allowed, push notifications deliver high friction messages on mobile and web applications. They show up on top of everything else, usually accompanied by a sound, even if the user isnât currently using the app.
Use push notifications to:
1. Deliver high priority call-to-action messages
2. Let users know of something valuable for them
How to use push notifications?
To be able to send push notifications to your users, you need to first ask for their permission. Ask users for permissions at the exact moment they might benefit from granting it. Use notifications wisely and cautiously so users will develop empathy towards your messages, rather than resentment.
Examples:
- New in app message
- New opportunity according to current location
View
(9) High friction
View
Some content is best experienced in a separated ,dedicated view, allowing users to focus on one individual object and its related actions at a time.
It is the highest friction inducing form of showing content inside the app, so its use should be justified.
Use View to:
1. Focus and engage users more deeply with specific content and its related actions.
2. Show complicated data that requires a lot of on-screen real estate.
How to use a full-screen view?
The purpose of a full-screen view is to bring usersâ focus to a surface that appears in front of all other elements on the screen and goes away only when they perform a specific action.
Examples:
- Object View
- 404 screen
- Login screen
Dialog / Modal
(8) High friction
Dialog / Modal
Dialogs appear without warning, requiring users to stop whatever it is theyâre currently doing. Use them sparingly, since not every choice or setting change justifies such an interruption.
Use dialog boxes to:
1. Keep users in a certain flow â allow users to perform a particular action without exiting the screen theyâre currently on.
2. Capture usersâ focus and remove secondary distractions.
3. Bring attention to a choice users need to make or
to specific information they need to know before moving forward.
How to use dialog boxes?
Dialog boxes donât fill up the entire screen and users can perform an action to make them go away. Theyâre interactive notifications meant to inform users before performing an important action.
Examples:
- Confirm a deletion
- Making a BIG announcement
- Critical error message
Banner
(7) High friction
Banner
Banners display important, succinct messages and provide optional actions for users.
They should be displayed at the top of the screen, below a top app bar. Since their location is consistent and theyâre non-modal, they allow users to either ignore them or interact with them at any time.
Use banners to:
1. Inform users of site-wide issues.
2. Display warnings or errors that will directly impact usersâ ability to
complete certain tasks.
How to use banners?
A banner persists over a session and appears without any action from the userâs side.
When scrolling, banners typically move with the content and scroll off the screen. Only one banner should be shown at one time.
Examples:
- NPS survey
- Trial ended message
- License expired notification
Growl
(6) Medium friction
Growl
A Growl displays a promoted message without interrupting the ongoing use of the app.
In addition to text, it usually shows an image or an icon, as well as a CTA that contains a deep link or an external link.
It floats on top of all other elements at the bottom left or right corner of the screen and needs to be explicitly dismissed.
Use growls to:
1. Promote certain communications without disrupting users.
2. Show warnings or alerts that were triggered in the background, not by a process but by a state, and donât have an immediate effect on users.
How to use growls?
Display growls at the bottom left or right corner of the screen. They can be triggered by background state and/or by a person from your marketing, support or product department who wants to promote an announcement.
Examples:
- New feature announcement
- Background warning update
Snackbar/Toast
(5) Medium friction
Snackbar / Toast
Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, at the bottom part of the interface. They shouldnât interrupt the user experience and donât require any user input to disappear.
Use snackbars to:
Provide lightweight feedback about an operation.
How to use snackbars?
Snackbars automatically disappear after four to ten seconds, to allow users enough time to read the message, without blocking the information behind them for too long. Snackbars can optionally include a single action and can stay on-screen permanently, until swiped off.
Examples:
- Message sent successfully
- Document ready for download
Popover
(4) Low-Medium friction
Popover
Popovers contain helpful information like explanation of context. They appear next to the relevant element and may contain actions related to it.
They can be triggered independently or by a certain action.
Use popovers to:
1. Provide extra information that might be useful, combined with the question mark icon.
2. Provide direction for filling out a form.
3. Offer more actions related to a certain element in the interface.
How to use popovers?
A popover is displayed upon tapping or clicking a certain element on the screen. Usually a popover appears with an arrow pointing at the pressed button so it remains constantly visible to the user.
Examples:
- Explanation about a new element
- Information tooltip including an action
Callout
(3) Low friction
Callout
Callouts are text excerpts, used as a visual cue to draw attention to the text. Theyâre used to help direct users towards important pieces of information. They should appear on top of the element they refer to, without blocking any other part of the interface. They should be short, easy to scan, informative and clear.
Use a different color for callouts that contain error messages.
Use callouts to:
1. Warn users before asking them to take action. This is usually done in anticipation of a significant change.
2. Let users know something has gone wrong after theyâve tried to do something â as an error message.
3. Let users know they have successfully completed an action â as a success message.
4. Alert users about additional information without requiring an action â as an informative message.
How can it be used?
Callouts can contain an icon, a title and a message. There are four different types of callouts: success, warning, alert & informative. Deciding whether to use a callout or a different component depends on the level of information you want to deliver.
Examples:
- Announcing new elements were added
- Warning about a settings change that can harm your computer
Tooltip
(2) Low friction
Tooltip
A tooltip is a brief, informative message that appears when a user interacts with an element within a graphical user interface (GUI). Tooltips are usually triggered in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture. Tooltips are highly contextual and specific and donât explain the bigger picture or the entire task flow.
Use tooltips to:
1. Provide information for unlabeled icons.
2. Provide descriptions or explanations for their paired element.
3. Donât use tooltips for information that is vital to task completion.
How can it be used?
1. Provide brief and helpful content inside the tooltip.
2. Support both mouse and keyboard hover.
3. Use tooltip arrows when multiple elements are nearby.
4. Ensure it has moderate contrast against the background.
5. Position the tooltip so it doesnât block related content.
6. Use tooltips consistently throughout your site.
Examples:
- More info
- User Onboarding guide
- New small feature announcement
(1) Lowest friction
Email
Email messages are relayed through email servers, provided by all Internet Service Providers (ISP).
Emails are transmitted between two dedicated server folders: sender and recipient. A sender saves, sends or forwards an email message, whereas a recipient reads or downloads the email by accessing the email server.
Use emails to:
1. Activate user accounts
2. Deliver welcome or onboarding messages
3. Invite or share content with other users
4. Notify about activity
5. Send reports and dashboards
6. Reset password or perform two-factor authentication
7. Notify users regarding security issues or changes in their account
How can it be used?
While emails are low-friction, they should be fully customizable so each user can tailor them to their own interests.
Emails should always be personalized to match the current progress and state of the recipient within the product.
Emails can contain both marketing and product content, but the message should always be clear and focused.
Conclusion
Weâve seen many different types of messages used for different purposes. Choosing the right element depends both on the content and the context of the message.
Have fun in the world of non-disruptive messages!
Originally posted on Adam Shriki's Medium page.
