Cognitive effect

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.

What it is

Barbara Eriksen and Charles Eriksen published the task in Perception & Psychophysics in 1974. Participants saw a one-second display in which a single target letter appeared at a known position directly above a fixation cross, so there was no searching involved. The target was drawn from the sets H/K or S/C, and participants pressed a lever left or right depending on which set it came from. Flanking noise letters were placed either side of the target and were response-compatible (letters mapped to the same lever), response-incompatible (letters mapped to the opposite lever), or unrelated. The experimenters also varied the spacing between the letters.

Two results made the paradigm durable. Response times were longest when the flankers were mapped to the opposite response, and the interference fell away as the spacing between target and flankers increased. Because the target’s location was given in advance, the cost cannot be explained as time spent looking for it. Something about the irrelevant neighbours was being processed far enough to prime a competing action.

Charles Eriksen’s 1995 review in Visual Cognition sets out that account explicitly: the interference the task produces arises largely from the incipient activation of competing responses, which then has to be suppressed before the correct one can be executed. The flanker task became a standard instrument for studying that suppression, and later work extended it well beyond letters.

The arrow version most people have met — five arrows, judge the middle one — is a later adaptation rather than the 1974 stimulus, and it is the version this game uses. The level shows a row of five arrows where the outer four always agree with each other and disagree with the centre arrow on roughly seventy per cent of trials. You judge the middle arrow’s direction, and you need ten correct in a row; a single wrong answer resets the streak to zero. The streak requirement is what makes the effect legible: the interference per trial is small, but a small per-trial error rate compounds brutally over ten consecutive trials, which is exactly the arithmetic of a user performing the same risky click hundreds of times.

Why it works on people

Attention has a spatial extent that cannot be narrowed to a point on demand. Charles Eriksen and James St. James proposed the zoom lens model in Perception & Psychophysics in 1986: the focus of attention can be tightened or widened in response to a cue, but tightening it takes time and widening it spreads processing capacity more thinly. Within whatever aperture is currently set, nearby items are processed whether or not they are wanted.

Because those neighbours are processed, and because in these tasks they are mapped to actions, they partially activate the wrong response. The system then has to resolve a conflict between two candidate actions, and resolution costs time. That is why distance is the variable that matters: it determines whether the competing item falls inside the aperture.

The cost per event is small — tens of milliseconds, and a modest bump in error rate. That smallness is what makes it dangerous in production. It does not show up in a usability session with six participants performing a task twice. It shows up in support tickets from users who deleted the wrong row and cannot explain how, and in the aggregate rate of a mistake nobody can reproduce on demand.

Interface conflict is usually worse than laboratory conflict on one axis and better on another. Worse, because real adjacent controls carry consequences of wildly different magnitude — archive versus delete — so an occasional wrong response is not an occasional lost millisecond. Better, because users can slow down deliberately when they know a control is dangerous. The failure case is a dangerous control that does not look dangerous.

Where you meet it

  • Confirm and Cancel rendered as twin buttons in the same size, weight and radius, separated by an eight-pixel gap, at the corner of a dialog where the pointer is already travelling.
  • Icon toolbars where every glyph occupies the same square silhouette and the destructive one sits between two of the most frequently used tools.
  • Table and list rows with a per-row action cluster, so the same physical region contains the benign action a user performs fifty times a day and the irreversible one they perform twice a year.
  • Mobile tab bars and bottom sheets where a primary action is one thumb-width from a dismiss control, and the thumb’s contact patch is wider than the gap.
  • Segmented controls used for mode switching where the modes have asymmetric consequences, such as "draft" and "publish".
  • Keyboard shortcut maps that assign opposite outcomes to physically adjacent keys, which is the same conflict transposed onto the motor system.
  • Carousel and gallery editors where the "next" chevron and the "remove item" cross are placed within the same control group.

