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