HAX Design Library

Interactive collection of the 18 Guidelines for Human-AI Interaction, with design patterns for applying them and examples.
Guideline 1 > Pattern 1B > Example

Gmail | 1B: Use explanation (G11) patterns

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 2 > Pattern 9A > Example

Viva Topics | 9A: Switch classification decisions and G2

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

Google Photos | G5: Match relevant social norms

card example thumbnail
Guideline 9 > Pattern 9A > Example

Viva Topics | 9A: Switch classification decisions

card example thumbnail
Guideline 9 > Pattern 9A > Example

Google Photos | 9A: Switch classification decisions

card example thumbnail
Guideline 9 > Pattern 9D > Example

Google Photos | 9D: Do G9 through G15

card example thumbnail
Guideline 9 > Pattern 9E > Example

Google Photos | 9E: Batch-editing data

card example thumbnail
Guideline 9 > Pattern 9E > Example

Gmail | 9E: Batch-editing data

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 15 > Pattern 15A > Example

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

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 16B > Example

Gmail | 16B: Feedback: Convey the consequences of user actions after the user takes action

card example thumbnail
Guideline 16 > Pattern 16D > Example

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

card example thumbnail
Guideline 17 > Example

Google Photos | G17: Provide global controls

card example thumbnail
Guideline 18 > Example

Outlook Web | G18: Notify users about changes

card example thumbnail