2015 IEEE Blocks and Beyond Workshop

Ten Things We’ve Learned from Blockly

Neil Fraser
Google
Mountain View, CA, USA
[email protected]

Abstract—Over the last four years the Blockly team has The solution is every time a
learned many lessons which are applicable to block-based block is moved, look for
programming in general. The following are a collection of ten unattached connector pairs that are
mistakes we have made, or mistakes commonly made by others. ambiguously close to each other
Each issue is presented as noncontroversial folk knowledge and bump one block away from the
without supporting data. other.
Keywords—block programming; UX; usability; user interface
IV. TRANSITIVE CONNECTIONS
I. CONDITIONALS VS LOOPS Dragging a block should enable that block to connect to
others. But what about dragging a block connected to a block
The most difficult blocks for new and trying to make a connection on the child block? The
users are conditionals and loops. Many transitive closure seems like a good idea (which Blockly
block environments add to the difficulty implemented). But in practice it is a disaster. When working
by making both blocks (already similarly with a large program users will often drag a large assembly
shaped) the same colour and placing them partially off-screen to clear room. If transitive connections are
in the same category. Users get caught in allowed, the user will often hear a click sound as the assembly
a spiral of confusion when they randomly connects to something that was left on the
accidentally use the wrong block, which
workspace. Transitive connections turn large assemblies into
adds to the confusion when it behaves
Fluorine atoms they bond with everything.
contrary to expectation. Blockly moved conditionals into the
logic group, changed the colour, and the problem went away.

II. BORDER STYLE

In the 2000s the 'Aqua' look was in style and every V. NESTING SUB-STACKS
onscreen object was decorated with highlighting and shadows. 'C' shaped blocks invariably have a connector on the inside-
In the 2010s the 'Material Design' look is in style and every top, but some environments also have a connector on the inside
onscreen object is simplified to a clean, flat, borderless shape. bottom (e.g. Wonder Workshop) whereas others do not (e.g.
Most block programming environments have highlighting and Blockly and Scratch). Since most statement blocks have both a
shadows around each block, so when today's graphic designers top and bottom connector, some users do not immediately see
see this they invariably strip off these outdated that statements will fit inside a 'C' that does not have a bottom
decorations. connector.

As can be seen in the above example of five blocks (from Once users figure out that one statement block fits inside a
scriptr.io), these 'outdated decorations' are vital for 'C', they then need to figure out that more that one statement
distinguishing connected blocks that are the same colour. will also fit. Some environments nest the first statement's lower
connection into the bottom of the 'C' (e.g. Wonder Workshop
III. BUMPING SYNTAX ERRORS and Scratch) whereas others leave a small gap (e.g. Blockly).
Snug nesting leaves no hint that more blocks can be
One of the great selling features of block-based
stacked.
programming is the lack of syntax errors. But the screenshot on
the right (from Scratch) has an invisible syntax error: the 'turn'
block is not connected to the 'move' block above it. There are
many ways for this to happen (e.g. place a couple of
unconnected 'point' and 'turn' blocks on the workspace, then These two issues interact badly with each other. If an inside
connect a pair of 'move' blocks to 'point'). bottom connector exists (Wonder Workshop) then the initial
statement's connection is made more obvious, but at the

978-1-4673-8367-7/15/$31.00 ©2015 IEEE 49

expense of the ability to discover stacking. If no inside bottom Finally we created popups that cannot be closed. They are
connector exists (Blockly) then the initial statement's programmed to monitor the student's actions and only close
connection is not obvious, but stacking is discoverable. Having themselves when the student has performed the proscribed
no inside bottom connector and nesting the statement's bottom action. These contextually aware popups are challenging to
connector (Scratch) appears to combine the worst program, but quite effective.
discoverability attributes of both issues.
Our experience shows that the initial statement's connection IX. CODE OWNERSHIP
is a lesser challenge for users than discovering stacking. And Exercises designed to teach a specific concept often
once discovered, the former is never forgotten, whereas the provide partial solutions which the student needs to modify to
latter needs prompting. Blockly tried both the Wonder reach the desired effect. A class of non-editable, non-movable,
Workshop and the Scratch approaches until one day a non-deletable blocks was created in Blockly to support this.
rendering bug occurred which added the small gap. We saw a However, students hated these fill-in-the-blank exercises. They
marked improvement in user studies due to this bug (now a have no sense of ownership over the solution.
'feature' we are proud of).

VI. LIVE BLOCK IMAGES

Documentation for blocks should
include images of the blocks it is
referring to. Taking screenshots is easy.
But if there are 50 such images, and the
application is translated into 50
languages, suddenly one is maintaining Designing free-form exercises that teach the same concepts
2,500 static images. Then the colour is more challenging. One technique that has proven successful
scheme changes, and 2,500 images need updating again. is to use the student's own solution for one exercise as the
starting point for the next exercise.
To extract ourselves from this maintenance nightmare,
Blockly Games replaced all screenshots with instances of
Blockly running in readonly mode. The result looks identical to X. EXIT STRATEGY
a picture, but is guaranteed to be up to date. Readonly mode Block-based programming is often a starting point for
has made internationalization possible. programming. In the context of teaching computer
programming, it is a gateway drug that gets students addicted,
VII. YOUR OTHER LEFT before moving them on to harder things. Nobody ever got a job
because they had three years of Scratch experience. How long
Feedback from children in the this block-based programming period should last for students is
US (though interestingly not from hotly debated, but that it is temporary is not debated.
other nations) revealed rampant
confusion between left and right. This was resolved with the Given this, block-based programming environments used
addition of arrows. If direction is relative (to an avatar, for for teaching programming must have an off-ramp appropriate
example) the style of arrow is important. A ĺ straight arrow or to their students. Blockly Games has four strategies:
a ջ turn arrow is confusing when the avatar is facing the 1. All text on the blocks (e.g. "if", "while") is lowercase to
opposite direction. Most helpful is a ิ circular arrow, even in match text-based programming languages.
cases where the angle turned is smaller than the arrow
indicates. 2. The JavaScript version of the student's code is always
displayed after each level to increase familiarity.
VIII. INSTRUCTIONS 3. In the penultimate game the block text is replaced with
Blockly Games is specifically designed to be self-teaching, actual JavaScript (as shown to the right). At this point the
no teacher or lesson plan needed. To accomplish this, the first student is programming in JavaScript.
version of Blockly Games had instructions on each level. 4. In the ultimate game the blocks editor is replaced with a
Students would not read them. We reduced them to a single text editor.
sentence, increased the font size, and highlighted them in a
yellow bubble. Students would not read them. We created Block-based programming environments used for teaching
modal popups with the instructions. Students instinctively programming need to have a concrete plan for graduating their
closed the popups without reading them, then were lost. students. A solid exit strategy also goes a long way towards
placating those who argue that block-based programming isn't
"real programming".

50