How To Avoid Deceptive Patterns In Your Designs

In this article, you will learn about deceptive patterns aka dark patterns, and how you can go about avoiding those in your own designs.

Let me start off with a few questions demonstrating typical use cases of deceptive patterns:

Have you ever been in a situation where you signed up for a free trial, optimistically assuming there was no catch, just to find out sometime later that your credit card was silently charged without any warning? Or have you ever purchased a membership that didn't meet your expectations, and when you wanted to cancel it you realized there was no easy way out of it? Or the moment you were ready to proceed to your online checkout and out of a sudden, you encounter a sneakily added product warranty in your basket?

Believe it or not, we all have already been tricked by misleading patterns that benefit the creator more than the user. It literally happens to everyone!

These encounters are all instances of deceptive patterns, often referred to as dark or evil patterns. Frankly, I prefer not to use the latter terms because I personally don’t think it’s right to associate something “dark” with potentially being “bad”. Therefore, I am going to use either the term deceptive or misleading pattern in this article. Misleading examples stunt clients into accidentally completing an action online. Tricky examples can incorporate a scope of visual, intuitive, sound, or movement components that are added to plans to beguile clients. To keep it straight and simple, the overarching goal of such deceptive patterns is to get the sale no matter the cost to the user.

Misleading patterns were first uncovered in 2010 by UX planner Harry Brignull. He recorded 11 sorts of examples. Let’s investigate a few deceptive patterns you could experience in your work as a UX designer.

Forced continuity

Photo by blocks on Unsplash

Forced continuity appears when a user gets charged, without receiving a warning or previous reminder, for a membership trial that has come to an end. This is referring to the example I have brought up at the beginning of this article. Unfortunately, this is anything than transparent to the user and has a negative repercussion on the overall user experience; the user’s trust will most likely be broken as well.

Hence, as a UX designer, it is pivotal to be upfront and transparent with users. Here’s what you can do to avoid this misleading pattern:

  • Send the user a notification to remind them that their free trial will soon come to an end. Also, let them know when exactly their credit card would be charged if they do not cancel their membership trial on time.
  • Make the membership cancellation accessible for users. Don’t hide it! Because in the end, you want your product to be user-friendly.
  • Ensure that the visual elements, such as buttons, are labeled clearly and placed obviously.

Sneak into basket

Photo by Kat Med on Unsplash

Sneak into a basket appears when an additional item was sneakily added to the shopping cart somewhere along the user’s journey. A user will then have to manually remove this extra item from their basket if they don’t want to purchase by deselecting the checkbox. However, in many cases, this additional item often goes unnoticed by users.

Here’s what you can do to avoid this deceptive pattern in your designs:

  • Ask the user whether or not they want to add this extra item, which could be a product warranty for instance, to their basket.
  • If the additional item will be added automatically, then at least ensure that the checkbox for this item is not already pre-selected. There shouldn’t be any surprise about what the user is expecting to purchase.

Hidden costs

Photo by Michael Dziedzic on Unsplash

Hidden costs are unexpected charges that are only made visible to the user at the end of the checkout process, like shipping fees or taxes. In fact, many apps and websites add these hidden costs hoping that they either go unnoticed or that the user is simply too comfortable to even consider tracking down a competing website with less expensive products. Just imagine how frustrated you would be at that point. Not only were you lied to but also did you invest your precious time. As a user you have two options: either look on a competitor’s website for less cost-intensive alternatives or swallow your anger down your throat and just pay for it. What would you do? The truth is, most users are simply too reluctant to go through the whole checkout process on another site again.

Here’s what you can do to avoid this deceptive pattern in your designs:

  • Ensure more price transparency toward your users. For example, through the integration of a calculator tool, you allow users to calculate extra costs upfront. Then there won’t be a negative surprise in the checkout process anymore.
  • Integrate a notification box that informs the user about additional costs that will be added in the checkout process.

Confirmshaming

Photo by M. on Unsplash

Confirmshaming appears when you intentionally want to make the user feel guilty or bad about themself whenever they opt out of something. According to Hayy Brignull, who coined the term, “The option to decline is worded in such a [manipulative] way as to shame the user into compliance.” (Brignull, 2006). Let me give you an example. Imagine you are browsing for a new pair of trainers on a particular website. Suddenly a pop-up appears asking you to sign up to their weekly newsletter. In return, you will receive a 10% discount on your next order. Because you are fed up with newsletters, are signed up for too many to count for respectively, you decide to exit the module. In order to do so you will have to click a specific button that contains the following text “No thanks, I don’t like to save money.” Reading this can make you feel bad or feel as if you miss out on something. Either way, that copy inside the button is chosen intentionally to make you feel bad about your choice in general. The hope is that you will stay and rather opt-in to the service or offer provided.

To avoid this type of misleading pattern, I suggest selecting your words on buttons and text elsewhere very carefully and having it confirmed with UX or copywriters. The goal is to stay away from manipulative wording that affects the emotions of your users.

Urgency

Photo by Who’s Denilo ? on Unsplash

Urgency is created to convince the user to purchase a product or service as soon as possible before they run out of time and end up being sad or disappointed for missing out on this amazing deal. This deceptive pattern is commonly used in the e-commerce industry. For instance, a user sees a product he/she is interested in. Out of a sudden, a clock appears promoting that this special deal is just valid for another hour before it expires and the price goes back to where it was prior. The objective is to rush the user into making a quick decision within a certain time period. If they won’t act right away, the time will be up and the user will have to pay the full price. Oops!

In your designs, think twice about how you want to use urgency as a trigger. If your product or service is on a very rare sale then it is more so acceptable and understandable to utilize this pattern. On the contrary, if applying this pattern over and over again for the same product or service, then this is rather a permanent manipulative intent. Ironically, the majority of e-commerce businesses have this trigger in place and benefit monetary-wise from it.

Scarcity

Photo by Nimble Made on Unsplash

Scarcity comes into play when a site makes users aware of the limited number of items available. For instance, you sometimes get to see a notification when visiting a website saying that there are only 3 pieces left. The pattern of scarcity goes usually hand in hand with an urgency that is created to make the user purchase the item before it is too late.

As a designer, you should be capable of distinguishing whether you solely want to urge a user to commit a purchase or if you truly want to inform the user about the product’s availability. Instead of deceiving users, aim to inform them.

So what’s the key takeaway?

In your job as another UX creator, you can assist with forestalling misleading patterns by identifying and also making others aware of them. Like that, when you see a deceptive pattern in real life, you’ll have the option to address them. Being clear and legit with your clients will reinforce their confidence in you. Thanks for reading and until next time 👋🏻

— Carina

References:

Brignull, H. (2006). Dark Patterns.https://www.darkpatterns.org/Gosset, S. (2021, September 21). What Is Confirmshaming and Why Should You Avoid It? https://builtin.com/design-ux/confirmshaming