# How to Show AI Confidence to Users | Gr8r Studio

> How to show AI confidence to users: labels over percentages, sources next to the claim, and patterns for fields, tables, dashboards and documents.

Source: https://gr8rstudio.com/blog/show-ai-confidence-in-ui

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

# How to Show AI Confidence and Sources in Your UI

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%2Fshow-ai-confidence-in-ui)[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%2Fshow-ai-confidence-in-ui)[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%2Fshow-ai-confidence-in-ui)

On this page

1. [ 01Why do users need to see AI confidence at all?](#why-do-users-need-to-see-ai-confidence-at-all)
2. [ 02Should you show a percentage or a label?](#should-you-show-a-percentage-or-a-label)
3. [ 03Where should sources and citations go?](#where-should-sources-and-citations-go)
4. [ 04How do you show confidence outside a chat window?](#how-do-you-show-confidence-outside-a-chat-window)
5. [ 05What does this look like on a real screen?](#what-does-this-look-like-on-a-real-screen)
6. [ 06What should you do and avoid?](#what-should-you-do-and-avoid)
7. [ 07When the confidence is low, what next?](#when-the-confidence-is-low-what-next)
8. [ 08Frequently asked questions](#frequently-asked-questions)
9. [ 09About the author](#about-the-author)
10. [ 10Related 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

- Show AI confidence as a plain label tied to an action, such as "Check this", not a raw percentage.
- Put the source right next to the claim it supports, one click away.
- Mark low confidence on the exact field, row or sentence, and give people a fast way to check or fix it.

To show AI confidence to users, turn the model's score into a short label that says what to do, such as "Check this", and put it on the exact field, row or sentence it applies to. Place the source next to the claim, one click away. Save raw percentages for expert users who know what 80% means in your product.

## Why do users need to see AI confidence at all?

Because the model is sometimes wrong, and people can't tell which times. If every answer looks equally sure, users either trust all of it or none of it. Both are expensive.

Google's People + AI Guidebook puts it plainly: "the user shouldn't trust the system completely. Rather, based on system explanations, the user should know when to trust the system's predictions and when to apply their own judgement" ([Google PAIR Guidebook, Explainability + Trust](https://pair.withgoogle.com/chapter/explainability-trust/)). That is the job of a confidence display. It tells people where to spend their attention.

Microsoft's guidelines for human AI interaction say the same thing as a design rule: "Make clear how well the system can do what it can do" ([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/)).

## Should you show a percentage or a label?

Use a label in most products. Google's guidebook calls numeric confidence "risky because they presume your users have a good baseline understanding of probability." It also asks the question every team should ask about decimals: "what should I do when the system is 85.8% certain vs. 87% certain?" ([Google PAIR Guidebook, Explainability + Trust](https://pair.withgoogle.com/chapter/explainability-trust/)).

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

There are four ways to show confidence, and each fits a different moment:

- **Label.** High, check this, low. Your team sets the cut points, and each label maps to one action. This is the default.
- **Alternatives.** "This might be Acme Ltd or Acme Holdings." Good when the model is unsure, because it hands the choice back to the person.
- **Number.** A percentage, for analysts and reviewers who work with scores daily.
- **Range.** Shaded bands on a chart, for forecasts and estimates.

Whichever you pick, test it with real users early. People read the same badge in very different ways.

## Where should sources and citations go?

Next to the claim, not at the bottom of the page. AWS's Cloudscape design system recommends you "cite the sources inline of the generative AI response" so users can verify the information, with numbered markers like [1\] that open the source title in a popover, and a "Sources" section listing each link with its title and date (\[AWS Cloudscape, Generative AI chat, published 20 November 2024](https://cloudscape.design/gen-ai/patterns/generative-ai-chat/)).

That works in chat. Outside chat, apply the same idea at the right size:

- A form field filled by AI gets a small source icon that opens the page of the document it came from.
- A table row gets a link to the record or email behind it.
- A paragraph in a generated document gets an inline marker, and hovering shows the quoted passage.

The rule is one click from claim to evidence. If checking takes five clicks, nobody checks.

Google's guidebook adds a second reason to show sources: telling users what data the model used "can help them know when they have a critical piece of information that the system does not" ([Google PAIR Guidebook, Explainability + Trust](https://pair.withgoogle.com/chapter/explainability-trust/)).

## How do you show confidence outside a chat window?

Most AI in B2B products does not live in chat. It fills fields, sorts rows and writes summaries. Confidence has to sit where that work sits.

**Fields.** Mark only the fields that need a look, with an amber underline and a "Check" chip. A form where every field is flagged teaches people to ignore flags.

**Tables.** Add a column or chip for rows to check, plus a filter: "Show only rows to check." Reviewers clear the uncertain rows first and skim the rest.

**Dashboards.** Show forecasts as a line with a shaded range rather than a single confident number.

**Documents.** Put citation markers on the sentences that make claims. Leave plain connective sentences unmarked.

## What does this look like on a real screen?

Here is an illustration, not a real team or result. Picture a claims team reviewing medical claims. The AI reads each claim form and fills twelve fields. Ten come back high confidence and show as normal text. Two, the procedure code and the date of service, come back low. Those two get an amber "Check" chip and a source icon that opens the scanned form at the right spot. The reviewer confirms both in seconds and moves on.

Gr8r also builds in this sector. Cendara is a medical claims operations SaaS. Built by Gr8r for its own portfolio. Not client work.

[Convoy](https://supply-chain-command-center-opal.vercel.app/?v=2), a supply chain app Gr8r built, shows a confidence percentage on each risk alert, next to which agent raised it and when. Built by Gr8r for its own portfolio. Not client work. It runs on demo data, so it shows the screens, not results.

Convoy, built by Gr8r for its own portfolio. Not client work. Demo data. Screenshot from 6 Nov 2026 checks.

## What should you do and avoid?

Use action labels, mark the exact field, link sources beside claims, show alternatives, allow fixes in place, and test with real users. Avoid raw decimals, page wide scores and buried sources.

| Do                                         | Avoid                                      |
| ------------------------------------------ | ------------------------------------------ |
| Use labels tied to an action               | Raw decimals for everyday users            |
| Mark the exact field, row or sentence      | One confidence score for a whole page      |
| Link the source next to the claim          | A source list buried at the bottom         |
| Show alternatives when the model is unsure | A single answer that hides doubt           |
| Let people correct the value in place      | Making them start over                     |
| Test the display with real users           | Assuming everyone reads "80%" the same way |

## When the confidence is low, what next?

Low confidence should never be a dead end. Offer a next step: check the source, pick from alternatives, or fill the value by hand. When the AI is actually wrong, the product needs a recovery path, covered in [designing error states for AI features](https://gr8rstudio.com/blog/ai-feature-error-states). For risky actions, a person should approve first; see [designing the review step before an AI agent acts](https://gr8rstudio.com/blog/design-review-step-ai-agent).

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

We design confidence and source patterns as part of our [AI product design](https://gr8rstudio.com/services/product-design) work.

## Frequently asked questions

### Should AI confidence be shown as a percentage or a label?

Use a label for most users, such as high, check this or low, with one clear action for each. Show percentages only to expert users who work with scores every day and know what a given number means in your product.

### Where should citations go in an AI answer?

Put each citation next to the claim it supports, with a numbered marker that opens the source title and a link. Add a sources list for the whole answer as well. The goal is one click from claim to evidence.

### How do you show low confidence without scaring users?

Mark only the specific field, row or sentence that is uncertain, explain it in plain words such as "Check this", and give a fast way to verify or fix it. Leave confident output unmarked so the warnings stay meaningful.

### Do you need to show confidence on every AI output?

No. Google's People + AI Guidebook suggests leaving confidence out when it does not change what the user does, or when it could mislead. Show it where a wrong answer costs time, money or trust.

### Should AI show alternatives when it is unsure?

Yes, when the model is torn between a few answers. A short list such as "This might be Acme Ltd or Acme Holdings" hands the choice back to the person.

## 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).

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

## Related reading

- [AI product design](https://gr8rstudio.com/services/product-design)
- [designing error states for AI features](https://gr8rstudio.com/blog/ai-feature-error-states)
- [designing the review step before an AI agent acts](https://gr8rstudio.com/blog/design-review-step-ai-agent)
- [AI UX design: the seven screen states](https://gr8rstudio.com/blog/ai-product-design-guide)
- [what a UX audit is and what you get at the end](https://gr8rstudio.com/blog/what-is-a-ux-audit)

Written by

Tanjim Islam

Founder & CEO

Share [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fshow-ai-confidence-in-ui)[X](https://x.com/intent/post?url=https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fshow-ai-confidence-in-ui&text=How%20to%20Show%20AI%20Confidence%20and%20Sources%20in%20Your%20UI)

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 When the AI Gets It Wrong: Designing Error States for AI FeaturesHow to design error states for AI: five ways AI fails (wrong, incomplete, refused, slow, unsafe), the UI response for each, and a review checklist.By Tanjim Islam](https://gr8rstudio.com/blog/ai-feature-error-states)

## 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