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 > 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 > 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 > 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 > 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 > 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 > 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 > 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 > 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 > 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 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 > 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 > 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 > 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 > 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 > 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 > 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 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 > 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 > 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 16 > Pattern 16D > Example

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

card example thumbnail