Dark Patterns

Disorienting Patterns

Similarly to dark patterns of misdirection, those of disorientation perform their deception in plain sight, as it were, through sophisticated confusion, but this category is notable for the fact that the thing being disguised in these examples is not an object on the page as it is so much a whole semantic category: in the case the meaning of yes and no, of red and green, of selected and unselected.

In the Figure 20, posted to Twitter by user @tom-hartley on Jun. 9, 2018, we see what appears by now be a familiar trope: an array of choices. However, a combination of wording and the counterintuitive function of the selection toggles makes it entirely unclear which “version” of reality we must embrace: one in which yes means no and green means bad? Or the familiar patterns that equate yes with confirmation and green with safety?

The kind of metis involved here is more radical, involving as it does the meaning of basic words, colors, and interface concepts. It’s seeking to reverse the user’s intent to unsubscribe, and it does so, as before, by presenting an array of options. Rather than simple checkboxes, however, these options are configured by kind of toggle, whose function is encoded with the words “Yes” and “No” and the colors red and green.

A small white square constitutes the toggle. When the user selects an option (either Yes or No), the white square slides over to cover the word the user tapped, leaving the other word visible, highlighted in green if yes, and in red, if no. Which has been selected? Moreover, which is the correct one?

Rather than discussing one thing as another, or hiding something in plain sight, this kind of Metis has transformed the very nature of what yes and no means, what red and green means, what selected and unselected means. Many users could easily misinterpret these form elements and unintentionally enable the whole suite of marketing spam targeted at whatever poor inbox the user enters.

From a visual perspective, less relies on concealment and more on generating ambiguity. As in the case of misdirection, a visual hierarchy is established and used, but here it is consistent. The color green, representative of success or safety, is articulated with the yes answer (meaning to opt in), while the color red, representative of warning or danger, is articulated with the no answer (opting out of the marketing spam).

To confuse matters further, the toggle slider does not work as expected. By convention, a toggle has two states: one end or the other, but this one has three states including an ambiguous middle. When one end is selected, however, that end isn’t highlighted, but instead its completely obscured by the white square, on a white background making it effectively invisible.

So selecting “No” would make the word “no” and its red background disappear, leaving only the “yes” in view. The “yes” would appear to be “selected” in the conventional sense, since it’s been made visible by the toggle action, but the white square has moved to the “No” end, so does that mean “No” has been selected?

The combination of words, colors, and the color/effect of the toggle slider makes the meaning of any semantic bit, while consistent, completely ambiguous. These cardinal signs: yes and now, bad and good, right and wrong, have been confused, and in the absence of their surety, the user becomes completely disoriented, as apt to blunder into danger as away from it.