Dark Patterns

Misdirecting Patterns

More explicitly than the previous example of camouflage, the dark patterns in this category use visual properties to induce users to pay attention to one set of objects at the expense of another. This is not true disguise, nor really camouflage, but instead relies more on principles of figure ground contrast, the idea of visual weight, or visual attraction, and what Arnheim calls the anisotropic view of space, or the idea that space in difference places is not the same, i.e it has different value. Some locations are privileged, in that they draw attention to themselves or occupy hierarchically-dominant locations.

In Figure 17, posted to Twitter by user @Fantpmas on Jan. 28, 2018, we see an example of this kind of misdirection. The user arrived on this page having chosen to continue with the “Free Plan”. Instead, the user is taken to a page of plans, the most basic of which is highlighted visually and comes sequentially first in order. Other plans that follow are more comprehensive, and various details of each are presented to users.

Many will click the “Confirm Trial” button highlighted in blue. However, the real link to the free trial is just a phrase far in the upper-right corner of the whole page colored an innocuous blue and without underline. It might not even be a link but instead a description of the page as a whole. This is the actual link, if the user can find it. But it is hidden in plain sight by the visually signaling.

This example exhibits a different kind of metis, more subtle and more brazen. The user had chosen to continue with the free plan, and to subvert this, the design must induce the user to select a paid plan without knowing it. It creates the opportunity for the deception, by splitting the plan options into multiple plans: now the single thing has become many. Which is the correct one is confused by the presentation of so many details arranged just so on the page: in sequence.

A different plan than the one the user wanted is made to stand in its place, one becomes the other, is disguised as the other. Meanwhile the true free plan is disguised as a plain and seemingly disconnected bit of text, unrelated in kind to the other plan presented most prominently. This disguise serves to conceal an inner malice.

The exterior of the paid plan is seductive, it masquerades as the free plan, but it conceals its malicious intent: in reality those who take that path and follow the remainder of its steps will find they owe charges that are difficult and annoying to stop. This fake free plan is the gateway to a credit card entry form, and woe to the user that enters his or her account information there.

The Invisible Eye

Visually, this kind of dark pattern depends on the gestalt principle we’ve already discussed, grouping by similarity, principles of consistency, and figure ground contrast, but these kind of dark patterns exploits them fully. In situations when designers must present a varied set of information, visual and typographic hierarchies are used to create structure and relationships, and indeed we see the same here with different typographic treatments of data, the order sequence of plans, and the visual highlighting of the most important set of information, the recommended plan.

It occupies the most visually privileged location on the page: it has the most visual weight (derived from contrast with the blue colors), and it is first in the sequence. The highlighted button reads “Confirm Trial”, while all the other buttons read, “Start Free Trial”, indicating to users that this one is the plan they had previously selected, even though it’s not.

In perhaps the least-privilege position on the page, the far upper-right corner, indicated in the figure by the red-arrow (presumably added by the Twitter user who posted it), is the link for the user to confirm the free plan. This kind of deception works by creating and then subverting a visual hierarchy, more sophisticated than either disguise or camouflage.