Conversations with several people over the past few months have led me to wonder about the purpose of the interactive diagrams in my articles. I see lots of interactive diagrams but most are not integrated into text. The interactive diagrams are cool. They make me feel like a pioneer exploring a new medium. They're exciting! I like making them! But … that doesn't mean I should be making them.

After a few years of publishing interactive tutorials I stepped back to consider what my visitors actually want. When looking at the pageview chart for my hexagon grid page it looks like the spikes are a big deal:

Pageviews for my hexagonal grids page
Pageviews chart

Those spikes are because the page has interactive diagrams ("explorables"). People see interactive diagrams and think “cool!” and then share it on Reddit or HackerNews. But the cumulative pageview chart paints a different picture. There's a huge audience that is not coming from social media:

Cumulative pageviews for my hexagonal grid page
Cumulative pageviews chart

These charts were a reminder for me: most visitors to my site aren't looking for explorables. They're looking for explanations. They're looking for solutions to problems they are trying to solve. So what is the purpose of the interactive part?

I went back to Bret Victor's explorable explanation page:

It's tempting to be impressed by the novelty of an interactive widget such as this, but the interactivity itself is not really the point. The primary point of this example – the reason I call it an "explorable explanation" – is the subtlety with which the explorable is integrated with the explanation.

This is a reminder that interactive diagrams alone aren't my goal.

Like the proposition example earlier, the filter description works as a static explanation – it can be read like normal text. The reader is not forced to interact in order to learn. The reader interacts if he wants to go deeper, if he has piqued curiosity or unanswered questions. There are no UI elements screaming for attention. The reader is not transported off to a separate "interactive" context. Instead, the reader simply nudges the examples that the author has already presented.

This is a reminder that I should not even require interaction on any of my pages.

Most interactive widgets dump the user in a sandbox and say "figure it out for yourself". Those are not explanations. To me, an essential aspect of the "explorable explanation" concept is that the author holds up his end of the conversation. The author must guide the reader, and provide a structure for the learning experience. Only then can the reader respond, by asking and answering the questions that the author provokes.

And this is a reminder that I need to focus on the explanations.

My primary goal should be explanations. And that means, even though I love to make everything interactive, the interactive part may not even be necessary. Instead of starting by asking myself “what interactive diagrams would be cool to make?” I should be asking “what topics do I want to explain?”. So what is the purpose of the interactive part? The interactive parts are there to make the explanation better. I need to keep this in mind as I write new tutorials.

Labels: ,


Marc wrote at May 23, 2018 10:21 AM

I recently found your site when I was looking into A* and pathfinding. For what it's worth, I loved the interactive examples you had in the updated algorithms section. They helped me make immediate comparisons of what I expected the code to do with what it actually did and enabled me to think deeper about what was happening.

Amit wrote at May 23, 2018 5:16 PM

Thanks Marc! I do like the interactive examples but you came to the site for pathfinding :-) so I need to make sure I have the content people are looking for, and then I can add interactive examples to that. I've also made pages with interactive examples without useful content, and they don't seem to be that useful for people.

Joe Mccane wrote at May 27, 2018 1:32 PM

I actually like the interactive part of it, you can see the code you are explaining in action, which does provide something even if it is not much. But I do agree with the sentiment of focusing more on the explanation, because after all this is what you make these for. Either way I am grateful for all the work you put into this, this is my go to site when ever I am make a hexagonal map or I need A* pathfinding for a refresh on the way it is done. Keep up the good work! One suggestion which may be something you want to do or not, is a spherical map, or a globe type map. It is hard to find information for this, because I tried to look some articles up, I was more curious than wanting to actually implement it, but it is a empty place needed to be filled! Thanks again for your hard work on these articles!