![\"\"](\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/1hE3_tvuBapBRvYbnmclqEw.png\" "\\"UI")
<\/a>UI components friction scale are from 1 to 10 where 10 has the highest friction<\/p>\nWhy do we need this?<\/h2>\n
Communicating with users is crucial.<\/p>\n
Messages can be delivered in many ways and by different mediums. Different stakeholders in the company want to deliver different kinds of messages \u2014 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.<\/p>\n
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.<\/p>\n
So, how do we make the right choice?<\/p>\n
Push Notifications<\/h2>\n
(10) Highest friction<\/strong><\/p>\n 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\u2019t currently using the app.<\/p>\n Use push notifications to:<\/strong><\/p>\n 1. Deliver high priority call-to-action messages<\/p>\n 2. Let users know of something valuable for them<\/p>\n How to use push notifications?<\/strong><\/p>\n 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.<\/p>\n Examples:<\/p>\n (9) High friction<\/strong><\/p>\n 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.<\/p>\n It is the highest friction inducing form of showing content inside the app, so its use should be justified.<\/p>\n Use View to:<\/strong><\/p>\n 1. Focus and engage users more deeply with specific content and its related actions.<\/p>\n 2. Show complicated data that requires a lot of on-screen real estate.<\/p>\n How to use a full-screen view?<\/strong><\/p>\n The purpose of a full-screen view is to bring users\u2019 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.<\/p>\n Examples:<\/p>\n (8) High friction<\/strong><\/p>\n Dialogs appear without warning, requiring users to stop whatever it is they\u2019re currently doing. Use them sparingly, since not every choice or setting change justifies such an interruption.<\/p>\n Use dialog boxes to:<\/strong><\/p>\n 1. Keep users in a certain flow \u2014 allow users to perform a particular action without exiting the screen they\u2019re currently on.<\/p>\n 2. Capture users\u2019 focus and remove secondary distractions.<\/p>\n 3. Bring attention to a choice users need to make or<\/p>\n to specific information they need to know before moving forward.<\/p>\n How to use dialog boxes?<\/strong><\/p>\n Dialog boxes don\u2019t fill up the entire screen and users can perform an action to make them go away. They\u2019re interactive notifications meant to inform users before performing an important action.<\/p>\n Examples:<\/p>\n (7) High friction<\/strong><\/p>\n Banners display important, succinct messages and provide optional actions for users.<\/p>\n They should be displayed at the top of the screen, below a top app bar. Since their location is consistent and they\u2019re non-modal, they allow users to either ignore them or interact with them at any time.<\/p>\n Use banners to:<\/strong><\/p>\n 1. Inform users of site-wide issues.<\/p>\n 2. Display warnings or errors that will directly impact users\u2019 ability to<\/p>\n complete certain tasks.<\/p>\n How to use banners?<\/strong><\/p>\n A banner persists over a session and appears without any action from the user\u2019s side.<\/p>\n When scrolling, banners typically move with the content and scroll off the screen. Only one banner should be shown at one time.<\/p>\n Examples:<\/p>\n (6) Medium friction<\/strong><\/p>\n A Growl displays a promoted message without interrupting the ongoing use of the app.<\/p>\n 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.<\/p>\n It floats on top of all other elements at the bottom left or right corner of the screen and needs to be explicitly dismissed.<\/p>\n Use growls to:<\/strong><\/p>\n 1. Promote certain communications without disrupting users.<\/p>\n 2. Show warnings or alerts that were triggered in the background, not by a process but by a state, and don\u2019t have an immediate effect on users.<\/p>\n How to use growls?<\/strong><\/p>\n 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.<\/p>\n Examples:<\/p>\n (5) Medium friction<\/strong><\/p>\n 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\u2019t interrupt the user experience and don\u2019t require any user input to disappear.<\/p>\n Use snackbars to:<\/strong><\/p>\n Provide lightweight feedback about an operation.<\/p>\n How to use snackbars?<\/strong><\/p>\n 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.<\/p>\n Examples:<\/p>\n (4) Low-Medium friction<\/strong><\/p>\n Popovers contain helpful information like explanation of context. They appear next to the relevant element and may contain actions related to it.<\/p>\n They can be triggered independently or by a certain action.<\/p>\n Use popovers to:<\/strong><\/p>\n 1. Provide extra information that might be useful, combined with the question mark icon.<\/p>\n 2. Provide direction for filling out a form.<\/p>\n 3. Offer more actions related to a certain element in the interface.<\/p>\n How to use popovers?<\/strong><\/p>\n 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.<\/p>\n Examples:<\/p>\n (3) Low friction<\/strong><\/p>\n Callouts are text excerpts, used as a visual cue to draw attention to the text. They\u2019re 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.<\/p>\n Use a different color for callouts that contain error messages.<\/p>\n Use callouts to:<\/strong><\/p>\n 1. Warn users before asking them to take action. This is usually done in anticipation of a significant change.<\/p>\n 2. Let users know something has gone wrong after they\u2019ve tried to do something \u2014 as an error message.<\/p>\n 3. Let users know they have successfully completed an action \u2014 as a success message.<\/p>\n 4. Alert users about additional information without requiring an action \u2014 as an informative message.<\/p>\n How can it be used?<\/strong><\/p>\n 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.<\/p>\n Examples:<\/p>\n (2) Low friction<\/strong><\/p>\n 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\u2019t explain the bigger picture or the entire task flow.<\/p>\n Use tooltips to:<\/strong><\/p>\n 1. Provide information for unlabeled icons.<\/p>\n 2. Provide descriptions or explanations for their paired element.<\/p>\n 3. Don\u2019t use tooltips for information that is vital to task completion.<\/p>\n How can it be used?<\/strong><\/p>\n 1. Provide brief and helpful content inside the tooltip.<\/p>\n 2. Support both mouse and keyboard hover.<\/p>\n 3. Use tooltip arrows when multiple elements are nearby.<\/p>\n 4. Ensure it has moderate contrast against the background.<\/p>\n 5. Position the tooltip so it doesn\u2019t block related content.<\/p>\n 6. Use tooltips consistently throughout your site.<\/p>\n Examples:<\/p>\n (1) Lowest friction<\/strong><\/p>\n Email messages are relayed through email servers, provided by all Internet Service Providers (ISP).<\/p>\n 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.<\/p>\n Use emails to:<\/strong><\/p>\n 1. Activate user accounts<\/p>\n 2. Deliver welcome or onboarding messages<\/p>\n 3. Invite or share content with other users<\/p>\n 4. Notify about activity<\/p>\n 5. Send reports and dashboards<\/p>\n 6. Reset password or perform two-factor authentication<\/p>\n 7. Notify users regarding security issues or changes in their account<\/p>\n How can it be used?<\/strong><\/p>\n While emails are low-friction, they should be fully customizable so each user can tailor them to their own interests.<\/p>\n Emails should always be personalized to match the current progress and state of the recipient within the product.<\/p>\n Emails can contain both marketing and product content, but the message should always be clear and focused.<\/p>\n![\"\"](\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/1eMedcSb67JyZxKjxhbU4Jw.gif\" "\\"UI")
<\/a>Push Notifications<\/p>\n\n
View<\/h2>\n
![\"\"](\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/1ncLPQNJZ-G6kSeLsJO9GQ.gif\" "\\"UI")
<\/a>View<\/p>\n\n
Dialog \/ Modal<\/h2>\n
![\"\"](\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/1lNb_b4qvRp5aq8z3k2h7eA.gif\" "\\"UI")
<\/a>Dialog \/ Modal<\/p>\n\n
Banner<\/h2>\n
![\"\"](\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/1Fi2_UhDMIiIbdQMPtOM8Qg.gif\" "\\"UI")
<\/a>Banner<\/p>\n\n
Growl<\/h2>\n
![\"\"](\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/1bcIdYzEBLmn8KfQEc0kFxA.gif\" "\\"UI")
<\/a>Growl<\/p>\n\n
Snackbar\/Toast<\/h2>\n
![\"\"](\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/18mJB3g-wHC5iof0NoT0PzQ.gif\" "\\"UI")
<\/a>Snackbar \/ Toast<\/p>\n\n
Popover<\/h2>\n
![\"\"](\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/1CI6Aqegz3i7Vq24NYcIkDA.gif\" "\\"UI")
<\/a>Popover<\/p>\n\n
Callout<\/h2>\n
![\"\"](\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/1bDf8jloBfR-NN7VG0UJ2g.gif\" "\\"UI")
<\/a>Callout<\/p>\n\n
Tooltip<\/h2>\n
![\"\"](\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/1ckCHMwHZKPUwelz0JQVthA.gif\" "\\"UI")
<\/a>Tooltip<\/p>\n\n
Email<\/h2>\n
![\"\"](\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/1V3TjpWABv1FFnhGYqwY7SA.gif\" "\\"UI")
<\/a>Email<\/p>\n