Dark Design Patterns

Deceptive interfaces and how to redesign them

· 3 min read
  • Human Computer Interaction

Introduction

User interfaces are essential in bridging the gap between humans and computers. They are meant to be intuitive and trustworthy, guiding users towards their desired goals. However, greedy corporations or malicious actors sometimes use dark design patterns to manipulate users into performing certain actions.

Examples

Dark design patterns are present everywhere in the digital world. Most of these patterns are financially motivated as we’ll see for the case of deceptive ads and cookie banners.

Deceptive cookie banners are a classic example of a dark design pattern. It has been a well-established practice of many websites (that continues to this day) to hide the “Reject Cookies” button under many levels of obscurity (multiple clicks) whilst making the “Accept Cookies” button highly prominent.

This leads to most people agreeing to the cookies since they are not aware that rejecting them is an option. Even if they are aware, they might find rejecting them to be too time-consuming or complicated.

YouTube's old cookie banner with no reject option
YouTube's old cookie banner with no reject option

A good user interface would show both options clearly e.g., “Reject Cookies” and “Accept Cookies” buttons side by side. In fact, using the term cookies is a red herring itself. Non-technical users may not be aware of the jargon, leading them to unknowingly accept being tracked. A clearer and even better wording would be something like “Allow cookies for tracking” and “Reject cookies for tracking”.

There should also be a concise message explaining that these cookies will track the user’s activity on the internet and will be used to provide personalized advertisements. Companies usually hide behind long user notices that heavily use complicated jargon to confuse the users and make them accept the terms.

A better but still biased cookie banner design due to selective highlighting
A better but still biased cookie banner design due to selective highlighting

Mobile Ads

If you’ve ever downloaded a free app through an app store, you’ve probably seen those annoying ads. These are examples of some of the worst user experiences. In order to maximize click-through rates, these ads heavily employ dark design patterns.

Most notably, they frequently change the placement of the close button, and its hit target is intentionally made very small — a clear violation of Fitts’s law — so that users end up clicking on the ad by mistake. In the worst cases, these ads themselves include fake ‘X’ icons to manipulate the user into clicking the ad. This is an example of purely malevolent user interface design.

A mobile ad with a fake 'X'
A mobile ad with a fake 'X'

It is possible to serve ads in an ethical and trustworthy manner. For example, some apps show a prominent “Close” button with an ample touch target instead of tiny, obscure ‘X’ icons. They also show clearly the duration of the ad and when it is skippable. In fact, serving ads this way increases user trust and retention, and may lead to more economic benefits in the long term for companies.


Portrait of Atta Ul Haleem
About me Hi, I'm Atta. I write about my experiments with technology, coding, and everything in between.
→
← Back to Blog