HAX Design Library

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

Viva Learning | 1B: Use explanation (G11) patterns

Guideline 1 > Pattern 1B > Example

Amazon | 1B: Use explanation (G11) patterns

Guideline 1 > Pattern 1C

Pattern 1C: Expose system controls

Guideline 1 > Pattern 1C > Example

Viva Topics | 1C: Expose system controls

Guideline 1 > Pattern 1C > Example

Viva Topics | 1C: Expose system controls

Guideline 1 > Pattern 1C > Example

Bing Maps | 1C: Expose system controls

Guideline 1 > Pattern 1D

Pattern 1D: Demonstrate possible system inputs

Guideline 1 > Pattern 1D > Example

Google Maps | 1D: Demonstrate possible system inputs

Guideline 1 > Pattern 1E

Pattern 1E: Show a set of system outputs

Guideline 1 > Pattern 1E > Example

Google Maps | 1E: Show a set of system outputs

Guideline 1 > Pattern 1E > Example

PowerPoint | 1E: Show a set of system outputs

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

Amazon Prime Video | 2A: Match UI communication precision with system performance — Language

Guideline 2 > Pattern 2A > Example

Apple Music | 2A: Match UI communication precision with system performance — Language

Guideline 2 > Pattern 2A > Example

LinkedIn | 2A: Match UI communication precision with system performance — Language

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 2C > Example

Kayak | 2C: Report system performance information

Guideline 2 > Pattern 2D

Pattern 2D: Provide low performance alerts

Guideline 2 > Pattern 2D > Example

Google Maps | 2D: Provide low performance alerts

Guideline 2 > Pattern 9A > Example

Viva Topics | 9A: Switch classification decisions and G2

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

Verification-focused explanations | 11A: Local explanations

Guideline 11 > Pattern 11A > Example

Pinterest | 11A: Local explanations

Guideline 11 > Pattern 11B

Pattern 11B: Global explanations

Guideline 11 > Pattern 11C

Pattern 11C: Present properties of system outputs

Guideline 11 > Pattern 11C > Example

Google Maps | 11C: Present properties of system outputs

Guideline 11 > Pattern 11C > Example

Strava | 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 11E > Example

Netflix | 11E: Map user behaviors to system outputs

Guideline 11 > Pattern 11E > Example

Goodreads | 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 11 > Pattern 11G > Example

Grammarly | 11G: “What if?” explanations

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

Apple Music | 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 16C > Example

Google Maps | 16C: Remind of consequences of a past action and ask for reconfirmation

Guideline 16 > Pattern 16C > Example

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

Guideline 16 > Pattern 16D > Example

Interactive collection of the 18 Guidelines for Human-AI Interaction, with design patterns for applying them and examples.

Guideline 1

Make clear what the system can do

Pattern 1A: Introductory blurb

Pattern 1B: Use explanation (G11) patterns

Pattern 1C: Expose system controls

Pattern 1D: Demonstrate possible system inputs

Pattern 1E: Show a set of system outputs

Guideline 2

Make clear how well the system can do what it can do

Pattern 2A: Match the level of precision in UI communication with the system performance – Language

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

Pattern 2C: Report system performance information

Pattern 2D: Provide low performance alerts

Guideline 11

Make clear why the system did what it did

Pattern 11A: Local explanations

Pattern 11B: Global explanations

Pattern 11C: Present properties of system outputs

Pattern 11D: Map system input attributes to system outputs

Pattern 11E: Map user behaviors to system outputs

Pattern 11F: Example-based explanations

Pattern 11G: “What if?” explanations

Guideline 16

Convey the consequences of user actions

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

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

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

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