gistfile1.md

Explorable Explanations Design Patterns

Experiencing (First Person + Third Person)

Play the algorithm. Put the reader in the "mind" of the algorithm (first person) while also seeing the algorithm's high level behavior (third person).

• Prime Numbers (Philipp Legner, World of Mathematics) see "The Sieve of Eratosthenes"
• A visual proof that neural nets can compute any function (Michael Nielsen, Neural Networks and Deep Learning) see "get as many peaks as we want"

Make time spatial and playable. Juxtapose a time line (spatial, third person view of time) with a play button to experience actual time (first person).

• Fractions of a Second: An Olympic Musical (Amanda Cox, NYT)
• Slow Time (Toby Schachman)

Exploring

Encourage the reader to ask "What if..." questions, then set up the scenarios to answer the questions.

• Introduction to A* (Amit Patel, Red Blob Games)

Ordering

Start with something impressive that also serves as an overview. Answer "So What?"

• Earth, a Primer (Chaim Gingold) shows the full system running when it introduces the camera controls at the beginning

Constrained → Unconstrained.

Introduce "mechanics" one at a time in isolation, then combine them.

• Earth, a Primer (Chaim Gingold)
• Miegakure (Marc ten Bosch)

Overview → Deconstruct → Reconstruct.

• Sight and Light (Nicky Case)

End with a sandbox.

• Earth, a Primer (Chaim Gingold)

Go too far → Fail → Take a step back.

• Introduction to A* (Amit Patel, Red Blob Games)

Connecting

Synchronize text and diagram ("Tangle").

Synchronize state between side-by-side diagrams.

• Introduction to A* (Amit Patel, Red Blob Games)

Synchronize scroll position between media objects.

• Eyes on the Prize (Glen Chiacchieri)

Connecting lines.

• Riding the New Silk Road (Shan Carter, Hannah Fairfield, and Derek Watkins, NYT)

Connecting hover to highlight the same element within multiple contexts, or to see a chain of causality.

• Matrix (Nicky Case)

Click text to set diagram state.

• Up and Down the Ladder of Abstraction (Bret Victor) see "Stepping Back Down"
• 512 Paths to the White House (Mike Bostock and Shan Carter, NYT)

Click or hover text to highlight part of the diagram.

• Up and Down the Ladder of Abstraction (Bret Victor) see "Abstracting the Algorithm"

Design Exercises

Observe how you explain the topic with your hands to surface interactions.

Transparency (all state visible). Do a one-page "design document" with minimal text to surface a visual vocabulary for the model (also scopes the project)

I think we should have both,

1. A gallery of explorable explanations in general.
2. A list of design principles, each of which should have more text and more specific pointing at examples than I have done here.

This is just a start at the second.

Also, perhaps having both of these on a hackpad would help us crowdsource it more easily.