Color can be used to guide someone in the right direction to accomplish a task effectively and efficiently. Just think about a bright red “Read More” button on a white background, one that directs you to a full article on your favorite design guru. Even so, used by designers who focus more on the needs of the company than on those of the target group, colors can turn into a bewildering nightmare, hiding buttons and information users actually need. Alternatively, they can serve as more discreet allies, not unlike magicians’ assistants. Here, you’ll see all about the confusion you can create with your choice of color, to get the users to do what you want. Now, watch – watch how your palette can pull on their puppet strings.
Take a look at the email newsletter message below; the designers have obviously chosen colors that are intended to confuse the user and make the job of finding out how to unsubscribe harder due to visual obstacles. By using grey font for the email address on a slightly lighter grey background, it is very difficult for the user to see exactly what it says. Likewise, although the 'subscription settings’ text is underlined, the user will not necessarily recognize the link—and that’s thanks to the confusing nature of the colors used in the display. By the designer’s flouting the convention of using blue underlined text for inline links, the user may not notice that the text is actually clickable and linked.
Author/Copyright holder: Wonderbly. Copyright terms and license: Fair Use.
Many email newsletter messages have a layout similar to this one from wonderbly.com. The option to unsubscribe intentionally has a color with little contrast to the background, to confuse the user and make the option difficult to find.
Why is this classed as a dark pattern?
Color is one of the pre-attentive attributes; those of us with full color vision can use this element of visual arrays to distinguish items and extract information with immediacy. However, when certain colors are combined, we find it extremely difficult to read text and gain an instant understanding of the presented information. In view of this, we have an ace up our sleeve as designers—namely, our use of color is something we can trick users with in not just one way but two:
The colors of text have low contrast to the background. This way, the text doesn’t stand out to the user sufficiently to get noticed. What’s more, users will find the text hard to read once they have finally discovered it. More incisive users will read the material, anyway, but remember – users tend to like working as little as possible in this sense.
The colors of inline links are the same as the colors of non-interactive text. This way, users will not be able to distinguish clickable links and will likely overlook the possibility to find relevant information.
Author/Copyright holder: Shutterstock. Copyright terms and license: Fair Use.
In this example from Codecademy, the text “Terms of Service” doesn’t stand out as clickable at first sight. Combining it with an implied consent design pattern, this solution attempts to persuade users to sign up without reading these terms.
If you’re thinking ‘camouflage’ here, you’re on the right track. As designers, we can twist and warp the elements of pretty much anything we create, be it to mask items or bring them out. The user’s eye is putty in our hands, because we know how the human eye works and how it can, along with the brain, go along with hints, cues, and illusions (as the Gestalt Principles attest). If we want to, we can draw our users’ attention to elements, prompting them to take action. By the same token, we can mute and bury messages—often called “the fine print”—so users will carry on regardless. It is here where we have to do a check on the moral barometer, asking ourselves if the user is likely to go over a cliff edge (figuratively speaking!) and suffer some form of loss. If the answer is a ‘no’, we can breathe more easily, and consider how we might use this to trick and deceive users in a more positive—or at least a harmless—sense.
“Color does not add a pleasant quality to design – it reinforces it.”
—Pierre Bonnard, French painter, printmaker, and founding member of the Post-Impressionist group of avant-garde painters Les Nabis
When you use a similar color background to the text, the user must devote more attention to the display so as to read what it says. If you do not want the users to see, then combining colors in this way can be a very underhand way of sneaking information past them. The information is still there – it’s just that you can conceal it, much like writing on a page with a worn-out yellow highlighter. However, if you do not want users to miss the information, but you merely want to make it a little harder for them to commit to a certain action, such as opting out of your newsletter, you might want to consider another dark pattern or unfriendly maneuver, such as placing the command out of the usual position or adding an extra, laborious step to the procedure. Pictures are just as ‘bendable’ in this sense as words are (i.e., you can word a sequence of sentences and apply checkboxes beside them in a way that most users will not stop to think about). Having this skill doesn’t make you a criminal; it just means you can be a master ‘acrobat’.
Author/Copyright holder: Shutterstock. Copyright terms and license: Fair Use.
Shutterstock uses color to make a particular subscription stand out. The other subscriptions appear to be inactive, due to the greyscale that is used.
As you can see above, color is an innocent ally. A sensible use of it can bulls-eye a target as well as it can conceal something you don’t want users to take much stock of. As long as your client is an above-the-board organization, you should have ample leeway to plan how you can add value for them by cleverly accentuating desired targets while making color choices that will not catch their eye when it comes to including required (if less desired) elements or information.
As you consider the wealth of possibilities for playing with color, bear one further consideration in mind. Aside from steering well clear of “epic fail” selections, such as red-on-blue or blue-on-red interplay, you should spare a thought for those who have some form of color blindness, particularly as regards red and green elements, for example. Always ask yourself “What do I want to show and why?” and “What do I want to hide and why?”, and balance these against ethical considerations such as accessibility and likely outcomes for users. That said, you may just surprise yourself at how, with the right color choices, you can nudge a user towards conversion territory.
The Take Away
Color can enhance the usability of an interface. With the correct contrast, we designers can help users find content that is relevant to their tasks quickly. But interface creators can also use color for less noble purposes. When companies want to trick users into selecting the more expensive option of a subscription, or want to make finding certain ‘unsubscribe’ options more difficult, the designers can use the same knowledge about colors in a dark way. They can select low contrasts to keep attention away, or bright colors to attract users and guide their actions. As always, being a responsible designer requires you to find the right balance between enthusiastic marketer and slick puppeteer – doing users zero harm while you maximize the benefits for whomever you turn your hand to help.
References & Where to learn More
Hero Image: Author/Copyright holder: Unsplash. Copyright terms and license: CC0.
Jenifer Tidwell, Designing Interfaces: Patterns for Effective Interaction Design, 2010
Martijn van Welie, Pattern Library, 2008
Harry Brignull’s website dedicated to dark patterns.