{"id":36905,"date":"2022-10-05T02:58:00","date_gmt":"2022-10-05T09:58:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=36905"},"modified":"2026-01-26T13:05:18","modified_gmt":"2026-01-26T21:05:18","slug":"cognitive-friction-good-or-bad","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/","title":{"rendered":"Cognitive Friction in UX Design \u2013 Good or Bad?"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/IvbM6Ux-ieeoKR0eFyTaIKIEXwaHKoeYsI9Jm28lFrbZRT01R6mePTX4Eaz0EYoY3Abw2aPJRiV2rI7sWb9izAxlzQp2ln5iyrngpjcBm3mR3HymBbutgQKsM3iNiWGcrCxd_t8MZ13QCB9SPC_g8DJcCqgTcDCqCOQal5Pqo7YxjkNiyNnLlpju\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Incorporating cognitive friction to <strong><em>improve<\/em><\/strong> user experience sounds like an oxymoron, but it can have positive effects in the right circumstances. Friction is vital for protecting users and ensuring they don&#8217;t complete tasks accidentally.<\/p>\n\n\n\n<p>The more familiar users get with a digital product and design patterns, the more likely they are to work on autopilot, leading to errors and nonreversible actions. Cognitive friction is a strategy to avoid these issues and improve the user experience.<\/p>\n\n\n\n<div class=\"wp-block-yoast-seo-table-of-contents yoast-table-of-contents\"><h2>Table of contents<\/h2><ul><li><a href=\"#h-what-is-cognitive-friction\" data-level=\"2\">What is Cognitive Friction?<\/a><ul><li><a href=\"#h-6-types-of-user-friction-in-ux-design\" data-level=\"3\">6 Types of User Friction in UX Design<\/a><\/li><li><a href=\"#h-how-to-identify-cognitive-friction\" data-level=\"3\">How to Identify Cognitive Friction?<\/a><\/li><\/ul><\/li><li><a href=\"#h-what-are-some-examples-of-cognitive-friction\" data-level=\"2\">What are Some Examples of Cognitive Friction?<\/a><ul><li><a href=\"#h-example-1-broken-links\" data-level=\"3\">Example #1. Broken links<\/a><\/li><li><a href=\"#h-example-2-hiding-features\" data-level=\"3\">Example #2. Hiding features<\/a><\/li><li><a href=\"#h-example-3-unnecessary-steps\" data-level=\"3\">Example #3. Unnecessary steps<\/a><\/li><\/ul><\/li><li><a href=\"#h-when-is-cognitive-friction-good\" data-level=\"2\">When is Cognitive Friction Good?<\/a><ul><li><a href=\"#h-two-factor-authentication\" data-level=\"3\">Two-Factor Authentication<\/a><\/li><li><a href=\"#h-confirmation-dialogs\" data-level=\"3\">Confirmation dialogs<\/a><\/li><li><a href=\"#h-user-and-task-verification\" data-level=\"3\">User and task verification<\/a><\/li><li><a href=\"#h-system-loading\" data-level=\"3\">System loading<\/a><\/li><\/ul><\/li><li><a href=\"#h-when-is-cognitive-friction-bad-and-solutions-for-improvement\" data-level=\"2\">When is Cognitive Friction Bad? (And solutions for improvement)<\/a><ul><li><a href=\"#h-design-inconsistency\" data-level=\"3\">Design inconsistency<\/a><\/li><li><a href=\"#h-too-many-steps\" data-level=\"3\">Too many steps<\/a><\/li><li><a href=\"#h-unfamiliar-patterns\" data-level=\"3\">Unfamiliar patterns<\/a><\/li><li><a href=\"#h-poor-communication\" data-level=\"3\">Poor communication<\/a><\/li><\/ul><\/li><li><a href=\"#h-reduce-friction-during-the-design-process-with-uxpin\" data-level=\"2\">Reduce Friction During the Design Process With UXPin<\/a><\/li><\/ul><\/div>\n\n\n\n<p>Solve complex usability issues and create digital experiences your customers love with the world&#8217;s most advanced end-to-end design tool. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to discover how UXPin can enhance your UX workflows.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-cognitive-friction\">What is Cognitive Friction?<\/h2>\n\n\n\n<p>Cognitive friction in UX occurs when a user interface or feature forces users to stop and think, increasing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-psychology-for-ux-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">cognitive load<\/a>. It can also refer to instances where features aren&#8217;t intuitive or don&#8217;t function as they&#8217;re supposed to.<\/p>\n\n\n\n<p>These &#8220;roadblocks&#8221; prevent or interrupt users from completing tasks, causing frustration that ultimately leads to product abandonment and fewer conversions.<\/p>\n\n\n\n<p>UX designers are taught to avoid these scenarios and reduce decision-making by creating seamless, uninterrupted user experiences, getting users to an end goal as efficiently as possible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-types-of-user-friction-in-ux-design\">6 Types of User Friction in UX Design<\/h3>\n\n\n\n<p>We have identified six primary types of user friction in UX design:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>UI friction<\/strong> \u2013 cluttered user interfaces and incorrect <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/\" target=\"_blank\" rel=\"noreferrer noopener\">design pattern<\/a> usage<\/li>\n\n\n\n<li><strong>Interaction friction<\/strong> \u2013 UI elements aren&#8217;t intuitive and don&#8217;t function as expected<\/li>\n\n\n\n<li><strong>Language friction<\/strong> \u2013 incorrect word choice and poor instructions<\/li>\n\n\n\n<li><strong>Input friction<\/strong> \u2013 challenges completing forms<\/li>\n\n\n\n<li><strong>Navigational friction<\/strong> \u2013 poor navigation, unnecessary steps, broken links, etc.<\/li>\n\n\n\n<li><strong>System friction<\/strong> \u2013 slow load times, crashes, and other performance-related issues<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-to-identify-cognitive-friction\">How to Identify Cognitive Friction?<\/h3>\n\n\n\n<p>Using <a href=\"https:\/\/www.nngroup.com\/articles\/ten-usability-heuristics\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Jakob Nielsen&#8217;s 10 usability heuristics principles for interaction design<\/a> is an excellent methodology to incorporate in a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-audit\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX audit<\/a> to identify common usability issues that cause friction.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/process.png\" alt=\"process\" class=\"wp-image-32361\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/process.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/process-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>These principles include:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Visibility of system status<\/li>\n\n\n\n<li>Match between system and the real world<\/li>\n\n\n\n<li>User control and freedom<\/li>\n\n\n\n<li>Consistency and standards<\/li>\n\n\n\n<li>Error prevention<\/li>\n\n\n\n<li>Recognition rather than recall<\/li>\n\n\n\n<li>Flexibility and efficiency of use<\/li>\n\n\n\n<li>Aesthetic and minimalist design<\/li>\n\n\n\n<li>Help users recognize, diagnose, and recover from errors<\/li>\n\n\n\n<li>Help and documentation<\/li>\n<\/ol>\n\n\n\n<p>Further reading: <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-audit\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>UX Audit \u2013 All You Need to Know, Benefits, and Checklist<\/em><\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-are-some-examples-of-cognitive-friction\">What are Some Examples of Cognitive Friction?<\/h2>\n\n\n\n<p>Here are three common examples where design decisions cause cognitive friction.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example-1-broken-links\">Example #1. Broken links<\/h3>\n\n\n\n<p>Broken links commonly cause cognitive friction. Users think they&#8217;re navigating to a specific feature, but the link either doesn&#8217;t work or takes them elsewhere. Frustration compounds when there is no way to navigate back or they must repeat a task.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example-2-hiding-features\">Example #2. Hiding features<\/h3>\n\n\n\n<p>It&#8217;s not uncommon for companies to make it difficult for users to downgrade a paid plan or delete their accounts entirely. The hope is that the user will give up and keep their subscription. Searching for hidden features is time-consuming and frustrating, leading to distrust in the product and brand.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example-3-unnecessary-steps\">Example #3. Unnecessary steps<\/h3>\n\n\n\n<p>Companies often collect excessive data or create unnecessary steps for tasks. These additional interactions mean users spend more time completing tasks and forms than they should.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/process-direction-way-path-1.png\" alt=\"process direction way path 1\" class=\"wp-image-32334\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/process-direction-way-path-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/process-direction-way-path-1-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>For example, asking for a customer&#8217;s age, gender, and income bracket on an eCommerce checkout form might help with future marketing initiatives, but it&#8217;s intrusive and creates a point of friction. Additionally, misusing accordions, confirmations, dropdown menus, and other interactive UI elements adds unnecessary steps and interactions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-when-is-cognitive-friction-good\">When is Cognitive Friction Good?<\/h2>\n\n\n\n<p>Here are four instances where UX designers intentionally create friction to <strong><em>improve<\/em><\/strong> user experience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-two-factor-authentication\">Two-Factor Authentication<\/h3>\n\n\n\n<p><a href=\"https:\/\/teampassword.com\/blog\/password-manager-with-2fa\" target=\"_blank\" rel=\"noreferrer noopener\">Two-factor authentication (2FA)<\/a> is a fantastic example of designers creating friction to improve cybersecurity. 2FA adds an extra step for user logins or confirming critical functions (like bank payments) to reduce the risk of someone other than the authorized user from completing these tasks, providing a robust security layer that works alongside a user&#8217;s primary <a href=\"https:\/\/nordpass.com\/password-manager\/\">password management tool<\/a>.<\/p>\n\n\n\n<p>Many products use apps like <a href=\"https:\/\/googleauthenticator.net\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google Authenticator<\/a> or a one-time pin sent to a user&#8217;s email or mobile. The user must enter a six-digit code to complete authentication.<\/p>\n\n\n\n<p>2FA creates additional steps but keeps people safe for high-risk products and tasks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-confirmation-dialogs\">Confirmation dialogs<\/h3>\n\n\n\n<p>Designers often use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/modal-ui-dialogs\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI dialogs<\/a> or modals to confirm critical nonreversible actions\u2013like deleting something or navigating away from a page with unsaved content. For example, <em>&#8220;Are you sure you want to delete this project?&#8221;<\/em><\/p>\n\n\n\n<p>While some people find these dialogs annoying, they&#8217;re quickly swayed when it prevents them from accidentally deleting a project that took many hours to create!<\/p>\n\n\n\n<p>In some instances, UX designers create additional steps within the modal to prevent mistakes\u2013like typing &#8220;DELETE&#8221; to confirm. This added friction forces users to stop and think about what they&#8217;re doing to prevent someone from mindlessly completing a critical nonreversible action.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-user-and-task-verification\">User and task verification<\/h3>\n\n\n\n<p>Many products use validation systems to confirm a user has access to a given email address or mobile number. In this example, users are asked to verify their email addresses from <a href=\"https:\/\/www.uxpin.com\/examples\/sign-up-form\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s sign-up form prototype<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/ZUq_JiEpXjHUJAacnBiITcpK7eBqJ8rRCH4U-8F27teJzHtQ6q2Z-rHklZZDp78MMQOB191m0qHnM4l7ncVMdrvvfbdQfGgzelCSWnnd574WkJRsFMGnzHFGv7hkQQElBK3PpWQdHXZFuVXa2kxfXjlUl9akYJrDLlPxi2U15cCEBevAz32LnKO3qQ\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Designers also use friction to verify the user made critical account changes. This example from Netflix shows an email sent after users change their mobile numbers. Users must click &#8220;Verify Phone&#8221; for the changes to take effect. This friction prevents unauthorized changes to someone&#8217;s account details.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/GWD6S3NGK4MFHJDChrxvLgzVCexT2CjpYnED4pE4gDjJbbFF4kEbO0ZTuwEo5_Ha72Lsn7qX6ltxwyrGBCW9G2JQt2ihfxkn4GgqwDoCkl4bVpfH_X8vuqyV0WskvxtKL29wU6JYG85X2EhltoaE-i8r-sXrweGoZMJF0UmsG9Piy4e-1yPMpA2ALQ\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-system-loading\">System loading<\/h3>\n\n\n\n<p>Many digital products and websites use friction via loading icons and other <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/microinteractions-for-protypes\/\" target=\"_blank\" rel=\"noreferrer noopener\">microinteractions<\/a> when a system is loading or working. This feedback tells users to wait while the system is busy.<\/p>\n\n\n\n<p>It&#8217;s important that UX designers only use these microinteractions when it&#8217;s 100% necessary and never allow them to last more than a few seconds. If your product takes more than <a href=\"https:\/\/developer.android.com\/topic\/performance\/vitals\/launch-time\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">five seconds to process a task<\/a>, you might need to work with the engineers on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/important-considerations-responsive-design-performance-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">performance optimization<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-when-is-cognitive-friction-bad-and-solutions-for-improvement\">When is Cognitive Friction Bad? <em>(And solutions for improvement)<\/em><\/h2>\n\n\n\n<p>Cognitive friction is generally bad, and it&#8217;s a UX designer&#8217;s job to pinpoint these issues and find solutions. Here are four common examples of bad cognitive friction and how to reduce or eliminate them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-inconsistency\">Design inconsistency<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-design-consistency-best-practices-ui-ux-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design consistency<\/a> is an essential UX design component. It helps create familiarity, making user interfaces and interactions more predictable and easier to use.<\/p>\n\n\n\n<p>Design inconsistency creates friction resulting in usability and accessibility issues. For example, if a sign-up sequence uses a green button to proceed to the next step and randomly uses red on one UI, users must stop to think about whether or not this red button will perform the same action as the green.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Creating a design system<\/a> or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-use-ui-kits-to-create-quicker-mockups\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI kit<\/a> is a trusted methodology for improving design consistency. When product teams use the same library of approved components, there are fewer errors, and designers have to do less thinking (friction) themselves.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-too-many-steps\">Too many steps<\/h3>\n\n\n\n<p>Designers must think of every step in a task, no matter how essential, as a point of friction. UX teams can use usability testing and user interviews to understand the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/customer-journey-mapping-mistakes\/\" target=\"_blank\" rel=\"noreferrer noopener\">customer journey<\/a> and identify areas for improvement.<\/p>\n\n\n\n<p>Sometimes these improvements will come from optimizing the UI components and input fields to reduce actions rather than removing steps. For example, is it better to use a dropdown or buttons for a product&#8217;s size options?<\/p>\n\n\n\n<p>This example uses a dropdown, meaning users must <strong>click\/tap twice<\/strong> to choose a size. This process is particularly challenging for users on mobile devices and people with dexterity issues.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/EVMM-qrOmG_AJ48-yQLr2gWM1YwpOEI8xTUapyZ-vns9b3X_daoxr_gQQJtTUzQIOlEQH4Xdwe2n4V3SLACceQ1aggayBTTKeILn36X6kd8h2So5aSiv0m3BT12M2CVd2-8oioZqDS4B9ZVxXNMoLJnbArXDaCYB6egIOSj0KqEOew9S8wQPKVYovA\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>In this second example, designers use buttons, so users only have to <strong>click\/tap once<\/strong> to make a selection. Different process, same result, one less step, and reduced friction.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/FFT6arBy0lghKdq6Jfxbgb3WapJuOHCaplL54WZudrb1AT-6m--S1G9J-yuiR7ctV5IAcz_VItWmwQzebFoasQmkUUQc-oNp8BQ7TIqB-Qi6vjAwv5MPfKAWbYPfG_fA8vAKOp4qJ8ab2kc4e4KHFBX4HE6unAscWtNcwgjjEfdfZce4TvUxUssHUQ\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>This example might seem like a small change, but finding similar improvements reduces overall friction and gets users to their end goal faster.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-unfamiliar-patterns\">Unfamiliar patterns<\/h3>\n\n\n\n<p>Designers use internationally recognizable <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/\" target=\"_blank\" rel=\"noreferrer noopener\">design patterns<\/a> to solve fundamental usability issues. For example, everyone expects a hamburger icon will open the primary navigation. Using the hamburger to activate another feature or a different icon causes confusion and friction.<\/p>\n\n\n\n<p>These patterns are essential in complex products where users must learn how to use the system. If they also have to learn to use new UI patterns, this adds to the learning curve, creating more cognitive friction.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-poor-communication\">Poor communication<\/h3>\n\n\n\n<p>Designers communicate with users through text, color, visual hierarchy, UI elements, images, and video, to name a few. Understanding user needs and how they absorb content is critical to effective communication and reducing friction.<\/p>\n\n\n\n<p>A fantastic example is how UXPin uses multiple elements to communicate with users in its <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/states#adding-states\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/7vHfn5e9cpmOJiO9NuT22TLpxCAvQo3it3tj2Q6rV5Li4Nl8kxvk0VS1pQ4xlFoasGNDxZG22VzpuFuWikVtFHog5snuAPqvR-ps6ap9533GKzF8opFw2RJJRPCEV-DsZx1KhIObJlpM93hGwmPbwasxTI-AoZr0hsduB0qcu2El3oPPNm3AgKJBjw\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The heading, Adding States, describes the task.<\/li>\n\n\n\n<li>The explanation uses short sentences and plain language.<\/li>\n\n\n\n<li>A blue highlight and text tell users which feature to click while blocks created to look like keys on a keyboard show the shortcut.<\/li>\n\n\n\n<li>A video provides added context to help users who learn better through visuals.<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/states#adding-states\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s docs<\/a> make it easy for designers to quickly absorb the instructions to apply to their projects.<\/p>\n\n\n\n<p>Effective communication throughout your product, from button labels to documentation tutorials, reduces the mental effort required to complete tasks.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-reduce-friction-during-the-design-process-with-uxpin\">Reduce Friction During the Design Process With UXPin<\/h2>\n\n\n\n<p>Reducing friction during the design process is often challenging for UX teams. Design tools don&#8217;t provide the same fidelity and functionality as code, making it hard to prototype and test effectively.<\/p>\n\n\n\n<p>UXPin is powered by code, enabling designers to build complex user interfaces and components that look and feel like the final product. The tools, features, and design canvas look the same as any other design tool, but the results are significantly better.<\/p>\n\n\n\n<p>Higher quality, realistic prototypes result in meaningful feedback from user testing and stakeholders\u2013allowing designers to improve with every iteration.<\/p>\n\n\n\n<p>Designers can test complex user journeys like fully functioning checkouts or forms that capture extensive data with multiple steps\u2013<em>sequences that often cause cognitive friction!<\/em><\/p>\n\n\n\n<p>Improve your product design projects, reduce usability issues, and enhance your product&#8217;s user experience with quality prototyping and testing in UXPin. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to discover all of UXPin&#8217;s advanced features.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Incorporating cognitive friction to improve user experience sounds like an oxymoron, but it can have positive effects in the right circumstances. Friction is vital for protecting users and ensuring they don&#8217;t complete tasks accidentally. The more familiar users get with a digital product and design patterns, the more likely they are to work on autopilot,<\/p>\n","protected":false},"author":3,"featured_media":36948,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-36905","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"","yoast_metadesc":"Is cognitive friction all evil? Check these examples of cognitive friction and check if it's good or bad for user experience.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Cognitive Friction in UX Design \u2013 Good or Bad? | UXPin<\/title>\n<meta name=\"description\" content=\"Is cognitive friction all evil? Check these examples of cognitive friction and check if it&#039;s good or bad for user experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cognitive Friction in UX Design \u2013 Good or Bad?\" \/>\n<meta property=\"og:description\" content=\"Is cognitive friction all evil? Check these examples of cognitive friction and check if it&#039;s good or bad for user experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-05T09:58:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-26T21:05:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/cognitive-friction.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/cognitive-friction-good-or-bad\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/cognitive-friction-good-or-bad\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Cognitive Friction in UX Design \u2013 Good or Bad?\",\"datePublished\":\"2022-10-05T09:58:00+00:00\",\"dateModified\":\"2026-01-26T21:05:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/cognitive-friction-good-or-bad\\\/\"},\"wordCount\":1745,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/cognitive-friction-good-or-bad\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/cognitive-friction.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"accessibilityFeature\":[\"tableOfContents\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/cognitive-friction-good-or-bad\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/cognitive-friction-good-or-bad\\\/\",\"name\":\"Cognitive Friction in UX Design \u2013 Good or Bad? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/cognitive-friction-good-or-bad\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/cognitive-friction-good-or-bad\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/cognitive-friction.png\",\"datePublished\":\"2022-10-05T09:58:00+00:00\",\"dateModified\":\"2026-01-26T21:05:18+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Is cognitive friction all evil? Check these examples of cognitive friction and check if it's good or bad for user experience.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/cognitive-friction-good-or-bad\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/cognitive-friction-good-or-bad\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/cognitive-friction-good-or-bad\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/cognitive-friction.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/cognitive-friction.png\",\"width\":1200,\"height\":600,\"caption\":\"cognitive friction\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/cognitive-friction-good-or-bad\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cognitive Friction in UX Design \u2013 Good or Bad?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Cognitive Friction in UX Design \u2013 Good or Bad? | UXPin","description":"Is cognitive friction all evil? Check these examples of cognitive friction and check if it's good or bad for user experience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/","og_locale":"en_US","og_type":"article","og_title":"Cognitive Friction in UX Design \u2013 Good or Bad?","og_description":"Is cognitive friction all evil? Check these examples of cognitive friction and check if it's good or bad for user experience.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/","og_site_name":"Studio by UXPin","article_published_time":"2022-10-05T09:58:00+00:00","article_modified_time":"2026-01-26T21:05:18+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/cognitive-friction.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Cognitive Friction in UX Design \u2013 Good or Bad?","datePublished":"2022-10-05T09:58:00+00:00","dateModified":"2026-01-26T21:05:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/"},"wordCount":1745,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/cognitive-friction.png","articleSection":["Blog"],"inLanguage":"en-US","accessibilityFeature":["tableOfContents"]},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/","name":"Cognitive Friction in UX Design \u2013 Good or Bad? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/cognitive-friction.png","datePublished":"2022-10-05T09:58:00+00:00","dateModified":"2026-01-26T21:05:18+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Is cognitive friction all evil? Check these examples of cognitive friction and check if it's good or bad for user experience.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/cognitive-friction.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/cognitive-friction.png","width":1200,"height":600,"caption":"cognitive friction"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Cognitive Friction in UX Design \u2013 Good or Bad?"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=36905"}],"version-history":[{"count":6,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36905\/revisions"}],"predecessor-version":[{"id":58044,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36905\/revisions\/58044"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/36948"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=36905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=36905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=36905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}