HAX Design Library

Interactive collection of the 18 Guidelines for Human-AI Interaction, with design patterns for applying them and examples.
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 > 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 2 > Example

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

card example thumbnail
Guideline 3 > Example

Copilot in Teams | G3: Time services based on context

card example thumbnail
Guideline 3 > Example

Outlook | G3: Time services based on context

card example thumbnail
Guideline 3 > Example

Apple Maps | G3: Time services based on context

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

Copilot in PowerPoint | G5: Match relevant social norms

card example thumbnail
Guideline 5 > Example

Microsoft Word | G5: Match relevant social norms

card example thumbnail
Guideline 5 > Example

Cortana | G5: Match relevant social norms

card example thumbnail
Guideline 5 > Example

Google Photos | G5: Match relevant social norms

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

Excel Flash Fill | G7: Support efficient invocation

card example thumbnail
Guideline 7 > Example

PowerPoint | G7: Support efficient invocation

card example thumbnail
Guideline 7 > Example

Amazon.com | G7: Support efficient invocation

card example thumbnail
Guideline 8 > Example

Copilot in Outlook | G8: Support efficient dismissal

card example thumbnail
Guideline 8 > Example

Copilot in Word | G8: Support efficient dismissal

card example thumbnail
Guideline 8 > Example

Microsoft Forms | G8: Support efficient dismissal

card example thumbnail
Guideline 8 > Example

Siri | G8: Support efficient dismissal

card example thumbnail
Guideline 8 > Example

Instagram | G8: Support efficient dismissal

card example thumbnail
Guideline 9 > Pattern 9A

Pattern 9A: Switch classification decisions
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

Pattern 9B: Rich and detailed edits
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

Pattern 9C: Undo automated actions
Guideline 9 > Pattern 9C > Example

Bing Search | 9C: Undo automated actions

card example thumbnail
Guideline 9 > Pattern 9D

Pattern 9D: Do G9 through G15
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

Pattern 9E: Batch-editing data
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 10 > Pattern 10A

Pattern 10A: Disambiguate before acting
Guideline 10 > Pattern 10A > Example

Copilot in Word | 10A: Disambiguate before acting

card example thumbnail
Guideline 10 > Pattern 10A > Example

Github Copilot | 10A: Disambiguate before acting

card example thumbnail
Guideline 10 > Pattern 10A > Example

iPhone | 10A: Disambiguate before acting

card example thumbnail
Guideline 10 > Pattern 10A > Example

Google Search | 10A: Disambiguate before acting

card example thumbnail
Guideline 10 > Pattern 10B

Pattern 10B: Avoid cold starts by eliciting user preferences
Guideline 10 > Pattern 10B > Example

Apple Music | 10B: Avoid cold starts by eliciting user preferences

card example thumbnail
Guideline 10 > Pattern 10B > Example

Microsoft News | 10B: Avoid cold starts by eliciting user preferences

card example thumbnail
Guideline 10 > Pattern 10C

Pattern 10C: Fall back to other strategies
Guideline 10 > Pattern 10C > Example

Box Skills | 10C: Fall back to other strategies

card example thumbnail
Guideline 10 > Pattern 10C > Example

Kommunicate chatbot | 10C: Fall back to other strategies

card example thumbnail
Guideline 10 > Example

Copilot in PowerPoint | G10: Scope services when in doubt

card example thumbnail
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 > 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
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 > Pattern 14A

Pattern 14A: Comprehensive updates
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

Pattern 14B: Immediate, partial, non-disruptive updates
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
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 15A > Example

Instagram | 15A: Encourage explicit feedback on individual system outputs

card example thumbnail
Guideline 15 > Pattern 15A > Example

Google Search | 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 15B > Example

Google Maps | 15B: Request explicit feedback on selected system outputs

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

Twitter | 15C: Reporting inappropriate content

card example thumbnail
Guideline 15 > Pattern 15C > Example

Instagram | 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
Guideline 15 > Pattern 15D > Example

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

card example thumbnail
Guideline 15 > Pattern 15D > Example

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

card example thumbnail
Guideline 16 > Pattern 16A

Pattern 16A: Feedforward: Convey the consequences of user actions before the user takes action
Guideline 16 > Pattern 16A > Example

Outlook | 16A: Feedforward: Convey the consequences of user actions before the user takes action

card example thumbnail
Guideline 16 > Pattern 16A > Example

Facebook | 16A: Feedforward: Convey the consequences of user actions before the user takes action

card example thumbnail
Guideline 16 > Pattern 16B

Pattern 16B: Feedback: Convey the consequences of user actions after the user takes action
Guideline 16 > Pattern 16B > Example

Gmail | 16B: Feedback: Convey the consequences of user actions after the user takes action

card example thumbnail
Guideline 16 > Pattern 16B > Example

Apple Music | 16B: Feedback: Convey the consequences of user actions after the user takes action

card example thumbnail
Guideline 16 > Pattern 16C

Pattern 16C: Remind of consequences of a past action and ask for reconfirmation
Guideline 16 > Pattern 16C > Example

Google Maps | 16C: Remind of consequences of a past action and ask for reconfirmation

card example thumbnail
Guideline 16 > Pattern 16C > Example

Apple Health | 16C: Remind of consequences of a past action and ask for reconfirmation

card example thumbnail
Guideline 16 > Pattern 16D

Pattern 16D: Convey the consequences of user action in help and documentation
Guideline 16 > Pattern 16D > Example

Instagram | 16D: Convey the consequences of user action in help and documentation

card example thumbnail
Guideline 16 > Pattern 16D > Example

Gmail | 16D: Convey the consequences of user action in help and documentation

card example thumbnail
Guideline 17 > Example

Hugging Chat | G17: Provide global controls

card example thumbnail
Guideline 17 > Example

Windows Copilot | G17: Provide global controls

card example thumbnail
Guideline 17 > Example

Microsoft Word | G17: Provide global controls

card example thumbnail
Guideline 17 > Example

Google Photos | G17: Provide global controls

card example thumbnail
Guideline 17 > Example

Bing Search | G17: Provide global controls

card example thumbnail
Guideline 18 > Example

Office What’s New | G18: Notify users about change

card example thumbnail
Guideline 18 > Example

Outlook Web | G18: Notify users about changes

card example thumbnail