Bret Victor coined the term Learnable Programming in his
These environments tend to look something like this:
They're your standard column-based "live coding" interfaces popular across the industry. You write code into one section, and hopefully get the output you expected in another. Syntax is abstracted away from the elements it affects.
It's easy to see why these linear, text-based interfaces seem like the best approach. They look identical to the standard interfaces the whole development industry uses to programme.
console.log out data at each step of the way. The industry has accepted flying blind as standard operating procedure.
The interface of VS Code – one of the most popular environments for professional programming
So we're training people in the same kind of environment they'll be working in professionally. In the just-get-a-job-mindset that's an excellent approach. But Victor isn't talking about the ideal way to learn programming in the short-term, bootcampy world view. When he talks about these environments as inadequate, he's referencing a much larger paradigm shift around how we should design human-computer interfaces.
He's pointing out that the standard text-based, disembodied, non-graphical interfaces we all put up with are unintuitive to humans who live in a highly visual, spatial, embodied world. While most of our modern user interfaces have graduated to a graphical, 3D space-based system, programming is staunchly attached to the linear text paradigm.
There's good reason for this. While many people have tried to develop
While visual programming isn't great for the scale of complexity professional programmers deal with, it's ideal for people who are learning to code. When we simply need to explain what's happening under the hood, graphical representations are the best way to help people build clear mental models.
Victor outlined a set of principles he believed all learnable programming environments should follow. He argues any good educational platform should allow learners to...
Most of these are explicitly visual. We need to make what's happening in the programme readable through visual representations of each syntax element, variable, and change of state over time. As Victor puts it:
"People understand what they can see. If a programmer cannot see what a program is doing, she can't understand it."
I won't expand on these too much as Victor elaborates on them in the
Victor's principles amount to a kind of
Since Victor wrote his piece in 2012, the world of programming education has stepped up its visual game. It's no longer just two column, text-based execution contexts. We're now swimming in interactive visual environments and gamified educational platforms.
I began researching the field to see how many of them were putting Victor's principles into practice. The examples I looked at ranged from full-on illustrated games to lightly animated sequences of text. As I explored, I started to notice design patterns beyond the principles Victor outlined.
While Victor defined a set of ideals for a hypothetical learning platform, I became more interested in finding patterns in what already exists. While we're a long way from achieving the 'ideal' system, there's plenty of good design happening here and now.
The learner should always know where they are on the learning path, and what their destination is.
This one isn't specific to visual programming – it's a well-established principle of UX design that people need to know where they are, where they've been, and where they're headed.
Making this clear with a visual progress bar is common on learning platforms when we're trying to coax people through the long, hard journey of learning a new programming language or framework. It helps keep them motivated and feel a sense of regular progress.
Instead of one-dimentional abstract symbols and signs, use our embodied understanding of up, down, left, right, front, and back to map concepts to two-dimentional space.
Create a direct, instant association between syntax commands and their effects
This is very similar to Victor's 'Read the Vocabulary'
In traditional programming interfaces there's a significant lag between writing syntax, waiting for code to compile, and seeing the change in a browser or printed logs. It's often unclear what exactly changed, and what part of the code changed it.
This shortens the lag between action and reaction we usually have to deal with when waiting for code to compile, and makes it easier to figure out what each command does.
The same company made
While not strictly programming-related, the Bezier Game, the Boolean Game, and the Kerning Game...