HAX Design Library

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

Guideline 1

Guideline 1

Make clear what the system can do

Help the user understand what the AI system is capable of doing.
Guideline 1 > Pattern 1A

Pattern 1A: Introductory blurb
Guideline 1 > Pattern 1A > Example

Copilot in PowerPoint | 1A: Introductory blurb

card example thumbnail
Guideline 1 > Pattern 1A > Example

Copilot in Word | 1A: Introductory blurb

card example thumbnail
Guideline 1 > Pattern 1A > Example

D365 Marketing | 1A: Introductory blurb

card example thumbnail
Guideline 1 > Pattern 1A > Example

Outlook | 1A: Introductory blurb and G17: Provide global controls

card example thumbnail
Guideline 1 > Pattern 1A > Example

Semantic Scholar | 1A: Introductory blurb

card example thumbnail
Guideline 1 > Pattern 1A > Example

Microsoft Word | 1A: Introductory blurb

card example thumbnail
Guideline 1 > Pattern 1B

Pattern 1B: Use explanation (G11) patterns
Guideline 1 > Pattern 1B > Example

Viva Learning | 1B: Use explanation (G11) patterns

card example thumbnail
Guideline 1 > Pattern 1B > Example

Amazon | 1B: Use explanation (G11) patterns

card example thumbnail
Guideline 1 > Pattern 1B > Example

Gmail | 1B: Use explanation (G11) patterns

card example thumbnail
Guideline 1 > Pattern 1C

Pattern 1C: Expose system controls
Guideline 1 > Pattern 1C > Example

Copilot in PowerPoint | 1C: Expose system controls

card example thumbnail
Guideline 1 > Pattern 1C > Example

Viva Topics | 1C: Expose system controls

card example thumbnail
Guideline 1 > Pattern 1C > Example

Viva Topics | 1C: Expose system controls

card example thumbnail
Guideline 1 > Pattern 1C > Example

Google Photos | 1C: Expose system controls

card example thumbnail
Guideline 1 > Pattern 1C > Example

Bing Maps | 1C: Expose system controls

card example thumbnail
Guideline 1 > Pattern 1D

Pattern 1D: Demonstrate possible system inputs
Guideline 1 > Pattern 1D > Example

M365 Chat | 1D: Make clear what the system can do

card example thumbnail
Guideline 1 > Pattern 1D > Example

Copilot in PowerPoint | 1D: Demonstrate possible system inputs

card example thumbnail
Guideline 1 > Pattern 1D > Example

Business Chat | 1D: Demonstrate possible system inputs

card example thumbnail
Guideline 1 > Pattern 1D > Example

Google Maps | 1D: Demonstrate possible system inputs

card example thumbnail
Guideline 1 > Pattern 1D > Example

Bing | 1D: Demonstrate possible system inputs

card example thumbnail
Guideline 1 > Pattern 1E

Pattern 1E: Show a set of system outputs
Guideline 1 > Pattern 1E > Example

Word Online | 1E: Show a set of system outputs

card example thumbnail
Guideline 1 > Pattern 1E > Example

Google Maps | 1E: Show a set of system outputs

card example thumbnail
Guideline 1 > Pattern 1E > Example

PowerPoint | 1E: Show a set of system outputs

card example thumbnail
Guideline 1 > Example

Notion | G1: Make clear what the system can do

card example thumbnail
Guideline 1 > Example

Business Chat | G1: Make clear what the system can do

card example thumbnail
Guideline 1 > Example

Copilot in Excel | G1: Make clear what the system can do

card example thumbnail

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

Pattern 2B: Match the level of precision in UI communication with the system performance – Numbers
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

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

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

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

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

Viva Topics – G4: Show contextually relevant information

card example thumbnail
Guideline 4 > Example

Viva Topics | G4: Show contextually relevant information

card example thumbnail
Guideline 4 > Example

Microsoft Word | G4: Show contextually relevant information

card example thumbnail
Guideline 4 > Example

Google Search | G4: Show contextually relevant information

card example thumbnail
Guideline 4 > Example

Walmart.com | G4: Show contextually relevant information

card example thumbnail

Guideline 6

Guideline 6

Mitigate social biases

Ensure the AI system’s language and behaviors do not reinforce undesirable and unfair stereotypes and biases.
Guideline 6 > Example

Bing Search | G6: Mitigate social biases

card example thumbnail
Guideline 6 > Example

Siri | G6: Mitigate social biases

card example thumbnail
Guideline 6 > Example

MyAnalytics | G6: Mitigate social biases

card example thumbnail
Guideline 6 > Example

Android | G6: Mitigate social biases

card example thumbnail
Guideline 6 > Example

Bing Search | G6: Mitigate social biases

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

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

Pattern 11B: Global explanations
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

Pattern 11C: Present properties of system outputs
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

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

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

NerdWallet | 11G: “What if?” explanations

card example thumbnail
Guideline 11 > Pattern 11G > Example

Grammarly | 11G: “What if?” explanations

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

Outlook – G12: Remember recent interactions

card example thumbnail
Guideline 12 > Example

Siri | G12: Remember recent interactions

card example thumbnail
Guideline 12 > Example

Bing Search | G12: Remember recent interactions

card example thumbnail