Sketchnote: Sketch-Based Visualization of Problem Decomposition in Block-Based Programming

Block-based programming effectively supports processes based on the syntactic and conceptual knowledge of programming; however, its effectiveness is limited to processes that require strategic knowledge. To resolve the problem, we present Sketchnote, which visualizes the problem decomposition process with sketching and multi-layered structure in block-based programming. Sketchnote allows programmers to sketch in the block attachment slots before inserting the actual code blocks. The multi-layer structure of Sketchnote also visualizes the hierarchy of code while extending the brick metaphor of block-based programming.