This site runs best with JavaScript enabled.

Learnable Programming Patterns


Budding
🌿
Planted Jan 12, 2021
Last tended Feb 24, 2021
Visual Explanation
Web Development
JavaScript

Bret Victor coined the term Learnable Programming in his canonical essay lamenting the current state of programming education.

Bret has a few concerns with the way most of us learn to code. Mainly that the learning environments we drop people into are poorly designed.

These environments tend to look something like this:

repl.it slpit screen interfacecodesandbox split screen interfacefree code camp split screen interfacekhan academy split screen interface

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. Synatx is abstracted away from the elements it affects. The structures and properties of the language itself are no where to be seen. State is invisible.


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.

The interface of VS Code – one of the most popular environments for professional programming

The interface of VS Code – one of the most popular environments for professional programming

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 visual programming languages, they've largely failed to gain traction. There's lots of well-reasoned arguments explaining why it's so difficult to design visual systems complex and extensible enough to programme in. We might get there someday, but our current visual languages just aren't sophisticated enough to do the job.

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 the goal is simply to explain what's happening under the hood, creating graphical representations is the best way to help people build clear mental models.


Principles of Learnable Programming

Victor outlined a set of principles he believed all learnable programming environments should follow. He argues any good educational platform should allow learners to...

  1. Read the vocabulary of a language by making clear what each keyword and function does
  2. Follow the flow of what happens at each stage in executing a programme
  3. See the state as the programme changes variables over time
  4. Create by reacting to how the programme behaves
  5. Create by abstracting from the simple to the complex

I won't expand on these too much as Bret elaborates on them in the original piece and provides plenty of tangible examples of how they might look in an interface.

Victor's principles amount to a kind of Pattern Language - they're a set of design rules that deal with the way a system works, rather than worrying about the implementation details.

Since Bret 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. While none of them fulfill all of Bret's programmable dreams, there are plenty headed in the right direction.


A Pattern Language for Visual Programming

As I began exploring thse visual programming platforms, I started to notice patterns of my own. While Victor defined a set of idealised principles for a non-existent system, I became more interested in finding emergent patterns in systems that already exist.

Here is my working collection of design patterns I've noticed across the space, with specific examples of each one:

1. Location and Destination

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 in the interface they are right now, 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.

☢️

Draft in Progress

The quality of writing below this point is haphazard, disjointed, and possibly nonsensical. It's probably a good idea to come back later.

2. Embodied Space over Symbols

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.

3. Immersive Focus

4. Invitation to Explore

5. Direction Connections

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.

6. Keep It In Context

7. Cry for Help

8. Revisit the Past

9. Put it in Your Pocket

10. Flow Over Time

11. Compare and Contrast

12. Brownie Points


Flexbox Froggy and Grid Garden

Flexbox Froggy and Grid Garden are built by Codepip and both teach CSS layout techniques through live reactive demos. Every character you type into the code editor has an immediate reaction in the illustrated demo.
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 CSS Diner which takes a similar approach to teach CSS selectors. Every command you type instantly highlights what's being selected on the illustration.

Vim Adventures

Vim Adventures uses the style of a platform game to help learners get comfortable with the essential commands of Vim. Making the metaphor of physical space more obvious by adding pathways and directions helps you think about Vim's interface as a spatial area instead of a regular linear text editor.

Method of Action

While not strictly programming-related, the Bezier Game, the Boolean Game, and the Kerning Game...

Want to share?

Join the newsletter

For weekly notes on visual thinking, ethical technology, and cultural anthropology.

Maggie Appleton © 2021