The UI Patterns card deck

Card deck

UI Patterns

Design better products, faster.

Printed + digital · $129

Alternate titles: Citations, Confidence Indicators, Inferred Labels, Source Attribution.

Problem summary

The user can’t tell which parts of an AI answer to rely on and which to check, so they either trust everything or trust nothing.

Example

Source Citations example from iask.ai

▲ iAsk attaches numbered citations to each sentence of its answer, so the reader can check the source behind each claim.

Usage

  • Use when AI output draws on documents, data, or the web.
  • Use when mistakes in the output would have consequences for the user.
  • Use when you want new users to learn when the system is reliable and when to verify.
  • Do not use when the output is creative and has no factual claims to verify.

The card deck

Find more patterns like Source Citations in the UI Patterns card deck

A collection of 60 User Interface design patterns, presented in a manner easily referenced and used as a brainstorming tool.

Solution

Show where each part of an answer comes from, and how certain the system is.

Attach a small citation marker to each claim, linked to the source it came from. Show the sources in a list as well, with titles and domains the user can recognize. A citation placed at the end of a whole answer says much less than one attached to the sentence it supports.

Distinguish read from inferred

Mark content the system concluded rather than read directly: “inferred from 3 tickets”, “based on last week’s data”. Users need to know when a statement is a summary of sources and when it is the system’s own reasoning.

Express uncertainty in plain language

Where it helps, say how sure the system is (“Confidence: medium. One source is a year old.”). Plain words work better than percentages most users can’t interpret.

Teach the signals early

During onboarding, point out these signals and what they mean, so users learn when to check a source and when the answer can be used as it is.

Rationale

Citations calibrate trust. Users learn where the system is reliable and where their own judgment is needed. Accurate trust lasts longer than maximal trust: users who were told the system is always right stop trusting it entirely after the first visible mistake.

Discussion

Citations that don’t support the claim

A citation that doesn’t actually support the claim it is attached to creates false confidence, which is worse than no citation. Check that sources support the sentences they are attached to, and prefer fewer, accurate citations to many loose ones.

Clutter

Answers with a marker after every word are hard to read. Group citations by sentence or paragraph, and keep the source list compact.

Measuring it

Track how often users open sources, and the error rate of decisions made with AI output. A sudden drop in source opening can mean over-trust as easily as satisfaction.


More examples of the Source Citations pattern