Tangible creative coding for children
Codeinskij is the result of my thesis project at the Umeå Institute of Design.
During this process, I have investigated the connection between art and programming and how this relationship could become a way for children to approach basic concepts of programming and learn coding through a creative, visual, and stimulating experience.
How might we foster children’s interests in art and programming by giving them the possibility to create their own digital art experience?
The challenge
Programming education has historically been mostly carried out within STEM (Science, Technology, Engineering and Mathematics) education frameworks, where projects and programs are built around scientific subjects.
With the inclusion of Arts in this framework ( now referred to as STEAM ) I wanted to explore how programming education could be embedded into artistic subjects and it could be used as a tool for creative exploration at a very young age.
Duration:
January-May 2021
Role:
-
User research
-
Ideation
-
Lo-fi and Hi-fi prototyping
-
User testing
Tools:
-
Javascript
-
Nodebox
-
Figma
-
Notion
Learning outcomes:
-
Children-Centred Design
-
Remote interactive user testing
-
Project management
“[...] traditional computer science courses often fail to connect with students who learn best from concrete experiences, not abstract principles; who prefer to work improvisationally, instead of following formulas; and who aim to create things that are expressive, rather than utilitarian.”
Golan Levin
“Code as Creative Medium”
Concept
Codeinskij is a toy and a toolbox for learning. It helps children explore art and basic concepts of programming through digital media and physical interactions by physically building a computer program, seeing its structure and its immediate output.
Design Process
Approach
This project used high and low-fidelity prototyping as a research tool.
Different interactive experiences were created to be shared online and used by children and parents to explore and understand the perception of art and programming in children of a young age. This was particularly useful to include people worldwide and reducing the barrier that the COVID pandemic created.
Creative task
Does art have rules?
This was a collection of creative tasks to explore and learn about the relationship between kids and rule-based activities.
Moreover, this was a way to understand what children recognise as art and what is level of engagement that they can have with different kinds of activities.
Notion was used as a platform for task distribution and insights collection.
Outcomes
Follow up and interviews
After the creative task, children alongside their parents, were interviewed to learn more about their routines, passions, and what they thought about the exercise.
Key take-aways from research phase
-
There is a need for a balance between rules and freedom
-
Having a personal connection with the activity it’s extremely important
-
The level of complexity could be higher
-
Children feel very comfortable with digital devices, and I should not be scared to use them when necessary.
Prototypes as research tools
In light of the key findings from the research phase, I started using a variety of prototypes, from low to high fidelity, to investigate what a tool for creative exploration and programming education could look like.
Prototype 1
Make it familiar
The aim of this first prototype was to translate some of the most basic concepts of computer graphics into a card game. Simple independent "commands" that children could use to define their artistic compositions.
Wizard of Oz
In order to test this concept I created a Javascript program that I could run during the Zoom sessions with children and parents. That allowed me to immediately translate and represent their actions on the screen, giving the impression that they were actually interacting with the program.
Prototype 2
Create a connection
This prototype explores the addition of personal elements like drawings and pictures to the interactive experience. A video was created and sent to the children and parents for feedback.
Testing outcome
The response to this video was positive and children were excited about the idea of adding their own assets to their program.
Prototype 3
Make it easy
At this stage, it was essential to understand how the logic behind the interface element would work.
This prototype was created and tested with users in order to explore different combinations of stackable components and what level of freedom they would provide.
Testing outcome
Stacking components and functions on top of each other made it very difficult to understand the sequence of events, as well as understanding the overall flow of the program.
Prototype 4
Make it alive
With this prototype, the aim was create an experience as close as possible to the real product. Nodebox, a visual coding tool, was used to emulate the logic structure of the blocks program and to graphically visualise the output of the program that children were building.
Testing outcome
The testing validated the efficacy of the new logic structure and suggested the need for a clearer framework on which to build the program. It also provided positive input regarding body tracking and the need for animation elements in the visual output.
Codeinskij
Interactions
The physical interactions were designed to visually and tangibly help children understanding the functionalities of each block.
Details
From what was learned during the testing phase, the final design makes use of bigger blocks, to help children manipulate them more easily.
Moreover, to help the construction of the program an extra element, the dock, was introduced, to help children to better understand the program flow.
The Dock
The bracket-like dock helps providing a structure for children to build their “lines of code”
There are 4 slots that are executed in order from top to bottom. Each line is executed individually from left to right.
Function Blocks
These blocks are the core elements of Codeinskij and they provide functions with which children can build, piece by piece, their digital experience.
They provide ways to add shapes, transform and repeat them, set their colours and more.
Drivers
Drivers are additional elements that children can use to add variations and generative parameters to their creations.
