Design considerations for creating engaging learning content for kids

“Designing for kids is no child’s play”

As the world slowly embraces the new normal, children across the world have resorted to accessing digital content in their journey towards education. The pandemic has led to a steady rise in companies churning out learning content for children of all ages. Every possible academic subject has been digitized, gamified or made into visually engaging interactive simulations that can be accessed through a myriad of handheld devices.

However, a few questions arise. How effective is this digital content in creating the desired learning experiences? Were there any design considerations that were followed in making this content?

A recent user testing done in the US and China with participants (aged between 3 to 12) accessing educational websites and applications through laptop and hand-help devices revealed that students’ cognitive and physical abilities directly influenced the experience the students had in accessing the learning content.

Design recommendations:
Designing for children requires distinct usability approaches. To help them successfully navigate through learning content, the design considerations should include targeting content carefully for children of specific age groups, providing appropriate instructional scaffolding, and developing intuitive navigational experience with existing mental models.

A) Age appropriate design:
Before diving deep into the iterative process of building the UI, planning the navigation or determining the layout and composition of the learning content, it is essential to determine the target age range. Kids grow and change much more quickly than adults. There exists a huge developmental difference between a six-year old and an eight-year-old, or between an eight-year old and an eleven-year-old.

It was found that young users reacted negatively to the content designed for children that were even one school grade below or above their own level. Children are acutely aware of age differences: at one website, a 6-year-old said, “This website is for babies, maybe 4 or 5 years old. You can tell because of the cartoons and trains.” (Although you might view both 5- and 6-year-olds as “little kids,” in the mind of a 6-year-old, the difference between them is vast.) (1)

Before building the reward-based activities within Edicine1 project, we at EI sought to categorize the various fun based activities, its instructions and interactions based on three distinct grade (1-3, 4-6 and 7-10) sets. This has allowed us to build challenges and engagement elements that are relevant and appropriate to students age.

Similarly, while developing the various modules under Foundation Literacy and Numeracy (FLN)2 the navigational flow and interface were designed keeping the target audience in mind. The interactive modules were built with design considerations appropriate for hand held and tablet devices with adequate scaffolding in the form of audio and visual cues to ensure that the students are aware of what needs to be done without much cognitive load.

Image 01: FLN Activity – “Numeral objects and Number sound” was designed to look like an apple picking activity where the students have to pick and drop the apples into the tray as per the audio and/or visual cues presented to them.

1. B) Giving clear and specific instructions:

Students can often get confused when no clear instruction is being presented. Learning games, interactive modules and simulations could be developed to have a combination of visual and audio cues in guiding the students in performing a particular action.  Visual cues can range from simple textual instructions in the form of notification panels to simple animated instructions that demonstrate the required action in sequence. Alternatively, audio cues could also be used as instructions that are broken down into simple sentences recorded in the native dialect of the intended audience.

While the instructions are important, the content developers must ensure that the students can understand and process them. For instance, creating a hands-on visual demonstration on how to perform a particular task might be more beneficial for students of lower grade who often require guidance from elders to perform a task successfully.

Images 02 & 03: FLN Activities “Writing” and “Compare and order numbers” (under development) both are designed with demonstration (in the form of looped animation) that gives a visual reference for students about the objective. These animations are often triggered at regular intervals (sometimes with an audio cue) to guide the students through the course of interactive modules.

1. C) Affordance:

Affordance in design uses existing mental models and knowledge about the physical world and using that knowledge to help accomplish task(s). Although student’s cognitive capacities are constantly evolving, they already have robust mental models and tacit knowledge of how the world works. Using these well-established models in design reduces the effort required by students to understand how learning contents need to be navigated.

Image 04: Zoom’s latest suite of platform enhancements are designed to provide more immersive experiences that could leverage students existing mental models of class room environments.

Designers could employ a combination of colours and common design practices, to clearly distinguish the UI elements that are interactive in nature. This includes designing interactive elements with clear characteristics to indicate that they are clickable.

