Dark Patterns in User Interface Design

Credit: Unsplash

What are dark patterns?

A dark pattern is “a user interface that has been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills. Source: Wikipedia

Dark patterns aren’t a new thing; they have been around for a while. Some dark patterns are done intentionally and some are due to inadequate UX research. This term “Dark Pattern” was coined in 2010 after the boom of e-commerce industries on the web, in order to generate more sales, get subscriptions, and hit target numbers in transactions etc. Designers and business associates started creating deceptive user interfaces to manipulate users. These interactions led to an increase in signups, subscriptions and so on due to the deceptive nature of the interactions.

Dark Patterns are everywhere and in some cases, have become the unquestioned status quo, with designers exploiting user vulnerability in the race to hit targets and boost revenues.

Forms of Dark Patterns

When you use the web, you don’t read every word on every page — you skim, read and make assumptions. Dark patterns take advantage of this and try to trick you into doing/clicking/interacting with things without intent.

There are different kinds of dark patterns, I’ll talk about a few and share sketches of how this can be done so you can avoid them when designing/developing.

Bait & Switch

This pattern is used to manipulate users into taking desired actions that lead to undesired results. This pattern can sometimes be tweaked to advertise free products that are out of stock or unavailable in a bid to expose other priced products to the user.

A very popular example of the Bait & Switch pattern is Microsoft Upgrade deception used to trick users into updating their windows PC.

Credit: DarkPatterns.org

Clicking on the OK button starts the upgrade as one would think since there’s a button with the label Upgrade Now the OK button shouldn’t perform the upgrade. The only way to ignore the update is to close the dialog box.

Credit: HelloAndy

Disguised Ads

As the name implies, this pattern is used to gain ad clicks, it is used mainly by platforms whose major source of revenue is via ads. An example of such is SoftPedia and quite a number of free android apps.

The ads are strategically placed in important screen sections so they look like they are actual web content and the user then clicks thinking the information is relating to that of the webpage they are on.

The screenshot below illustrates the pattern, it was gotten from OLX’s website and as clearly seen, an advert space is intentional positioned around the product cards in disguise.

Forced Disclosure

A forced disclosure pattern offers low-cost or free services, but require that the user divulge sensitive information such as credit card information, personal addresses, e-mail addresses and phone numbers. Some companies will then sell this information to advertisers. This is very common with applications offering free trial of a premium feature for a limited time period or websites offering free e-book downloading but requiring your email address before you can download.

The trick is used by a lot of websites in which then sell your email addresses to bloggers, influencers etc, you then end up receiving quite a number of spam emails.

The sketch below illustrates this pattern, I designed a simple book download page (I assume I’ll someday write a book titled “How to XXX”, haven’t figured out what XXX is yet but when I do I guess I’ll update). Here I’m asking the user for the following information:

  • full name
  • email address
  • company

All this information just so they can download my e-book. There isn’t a disclaimer explaining why this information is needed as such this isn’t such a good idea and that’s what makes this a dark pattern. If the book is free, why do I need to provide personal information before downloading.

Hidden Cost

This I have seen on a number of e-commerce websites. The user is made oblivious of hidden costs until the last stage of checkout. Usually, by the time the hidden costs are revealed, you’ve already invested a great deal of effort and you’re likely to feel fatigued.

Roach Motel

A roach motel is a situation that is easy or straightforward to get into, but difficult to get out of.

You usually get in with one click and end up in a maze when attempting to go out. A lot of designers do this intentionally to force the user’s attention. A typical example is a website that makes opt-in for subscription with one click but makes opting out as difficult as possible.

Side Note

It is also important to know that user-experience isn’t limited to front-end developers. Back-end developers need to be equally aware of some of these patterns as it also applies to them. For example, the forced disclosure pattern applies to backend developers building an API that asks for sensitive information sold to advertisers when querying a resource.

There are still some forms of Dark patterns not discussed in this article, you can check out the links I’ve shared below which contains references of blog post and articles I used when writing this article, most especially the Hall of Shame on DarkPatterns.org.