As designers, we can use color color choices are a vital ingredient to help your users and prevent confusion.
Take a look at this old email newsletter message below; the colors could confuse the user and make the job of finding out how to unsubscribe harder. With a grey font for the email address on a slightly lighter grey background, it would be very difficult for the user to see exactly what it says. Likewise, although the “subscription settings” text is underlined, the user would not necessarily recognize the link—and that’s thanks to the confusing nature of the colors used in the display. As the designer did not follow the convention of using distinctly blue underlined text for inline links
Many email newsletter messages have a layout similar to this historical one from wonderbly.com. The option to unsubscribe had a color with little contrast to the background, thereby making the option difficult to find.
© Wonderbly, Fair Use
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 immediately. 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 run into a problem where we can confuse our users 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.
The colors of inline links are the same as the colors of non-interactive text. This way, users will likely not be able to distinguish clickable links and will likely overlook the possibility to find relevant information.
In this old example from Codecademy, the text “Terms of Service” didn’t stand out as clickable at first sight. Combining it with an implied consent design pattern, this solution might persuade users to sign up without reading these terms.
© Codecademy, Fair Use
If you’re thinking about camouflage here, you’re on the right track. For designers, the risk is that 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 Gestalt Principles
“Color does not add a pleasant quality to design – it reinforces it.”
When you use a similar color background to the text, the user must devote more attention to the display to read what it says. If you do not want users to see, then combining colors in this way can be a very underhanded way of sneaking information past them. The information is still there; it’s just that designers can conceal it, somewhat like writing on a page with a worn-out yellow highlighter.
Then there are designers who do not want users to miss the information but merely make it a little harder for them to commit to a certain action. This could be, for example, opting out of a newsletter. These designers might consider another dark pattern
In another old example, Shutterstock used color here to make a particular subscription stand out. The other subscriptions appear to be inactive, due to the greyscale that is used.
© Shutterstock, Fair Use
Sometimes, it’s about making desirable subscriptions or deals stand out. 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 ethical 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, remember your users who have some form of color blindness accessibility conversion
The Take Away Color can enhance the usability
References and Where to Learn More Hero Image: © Unsplash, 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 .
