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 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 2C > Example

Dragon Professional | 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 > Pattern 2D > Example

Word Online | 2D: Provide low performance alerts

card example thumbnail
Guideline 2 > Pattern 2D > Example

Microsoft Teams | 2D: Provide low performance alerts

card example thumbnail
Guideline 2 > Pattern 9A > Example

Viva Topics | 9A: Switch classification decisions and G2

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

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

Guideline 11

Make clear why the system did what it did

Enable the user to access an explanation of why the AI system behaved as it did.
Guideline 11 > Pattern 11A

Pattern 11A: Local explanations
Guideline 11 > Pattern 11A > Example

AlphaCode | 11A: Local explanations

card example thumbnail
Guideline 11 > Pattern 11A > Example

Copilot in Excel | 11A: Local explanations

card example thumbnail
Guideline 11 > Pattern 11A > Example

Business Chat | 11A: Local explanations

card example thumbnail
Guideline 11 > Pattern 11A > Example

Pinterest | 11A: Local explanations

card example thumbnail
Guideline 11 > Pattern 11B

Pattern 11B: Global explanations
Guideline 11 > Pattern 11B > Example

D365 Marketing | 11B: Global explanations

card example thumbnail
Guideline 11 > Pattern 11C

Pattern 11C: Present properties of system outputs
Guideline 11 > Pattern 11D

Pattern 11D: Map system input attributes to system outputs
Guideline 11 > Pattern 11D > Example

AlphaCode | 11D: Map system input attributes to system outputs

card example thumbnail
Guideline 11 > Pattern 11D > Example

Gmail | 11D: Map system input attributes to system outputs

card example thumbnail
Guideline 11 > Pattern 11D > Example

Sentiment Analysis | 11D: Map system input attributes to system outputs

card example thumbnail
Guideline 11 > Pattern 11E

Pattern 11E: Map user behaviors to system outputs
Guideline 11 > Pattern 11F

Pattern 11F: Example-based explanations
Guideline 11 > Pattern 11F > Example

Image recognition | 11F: Example-based explanations

card example thumbnail
Guideline 11 > Pattern 11F > Example

Computer Vision | 11F: Example-based explanations

card example thumbnail
Guideline 11 > Pattern 11G

Pattern 11G: “What if?” explanations
Guideline 11 > Pattern 11G > Example

Copysmith | 11G: “What if explanations”

card example thumbnail
Guideline 11 > Pattern 11G > Example

Jasper.ai | 11G: “What if?” explanations

card example thumbnail
Guideline 11 > Pattern 11G > Example

Grammarly | 11G: “What if?” explanations

card example thumbnail

Guideline 15

Guideline 15

Encourage granular feedback

Enable the user to provide feedback indicating their preferences during regular interaction with the AI system.
Guideline 15 > Pattern 15A

Pattern 15A: Encourage explicit feedback on individual system outputs
Guideline 15 > Pattern 15A > Example

Copilot in Excel | 15A: Encourage explicit feedback on individual system outputs

card example thumbnail
Guideline 15 > Pattern 15A > Example

Viva Topics | 15A: Encourage explicit feedback on individual system outputs

card example thumbnail
Guideline 15 > Pattern 15B

Pattern 15B: Request explicit feedback on selected system outputs
Guideline 15 > Pattern 15C

Pattern 15C: Reporting inappropriate content
Guideline 15 > Pattern 15C > Example

Word Online | 15C: Reporting inappropriate content

card example thumbnail
Guideline 15 > Pattern 15D

Pattern 15D: Use existing public rating or interaction data as feedback for the system
Guideline 15 > Pattern 15D > Example

Contoso | 15D: Use existing public rating or interaction data as feedback for the system

card example thumbnail