Name interface mechanisms one by one, and you can finally tell AI what you want.
The invisible mechanisms in your interfaces ft. Johannes Mutter (mutter.co) | Config 2026 · Majola Balogun
22 min total·Actually worth watching closely: ~10 min·3 must-watch clips
- 0:14 – 4:23Skim
Architecture has a pattern language; interfaces don't
He opens from architecture's pattern language: architects share a vocabulary of named, reusable parts, and interface design still has none. What designers need, he argues, isn't another component library but a vocabulary of mechanisms they can actually name.
What's missing isn't inspiration, it's vocabulary — a mechanism with no name can't be discussed or reused.
Mostly an argument over images; the slides are largely buildings and quotes, delivered at an even pace, so skipping around costs you nothing.▶ Jump to 0:14Speaker · Johannes Mutter - 4:23 – 7:15Watch
One cursor detail, a whole family history
Using the ambiguity of a cursor sitting on a style boundary, he shows how a tiny pain point got noticed, then implemented, then finally named — Cursor Affinity, on Hacker News. With a name in hand he follows it back to its ancestors: the I-beam in Xerox STAR, Jef Raskin's writing in The Humane Interface.
Once a mechanism has a name, you can follow it to the whole family it belongs to — right up to the cursor in today's AI editors.
The before/after cursor and the old-system screenshots read in a second on screen and are completely lost on audio alone.▶ Jump to 4:23Speaker · Johannes Mutter - 7:15 – 9:44Listen
Move one: make invisible state visible
When the system knows something the user can't see, mistakes multiply. The fix is a signal for that hidden state, even one pixel of it: iChat's typing clouds, the unsaved dot after a filename in the title bar, the little bars of signal on your phone.
The best indicator isn't a separate spinner — the state and the affordance are the same pixel, like rendering what's being thought right into the interface element itself.
The examples (the unsaved dot, the signal bars) are things you see every day and picture automatically — fine to take in on a walk or a commute.▶ Jump to 7:15Speaker · Johannes Mutter - 9:44 – 11:23Listen
Move two: absorb the user's slop
The pointer is a rough guess at intent, not a precise pixel. The system should infer what the user meant and eat the error itself: the Mac menu's safe triangle, or a touchscreen keyboard that quietly grows a key's hit box based on the letter it predicts.
What grows is the control's hitbox, not its visible surface — the gaps and margins around it should count too.
This is about the hit-test logic rather than the picture, and a grown hitbox is invisible by design, so the screen tells you nothing extra.▶ Jump to 9:44Speaker · Johannes Mutter - 11:23 – 14:15Skim
Move three: show up only when needed
First snapping — magnetism applied to the thing you're dragging: you aim it roughly and the system infers the line you meant, with the guides as mere feedback. Then the division of labor between @ and /: @ summons objects and is the noun, / summons commands and is the verb.
People don't know what they can do until you show them, so surface the action at the moment they need it and not before, rather than leaving it on display.
Snapping and the magnifying Dock icons are animated but very familiar — a glance to confirm which example he's on is enough; the value is in his framing.▶ Jump to 11:23Speaker · Johannes Mutter - 14:15 – 16:24Watch
Gestures teach themselves, and mechanisms can be transformed
Shake to undo, and the shimmer on slide to unlock, are gestures actively teaching you how to use them — something a symbol can't do. He then peels the visual material off the underlying mechanism and shows the same mechanism becoming a different interaction once you change its scope and rotate it.
Pulling the mechanism out of its appearance and transforming it is the G-code for inventing new interfaces.
The shimmer hint and the swipe transformation are both motion, and he steps through the transformation on screen — a static description can't carry it.▶ Jump to 14:15Speaker · Johannes Mutter - 16:24 – 21:17Watch
Live demo: what I do when I find a good interface
He opens his public map of patterns and walks the whole flow end to end — capturing an interface, dictating what he thinks about it, breaking it into mechanisms, connecting it into the graph — then uses one command to pull other instances of the same principle out of thousands of patterns.
Understanding needs friction — a bookmark is designed to be frictionless, which is exactly how it bypasses understanding; really digesting an interface means describing and disassembling it yourself.
The only hands-on demo in the talk: how the graph expands and which nodes it matches are all on screen, and audio alone gets you nothing.▶ Jump to 16:24Speaker · Johannes Mutter - 21:17 – 22:20Listen
You cannot prompt what you can't name
The close returns to the main argument: when the machine can build anything you want and make a thousand versions of it, what matters is your words, because they become the bottleneck on what you can express. Nobody starts from zero.
How clearly and how layered you can put a design into words sets the ceiling on what you get out of working with AI.
The ending is a stated argument with a single line on screen — just listen it through.▶ Jump to 21:17Speaker · Johannes Mutter