How dark UX patterns make design hostile

Color, contrast, size, motion, placement, copy, and other small details in interfaces and websites influence users’ actions. Those elements can be used to either help people reach their goals or push them into choices they might regret. The line between these two outcomes isn’t always obvious, and it’s important to know where design crosses that line.

Read this article to learn more about dark patterns in UX, their psychological backgrounds, and best practices for ethical design.

What dark patterns are and how they undermine user trust 

The key difference between a bad interface and a dark pattern is intent. A confusing form might be an accident, but when an interface is designed to manipulate decisions, it becomes a dark pattern. Dark patterns are effective because they exploit cognitive shortcuts. Classic behavioral findings explain this: people stick with defaults, prefer smaller cognitive loads, and are biased toward fast, low-effort actions. 

In a study of 642 websites and apps with subscriptions, about 76% had at least one dark pattern, and about 67% had more than one. Companies continue to use dark patterns even now, when more people are aware of the gimmicks and more regulations against such patterns are appearing at the state level. This way of attracting users brings results, even though they’re short-term. Black UX can be very effective at boosting conversions, generating more sign-ups, bringing in higher cart totals, or fishing out more user data.

But dark UX comes with expenses, such as reputation and loyalty. A study by Dovetail, a customer research company, shows that more than 43% of users interviewed stopped buying from a retailer once they spotted dark patterns. When users recognize manipulative designs, they start to feel unsure about how much control they have over their decisions and finances, and prefer to use other products. 

What dark patterns can crawl into

Some of the visual tricks from the list below can be legitimate, for example, when highlighting actions that can’t easily be undone, like deleting an account. The rule of thumb is that a visual solution is more fair when it highlights something genuinely helpful for the user, like a discount, a free course, or a product update. The moment it stops serving the user’s interest and serves only the company’s, it’s on the doubtful side.

Motion and animation

Research on perception and memory in UX, such as studies from the Interaction Design Foundation, shows that high contrast, size, position, whitespace, and sometimes subtle animation help elements stand out even when they’re not in the center of view. Users may not be looking directly for the “Cancel” button, for example, but if it’s small, low contrast, or placed off to the side, they’ll miss it or take longer to find it.

Pop-ups and modal design

Urgency or scarcity cues are often built into modal windows with bright colors, bold type, and even timers. For example, “Only 2 left at this price” may appear in aggressive red or be animated, and the dismiss option may be tiny, hidden, or require two clicks instead of one.

Comparison charts

Unequal comparison is a gimmick when a product or pricing page is structured to push users toward a certain choice, usually the most profitable one for the company. Instead of presenting options transparently, the design exaggerates the advantages of one plan or pricing, and compares it with less attractive plans, or even other things that have nothing to do with the product.

Examples include pricing tables, where one option is highlighted and described positively, while others are listed with technical limits in detail, creating the impression that it’s a bad choice even when the differences are minor. This tactic is tied to behavioral economics, especially the decoy effect. When people are given three options, they tend to pick the middle one, or the one marked as the best value, even if that framing is artificial.

Layouts

The general rhythm of the layout is also a place of attention with its visual hierarchy, colors, and contrasts. One of the simplest dark pattern techniques is making text important for the user but not for the company appear small, light, or hidden. These can include terms and conditions written in pale gray on white, or subscription cancellation links placed at the bottom of a page in tiny font. At the same time, the company’s preferred action, like “Start free trial,” will appear in large, bold, and be placed front and center.

Contrast affects how easily people notice things, how pleasant they find interfaces, and how much they trust the flow. For example, a study of icon density and color contrast found that high contrast helps people identify icons quickly and accurately. Another study on subjective and objective user behavior disparity looked at color combinations and their contrast relative to user-friendliness. If contrast is too low, for example, with pale text on a near-background color, essential items are overlooked and the whole design feels hostile. Color also matters: the “yes” button is often vivid green while the “no” option is gray, pale, or even red. Because red is associated with danger or error, it makes declining feel wrong or unsafe, while green radiates safety and success.

Buttons 

Where a button or action is placed and how big it is influences how likely people are to click it, how quickly they do so, and how many mistakes happen along the way. Interfaces are often designed to match the reading order of a culture—left to right, right to left, or top to bottom. By putting the action a company wants in the most noticeable spot and hiding the alternative in a less visible place, designers can nudge users into dark patterns.

A study from the School of Art and Design at Guangdong University of Technology found that button size matters a lot: in a test on a large touchscreen, certain sizes of buttons performed better depending on their location, with buttons in lower or peripheral areas frequently unnoticed or misclicked. Also, in a study on placement and design of navigation buttons, researchers found that placing “Next” or “Submit” buttons in certain locations—such as on the right or below the content—made the action easier to find. When the “Back” or “Previous step” button was placed below or styled as a hyperlink instead of a large button, people used it less often, and were more likely to move forward without reconsidering their choice.

Ads

Disguised ads look like part of the content or interface but are actually paid placements or calls to action. The trick is to make the user mistake them for editorial content, search results, or navigation. One good example is when the first results in a Google search are marked with a tiny “Ad” label, which is sometimes mistaken for the real search results.

Pre-selections and defaults

Pre-checked boxes are a classic move. By defaulting the option to “opt in” for newsletters, additional purchases, or data sharing, designers might accidentally or intentionally make a choice for people who don’t uncheck boxes. The box is often subtle, small, or placed in the middle of a long form where users won’t notice it. Also, there might be too many checked options, which take time to uncheck, like in cookie pop-ups.

Text copies

Wording can also trick people. The  “opt-in trick” presents the user with three options: “Opt in,” “Don’t opt out,” and “Don’t not opt in.” The actual “Opt out” option will be written in a bleak color somewhere after the Confirm button.

Navigation

Some dark patterns rely on structure rather than visuals: the desired choice will be one click away, while the alternative requires five or six steps and extra logins. The user will be overwhelmed and navigate toward a more straightforward path.

How to design UX for users, not against them

Design ethics is full of ambiguous things on the edge of common practices that foster business growth and conscious solutions to do the same, but differently. Before shipping anything that changes user behavior, it wouldn’t hurt to run it through a short checklist: Will my design choices help users do what they came for? Will a person reading copies understand the consequences of their click? Are you meeting KPI at the expense of your users? Are you eliciting negative emotions to push them toward a choice they didn’t want?

Every designer or design team is to determine its own ethics based on the specifics of its work. A few years ago, Readymag published the Guiding Principles Behind User Interface editorial, outlining the rules that still resonate with the team, though they were never meant to be set in stone. What matters most is staying mindful, questioning our decisions, and recognizing that every design decision can shape someone’s behaviour.