Communications of the ACM

ample, Code.org reveals finer-grained for structure in more advanced portions of the same course, as illustrated at the bottom of Figure 4.

The use of blocks to chunk code aids readability even for simple commands, because blocks can forgo the punctuation that text code uses to denote structure and use explanatory words instead. For example, as illustrated in Figure 3b, a simple call in Python requires reading delimiters and knowing argument order, whereas the equivalent block in Scratch reads naturally, using appropriate abstractions (for example, a piano keyboard).

By organizing code as visible chunks, blocks help new programmers concentrate on what the code means rather than the notation that is used to write it.

Direct manipulation of visible structure. The visual form of blocks alleviates the burden of assembling syntactically correct units by typing one character at a time. But there are other advantages of directly manipulating program fragments that have visual constraints.

One benefit is the blocks can help prevent errors by making the grammar of the program visible. Blocks can be seen as a form of syntax-directed editing with constrained direct manipulation. In 1981, creators of an early structure-editing tool noted, “Programs are not text; they are hierarchical compositions of computational structures and should be edited, executed, and debugged in an environment that consistently acknowledges and reinforces this viewpoint.” 35

Block shapes help beginners understand which grammatical phrases (expressions vs. commands vs. declarations) are legal in what contexts. In Scratch, commands connect vertically with nubs and notches, whereas expressions are smooth shapes that fit into smooth holes. Constraints on drag-and-drop prevent the two types from being confused (Figure 5). Students report that the puzzle shapes are helpful for assembling programs. 38

Visualization of types by shape can be applied to richer type systems: OpenBlocks provides 14 connector shapes to represent different types, 29 and researchers have created experimental block languages with dynamically generated shapes to represent compositional type systems. 18, 36

Figure 2. The sound palette in Scratch (a) and a voice synthesis palette in App Inventor (b). Palettes simplify the selection of programming elements by exploiting the ease of recognition over recall. Palettes organize concepts by topic, not name, and they remain open when used, allowing the user to discover and tinker with blocks based on their function.

Figure 3. Blocks show structure visually (a. Scratch) instead of using punctuation.

They can aid learnability using plain language, default values, and value pickers.

Figure 4. Three ways of reading a for loop in chunks. A naive reading of code (top) interprets the code as 17 chunks, but an expert reading of code (middle) interprets the most common form of loop as a single chunk, with a second chunk for the loop limit 50. An alternative (bottom) reading interprets three clauses as chunks. Code.org uses the middle rendering when introducing loops to high-school students for the first time, and switches to the bottom rendering when students are familiar with for loops.