Making programming fun to learn for kids

(case study)

During my job hunt, I was given this interesting UX assessment with the problem statement:

How might we create learning of a programming language very easy and fun for kids of age 9–15 years ?

My initial assumption was obviously how bad an idea it is to teach kids programming, because of its tough nature and the amount of abstract and logical thinking it demands to learn and understand it completely. But it is also a challenge for me as a designer to take on complex problems as such, to sharpen my design thinking. So I decided to take on this challenge with my full dedication. Let’s dive in..

Research plan :

Background:

The purpose of this study is to identify the best approach to teach programming to kids of age between 9–15 by finding best user experience practices and principles to achieve the best possible solution.

Objectives:

  • Understand the cognitive development of kids of age between 9–15.

  • Understand how kids interact with computers/mobile phones.

  • Learn about competitor websites/apps which are teaching programming to kids.

  • Identify suitable teaching and learning methods to be followed.

  • Identify methods to keep kids engaged in learning.

  • Identify the limitations of teaching programming to children.

Methodology:

For this study, we are conducting in-depth research on cognitive ability on kids of age 9–15. Further on exploring the objectives a user persona and journey map will be created. After identifying the usability issues and best UX practices in designing for kids, wireframes and high-fidelity visuals will be designed. We’re also conducting a 10-minute usability test to evaluate our user’s experience of our app/website.

Participant Profiles:

  • School Kids of age between 9–15

  • With at least little exposure to computers/mobile phones.

Timeline:

Being a full-time employee and with a three day deadline on the assessment, I roughly got ~18 hours to spend on this project. But as it is mentioned in the assessment that 100% completion isn’t expected, I can complete as far as I could in the design process with quality research and best UX decisions.

Research findings:

1. Cognitive development of kids of age between 9–15 :

Jean Piaget was undoubtedly one of the most influential experts in the field of child psychology; he is the creator of the theory of cognitive development, which describes the psychological developmental characteristics of the child at different ages.

Piaget’s Development Theory

Piaget’s theory of cognitive development is a comprehensive theory about the nature and development of human intelligence. It was originated by the Swiss developmental psychologist Jean Piaget (1896–1980). The theory deals with the nature of knowledge itself and how humans gradually come to acquire, construct, and use it.

According to Jean Piaget, kids’ cognitive ability to reason, infer, and make connections is still developing. By inferring Piaget’s stages of cognitive development we have to define two teaching methods for kids of age 9–11 and 12–15 separately. The separation is important because research has found that young users reacted negatively to content designed for children that were even one school grade below or above their own level. So the ages of 9–11 would be considered as kids while 12–15 would be considered as teens.

2. Understand how kids interact with computers/mobile phones :

By this age both kids and teens are already a veteran of UX, at least with touchscreens. He/she knows how to scroll and swipe, how to work with navigation, how to subscribe etc. However In our case kids and teens respond to design and interaction differently. The below data from NNgroup research shows how kids and teens respond differently to standard designs and interactions.


From the table we can conclude that kids (9–11) need less motor load and more visual or auditory engagement with the software to encourage them to learn. Further by providing rewards on short term exercises will act as instant gratification. However for teens (12–15) Who can follow up on the learning process will be comfortable learning through levels of increasing complexity and problem solving with age-appropriate content.

3. Competitive analysis :

Existing solutions such as Byju’s and white hat junior conduct online classes with teachers teaching coding to the children. However these platforms promise huge results, but end up getting negative feedback from the community. The problem with programming is that children cannot understand int, float(Data types example: int=9, float = 9.1) or don’t possess basic understanding of how computers work. Still they use them pretty much on the surface where they can watch videos, like and share content. So they can interact with a system to understand some basic concepts of programming such as addition, subtraction etc. But we cannot expect them to ace programming. This age bracket is also known for kids beginning to think about careers and future goals which makes it a critical and responsible step to introduce them into programming.

After exploring some of the top results from the play store for “ Programming for kids”. The applications clearly did not teach programming rather they took logical thinking on the hand and tried to increase logical thinking of the children through game based learning. These applications lacked basic usability principles such as contrast ratio, hints and suggestions, increased motor load with respect to child first usability. From reading the reviews of these applications, Few games were outright tough for kids to understand because they didn’t use any prior knowledge regarding the game or the concept. Some of the key points from competitive analysis are

  1. Game based problem solving with a reward system have proven results with teens.

  2. Provide hints and suggestions at every stage of the process.

  3. Learning process should utilize children’s prior knowledge.

4. Learning methods :

To help educators develop strategies for reaching every student in their classroom effectively, educational scholars have devised various typologies of different styles of learning.

VARK, a commonly cited schema for assessing student’s learning preferences, and the four different learning styles that comprise it, and discover some strategies for engaging with each type of learner.

Visual Learners

Students who best internalize and synthesize information when it is presented to them in a graphic depiction of meaningful symbols are described as visual learners.

Auditory Learners

Auditory (or aural) learners are most successful when they are given the opportunity to hear information presented to them vocally.

Reading/Writing Learners

Students who work best in the reading/writing modality demonstrate a strong learning preference for the written word.

Kinesthetic Learners

Kinesthetic learners are hands-on, participatory learners who need to take a physically active role in the learning process in order to achieve their best educational outcomes.

Considering kids have less knowledge of computers compared to mobile phones our choice of medium for the solution is going to be mobile phones. Where visual learners and auditory learners can be addressed. Furthermore by providing a set of instructions about the concepts with easy vocabulary, Reading/Writing learners can also be addressed.

5. Teaching method

By splitting kids and teens, we are going to define a separate teaching method for each group. During research I came across processing.org which is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. The software supports making shapes and filling them with colours, which can be used to make creative arts for kids.

