Disguising Patterns

This kind of dark pattern operates almost entirely through manipulation of visual properties and has less to do with actual content, except inasmuch as the true content of things has been disguised by the design.

We’ve already seen one example of disguise in Figure 1 “Fake Hair”, but here we’ll focus on the “Strikingly Ad” posted by @simonfrr on Jan. 31, 2018.

In Figure 11 we see the advertisement as it would appear on a mobile device: annoyingly jutting up from the bottom of the screen and covering precious pixels of screen real estate.

Helpfully, a downward-pointing triangle seems to offer the option of closing the panel, however, when clicked, the triangle instead takes users to a webpage. The downward-pointing triangle is the thing that’s been disguised: an external link has been rendered as a panel toggle. The thing, a link, doesn’t match its representation, a toggle.

Primary Example: As UI

Figure 11: "Strikingly Ad" shows an ad bar with a downward caret that, rather than closing the bar, takes users to a different website.

In terms of metis, this example exhibits all four aspects. The purpose of the design is to reverse the user’s intention: instead of closing the advertisement, the user must be made to visit the site. Deactivate must be converted to activate. The Strikingly ad must first create an opportunity, it must prompt an action. It does this by creating what appears to be a collapsible panel that obscures part of the screen.

To reclaim this portion of their screen, the user looks for a way to dismiss the panel and spots a prominently rendered downward-pointing triangle, commonly called a caret, that typically signifies, or stands in for, a means of collapsing such panels. In fact, the hidden functionality of this interface element is to trigger, not the collapse of the panel, but instead a navigational link that loads a document on another server: in this case apparently Strikingly’s website. This probably serves to creates artificial traffic to the host site and inflate its value.

The “form” or “design” of the navigational link has been transformed into a caret, and this disguise allows something malicious, intentionally misdirected traffic, to masquerade as something benign. Like the bait of the angler fish, a malicious truth is hidden beneath a reassuring exterior.

This disguise is effected by exploiting the conventions of visual design: by convention, collapsible panels have a way to close them, and by convention this is often represented by a downward-pointing caret. This is reinforced by the fact that direction the caret points is the direction in which the user wants to “send” the panel.

Aside from these semiotic confusions, the disguise also works by by exploiting what's known as “Jakob’s Law of User Experience”, after UX pioneer Jakob Nielsen, which states: “Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know” (Yablonski, 2019).

In visual rhetorical terms, this is related to two gestalt principles: the Law of Similarity and the Law of Common Fate. The Law of Similarity is simply that objects that are visually similar are perceived to be part of group. The Law of Common Fate states that objects moving in the same direction are perceived as belonging to a group. Based on these simple rules, users will expect the downward-pointing caret to collapse the panel that contains it, not take them to another site entirely.

Variant: Foreign Object

Figure 12: "Speck of Dirt" includes a photoshopped shadow that looks like a speck of dirt on the advertisement, so when users try to brush it away, it triggers the link.

Variant: Fake Hair

A tweet showing a fake hair photoshopped onto a sneaker advertisement.
Figure 1: "Fake Hair" we've seen before, but it's worth including with these other examples because it is true disguise.