Dark Patterns

Camouflaging Patterns

Dark patterns in this category are similar to those of disguise, in that they rely almost entirely on the visual properties of objects, but different in that the properties have the effect of making things blend into their surroundings, instead of making them stand out. Unlike “Fake Hair” or “Speck of Dirt”, these dark patterns rely on camouflage, rather than disguise.

We’ve seen an example of camouflage already, in Figure 2, “Hard to Unsubscribe”, but here we’ll focus on the Preferences screen of the business website Raconteur, as posted by @jamiebrighton on Jan. 23, 2019. In this figure we see the preferences page as it would appear on a desktop: a series of newsletter types paired with checkboxes, followed by a paragraph of text, a big green “Save Preferences” and a smaller line of text containing a link to other help article, in green.

A user who unchecked all the boxes and clicked the button would be sorely tempted to read the sentence below it. Ostensibly the purpose of the sentence is to provide a link to a help page, signified by the green word “here” in the figure, but it's real importance is to perform a kind of cognitive priming: it also says to users ‘this bold green text is what a link looks like’ on this page. Upon clicking the button, a user would still continue to be marketed to.

A more careful user will see the words “unsubscribe link here” in the middle of the final paragraph of text, but may note that it is not formatted like the only other link on the page, also on the word “here”, below the button. This more careful reader may very well conclude there is no link on this here and instead click on the other “here” on the page. This camouflage makes the real unsubscribe link very difficult to find. The link has been made to seem not a link, and the fake link is made to seem as the only real one.

This example also maps straightforwardly onto our four aspects of metis. Users presumably came to this page into to unsubscribe from annoying marketing email “newsletters”, and so the design needs to reverse this intention. It creates opportunity by cluttering the visual field and the problem space: now unsubscribing is a set of different acts, unsubscribing from the various newsletters, or not, or unsubscribing altogether (it being ambiguous what this means).

In this more cluttered visual and semantic field, the link that leads to a form to unsubscribe altogether takes the form of regular paragraph text, which it is not, and thus it blends in and becomes invisible. It is may still yet more invisible by the presence of a visually-stimulating example of a link, a very different styling of the same word, to reinforce the meaning of the design language being employed.

This camouflage will prevent at least some users from unsubscribing, which artificially inflates the value of the product at the expense of users’ time and attention. In this example, the true form a link take changes, it shifts, and the meaning of what link is transformed as well. This allows the creation of a true disguise. The route of escape has been hidden: the user is ensnared.

This camouflage is effected also by exploiting the conventions of visual design. The convention of consistency would dictate that hyperlinks in paragraph text all be styled the same way. Like the dark patterns of disguise, dark patterns of camouflage also rely on the gestalt Law of Similarity and Jakob’s Law.

The visual properties of the hyperlink—its color and font-weight are assumed to define membership in a group, and, since almost all other websites style links consistently, users would expect this one to do the same, but it doesn’t. In addition to these laws, however, dark patterns of camouflage also rely heavily on the gestalt concept figure-ground contrast, which states that objects that have more contrast with their surroundings have more visual salience.

In the case of this example, the hyperlink style achieves contrast with its surrounding text, and becomes the most salient bit of body text. Since it’s not a link to a place the user wants to go, this salience works as a kind of red-herring, a visual misdirection combined with the invisibility of the true link (it doesn't have any contrast with its surrounding text), serve to camouflage only escape route. The designers made it as small and as invisible as they could and still plausibly maintain good faith.