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

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

Pattern 1C: Expose system controls
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

Business Chat | 1D: Demonstrate possible system inputs

card example thumbnail
Guideline 1 > Pattern 1E

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

Business Chat | 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 2B

Pattern 2B: Match the level of precision in UI communication with the system performance – Numbers
Guideline 2 > Pattern 2C

Pattern 2C: Report system performance information
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 > 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

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

Business Chat | 11A: Local explanations

card example thumbnail
Guideline 11 > Pattern 11B

Pattern 11B: Global explanations
Guideline 11 > Pattern 11C

Pattern 11C: Present properties of system outputs
Guideline 11 > Pattern 11D

Pattern 11D: Map system input attributes to system outputs
Guideline 11 > Pattern 11E

Pattern 11E: Map user behaviors to system outputs
Guideline 11 > Pattern 11F

Pattern 11F: Example-based explanations
Guideline 11 > Pattern 11G

Pattern 11G: “What if?” explanations

Guideline 16

Guideline 16

Convey the consequences of user actions

Immediately update or convey how user actions will impact future behaviors of the AI system.
Guideline 16 > Pattern 16A

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

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

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

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