Progressive Enhancement
What is Progressive Enhancement?
Progressive Enhancement provides immediate basic responses then adds detail as processing continues. Instead of waiting for perfect answers, the system streams content in real-time. It's essential for conversational AI or search where perceived speed matters. Examples include ChatGPT streaming word-by-word, Google Search showing instant results then refining, or Perplexity displaying quick answers while gathering citations.
Problem
AI systems often require significant time to generate high-quality, detailed responses. Users are left waiting with no feedback, leading to frustration and uncertainty about whether the system is working.
Solution
Design AI systems that provide immediate basic responses and progressively enhance them with more detail, accuracy, or sophistication. Stream content as it's generated, allowing users to consume information without waiting for complete processing.
Real-World Progressive Enhancement Examples
Implementation
When to use Progressive Enhancement, and when it backfires
Use it when
- The first tier is a real, standalone answer the user can act on, and later tiers only add depth (more detail, citations, edge cases), never reverse the meaning.
- Perceived speed is the bottleneck: the full result takes long enough that a blank wait costs you the user, but a useful partial buys their patience.
- Enhancement can fail and the baseline still stands on its own. If the model stalls or the upstream times out, the user keeps a complete, if simpler, answer.
Don't, or minimize, when
- The 'basic' tier is a teaser, not an answer. If it only makes sense once the enhancement lands, you shipped a loading state wearing a content costume.
- A later tier can contradict an earlier one. Streaming a wrong-then-corrected answer means the user acts on the version that was on screen, not the one you meant.
- The result is fast or atomic anyway. Splitting a sub-second response into tiers adds shimmer and reflow for no perceived gain.
The trap
The hollow baseline: a first tier that looks like an answer but is really a placeholder dressed up as one, useless until the enhancement arrives. You didn't ship a working baseline and enhance it, you shipped a fancy spinner and called it progressive. It is worse than an honest loading bar because users read the hollow tier as the answer, act on it, and only the enhancement (if it ever lands) reveals it was never standalone. The whole point of the pattern, a usable thing now, quietly inverts into a usable thing later.
Take it into your own product
- 1
The first tier has to be a real answer, not a teaser.
Progressive enhancement means a usable thing now, then more. If your 'basic' tier only makes sense once the enhancement lands, you shipped a loading state in a content costume. The test: would the user be okay if enhancement never arrived? If not, it is a spinner.
- 2
Enhancements add depth, they never reverse meaning.
Layering more detail, citations, or nuance on a standing answer is enhancement. Streaming yes and then correcting to no is a bug the user already acted on. If a later stage can flip the answer, don't render the early one as an answer, label it provisional.
- 3
The baseline must survive a failed enhancement.
The payoff of the pattern is resilience: when the model stalls or the upstream times out, the user still holds a complete, simpler answer. If a broken enhancement can blank out or block the baseline, you built a dependency and called it a layer.
- 4
Speed is the only reason to tier. Respect it.
You split a response into stages to trade a blank wait for a useful partial. If the result is already fast or atomic, tiering just buys shimmer and reflow. Tier where the wait is real, and nowhere else.
- 5
Say which tier the user is looking at.
An unlabeled stream leaves people unsure whether the answer is done or still cooking, so they either wait too long or act too early. Mark the current tier, signal when more is coming, and give them a way to stop at 'good enough.'
Add Progressive Enhancement to your product
Copy the prompt below into Claude Code or Cursor in your repo. It encodes the four moves on the left and asks Claude to find your AI decision surfaces and update them. Claude reports what it changed and asks before adding dependencies.
Check if your product already has this pattern
Upload a screenshot. We'll tell you which of the 36 patterns your AI interface uses and where the gaps are.
Audit My DesignMore in Performance & Efficiency
Intelligent Caching
Pre-fetch and cache AI content for instant results, reducing latency.
Agent Status & Monitoring
Design a layered status system with escalating attention demands - from ambient badges to glanceable progress panels to interrupting notifications - so users stay informed about agent activity without being forced to watch.