Teaching for Kids (9–11) :

This age group kids belong to grade 4,5 and 6. Kids of this age are not good with problem solving as they are new to maths and just started learning the basics of mathematics, But they are quite familiar with shapes, colours and numbers. Formulating a creative game based teaching which utilizes their prior knowledge of shapes, colors and numbers would engage them more than problem solving approach on teaching programming. For this approach processed javascript can be used as it uses shape names and requires numbers to control the shape. For example a circle can be made easily with “circle (200,200,100)” where the four attributes are left/right, top/bottom and size of the circle.


Similar approach used by Khan academy with good suggestions and hints.

Key points in designing for kids:

  1. Exercises should be easy.

  2. Add hints and suggestions on every stage.

  3. Include funky visuals and kid friendly UI.

  4. Avoid complex motor loads such as dragging across the screen.

  5. Provide constant feedback on every interaction by the kid.

Teaching for teens (12–15) :

This age group kids belong to grade 7,8 and 9. Kids of this age have developed cognitive ability to abstract thinking and logical reasoning. They are also strong in basic math such as addition, subtraction, multiplication and division. Introducing them to solving math problems using programming would make it fun, as it reduces cognitive load where they write code once and can solve as many problems they want just by entering the values. Unlike kids teens can follow through the learning process hence milestone based rewards can be used to keep them engaged with learning. Here python could be used because of its easy syntax nature, which is also known as the best language for beginners. Addition of two numbers would go like “Answer = a + b” in python, where teens will be intrigued by its simplicity and power to solve big numbers easily with just one time solution.

Key points in designing for teens:

  1. Exercises can be challenging.

  2. Does not require instant gratification rather milestones are preferred.

  3. Avoid funky UI and provide hints on demand.

6. keeping kids engaged in learning :

As we discussed in teaching methods, design for kids needs to be simple and funky with constant feedback, hints, suggestions and rewards on every completed task. While design for teens can be challenging, not very funky and a reward system based on milestones on the learning process would serve better.

7. Limitations of teaching programming to children :

We cannot ignore the fact that learning programming requires a lot of prior knowledge about both the computer and the internet world. With so many programming languages around, one has to spend several days to master one programming language completely. However teaching to kids is still possible but only as far as their prior knowledge could support this learning process. We possibly could not explain what is a header, why we need a semicolon and basic concepts such as conditional programming to kids. Instead we can teach them certain code segments which will create an early interest to learn and explore programming.

User persona

Sarah, Age — 10

Mike — Age 15

User emotions

User journey map

Sketch :

The idea for kids (9–11) is to let them play with shapes by changing its value on the code. And as they learn further, they can make their own drawings using shapes. I sketched out the first level and important elements to be used in the screen such as hints, buttons and sliders.

Learn to draw with programming — Teaching for kids (9–11)

The idea for teens (12–15) is to let them explore programming using their prior knowledge of math. Pitching programming can make math easier, will be a valid approach to encourage teen to learn programming.

Learn to solve math with programming — Teaching for teens (12–15)

Wireframes :

Usability Principles :

  • Freedom: The ability to move within the app within a controlled environment.

  • Privacy: When creating applications for children of this age group, special attention should be paid to the rules for regulating the collection of personal data by COPPA and GDPR-K, which must be followed to become compliant with privacy regulations.

  • Comfort: Stimulation, but not too much stimulation. Audio input, but not too much. It’s a balancing act. Varied levels of stimulation are definitely needed, but there’s a fine line between stimulation and just noise for the sake of noise.

  • Confidence: Kids just like us adults need to feel that they are competent. They want to have confidence in what they are doing.

  • Control: Children want to feel that they are accomplishing something when they are interacting within an app. Goals are met, decisions are being made.

  • Age Appropriate design: Children need to feel that they are playing a game appropriate to their age. Young users react negatively to content designed for children that were even one school grade below or above their own level.

  • Feedback: Children usually have short attention spans which might result in losing interest once they get stuck in the game. Provide constant feedback for every action a child performs to keep them engaged in the game.

  • Simple vocabulary: Kids need to understand fully what they are doing in the game, using easy and simple vocabulary will boost their confidence and keep them aware of the action they are making.

  • Hints & Suggestions: Provide hints and suggestions when they hesitate to make an action. Teens even prefer written instructions when they feel confused.

  • Use prior knowledge: Games should use children’s prior knowledge to teach programming. Creativity based games suit kids and simple logic based games are suitable for teens.


Design language :

Screens :

Due to lack of time I decided to make designs on the proposed solutions for kids(9–11) and go ahead with testing.

User testing :

Fortunately my cousin was home when I was working on the assessment and he was eager about my work. He is good at games and handling mobile phones, basically a tech savvy and his age is 10. So I decided to test my Figma prototype with my cousin.

He probably gonna regret this in future.


Test participant :

Name : Sai Hari

Age : 10

Tech knowledge : Very familiar

English knowledge : Beginner

Programming knowledge : None

Test Observations :

The test ended sooner than I expected. User was highly familiar with general UX. User didn’t have any complications on taking the next action. However on starting the game, the user gave a moment and looked for information, as expected after reading the hints the user went on to drag the slider left and moved the circle.

However did the user really learn that’s how programming works ? probably no, but the user did understand changing the numbers inside the brackets will move or determine the circle’s position. I guess that’s a good start.

Conclusion :

It was an amazing learning throughout the design process, I got to learn a lot about children’s cognitive development and behavior more than I ever know. The moment my cousin swiped through the screens without any doubts, I got a big smile on my face. The true moment of happiness for a problem solver. Thank you for making it so far. Your claps will make me write more !!..

Resources :


Other works

Wish’em — A birthday reminder application

Product Design

Smart search — Use Google search efficiently

Product Design