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:
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:
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.
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.
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.
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!
I found some of the interactive examples more useful than others - in particular anything that allowed visualization of steps/loops of logic, or anything that has to do with time.
I think you are among the 1% of the internet that gets the interactive parts of his content exactly right in regards to his presented content. and in contradiction to your own words: i don't think most of your interactive diagrams / elements add a 'digging deeper' additional element to an already complete explaination (for the interested audiance) - I agree that the verbal explanation is sufficiant and complete, but I see the interactive elements as a great addition to explain the core issue at hand. it help your verbal explaination by providing graphical clues and interactive feedback to the exact thing you are describing. so this is more a helpfull 'by the side' that a challanging 'on top of'.
as to reaching your pages - I don't participate on social media much. I always just google 'Amit hex grid' to reach you. and I am time and time again supprised that you still add new valuable content. I have been a regular beneficiary of your contributions since the very first SimBlob and BlobCity-versions on OS/2.
thanks and keep up the great work.
Carsten
Thanks Carsten!
It's something I struggle with — on one hand, I do think the interactive elements can give you a better understanding of the core concepts, and it may be nice to design the pages to rely on that, but on the other hand, a lot of people *don't* interact with them, and I want to make sure the page "works" without them. I'd also like people to be able to print the page out, and those situations won't allow interactive elements.
BTW you can play BlobCity in the browser now: https://www.redblobgames.com/blobcity/play.html
Post a Comment