The shortcut overlay
Teaching the keyboard without a tour.
The best AI products get used for hours at a stretch. Power users live in them. The first thing those users want, once they've decided they like you, is a map of the keyboard. Most products bury this in a help doc nobody opens. A proper shortcut overlay is the map, laid flat on a single screen, triggered by one key.
The pattern sounds small. It isn't. It's the moment a chat app starts behaving like a tool. The overlay doesn't just teach shortcuts. It teaches the shape of the product's grammar.
"Keyboard shortcuts are a second UI, for the users who matter most. Design them like a hardware manual, not like a tooltip."
One card. Grouped by verb. Disabled rows stay visible.
A good overlay groups shortcuts by what they do, not by where they live. Compose, navigate, respond. Each group is a column. Each row is one verb and its keys. Everything fits on one screen.
The detail most products miss: keeping disabled rows visible but faded. The user learns the grammar even when they can't use every word yet. When a shortcut becomes available later, the user already knows it exists.
The gross margin shift is concentrated in the enterprise tier. Let me run the cohort analysis.
One card, grouped by verb. Disabled rows still show so the user learns the shape of the grammar.
Your power users don't read docs.
The users who spend hours in your product have opinions and they don't have time. A help page is a tax. A keyboard overlay is a reference they can open and close in three seconds, mid-task, without losing focus. That difference compounds. Power users churn fastest on friction, and shortcuts are anti-friction.
What a serious overlay does.
- Group by verb. Not by feature area. Users think in tasks, so the overlay should too.
- Keep disabled rows visible. Fade them. Never hide them. The overlay teaches the whole vocabulary, not just today's subset.
- Fire from the overlay. Clicking a row should run the shortcut and close the overlay. This turns the reference into a palette, without forcing users to build one.
Overlays that lie about coverage.
The failure mode is an overlay that lists shortcuts for features the product doesn't ship, or that silently stopped working after a refactor. Every stale row poisons the whole card. The second a user taps a key and nothing happens, they stop trusting the overlay, which means they stop learning shortcuts.
What this pattern gets wrong when it gets wrong.
- Ambiguous state
- Running, done, errored, paused all look the same. The user has to infer from context.
- Empty disclaimer
- A legal-feeling warning that carries no specific information about this particular response.
Three shipping variants worth copying.
- A ⌘/ card that reveals the whole shortcut vocabulary
- Shortcuts grouped by verb: compose, navigate, share
- Context-aware shortcuts disabled when not applicable