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

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

card example thumbnail
Guideline 2 > Pattern 2A > Example

Amazon Prime Video | 2A: Match UI communication precision with system performance — Language

card example thumbnail
Guideline 2 > Pattern 2A > Example

Apple Music | 2A: Match UI communication precision with system performance — Language

card example thumbnail
Guideline 2 > Pattern 2A > Example

LinkedIn | 2A: Match UI communication precision with system performance — Language

card example thumbnail
Guideline 2 > Pattern 2B > Example

Uber Eats | 2B: Match UI communication precision with system performance — Numbers

card example thumbnail
Guideline 2 > Pattern 2B > Example

Zillow | 2B: Match UI communication precision with system performance — Numbers

card example thumbnail
Guideline 2 > Pattern 2C > Example

Contoso | 2C: Report system performance information

card example thumbnail
Guideline 2 > Pattern 2C > Example

SimCam | 2C: Report system performance information

card example thumbnail
Guideline 2 > Pattern 2C > Example

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

Kayak | 2C: Report system performance information

card example thumbnail
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

Google Maps | 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

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 9

Guideline 9

Support efficient correction

Make it easy to edit, refine, or recover when the AI system is wrong.
Guideline 9 > Pattern 9A > Example

Viva Topics | 9A: Switch classification decisions

card example thumbnail
Guideline 9 > Pattern 9A > Example

Google Photos | 9A: Switch classification decisions

card example thumbnail
Guideline 9 > Pattern 9A > Example

Gmail | 9A: Switch classification decisions

card example thumbnail
Guideline 9 > Pattern 9B > Example

Copilot in PowerPoint | 9B: Rich and detailed edits

card example thumbnail
Guideline 9 > Pattern 9B > Example

Notion | 9B: Rich and detailed edits

card example thumbnail
Guideline 9 > Pattern 9B > Example

Copilot in Outlook | 9B: Rich and detailed edits

card example thumbnail
Guideline 9 > Pattern 9B > Example

Copilot in Word | 9B: Rich and detailed edits

card example thumbnail
Guideline 9 > Pattern 9B > Example

D365 Customer Service | 9B: Rich and detailed edits

card example thumbnail
Guideline 9 > Pattern 9B > Example

Nichesss | 9B: Rich and detailed edits

card example thumbnail
Guideline 9 > Pattern 9B > Example

LinkedIn | 9B: Rich and detailed edits

card example thumbnail
Guideline 9 > Pattern 9B > Example

Google Maps | 9B: Rich and detailed edits

card example thumbnail
Guideline 9 > Pattern 9B > Example

Apple Photos | 9B: Rich and detailed edits

card example thumbnail
Guideline 9 > Pattern 9C > Example

Bing Search | 9C: Undo automated actions

card example thumbnail
Guideline 9 > Pattern 9D > Example

Instagram | 9D: Do G9 through G15

card example thumbnail
Guideline 9 > Pattern 9D > Example

Google Photos | 9D: Do G9 through G15

card example thumbnail
Guideline 9 > Pattern 9E > Example

Outlook | 9E: Batch-editing data

card example thumbnail
Guideline 9 > Pattern 9E > Example

Google Photos | 9E: Batch-editing data

card example thumbnail
Guideline 9 > Pattern 9E > Example

Gmail | 9E: Batch-editing data

card example thumbnail
Guideline 9 > Example

Copilot in PowerPoint | G9: Support efficient correction

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

Verification-focused explanations | 11A: Local explanations

card example thumbnail
Guideline 11 > Pattern 11A > Example

AlphaCode | 11A: Local explanations

card example thumbnail
Guideline 11 > Pattern 11A > Example

Google Search | 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

InterpretML | 11A: Local explanations

card example thumbnail
Guideline 11 > Pattern 11A > Example

Pinterest | 11A: Local explanations

card example thumbnail
Guideline 11 > Pattern 11B > Example

D365 Marketing | 11B: Global explanations

card example thumbnail
Guideline 11 > Pattern 11B > Example

InterpretML | 11B: Global explanations

card example thumbnail
Guideline 11 > Pattern 11B > Example

Instagram | 11B: Global explanations

card example thumbnail
Guideline 11 > Pattern 11C > Example

Google Maps | 11C: Present properties of system outputs

card example thumbnail
Guideline 11 > Pattern 11C > Example

Strava | 11C: Present properties of system outputs

card example thumbnail
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 > Example

Netflix | 11E: Map user behaviors to system outputs

card example thumbnail
Guideline 11 > Pattern 11E > Example

Goodreads | 11E: Map user behaviors to system outputs

card example thumbnail
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 > 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

NerdWallet | 11G: “What if?” explanations

card example thumbnail
Guideline 11 > Pattern 11G > Example

Grammarly | 11G: “What if?” explanations

card example thumbnail

Guideline 13

Guideline 13

Learn from user behavior

Personalize the user’s experience by learning from their actions over time.
Guideline 13 > Example

Amazon | G13: Learn from user behavior

card example thumbnail
Guideline 13 > Example

Office Search | G13: Learn from user behavior

card example thumbnail
Guideline 13 > Example

Amazon.com | G13: Learn from user behavior

card example thumbnail

Guideline 14

Guideline 14

Update and adapt cautiously

Limit disruptive changes when updating and adapting the AI system’s behaviors.
Guideline 14 > Pattern 14A > Example

YouTube | 14A: Comprehensive updates

card example thumbnail
Guideline 14 > Pattern 14A > Example

Facebook | 14A: Comprehensive updates

card example thumbnail
Guideline 14 > Pattern 14B > Example

Google Search | 14B: Immediate, partial, non-disruptive updates

card example thumbnail
Guideline 14 > Pattern 14B > Example

Spotify | 14B: Immediate, partial, non-disruptive updates

card example thumbnail