Another common example of affordance is the colouring book metaphor in drawing games. According to Feifei Liu, when presented with an interface that looked like a colouring book and crayons, the study participants immediately chose colours and tapped or clicked the areas they wanted to colour in the painting. Any variations from their familiar environment, such as “redo” and “undo,” had to be learned. During the user testing session by Liu, every child used the eraser instead of the “redo” and “undo” buttons to recover from a mistake. Young kids did not know what the “redo” and “undo” buttons did. Even older kids who showed total understanding of the “redo” button when specifically asked, naturally turned to the eraser tool. This is an example of good use of existing mental models, as well as redundancy. (2)

Image05: This simple paint interactive was developed for younger grade students and has interface elements that mimics actual crayons and papers on which kids are usually accustomed to draw.

1. D) Touch screen and gesture related considerations:

A well-designed digital learning content (whether intended for children or adults) aims at reducing the cognitive load and minimizes the mental resources needed to understand and interact with the system.

Kids prefer easy-to-use interfaces much like their adult counterparts. Touch-screen gestures such as swiping, tapping on big targets or dragging have to be used to keep the target audience age-group in mind.

When interacting with devices, the users’ motor skills set the scope of the interactive gestures that work best for them. (This is true for young children, older adults, and everyone in between.) Generally speaking, there are three major categories of motor skills:

• Gross motor skills refer to the ability to perform movements that involve large muscle groups, like those in arms or legs. Jumping, hopping, skipping are all examples of gross motor skills.
• Fine motor skills refer to the ability to perform precise movements that involve the small muscles in the wrists and fingers. Grabbing an object with the thumb and the finger or handwriting belong to fine motor skills.
• Motor coordination is the general ability to combine gross and fine motor skills and coordinate different parts of the body to accomplish a certain task.

As per Feifei Liu’s recent study for kids between 6 and 8 years old, their developing motor skills allow them to perform simple interaction gestures on laptops such as clicking and simple keyboard usage. Whereas starting around the age of 9 years, more advanced interaction techniques become possible. Around the age of 11 years, children can use the same range of physical interactions as adult users. (Though obviously, their mental development stage and educational level still dictate simpler overall user interfaces for 11-year olds than for adults.) (3)

By the time students are in their teens (13-17), their motor skills are developed optimally and have already been exposed to various websites and Mobile apps. Teens often work on touch-enabled devices, making interactions that require precision. Interfaces with elements such as dropdown menus, drag-and-drop, and small buttons are areas that prove to be difficult. Design elements such as rollover effects and small click zones can be problematic, if they’re usable at all. Additionally, small text sizes and content with dense text layouts makes for difficult reading and often causes frustration.

Table01: Chart showing physical ability of children along with preferred devices and gestures mastered at every age group. (4)

 Conclusion:

While designing digital learning content for kids and teens, there is a greater need to consider their age and respective cognitive abilities.

Content developers and designers could create content by stating the goal and how to achieve the goal clearly with specific instructions that are within the student’s level of understanding. They could also leverage on existing prior knowledge and mental models to get them familiar with the interface.

Considering the student’s physical and motor skills and creating touch device related interactions around it would allow the students to develop greater affinity towards the content and results in increased loyalty and engagement.

Footnotes:

1. Project Edicine aims at bringing Mindspark to the retail audience in the form of an app loaded with new content and several engagement features.
2. Foundation Literacy and Numeracy (FLN) aims at strengthening students ability to read with comprehension and to make sense of numbers and do basic operations like additions and subtractions.

References:

1. Katie Sherwin and Jakob Nielsen. Children’s UX: Usability Issues in designing for young people. Nielsen Norman Group. 2019, Jan 13
2. Feifei Liu. Designing for Kids: Cognitive considerations. Nielson Norman Group. 2018, Dec 16
3. Feifei Liu. Design for kids based on their stage of physical development. Nielson Norman Group. 2018, Jul 08
4. Alita Joyce and Jakob Nielsen. Teenager’s UX: Designing for teens. Nielson Norman Group. 2019, Mar 17