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

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

Microsoft Word | 1A: Introductory blurb

card example thumbnail
Guideline 1 > Pattern 1B

Pattern 1B: Use explanation (G11) patterns
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 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 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 > 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 4 > Example

Copilot in Word | G4: Show contextually relevant information

card example thumbnail
Guideline 4 > Example

Business Chat | G4: Show contextually relevant information

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

Microsoft Word | G4: Show contextually relevant information

card example thumbnail
Guideline 7 > Example

Copilot in Word | G7: Support efficient invocation

card example thumbnail
Guideline 7 > Example

Copilot in Outlook | G7: Support efficient invocation

card example thumbnail
Guideline 7 > Example

Excel Flash Fill | G7: Support efficient invocation

card example thumbnail
Guideline 15 > Pattern 15A

Pattern 15A: Encourage explicit feedback on individual system outputs
Guideline 15 > Pattern 15A > Example

Copilot in Excel | 15A: Encourage explicit feedback on individual system outputs

card example thumbnail
Guideline 15 > Pattern 15A > Example

Viva Topics | 15A: Encourage explicit feedback on individual system outputs

card example thumbnail
Guideline 15 > Pattern 15B

Pattern 15B: Request explicit feedback on selected system outputs
Guideline 15 > Pattern 15C

Pattern 15C: Reporting inappropriate content
Guideline 15 > Pattern 15C > Example

Word Online | 15C: Reporting inappropriate content

card example thumbnail
Guideline 15 > Pattern 15D

Pattern 15D: Use existing public rating or interaction data as feedback for the system
Guideline 15 > Pattern 15D > Example

Contoso | 15D: Use existing public rating or interaction data as feedback for the system

card example thumbnail