design ethics
Visual interference
What is visual interference?
Visual interference is a deceptive pattern that uses styling - colour, contrast, size, placement - to steer you toward the choice the company wants and away from the one you'd choose. The bright, prominent "Accept all" beside a greyed-out, tiny "Reject", or the option you want buried in low contrast, all manipulate the visual hierarchy to manufacture a "preference".
Also known as: visual interference, visual misdirection, false hierarchy
Prefer to watch?
Watch the recap 1:01
The demo
A cookie banner. Your aim: reject non-essential cookies. Try it on the interfering version, then the balanced one - and notice where your eye is pulled, and how easy "reject" is to find.
What this demo shows (text version)
A cookie-consent banner is shown two ways, with the goal of rejecting non-essential cookies. In the interfering version "Accept all" is a big, bright, high-contrast button while "Reject" is tiny, greyed and low-contrast - so the eye is pulled to accept and the reject option is easy to miss, even though both are technically present. In the balanced version both buttons have equal weight, contrast and prominence, so rejecting is just as easy as accepting.
That's visual interference: rigging the visual hierarchy so the company's preferred option dominates and yours fades, manufacturing a "choice" the styling really made. The honest standard is equal visual weight for equivalent options - if both choices are real, both should look it.
Visual interference rigs the look of a choice so the company's preferred option grabs the eye and yours fades into the background. A glowing "Accept all" cookie button next to a barely-visible "Reject"; the upgrade in bold and the "no thanks" as faint grey text; the decline option pushed off-screen or styled to look disabled. Every choice may technically be present, so it feels like your decision - but the styling did the choosing. The honest standard is equal visual weight for equivalent options: if two choices are real, they should look equally available, so the design reflects your intent rather than overriding it.
Both buttons were there - but one glowed and the other faded, and your eye (and finger) went where the design wanted. That's visual interference: false hierarchy dressed up as your free choice. Give equivalent options equal weight and the decision returns to you. When one real option is loud and the other is whispered, the styling is making the choice, not you.
Visual interference manipulates the visual hierarchy to bias decisions: the preferred option gets high contrast, colour, size and prime position, while the disfavoured one is made faint, small, off to the side, or styled to look inactive (grey like a disabled control). Cookie consent banners are the canonical case - a vivid "Accept all" against a near-invisible "Reject all" - but it appears in upgrade prompts, unsubscribe pages and any either/or decision.
It's deceptive because every option is technically present, so the company can claim the user chose freely - but attention follows salience, and most people take the path the design lights up without registering the alternative. It exploits how we scan for the obvious action and stop, and it pairs with confirmshaming (the faded option also worded to feel wrong) and preselection.
The fix is visual parity for equivalent choices: give "accept" and "reject", "upgrade" and "no thanks", "keep" and "cancel" the same weight, contrast and prominence so neither is hidden. Reserve strong visual emphasis for genuinely recommended, user-beneficial defaults, not for whichever option profits you. Regulators increasingly require equal prominence on consent choices, but the principle is simple: if both options are real, both should look it.