HAX Design Library

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

Bing Maps | 1C: Expose system controls

card example thumbnail
Guideline 1 > Pattern 1D > Example

Google Maps | 1D: Demonstrate possible system inputs

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

Kayak | 2C: Report system performance information

card example thumbnail
Guideline 2 > Pattern 2D > Example

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

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

Walmart.com | G4: Show contextually relevant information

card example thumbnail
Guideline 6 > Example

MyAnalytics | G6: Mitigate social biases

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

Microsoft Forms | G8: Support efficient dismissal

card example thumbnail
Guideline 8 > Example

Instagram | G8: Support efficient dismissal

card example thumbnail
Guideline 9 > Pattern 9A > Example

Viva Topics | 9A: Switch classification decisions

card example thumbnail
Guideline 9 > Pattern 9B > Example

Google Maps | 9B: Rich and detailed edits

card example thumbnail
Guideline 9 > Pattern 9D > Example

Instagram | 9D: Do G9 through G15

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

Verification-focused explanations | 11A: Local explanations

card example thumbnail
Guideline 11 > Pattern 11A > Example

Pinterest | 11A: Local 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 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 11G > Example

Grammarly | 11G: “What if?” explanations

card example thumbnail
Guideline 13 > Example

Amazon | 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 > 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
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 15B > Example

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

card example thumbnail
Guideline 15 > Pattern 15C > Example

Instagram | 15C: Reporting inappropriate content

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

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

card example thumbnail
Guideline 17 > Example

Windows Copilot | G17: Provide global controls

card example thumbnail
Guideline 18 > Example

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

card example thumbnail