HAX Design Library

Interactive collection of the 18 Guidelines for Human-AI Interaction, with design patterns for applying them and examples.

Guideline 2

Guideline 2

Make clear how well the system can do what it can do

Help the user understand how often the AI system may make mistakes.
Guideline 2 > Pattern 2A

Pattern 2A: Match the level of precision in UI communication with the system performance – Language
Guideline 2 > Pattern 2A > Example

Linguistic uncertainty expressions | 2A: Match the level of precision in UI communication with the system performance – Language

card example thumbnail
Guideline 2 > Pattern 2B

Pattern 2B: Match the level of precision in UI communication with the system performance – Numbers
Guideline 2 > Pattern 2C

Pattern 2C: Report system performance information
Guideline 2 > Pattern 2C > Example

Contoso | 2C: Report system performance information

card example thumbnail
Guideline 2 > Pattern 2D

Pattern 2D: Provide low performance alerts
Guideline 2 > Pattern 2D > Example

Business Chat | 2D: Provide low performance alerts

card example thumbnail
Guideline 2 > Pattern 2D > Example

Copilot in Outlook | 2D: Provide low performance alerts

card example thumbnail
Guideline 2 > Example

Google Gemini | G2: Make clear how well the system can do what it can do

card example thumbnail
Guideline 2 > Example

Google Gemini | G2: Make clear how well the system can do what it can do

card example thumbnail
Guideline 2 > Example

AI-framed questioning | G2: Make clear how well the system can do what it can do

card example thumbnail
Guideline 2 > Example

Visual uncertainty highlighting | G2: Make clear how well the system can do what it can do

card example thumbnail
Guideline 2 > Example

Uncertainty highlighting | G2: Make clear how well the system can do what it can do

card example thumbnail
Guideline 2 > Example

Background explanations | G2: Make clear how well the system can do what it can do

card example thumbnail
Guideline 2 > Example

Contrastive explanations | G2: Make clear how well the system can do what it can do

card example thumbnail
Guideline 2 > Example

AI Critiques | G2: Make clear how well the system can do what it can do

card example thumbnail
Guideline 2 > Example

Hugging Chat | G2: Make clear how well a system can do what it can do 

card example thumbnail
Guideline 2 > Example

Copilot in Word | G2: Make clear how well the system can do what it can do

card example thumbnail
Guideline 2 > Example

Copilot in PowerPoint | G2: Make clear how well the system can do what it can do

card example thumbnail
Guideline 2 > Example

Google Search | G2: Make clear how well a system can do what it can do

card example thumbnail
Guideline 2 > Example

Google Bard | G2: Make clear how well a system can do what it can do

card example thumbnail
Guideline 2 > Example

Hugging Chat | G2: Make clear how well a system can do what it can do

card example thumbnail
Guideline 2 > Example

Business Chat | G2: Make clear how well the system can do what it can do

card example thumbnail
Guideline 2 > Example

Copilot in Outlook | G2: Make clear how well the system can do what it can do

card example thumbnail

Guideline 4

Guideline 4

Show contextually relevant information

Display information relevant to the user’s current task and environment.
Guideline 4 > Example

Copilot in Word | G4: Show contextually relevant information

card example thumbnail
Guideline 4 > Example

Business Chat | G4: Show contextually relevant information

card example thumbnail

Guideline 7

Guideline 7

Support efficient invocation

Make it easy to invoke or request the AI system’s services when needed.
Guideline 7 > Example

Copilot in Word | G7: Support efficient invocation

card example thumbnail
Guideline 7 > Example

Copilot in Outlook | G7: Support efficient invocation

card example thumbnail

Guideline 12

Guideline 12

Remember recent interactions

Maintain short-term memory and allow the user to make efficient references to that memory.
Guideline 12 > Example

Business Chat | G12: Remember recent interactions

card example thumbnail