Dark UI Cookies

Have you ever felt that the only option is to ‘Accept all cookies’ before continuing browsing?

That is the so-called Dark UI design. A method of visual manipulation, intentionally forcing visitors to click on the option we prefer. 

Sometimes, because it is the obvious default, or other options are presented as ‘bad for the user’, or simply hidden.

I have been thinking about this for a long time, and I am always astonished by the creativity of UI designers who want to trick you into the “Accept all” option.

Example of Dark UI Cookie Banners

1️⃣ Call for Action

📖 Example: ‘Accept all’ is a button, bright color, and visible. Reject (or reject all) is present as a link, maybe even next to the accept button, but since it is not a button, it does not really call for an action

2️⃣ The options are visually in different places

📖 Example: The reject button is in an entirely different position than ‘accept all’

3️⃣ Make other options almost invisible – (Same as option 1, but the designer went even further)

📖 Example: When the color of the ‘reject all’ link is in dark gray on a black background, or any other combination hard to spot.

4️⃣ Hide any actions over other options – (Number 3, but even further. )

📖 Example: Mouse over the link does not change your mouse pointer, and the link does not change color. Basically, it looks like normal text. 

User goes with the mouse over the link, the pointer remains the same, therefore the user is tricked that ‘Reject all’ option is just a text, not a link, or thinks it is disabled by default.

Important takeout: All these methods were invented to exhaust users’ decision-making mechanisms, so they want to ‘Accept All’ and feel relieved. 

Mouse over the ‘Reject all’ option does not change the cursor

Mouse over ‘Accept all’, change the cursor, and therefore create the impression that this is the only option here

Bad practices

Accept all option is disproportionately oversized compared to the other options

Cookie Settings almost look like accidental text here

Translation: You can Accept cookies or…. Accept 🤷🏻‍♂️ No other option, baby 😎

Good practices

But, it doesn’t always have to be sketchy. Let’s look at some good examples

Clearly marked option for ‘Reject all’. All necessary information is inside the pop-up

Nice design, where cookies are not pre-selected by default, but only when the user clicks ‘Accept all’ [Alle zulassen]