Skip to content

Instantly share code, notes, and snippets.

@electronicwhisper
Last active August 29, 2015 14:06
Show Gist options
  • Save electronicwhisper/d86bc7fdd75eae7eba6c to your computer and use it in GitHub Desktop.
Save electronicwhisper/d86bc7fdd75eae7eba6c to your computer and use it in GitHub Desktop.

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).

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).

Exploring

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

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.

Overview → Deconstruct → Reconstruct.

End with a sandbox.

Go too far → Fail → Take a step back.

Connecting

Synchronize text and diagram ("Tangle").

Synchronize state between side-by-side diagrams.

Synchronize scroll position between media objects.

Connecting lines.

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

Click text to set diagram state.

Click or hover text to highlight part of the diagram.

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)

@electronicwhisper
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment