Skip to content

Anti-Patterns Catalog

A UX principle for coding agents. Also covers antipatterns, bad ux, mistakes, avoid, dark patterns, ethical design, and 2 more.

Show all 8 aliases

antipatterns, bad ux, mistakes, avoid, dark patterns, ethical design, manipulation, fake scarcity

This is a consolidated index of what not to do, grouped into six families. It is primarily a scan list: each entry names a smell and points to the guidance that prescribes the fix. Use it as a pre-ship pass and apply the ethical tests below when a design uses behavioral pressure.

If an entry and its owner guidance disagree, the owner guidance wins. This catalog is a finding aid, not the rulebook.

Structure & Architecture

How the screen and its navigation are organized.

  • Kitchen sink — more than ~5 actions competing on one surface with no hierarchy. The screen tries to do everything and communicates nothing (see design-process.md — One Screen, One Purpose; cognitive-laws.md — Hick's Law).
  • Franken-pattern — incompatible interaction patterns stitched together (wizard in tabs in accordion). No mental model fits (see interaction-patterns.md — Avoid Franken-Patterns).
  • Nested modals — a modal opening another modal, burying focus and the escape path (see dialogs.md — Stacking).
  • Tab overload — more than ~5 tabs, exceeding what the user can hold in mind (see cognitive-laws.md — Miller's Law; navigation.md — Secondary Navigation).
  • Hidden P0 actions — the screen's primary action isn't immediately visible (see design-process.md — Prioritize What's Visible).
  • Deep nav without breadcrumbs — more than 3 to 4 levels with no path back up (see navigation.md — Breadcrumbs).
  • Over-engineering for edge cases — building elaborate handling for situations under ~20% of usage before the common path is solid (see design-process.md — Don't Design Too Much, Decide Between Options).

States & Flows

Whether every state and path is handled.

  • Missing empty / loading / error / success state — a component that only handles the happy path (see design-process.md — The Four Mandatory States; ui/polish.md — empty states; errors.md; notifications.md).
  • CTA without a handler — a button wired to nothing, or a silent onClick. Every action has defined behavior or is disabled with an explanation (see navigation.md — Flows & Dead-Ends).
  • Dead linkhref="#", a link to nowhere, an infinite loop (see navigation.md — Flows & Dead-Ends; review-rules.md — Links without href).
  • Modal without an exit — a dialog with no Escape, no backdrop dismiss, no close (see dialogs.md — Dismissal).
  • Edit without feedback — a change that gives no confirmation it took (see notifications.md — Inline & Contextual Feedback).
  • Data loss on back — navigating back or dismissing discards unsaved work silently (see dialogs.md — Dismissal; forms.md — Unsaved Changes Warning).

Visual

Whether the surface is systematic and legible.

  • Arbitrary spacing — values off the spacing scale; elements glued to edges with no padding (see ui/layout-spacing.md; review-rules.md — Inconsistent spacing values).
  • Flattened type hierarchy — title, body, and caption too similar to tell apart (see ui/typography.md; ui/hierarchy.md).
  • Too many accents — more than ~3 accent colors on one screen, so nothing stands out (see ui/color.md; cognitive-laws.md — Von Restorff Effect).
  • Emoji as icons / mixed icon styles — emoji standing in for UI icons, or filled and outline icons mixed in one set (see the CLAUDE.md icon rule; ui/polish.md).
  • Hardcoded values — colors, spacing, radii, shadows inlined instead of drawn from tokens (see the CLAUDE.md color rule; ui/depth-and-surfaces.md).
  • Recreating a DS component — building a new component when the design system already has one (see interaction-patterns.md — check the DS before inventing).

Cognitive

Whether the screen respects perception and memory limits.

  • Choice overload — more than ~5 CTAs with no hierarchy, inflating decision time (see cognitive-laws.md — Hick's Law; ui/hierarchy.md).
  • Flat list past ~7 — a long unstructured list exceeding working memory (see cognitive-laws.md — Miller's Law).
  • Groups without separation — related items not visually grouped, so the eye can't parse relationships (see cognitive-laws.md — Gestalt Principles; ui/layout-spacing.md — Spacing Expresses Relationships).
  • Reveal-everything-at-once — dumping the full complexity on first contact instead of disclosing progressively (see cognitive-laws.md — Cognitive Load; forms.md — Progressive Disclosure).

Manipulation & Ethics

Whether behavioral techniques preserve informed choice, agency, and long-term trust.

  • Fabricated scarcity — a countdown, stock warning, or deadline that is not real.
  • Coercive default — the easiest path benefits the business while making the user's preferred choice harder to find or reverse.
  • Hidden asymmetry — the product depends on information the maker has and the user does not, knowing disclosure would change the decision.
  • Manufactured anxiety — fear, shame, social pressure, or artificial incompleteness used to force action.
  • No meaningful exit — cancellation, dismissal, notification control, or task completion is obscured so engagement continues involuntarily.
  • Attention extraction — interruptions and open loops optimized for repeated engagement without improving the user's life.

Run three tests before shipping a nudge:

  1. Regret Test: if users knew the team's reasoning and all relevant facts, would they still make the same choice?
  2. Black Mirror Test: if everyone used the feature frequently, what second- and third-order harms would appear, and what would disappear?
  3. Manipulation check: would the makers use the product with integrity, and does the interaction materially improve the user's life rather than merely extract attention?

A humane product saves time, values attention, reflects human values, uses authentic evidence, and gives users control over what they receive and when. If the digital interaction would feel coercive when performed by a person face to face, redesign it.

Process & Research

Whether the thinking behind the design is sound.

  • Untraced assumption — a claim about users with no [ASSUMPTION] / [VALIDATED] tag, passing a guess as fact (see understanding-users.md — Confidence Traceability).
  • Generic persona — an archetype that could describe anyone, anchoring the design to nobody (see understanding-users.md — Anchored Personas).
  • Decision without reasoning — a design choice made on intuition with no alternatives weighed (see design-process.md — Decide Between Options).
  • Parked idea without a resume condition — an idea shelved with no note on when to revisit, so it's silently lost or silently resurrected (see understanding-users.md — Separate Generation from Evaluation).

Checklist

Scan every screen against the six families:

  • Structure — one purpose, ≤ ~5 actions, no franken-patterns, no nested modals, P0 visible, breadcrumbs past 3-4 levels
  • States & flows — all four states handled, every CTA has behavior, no dead links, modals exit, edits give feedback, no data loss on back
  • Visual — spacing on-scale, type hierarchy clear, ≤ ~3 accents, consistent icons, tokens not hardcodes, no DS duplication
  • Cognitive — choices and lists within Hick/Miller limits, groups separated (Gestalt), complexity disclosed progressively
  • Ethics — scarcity authentic, defaults user-serving, full information preserves the choice, long-term harms considered, exit remains clear
  • Process — assumptions tagged, personas anchored, decisions reasoned, parked ideas have resume conditions

Use this guidance in your coding agent

Install the Better Design MCP once. Your agent then loads this page with one call.

get-ux-principle({ topic: "anti-patterns" })
claude mcp add --scope user better-design --transport http https://better-design.com/api/mcp --header "Authorization: Bearer <YOUR_API_KEY>"
Browse related design systems