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 5

Guideline 5

Match relevant social norms

Ensure the experience is delivered in a way that users would expect, given their social and cultural context.
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 10

Guideline 10

Scope services when in doubt

Engage in disambiguation or gracefully degrade the AI system’s services when uncertain about a user’s goals.
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

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