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
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.”
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.
Visualization of types by shape
can be applied to richer type systems:
OpenBlocks provides 14 connector
shapes to represent different types,
and researchers have created experimental block languages with dynamically generated shapes to represent
compositional type systems.
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.
(a) Scratch (b) Python
playNoteFor( 60, 0.5)