The patterns behind the game

The UI Game is 51 levels of interfaces built to work against you. Every one of them is based on something real — a documented cognitive effect, or a deceptive design pattern you have almost certainly met on a live website. These 17 pages explain what each one is, why it works, and how to design so it does not happen by accident.

Each page ends with the level that demonstrates it. Playing takes a minute and needs no account.

Cognitive effects

Documented properties of human attention and perception. These are not design mistakes — they are the raw material an interface either works with or against.

The Stroop Effect: when a label and its colour disagree The Stroop effect is the delay and error rate you get when you have to name the colour of a word whose meaning is a different colour — “red” printed in blue. It matters in interfaces because reading is automatic and colour-checking is not, so when a control’s label and its colour disagree, people act on one, notice the other late, and make mistakes they find hard to explain.
The Simon effect: when where a thing is fights what it says The Simon effect is the slowing and increased error rate that occurs when the position of a stimulus disagrees with the position of the response it calls for — even when position is completely irrelevant to the task. It shows that spatial location is encoded automatically and activates the spatially corresponding action, which is why a control placed opposite the thing it affects costs accuracy that no amount of labelling recovers.
Hick’s law: the most misquoted number in interface design Hick’s law states that the time to choose among equally likely alternatives increases roughly with the base-2 logarithm of the number of alternatives. Because the growth is logarithmic rather than linear, the law does not support the common design claim that splitting a long list into a hierarchy saves time — under a strictly logarithmic law, splitting is exactly break-even. What makes a long list slow in a real interface is visual search, scrolling and pointing, none of which Hick measured.
Colour vision deficiency: what breaks when colour is the only cue Colour vision deficiency is a reduced or absent ability to discriminate certain hues, most commonly along the red–green axis, and it affects a large enough share of users that any interface encoding meaning in colour alone will be unreadable to some of them. The design remedy is redundant encoding: every distinction carried by colour must also be carried by text, shape, position or pattern.
Inattentional blindness: why users look straight at it and never see it Inattentional blindness is the failure to consciously register a fully visible object or event because attention was occupied by another task. It matters in interfaces because a user in the middle of a task is measurably unlikely to report information placed outside that task, no matter how large, animated, or central it is on the screen.
The cocktail party effect: picking one channel out of a noisy screen The cocktail party effect is the ability to follow one stream of information among several competing ones by locking onto a stable physical cue — a voice, an ear, a position, a colour. Interfaces depend on it constantly, and it fails in a specific, predictable way: when the cue that distinguishes the signal is shared with the noise or changes between views, selection collapses from effortless filtering into slow item-by-item search.
The flanker effect: when neighbouring controls compete for your response The flanker effect is the slowing and increased error rate that occurs when a target is surrounded by irrelevant items associated with a competing response. It is a response-level conflict rather than a perceptual one, and it shrinks as the distance between the target and its neighbours grows — which is why two adjacent controls with opposite consequences are a measurable source of user error.

Deceptive design patterns

Interface choices that serve the business at the user's expense. Named, catalogued, and increasingly regulated.

Cookie consent dark patterns: double negatives and asymmetric choice A deceptive consent flow is a cookie or privacy dialog that asks a fair-looking question while making one answer far cheaper to give than the other — accepting takes one obvious click, refusing takes several buried ones, and the wording of the choices has to be decoded before you can act on it. The banner rarely states a falsehood; it manipulates the price of each answer, which is why these designs survive casual review and still shift outcomes by tens of percentage points.
Confirmshaming and the confirmation gauntlet: when “are you sure?” is the trap A confirmation gauntlet is a chain of “are you sure?” dialogs that pretends to protect the user while actually discouraging them, usually reinforced by confirmshaming — writing the decline option as a small self-insult so that choosing it feels like an admission. Both rest on the same finding: a warning shown repeatedly stops being read, so adding confirmations past the first one buys no safety and mostly buys abandonment.
Interruption cost: the work does not resume where it stopped The cost of an interruption is not the time it occupies but the time needed afterwards to reconstruct what you were doing — the resumption lag. Experiments show that lag grows with both the duration and the mental demand of the interruption, because a suspended goal decays in memory while attention is elsewhere. This is why a two-second pop-up costs far more than two seconds, and why a sequence of them is disproportionately destructive.
The roach motel: easy to sign up, engineered to be hard to leave The roach motel — catalogued today as “hard to cancel” — is the deliberate mismatch between how easy a service is to join and how hard it is to leave: one click in, and a multi-screen exit built from extra steps, guilt copy, retention offers and controls that are hard to find or hard to hit. It works on funnel arithmetic rather than deception, because every screen a person has to survive is a screen some proportion of them will abandon.
Forced consent: unreadable terms and the ritual of agreeing Forced consent is the design in which using a service is conditional on accepting an agreement that no reasonable person could be expected to read, and the interface then manufactures evidence that they did — a scroll gate, a disabled button, a checkbox. The problem is arithmetic before it is ethics: the documents are long enough that reading them all would consume weeks of a person’s year, so the ritual of acceptance measures compliance with a mechanism rather than understanding of a contract.
Pre-selected defaults: when the form has already answered for you A pre-selected default is any answer a form supplies on the user’s behalf — a ticked checkbox, a chosen radio button, a text field that already contains a value — which is submitted unchanged unless the user notices it and acts. Defaults are powerful because doing nothing is the cheapest option available, and for consent specifically, GDPR Recital 32 states that pre-ticked boxes do not constitute consent.
Dishonest progress indicators and the wait they are hiding A dishonest progress indicator is one whose displayed state is not derived from the work being done — a bar that animates on a timer, one that jumps to 90% and stops, or a control whose label does not match its effect. It matters because a progress indicator’s entire job is to let someone decide whether to keep waiting, and an indicator that reports a number it did not measure removes the information that decision needs.

Usability failures

Not deception. Decisions made in good faith — for tidiness, for security, for visual consistency — that measurably work against the user anyway.

Placeholder text as a label: what breaks and what to do instead Placeholder-as-label is the practice of deleting a form field’s visible label and putting its name inside the input as placeholder text. It fails because the hint disappears the moment the field has a value, leaving the user with an unlabelled box, and because the placeholder attribute is only a last-resort fallback in the accessible name computation rather than a real label. The HTML Living Standard states plainly that the placeholder attribute should not be used as an alternative to a label.
Password composition rules: why “one number, one symbol” backfires A password composition rule is a requirement that a password contain particular kinds of characters — an uppercase letter, a digit, a symbol. They backfire because people satisfy them in a small number of predictable ways (capitalise the first letter, append “1!”), which narrows the search space an attacker has to cover while making the password harder for its owner to remember. Current NIST guidance in SP 800-63B-4 tells verifiers not to impose them and to screen candidate passwords against known-compromised lists instead.
Signifiers: an affordance nobody can see is not a feature A signifier is the perceivable cue that tells someone an action is possible — the shading, border, colour or shape that says “this is a button”. An affordance is the action being possible at all. The two are independent, and an interface can be technically correct and semantically valid while offering no visible sign of where to act. Eyetracking finds that weaker clickability cues cost measurable time and attention on ordinary tasks.