Shining a Light on Dark Patterns

As the internet has evolved, website designers and mobile app developers have learned to take user experience very seriously. Thanks to these improvements in design, unattractive pages full of flashing “click me” banners with neon text are a thing of the past. However, not all design innovation is beneficial for end users. A phenomenon known as “dark patterns”—user interface designs meant to manipulate users into performing certain actions—is becoming more common.

These tricks can be subtle or overt, and you’ve likely seen them. Dark patterns can range from a default setting during a website signup that also covertly signs you up for a newsletter (and even begs you to reconsider if you uncheck the box) to hiding shipping and tax costs until the last checkout page. Other dark patterns have likely led you to share more private information, buy items because of a possibly misleading suggestion that there were only a few left in stock, or spend money following the end of a “free” trial. The use of some dark patterns has become prevalent in mobile games and apps, a trend that is particularly salient when these apps are directed at children.

Children interact with apps in a unique way. It's no surprise that kids prefer websites with cartoon characters, audio-visual cues, and bright colors—practices generally disliked by adults. However, the differences between adults and children run deeper. For instance, children struggle to tell the difference between ads and content and very young children may click ads or makes purchases by accident. If you decide to design a website or app for children, it's a good idea to first understand how children process information and interact with the digital world to make certain the above issues don’t occur in your design. Smashing Magazine has several guides that further describe various considerations when designing children's websites.

Although little study has been done on dark patterns geared toward children, legislators have taken notice. In the U.K., the Information Commissioner’s Office recently released a consultation document describing its recommendations for a code of practice for “age appropriate design” in online service. In the U.S., Senators Warner (D-VA) and Fischer (R-NE) proposed the DETOUR Act which bans practices with “the purpose or substantial effect of cultivating compulsive usage,” when directed at those under the age of 13. An example of compulsive usage given by the DETOUR Act is auto-playing videos. If the DETOUR Act passes, websites would need to obtain consent from parents to enable auto-play features.  

Others have also started to raise awareness about the use of dark patterns. Harry Brignull, a user experience designer, coined the term “dark patterns” and created a website to inform consumers of companies using these practices. The site includes a list of common dark patterns, such as the creatively named "privacy Zuckering" that leads users to disclose more information than required. In addition to the educational materials, the site includes a “hall of shame” that names companies that use dark patterns. More examples of practices considered “dark patterns” can be found in the recently published Deceived By Design report from the Norwegian government agency and consumer council, ForbrukerRadet, that focuses on examples of how design can engineer consent. The Deceived By Design report details the agency’s attempt to opt-out of data collection from popular websites. The attempts fail because sites either deny use or repeatedly ask for acceptance until you agree.

 Businesses that wish to avoid being called out for dark patterns should make an effort to embrace “light patterns” in their design choices. This means making a concerted attempt to make consumer choices well-informed without dumping a prohibitive amount of information on the user. In practice, a fine line exists between making choices attractive to users and outright manipulating them. Often, the difference is only a matter of degree.

To this end, CARU has compiled a non-exhaustive list of general principles that businesses should consider when trying to bring “light patterns” into the design process and avoid consumer confusion:

1. Use clear and honest communication.

When presenting options to users, avoid misleading or ambiguous language. If an option might require an asterisk and some fine print for a user to fully understand, it’s best to change the language. For example, imagine a website with a large banner that says: “Save by purchasing the Bundle!” Such a website should also make the unbundled, basic option price easy to find. If a user needs to click all the way through to checkout before finding out the bundle only saves them more if they decided to get all the options included in the bundle, then the initial banner was not clear in what it meant by save.

2. Think of the children.

Children use graphics to navigate websites more often than words. A well-made website will present graphics that represent to children what happens when they click on them. Young children can also struggle to interact with web interfaces, especially when beginning to use a mouse. To compensate, a website should make sure that click boxes for options are large and easy to select. Avoid placing advertisements near the options a child wants to select, otherwise the child may accidentally click on the ad despite wishing to select another option. Children also struggle with scrolling, if a child may wish to select an option make sure that option fits into the same view as the other options. When designing for mobile, add breakpoints that keep the option in view for children using tablets or cellphones. Arguably designing for mobile is more important, reinforcing the idea that designing for mobile first is easier, because most children’s earliest access to the web is often through a tablet.

3. Avoid emotional appeals.

When presenting a choice to a user, avoid making an appeal to emotion. For instance, imagine a company that presents an ominous message to users who choose not to opt-out of a facial recognition scan, implying that opting out of facial recognition would make it more difficult to catch strangers accessing their account. Using disparate emotional tools depending on a user’s interaction with your product may be considered manipulative.

4. Design symmetrical opt-in and opt-out choices.

When a user signs up for a newsletter by checking a single box, the user should be able to discontinue the newsletter by checking a single box. However, users often must unsubscribe from a newsletter by clicking through a link within an email that presents several options or dialogue boxes before confirming that the users will no longer receive messages. Generally, people understand the purpose of newsletters and do not need an explanation of what they will “miss out on.” In at least one case, a company sent out multiple newsletters, each with its own unsubscribe option. If one click can add you to all the mailing lists, one click should be able to remove you from all the mailing lists. Users should not have to wait for multiple emails to arrive in order to effectuate a choice to unsubscribe.

5. Don’t bury choices.

An important decision should be easy to access. If a customer wants to exercise choice, a website should not force them to click through multiple menus or read excessively long documents in legalese. An easy to navigate menu and quick descriptions of the options empower user choice instead of taking it away. If needed, a longer description can be added next to a short description to provide more information for users seeking it.