Reflection on GSoC 2018

See the work for the page I did here: Chapter 5, PR165, PR164, PR163

The goal of this summer was to rework Chapter 5, and experiment with new styles and techniques to present the information. I want to share how I came to some of my decisions, and provide some insight for future contributors and anyone else who might be interested.

My first contribution in 2017 followed a similar style to the other pages. I made a diagram for Minimax, and another for Alpha-Beta pruning. They were trees, not too unlike the large trees in the current Chapter 5, that mimicked the book’s style. They were meant to show, step-by-step, how we would evaluate the trees. I wanted continue this style when I began applying for the GSoC, and my plan was to create monolithic diagrams with tons of information and controls. While I think there is still a lot of value to be gained from those types of diagrams(I really like the ones in previous chapters), I ended up going in the complete opposite direction. Aimacode didn’t want to be a companion to its book, it wanted to be its own self-contained narrative. This goal required an entirely new approach.

I wanted it to be immediately obvious what was happening in the diagrams. It can be hard to parse what you’re looking at when you see very complicated and abstract diagrams. What is this? Why is it acting this way? What can this model? This information is not always immediately obvious, especially if we’re assuming that the reader doesn't already know the algorithm. To combat this, I try to start with something incredibly easy and intuitive, then work forwards from there. Almost everyone knows tic-tac-toe(I think?), so I introduce it first, which helps give context to what we’re doing. It also helps lead into the next diagram by familiarizing us with the controls of the game. It might seem redundant to have two separate diagrams when the first one is contained within the second one, but we’re trying to minimize the amount of new concepts that are introduced in each step. Each diagram is connected to the last one, and helps build a solid foundation to start talking about more complex concepts. I move further away from the real world, into abstraction, trying not to lose the reader along the way.

I also wanted to make sure our readers actually interacted with the diagrams. At multiple points I got feedback that people didn’t actually know they could interact with diagrams. I ended up doing a lot of things to draw attention to them (like the big “Make a move!” from the first diagram), but this lead to another fear. Reader would skip our diagrams if we gave them any reason to. Our goal is to actually teach people these concepts, and the page is a lot less effective without running through the diagrams, so I wanted to tackle this problem.

There were a number of things that were identified as potential issues. Many of the diagrams were unwieldy for some users. As an example, in the original minimax diagram, we used an html range input to let users walk through execution of the algorithm.This proved difficult for people not using mice. The solution I ended on was to use a parallax scrolling, which provided a convenient way to move through the execution process.

Providing too many options in bursts also seemed to discourage people. In my original diagram explaining the step-by-step process of picking the best move, I had a large number of buttons that correlated the text to a state in the diagram. The feedback I got was that it was overwhelming to deal with so many options. The readers might try a few of them, then give up and not try the rest. I tried to avoid this by reducing the number of things that could be done at any time. If something could be explained in only one button press, I did it. If it couldn’t, I broke it up into more diagrams. If it wouldn’t break up well, I once again employed parallax scrolling, allowing me to guide the reader through each step in a controlled fashion.

The overarching lesson is very similar to the first one; we want to limit the complexity and limit the cognitive load necessary to understand the diagrams. But this came at a cost. I didn’t get as much interactivity as I would have liked, and the page became more like a fancy slideshow. Still, I think I optimized well for what we wanted.

Going Forward

I plan to keep making small improvements to Chapter 5 after the GSoC. It’s still a little rough in places like the parallax scrolling and the load times. Amit says that he still finds things he wants to improve in pages over 20 years old, so I doubt I'll ever be happy with my work.

For Prospective Students

I started contributing to Aimacode in December 2017. I had just finished my intro to AI class and was inspired to keep learning about the topics covered. I googled my textbook and found that it had a Github page with examples from the book. I was pretty disappointed when I found out that it only had up to chapter 4, but I took this as an opportunity. There’s no better way to learn than to apply the knowledge you’re studying, and this was the perfect place for that. You don’t need to have a PhD level understanding of AI, or be a master of frontend tech(hopefully neither of those are obvious from my work). GSoC was a great experience, and I would encourage any student interested in AI or visualization to apply.