Designing around it

  • Treat spacing as a functional requirement, not a visual one. Distance is the variable the original experiment actually manipulated, and it is the variable you control most cheaply. Put real separation — a different control group, a different corner, a different region — between any two actions whose consequences differ in kind rather than degree.
  • Use WCAG 2.2 success criterion 2.5.8 (Target Size, Minimum, Level AA) as the floor, not the target. It asks for 24 by 24 CSS pixels, and allows smaller targets when spacing is sufficient — imaginary 24-pixel circles centred on each undersized target must not intersect. For an action that cannot be undone, exceed it deliberately.
  • Differentiate on a channel other than colour. Give the destructive action a different shape, weight or position, because two buttons that differ only in hue are identical to a colour-blind user, in greyscale, and in a screen photographed in sunlight. Colour that contradicts a label has its own failure mode — see the Stroop effect page.
  • Keep action order constant across the product. Users build a motor plan, not a fresh decision, for repeated actions; a dialog that reverses Confirm and Cancel relative to every other dialog converts practised users into error-prone ones. Pick an order, document it, and never let a single screen deviate.
  • Do not place an irreversible action inside a repeated row template next to the row’s most common action. Move it into a per-row overflow menu, or into a bulk-action bar that requires an explicit selection step first. The selection step is not friction for its own sake — it moves the conflict out of the moment of the click.
  • Where co-location is unavoidable, make the risky path cost a different motor action rather than a different pixel. A menu that must be opened, a control that requires a deliberate second gesture, or a typed confirmation all break the single-click conflict; a colour change does not.
  • Test under time pressure and repetition, because that is the only regime where the effect is visible. Give participants a rate to hit, run the same action twenty times, and record the error rate. A design that produces one wrong click in fifty under pressure will produce it in production too.
  • Instrument the undo path. If your product has an "undo" or a rapid reversal after a destructive action, the frequency of that reversal within a few seconds of the action is a direct measurement of adjacent-control conflict, and it is usually already in your event stream.

Questions

What is the Eriksen flanker task?

It is a reaction-time task in which a participant responds to a target item flanked by irrelevant items that are mapped either to the same response or to the opposite one. Barbara and Charles Eriksen introduced it in 1974 and found that responses were slower when the flankers called for the opposite action, with the interference decreasing as the flankers were moved further from the target.

Why is the flanker effect a response conflict rather than a perceptual one?

Because the target’s location was known in advance and it was still slowed by its neighbours. Participants were not searching, so the cost has to come from something later in the chain: the flankers were processed far enough to begin activating the response they were mapped to, and that competing activation had to be suppressed before the correct response could be made.

What does the flanker effect mean for button placement?

That the distance between two controls is part of their safety, not just their aesthetics. Spacing was the manipulation that reduced interference in the original experiment, so controls with opposite consequences should be separated by region or by control group rather than by a few pixels of gutter, and should differ on a non-colour channel such as shape, weight or position.

The effect is only tens of milliseconds — does it really matter in a real product?

The time cost is trivial; the error rate is not. A conflict that produces a wrong response in a small percentage of trials will produce wrong clicks at scale, and interfaces routinely place actions of wildly unequal consequence next to each other, so those wrong clicks land on deletions rather than on lost milliseconds. The effect is also hard to catch in small usability studies, because it needs repetition and time pressure to surface.

Sources

  1. Eriksen, B. A., & Eriksen, C. W. (1974). Effects of noise letters upon the identification of a target letter in a nonsearch task. Perception & Psychophysics, 16(1), 143–149. The original task. Target position was known in advance, so the finding — slower responses with response-incompatible flankers, and less interference as spacing increased — cannot be attributed to visual search.
  2. Eriksen, C. W. (1995). The flankers task and response competition: A useful tool for investigating a variety of cognitive problems. Visual Cognition, 2(2–3), 101–118. The author’s own review, arguing that the interference arises largely from incipient activation of competing responses rather than from perceptual confusion.
  3. Eriksen, C. W., & St. James, J. D. (1986). Visual attention within and around the field of focal attention: A zoom lens model. Perception & Psychophysics, 40(4), 225–240. The account of why proximity matters: attentional focus behaves like a variable-power lens whose aperture takes time to adjust, and items inside it are processed regardless of relevance.
  4. W3C. Web Content Accessibility Guidelines (WCAG) 2.2, Success Criterion 2.5.8: Target Size (Minimum), Level AA. The 24-by-24 CSS pixel minimum for pointer targets, with an explicit spacing alternative for smaller ones — the enforceable floor for separating adjacent controls.

Related patterns