# How to Design Error States for AI | Gr8r Studio

> How to design error states for AI: five ways AI fails (wrong, incomplete, refused, slow, unsafe), the UI response for each, and a review checklist.

Source: https://gr8rstudio.com/blog/ai-feature-error-states

[Product Design](https://gr8rstudio.com/blog)

# When the AI Gets It Wrong: Designing Error States for AI Features

Tanjim Islam

Founder & CEO · 26 Oct 26 · 6 min read

Summarise with AI [Summarise with AI: ChatGPT](https://chatgpt.com/?q=Summarise%20the%20key%20points%20of%20this%20article%20from%20Gr8r%20Studio%2C%20then%20tell%20me%20how%20they%20apply%20to%20my%20product%20or%20workflow%3A%20https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-feature-error-states)[Summarise with AI: Claude](https://claude.ai/new?q=Summarise%20the%20key%20points%20of%20this%20article%20from%20Gr8r%20Studio%2C%20then%20tell%20me%20how%20they%20apply%20to%20my%20product%20or%20workflow%3A%20https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-feature-error-states)[Summarise with AI: Perplexity](https://www.perplexity.ai/search?q=Summarise%20the%20key%20points%20of%20this%20article%20from%20Gr8r%20Studio%2C%20then%20tell%20me%20how%20they%20apply%20to%20my%20product%20or%20workflow%3A%20https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-feature-error-states)

On this page

1. [ 01Why do AI errors need their own design?](#why-do-ai-errors-need-their-own-design)
2. [ 02What are the five ways AI fails?](#what-are-the-five-ways-ai-fails)
3. [ 03How should the product handle a wrong answer?](#how-should-the-product-handle-a-wrong-answer)
4. [ 04Should people regenerate or edit?](#should-people-regenerate-or-edit)
5. [ 05What do incomplete, refused and slow look like?](#what-do-incomplete-refused-and-slow-look-like)
6. [ 06How should unsafe actions fail?](#how-should-unsafe-actions-fail)
7. [ 07How do you catch the errors nobody reports?](#how-do-you-catch-the-errors-nobody-reports)
8. [ 08What should you check in a design review?](#what-should-you-check-in-a-design-review)
9. [ 09Frequently asked questions](#frequently-asked-questions)
10. [ 10About the author](#about-the-author)
11. [ 11Related reading](#related-reading)

This article supports

[Product Design](https://gr8rstudio.com/services/product-design)[Review your product challenge](https://cal.com/tanjim-38/30min)

## TL;DR

- AI fails in five ways: wrong, incomplete, refused, slow and unsafe.
- Each needs a different screen.
- Say what happened in plain words, keep the person's work, offer one clear next step such as edit, retry or do it by hand, and collect feedback so the team can fix the cause.

To design error states for AI, first name how it failed: wrong, incomplete, refused, slow or unsafe. Then give each failure its own screen. Say what happened in plain words, keep whatever the person already did, and offer one next step: edit it, retry it, or do it by hand.

## Why do AI errors need their own design?

A normal error is binary. The save worked or it didn't. AI output can look finished and still be wrong, and the product often can't tell.

Google's People + AI Guidebook calls the worst of these "background errors": situations where "the system isn't working correctly, but neither the user nor the system register an error" ([Google PAIR Guidebook, Errors + Graceful Failure](https://pair.withgoogle.com/chapter/errors-failing/)). A form that errors out gets noticed. A summary that drops one fact does not.

So AI error design covers two things. The screens people see when something visibly fails, and the cues that help them catch failures nobody flagged.

## What are the five ways AI fails?

AI features fail in five ways: wrong, incomplete, refused, slow and unsafe. Each one needs its own message and a next step the person can take.

| Failure    | What the person sees              | What the UI should say              | Next step to offer                     |
| ---------- | --------------------------------- | ----------------------------------- | -------------------------------------- |
| Wrong      | A confident answer with a mistake | Nothing alarming; make editing easy | Edit in place, report it               |
| Incomplete | Part of the job is done           | "3 of 5 sections done"              | Retry the missing part only            |
| Refused    | The AI won't or can't do it       | Why, in one plain sentence          | A manual path or a person to ask       |
| Slow       | Waiting with no result            | What step it is on                  | Keep waiting, stop, or get notified    |
| Unsafe     | An action blocked before it ran   | What was blocked and why            | Change the request or ask for approval |

The table is Gr8r's working model, built from the error types in Google's guidebook. It is not an industry standard. Use it as a starting map and add your own rows.

## How should the product handle a wrong answer?

Make correction cheaper than complaint. Microsoft's guidelines for human AI interaction list "Support efficient correction" for when the system is wrong: "Make it easy to edit, refine, or recover when the AI system is wrong" ([Microsoft Research, Guidelines for human AI interaction design, published 1 February 2019](https://www.microsoft.com/en-us/research/blog/guidelines-for-human-ai-interaction-design/)).

In practice, that means the output is editable where it sits. A drafted email opens in the editor, not a read only bubble. An extracted field is a normal input box with the AI's value filled in. The person fixes the one wrong line and moves on.

Put a thumbs down or "Report" next to it, and when someone uses it, ask one short question: what did you expect? Google's guidebook suggests exactly this, to "ask a user what they expected to happen after a system failure" ([Google PAIR Guidebook, Errors + Graceful Failure](https://pair.withgoogle.com/chapter/errors-failing/)).

## Should people regenerate or edit?

Lead with edit and offer regenerate as the second option.

Regenerate throws the whole output away and rolls the dice again. If the draft was mostly right, people lose the good part and any edits they made. Edit keeps it. Regenerate is useful when the output missed the point entirely. When you do offer it, keep the earlier version one click away.

## What do incomplete, refused and slow look like?

**Incomplete.** Show what finished and what didn't. "3 of 5 sections done. Pricing and Timeline couldn't be drafted." Then retry only the missing parts. Never make people rerun the whole job.

**Refused.** Say why in a sentence, then point somewhere useful. Google's guidebook uses a flight price example: "There's not enough data to predict prices for flights to Paris next year. Try checking again in a month" ([Google PAIR Guidebook, Errors + Graceful Failure](https://pair.withgoogle.com/chapter/errors-failing/)). That is the shape: the reason, then a path. If the AI can't help, the manual way should be one click away.

Limits belong on screen too. Verdict, a legal AI workspace Gr8r built, states its limit on the sign in page: "Legal information, not legal advice." Built by Gr8r for its own portfolio. Not client work. It sits behind a login, so there is no link here.

**Slow.** A spinner with no words feels broken after a few seconds. Show the current step ("Reading 14 invoices"), give a stop button, and for long jobs offer to notify people when it is done. AWS's Cloudscape design system advises displaying "error and loading states to keep users informed" about what the AI is doing ([AWS Cloudscape, Generative AI chat, published 20 November 2024](https://cloudscape.design/gen-ai/patterns/generative-ai-chat/)).

## How should unsafe actions fail?

Quietly and clearly. When a guardrail blocks something, say what was blocked and what the person can do instead: change the request, or send it for approval. Google's guidebook also warns against over explaining why something was blocked, because detailed explanations can teach people how to get around a filter ([Google PAIR Guidebook, Errors + Graceful Failure](https://pair.withgoogle.com/chapter/errors-failing/)).

Illustrative diagram based on this article. Not product UI, not real data.

Where approvals belong is covered in [designing the review step before an AI agent acts](https://gr8rstudio.com/blog/design-review-step-ai-agent).

## How do you catch the errors nobody reports?

Design cues that invite a second look before a mistake spreads. Mark uncertain fields, link claims to their sources, and show alternatives when the model is unsure. The patterns are in [how to show AI confidence and sources in your UI](https://gr8rstudio.com/blog/show-ai-confidence-in-ui).

Then close the loop behind the screen. Log every edit people make to AI output. A field that gets corrected again and again is telling your team something, even if nobody pressed thumbs down.

## What should you check in a design review?

Check that every one of the five failures has a designed screen, messages are plain, the person's work survives errors, output can be edited in place, and long jobs can be stopped.

- Each of the five failures has a designed screen.
- Messages say what happened in plain words.
- The person's input and edits survive every error.
- AI output can be edited where it sits.
- Edit comes before regenerate; earlier versions stay reachable.
- Partial results show what finished and retry only the rest.
- Refusals give a reason and a manual path.
- Long jobs show the current step and a stop button.
- Feedback asks what the person expected.
- Edits to AI output are logged for the team.

The full set of AI screen states is in [AI UX design: the seven screen states](https://gr8rstudio.com/blog/ai-product-design-guide).

We design error states as part of our [AI product design](https://gr8rstudio.com/services/product-design) work.

## Frequently asked questions

### How should a product show an AI error?

Say what happened in plain words, keep the person's work, and offer one clear next step: edit the output, retry the part that failed, or do it by hand. Match the screen to the type of failure: wrong, incomplete, refused, slow or unsafe.

### Should users regenerate or edit a wrong AI answer?

Lead with editing in place, because it keeps the parts that were right and any changes already made. Offer regenerate as a second option for output that missed the point, and keep the earlier version one click away.

### Do AI features need thumbs up and thumbs down buttons?

They help, if someone reads the results. Place them next to the output, ask one short follow up question on thumbs down, such as what the person expected, and also log edits people make, since many never press a button.

### What is a background error in AI?

It is a failure that neither the user nor the system notices, such as a summary that quietly drops a fact. Reduce them with confidence markers and source links on screen, and by reviewing how often people correct AI output.

### What should a refused AI request show?

One plain sentence on why, then a path somewhere useful. If the AI cannot help, the manual way should be one click away.

## About the author

**Tanjim Islam** is the founder and CEO of Gr8r Studio. He founded the studio in 2023\. Here he writes about how Gr8r approaches hiring, product design and AI engineering. More on the [About page](https://gr8rstudio.com/about/tanjim-islam).

[Cendara](https://cendara.vercel.app/login), a claims workspace Gr8r built, states its own limit on the sign in screen: "Prototype with synthetic data. Not for real patient information." Built by Gr8r for its own portfolio. Not client work.

If you want help with this, [book a 30 minute call](https://cal.com/tanjim-38/30min).

## Related reading

- Products Gr8r built itself, including Verdict
- [AI product design](https://gr8rstudio.com/services/product-design)
- [AI UX design: the seven screen states](https://gr8rstudio.com/blog/ai-product-design-guide)
- [how to show AI confidence and sources in your UI](https://gr8rstudio.com/blog/show-ai-confidence-in-ui)
- [designing the review step before an AI agent acts](https://gr8rstudio.com/blog/design-review-step-ai-agent)
- [UX audit report template](https://gr8rstudio.com/blog/ux-audit-report-template)

Written by

Tanjim Islam

Founder & CEO

Share [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-feature-error-states)[X](https://x.com/intent/post?url=https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-feature-error-states&text=When%20the%20AI%20Gets%20It%20Wrong%3A%20Designing%20Error%20States%20for%20AI%20Features)

This article supports

[Product Design](https://gr8rstudio.com/services/product-design)[Review your product challenge](https://cal.com/tanjim-38/30min)

## Keep reading

- [ Product Design 26 Oct 26 16 min read AI UX Design: 7 Screen States That Make Users Trust Your AI FeatureAI UX design for SaaS teams: the trust ladder, seven screen states to ship, what engineering must expose, how to measure trust, and a review checklist.By Tanjim Islam](https://gr8rstudio.com/blog/ai-product-design-guide)
- [ Product Design 26 Oct 26 6 min read How to Design an AI Copilot Sidebar for B2B SaaSHow to design an AI copilot for SaaS: when a sidebar beats inline AI, the six parts of a copilot panel, context chips, permissions and a review checklist.By Tanjim Islam](https://gr8rstudio.com/blog/ai-copilot-in-saas)
- [ Product Design 26 Oct 26 6 min read How to Show AI Confidence and Sources in Your UIHow to show AI confidence to users: labels over percentages, sources next to the claim, and patterns for fields, tables, dashboards and documents.By Tanjim Islam](https://gr8rstudio.com/blog/show-ai-confidence-in-ui)

## Book a call with our CEO.

Pick a time that suits you. A product idea or a workflow that slows your team down: a clear problem is enough, no full specification needed.

5.0

[11 verified reviews Read them on Contra ](https://contra.com/tanjimislam/reviews)

- Tanjim is a great designer without any doubt. I love the way he heard my project details and created the better design I was looking for. I highly recommend Tanjim to other Business owners. Thanks Tanjim 🫶
Muhammad Talha · Founder, SetFrame
- Amazing work as always!
Md Nomail Hossain Samir · Co-founder, Remarked Design
- It was really amazing to work with Tanjim, superfast delivery and amazing work
Dhruval Golakiya · Founder, Ryplix
- It was really amazing to work with Tanjim, Superfast delivery and amazing work, highly recommended for any website design and development
Dhruval Golakiya · Founder, Ryplix
- Tanjim and his team did a great job on the hero section I needed in Framer. Super easy to work with and delivered exactly what I had in mind. Highly recommeded!
Muhammad Talha · Founder, SetFrame
- Tanjim is very good at what he does & super easy to work with. He is a genuinely good guy. I highly recommend him!
Md Nomail Hossain Samir · Co-founder, Remarked Design
- Tanjim is a very talented designer who delivers high-quality work with precision. I hired him to handle client projects for my agency & he exceeded expectations every time. If you need an efficient designer, he is the one to go for!
Md Nomail Hossain Samir · Co-founder, Remarked Design
- Every project I’ve entrusted to Tanjim has exceeded expectations. If you're looking for a top-tier designer who consistently delivers exceptional work, Tanjim is the one. Looking forward to working together on more projects 🤝
Md Nomail Hossain Samir · Co-founder, Remarked Design
- Tanjim is an excellent guy. He is super professional in his work and always goes the extra mile. If you're looking for any UI or Framer work, I highly recommend him!
Md Nomail Hossain Samir · Co-founder, Remarked Design
- Tanjim is the founder of Gr8r studio and his Framer expertise is exactly what you need if you are looking for design and development work. Tanjim goes the extra mile on his projects and his attention to detail makes every website stand out I collaborated with Tanjim on a project and he is my main choice for a design partnership.
Miguel Queirós · Collaborator

Your call is with Tanjim Islam, our CEO A free 30-minute conversation about your problem, not a sales pitch.

Calendar not loading? [Open the booking page](https://cal.com/tanjim-38/30min)

Ask Ali