{"id":20038,"date":"2023-01-27T09:00:00","date_gmt":"2023-01-27T08:00:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=20038"},"modified":"2023-01-24T15:43:08","modified_gmt":"2023-01-24T14:43:08","slug":"deceptive-patterns-in-ux-design-how-to-avoid-them","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/","title":{"rendered":"Deceptive Patterns In UX Design &#8211; How To Avoid Them?"},"content":{"rendered":"\n<p>Being able to identify deceptive patterns in UX design and avoid them can be the difference between a good <a href=\"https:\/\/www.solutelabs.com\/ux-strategy\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">user experience strategy<\/a> and a bad one. We&#8217;ve all done it. We&#8217;ve all fallen for something that wasn&#8217;t there.\u00a0<\/p>\n\n\n\n<p>It&#8217;s a common misconception that all deceptive design patterns are malicious. In reality, most are created with the best intentions, but without knowledge of how the human brain works, these patterns can lead to unintended consequences.&nbsp;<\/p>\n\n\n\n<p>This blog will look at the different deceptive patterns in UX design and how designers can avoid them by using some <a href=\"https:\/\/www.solutelabs.com\/blog\/web-design-tips\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">web design tips and tricks<\/a>. By being aware of these patterns, you can create more honest and user-friendly designs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-deceptive-ux-design\"><strong>What is deceptive UX design?<\/strong><\/h2>\n\n\n\n<p>The definition of the word deceptive is directly linked to deceiving, which means to intentionally mislead someone into believing something untrue or false, especially to achieve personal gain. <strong>These deceptive UX designs propel the users into purchasing or doing something that, otherwise, they wouldn\u2019t even have considered doing<\/strong>. The user, therefore, is deceived so that they unintentionally complete the action online. Another name for this kind of deceptive UX design is called dark patterns.<\/p>\n\n\n\n<p>UX designer Harry Brignull first exposed these deceptive patterns in the year 2010. Harry Brignull, on his website <a aria-label=\"deceptive design (opens in a new tab)\" href=\"https:\/\/www.deceptive.design\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">deceptive design<\/a>, named them <strong><em>dark patterns<\/em><\/strong>, and he also referred to them as a pattern library whose sole aim was to expose and shame deceptive user interfaces.<\/p>\n\n\n\n<p>Brignulee also gave an example of one such dark pattern by giving their description: <strong><em>when somebody is surfing through the web, it is unlikely that the individual is reading every word of a page; rather they must be skim-reading and making assumptions<\/em><\/strong>. The company might take advantage of this behavior and trick the user into believing something untrue. The company will manipulate the page by making it look like it is saying something particular while it is saying something else. However, users can defend themselves from dark patterns on the site darkpattern.org.<\/p>\n\n\n\n<figure class=\"wp-block-embed alignfull is-type-wp-embed is-provider-codemotion-magazine wp-block-embed-codemotion-magazine\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"crw4vc3y4A\"><a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/inclusive-design\/\">Why you should care about inclusive design<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Why you should care about inclusive design&#8221; &#8212; Codemotion Magazine\" src=\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/inclusive-design\/embed\/#?secret=2cBqGX32as#?secret=crw4vc3y4A\" data-secret=\"crw4vc3y4A\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-do-designers-use-them\"><strong>Why do designers use them?<\/strong><\/h2>\n\n\n\n<p>The purpose of any UX designer\u2019s job is to cater to the user&#8217;s needs- create <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.solutelabs.com\/blog\/different-ways-to-enhance-user-interface-ui-of-your-website\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">effective user interfaces<\/a> that would enable the users to navigate through all the information and tasks seamlessly. However, this holds only in theory. In practice, <strong>UX designers work not for the users but for the managers who are focused only on growth, <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/why-is-web-performance-more-important-than-ever\/\" target=\"_blank\" aria-label=\"performance (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">performance<\/a>, and profit<\/strong>, which is the reason that leads managers to demand designers to implement dark patterns.<\/p>\n\n\n\n<p>The reasoning managers use to implement deceptive design patterns is understandable- it works in the short run to bring in greater profits for the company. Since managers often are burdened with having to accomplish specific metrics, such as ensuring that the number of users in a social media platform is doubled, deploying <strong>deceptive user interfaces enables them to reach this goal quicker<\/strong>. Also, they will be relieved of the duty to devise a solution that would appeal to users and attract them to use that particular social media platform.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-examples-of-deceptive-designs\"><strong>Examples Of Deceptive Designs<\/strong><\/h2>\n\n\n\n<p>While it is challenging to find deceptive designs on every website, indeed once in our lives, we have come across at least one of these examples of a deceptive design:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A site that is flooded with numerous buttons, therefore making it more likely that the user clicks on one of them.<\/li>\n\n\n\n<li>A pre-checked box makes the user feel unclear and confused about whether they will be opted out or opted in after unchecking.<\/li>\n\n\n\n<li>A \u201csign me up\u201d button is conspicuously bright blue, while a \u201cNo thanks\u201d button that is just pale gray. This makes it more likely that the user will choose the former.<\/li>\n\n\n\n<li>A graphic that includes an X-out box in its design rather than being functional. Users who click on the X are then redirected to another webpage.<\/li>\n<\/ul>\n\n\n\n<p>Examples of deceptive designs can also be seen taking text form:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Word choices that are confusing and make it unclear for the user to know what they are choosing<\/li>\n\n\n\n<li>Terms and conditions fine print coming in buried opt-out explanations.<\/li>\n\n\n\n<li>Usage of double negatives such as \u201cDo not uncheck this box if you want to keep receiving emails from us.\u201d<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-are-the-most-common-deceptive-design-patterns\"><strong>What are the most common deceptive Design patterns?<\/strong><\/h2>\n\n\n\n<p>Users should avoid 12 types of deceptive patterns: Forced continuity, friend spam, disguised ads, bait and switch, confirmshaming, roach motel, hidden costs, privacy suckering, price comparison prevention, misdirection, sneak into the basket, and trick questions.&nbsp;<\/p>\n\n\n\n<p>Let\u2019s look at each one in more detail:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Forced continuity<\/strong>: Forced continuity can commonly be found in streaming platforms such as Netflix and Hulu. These companies automatically charge the user&#8217;s credit card once their free trial is over, forcing the customer into continuing to use the platform.<\/li>\n\n\n\n<li><strong>Friend spam<\/strong>: we often see how a social media platform requests the user\u2019s email address or permission to access their social media account in exchange for allowing them to find other friends or access a service. However, the product starts spamming the contact once it has access, making it seem like the messages are coming from the user.<\/li>\n\n\n\n<li><strong>Disguised ads<\/strong>: disguised ads can often be found on any website, and they look like the content on the rest of the side. Therefore it makes it more likely that the users will click on it.<\/li>\n\n\n\n<li><strong>Bait and switch<\/strong>: this deceptive pattern occurs when the user takes a course of action thinking of a particular outcome; however, a different outcome takes place instead of it. The 2016 example of Windows demonstrates this: the Windows customer ran into a bait and switch when the \u2018X\u2019 button, instead of closing a pop-up as expected, started the update to Windows 10.<\/li>\n\n\n\n<li><strong>Confirmshaming<\/strong>: confirm shaming is a dark pattern whose goal is to prompt the user to do something by making the alternative a very undesirable choice. For example, a company might, in exchange for the user\u2019s email address, choose to offer a discount on the user\u2019s first order.<\/li>\n\n\n\n<li><strong>Roach motel<\/strong>: Roach motel is a dark pattern in which the user is made to do something with great conveniences, such as signing up for an account. However, making it way more complicated for them to get out of it, such as deleting those accounts.<\/li>\n\n\n\n<li><strong>Hidden costs<\/strong>: hidden costs occur when in the final step of any e-commerce check-out process, the customer is charged additional fees and other costs beyond the price of the order.<\/li>\n\n\n\n<li><strong>Privacy Zuckering<\/strong>: Privacy Zuckering is a type of dark pattern done through data brokering. Through this process, the company acquires permission to sell the data they collect about their users by making them agree to the terms and conditions.<\/li>\n\n\n\n<li><strong>Price comparison prevention<\/strong>: while many websites allow customers to compare the prices of most products, some websites might keep their pricing information vague or absent and deploy a dark pattern.<\/li>\n\n\n\n<li><strong>Misdirection<\/strong>: through misdirection, the dark pattern uses design to consume the user\u2019s attention in the hopes of overlooking some other things.<\/li>\n\n\n\n<li><strong>Sneak into a basket<\/strong>: this deceptive pattern slips an additional item into the user\u2019s e-commerce cart, which the user then has to uncheck to prevent being charged for it additionally.<\/li>\n\n\n\n<li><strong>Trick questions<\/strong>: this dark pattern takes advantage of the fact that users get comfortable skimming through and filling the forms on a website and then trick them into answering specific questions in a way they wouldn\u2019t intend to answer.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-can-we-avoid-deceptive-patterns-in-our-designs\"><strong>How can we avoid deceptive patterns in our designs?<\/strong><\/h2>\n\n\n\n<p>As a responsible UX designer, one can avoid falling into deceptive designs by being aware of them. If one is aware of these dark patterns, one will be able to correct them whenever one sees them in action and come up with a more robust solution. <strong>Being honest and transparent with the customers is very important<\/strong>; therefore, deploying a deceptive pattern is unethical and must be avoided. To earn loyal customers, it is vital to strengthen their trust in the brand by being clear and truthful with them and by following the UX design principles correctly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>Deceptive patterns are all around us and are a part of our daily lives, so it&#8217;s all the more important as a designer to know how to identify them so that we can avoid them. There is no one definition of deceptive patterns, <strong>but they all seem to be techniques that trick users into doing things they might not want to do<\/strong>. Understanding the patterns of deceptive UX design is a step in the right direction to avoiding them.\u00a0<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<pre class=\"wp-block-preformatted\"><em><strong>Article written with insights from the SoluteLabs team.<\/strong><\/em><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Being able to identify deceptive patterns in UX design and avoid them can be the difference between a good user experience strategy and a bad one. We&#8217;ve all done it. We&#8217;ve all fallen for something that wasn&#8217;t there.\u00a0 It&#8217;s a common misconception that all deceptive design patterns are malicious. In reality, most are created with&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/\">Read more<\/a><\/p>\n","protected":false},"author":64,"featured_media":20044,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":5,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[76],"tags":[7094,9517],"collections":[],"class_list":{"0":"post-20038","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-design-ux","8":"tag-ethics","9":"tag-front-end","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Deceptive Design Patterns: How to Avoid Them - Codemotion<\/title>\n<meta name=\"description\" content=\"As UX designers, it&#039;s essential to be aware of deceptive design patterns that can mislead users. Let&#039;s discuss how to avoid them in our work.\" \/>\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.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Deceptive Patterns In UX Design - How To Avoid Them?\" \/>\n<meta property=\"og:description\" content=\"As UX designers, it&#039;s essential to be aware of deceptive design patterns that can mislead users. Let&#039;s discuss how to avoid them in our work.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-27T08:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1266\" \/>\n\t<meta property=\"og:image:height\" content=\"829\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Codemotion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Codemotion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/\"},\"author\":{\"name\":\"Codemotion\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c\"},\"headline\":\"Deceptive Patterns In UX Design &#8211; How To Avoid Them?\",\"datePublished\":\"2023-01-27T08:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/\"},\"wordCount\":1429,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584.jpg\",\"keywords\":[\"Ethics\",\"Front-End\"],\"articleSection\":[\"Design\/UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/\",\"name\":\"Deceptive Design Patterns: How to Avoid Them - Codemotion\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584.jpg\",\"datePublished\":\"2023-01-27T08:00:00+00:00\",\"description\":\"As UX designers, it's essential to be aware of deceptive design patterns that can mislead users. Let's discuss how to avoid them in our work.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584.jpg\",\"width\":1266,\"height\":829,\"caption\":\"Hacker's Hand With Black Glove Stealing Credit Card Information. Close-Up, Isolated On Solid Color Background. Vector, Illustration, Flat Design.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Design\/UX\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Deceptive Patterns In UX Design &#8211; How To Avoid Them?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c\",\"name\":\"Codemotion\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png\",\"caption\":\"Codemotion\"},\"description\":\"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.\",\"sameAs\":[\"https:\/\/x.com\/CodemotionIT\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Deceptive Design Patterns: How to Avoid Them - Codemotion","description":"As UX designers, it's essential to be aware of deceptive design patterns that can mislead users. Let's discuss how to avoid them in our work.","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.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/","og_locale":"en_US","og_type":"article","og_title":"Deceptive Patterns In UX Design - How To Avoid Them?","og_description":"As UX designers, it's essential to be aware of deceptive design patterns that can mislead users. Let's discuss how to avoid them in our work.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2023-01-27T08:00:00+00:00","og_image":[{"width":1266,"height":829,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584.jpg","type":"image\/jpeg"}],"author":"Codemotion","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Codemotion","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/"},"author":{"name":"Codemotion","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c"},"headline":"Deceptive Patterns In UX Design &#8211; How To Avoid Them?","datePublished":"2023-01-27T08:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/"},"wordCount":1429,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584.jpg","keywords":["Ethics","Front-End"],"articleSection":["Design\/UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/","name":"Deceptive Design Patterns: How to Avoid Them - Codemotion","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584.jpg","datePublished":"2023-01-27T08:00:00+00:00","description":"As UX designers, it's essential to be aware of deceptive design patterns that can mislead users. Let's discuss how to avoid them in our work.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584.jpg","width":1266,"height":829,"caption":"Hacker's Hand With Black Glove Stealing Credit Card Information. Close-Up, Isolated On Solid Color Background. Vector, Illustration, Flat Design."},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/deceptive-patterns-in-ux-design-how-to-avoid-them\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Design\/UX","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/"},{"@type":"ListItem","position":4,"name":"Deceptive Patterns In UX Design &#8211; How To Avoid Them?"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c","name":"Codemotion","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","caption":"Codemotion"},"description":"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.","sameAs":["https:\/\/x.com\/CodemotionIT"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584-600x600.jpg","author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584.jpg",1266,829,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584-300x196.jpg",300,196,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584-768x503.jpg",768,503,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584-1024x671.jpg",1024,671,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584.jpg",1266,829,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584.jpg",1266,829,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584.jpg",100,65,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-1338182584-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_comment_info":0,"uagb_excerpt":"Being able to identify deceptive patterns in UX design and avoid them can be the difference between a good user experience strategy and a bad one. We&#8217;ve all done it. We&#8217;ve all fallen for something that wasn&#8217;t there.\u00a0 It&#8217;s a common misconception that all deceptive design patterns are malicious. In reality, most are created with&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/20038","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=20038"}],"version-history":[{"count":5,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/20038\/revisions"}],"predecessor-version":[{"id":20046,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/20038\/revisions\/20046"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/20044"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=20038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=20038"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=20038"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=20038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}