To update our report on UX design for children, we recently conducted user testing with kids aged 3 to 12 using websites and applications on laptops and mobile devices. We ran individual sessions for the youngest (3–5) and oldest (9–11) age groups, and dyads for participants aged 6 to 8. We’ve written before about how to design for kids based on their physical development. An equally important consideration is the dramatic cognitive development that occurs between ages 3 and 12. By considering the cognitive capacity of different age groups, designers can make websites and apps usable and appealing to younger audiences.
Piaget’s Development Theory
According to the Jean Piaget, kids’ cognitive ability to reason, infer, and make connections is still developing. That development happens in different stages:
- The preoperational stage: children (between the ages of 2 and 7) can think in terms of symbols, but they aren’t yet able to effectively take other people’s perspectives. Language skills are still developing.
- The concrete operational stage: between the ages of 7 and 11, kids learn how to use logic to make inferences and reason about the world.
In both stages, other key cognitive capacities are also immature: the theory of mind (understanding the intentions and emotions of others), cognitive flexibility (processing conflicting information and switching perspectives), and executive function (planning and monitoring their own behaviors).
Design Recommendations
Websites and apps should consider kids’ cognitive-development stage in order to best support their goals, depending on the target age range. Here are five design recommendations:
1. Give kids clear and specific instructions by stating the goal of a game (or other online tasks) and how to achieve it.
The Mission PAW game on nickjr.com used audio and visual instructions to explain the goal of the game and how it’s played. For example, in the second level, animated instructions showed the goal (three fully-assembled armored knights), the current status (three partially-assembled knights), and the required operations in sequence (a cursor dragging one part to put the knight back together). The visuals were clear enough even without the simultaneous audio instructions. During our testing, 6-year-olds easily understood how to play the game.
Kids can get confused when no information about the game is presented. For example, the Counting to 100 game on starfall.com did not show instructions about the goal of the game or how to play it. During our study, a 5-year-old boy figured out that tapping a switch caused coins to drop. However, he didn’t understand how the game worked or what the objective was. (The game taught kids to count by adding up pennies and turning 10 pennies into a dime, etc.) The connections between the different game elements were not clearly pointed out; as a result, kids were confused and the game failed to teach counting skills.
2. Instructions should be tailored to the kids’ level of understanding.
Providing instructions is not enough; designers should also make sure that children can understand them. For example, in an app called Panda Restaurant 3, kids cooked food for animal characters. When the players selected an ingredient, the animal characters gave feedback by making faces and noises to show their preference. However, during our testing, kids under 6 couldn’t understand this feedback; they just made the food to their own liking. That’s because, at this age, children’s ability to make connections between different objects or characters (in this case, the ability to connect the animals with the food) is still developing. Moreover, their theory-of-mind skills are budding: they cannot yet proficiently infer others’ thoughts and emotions, especially when these differ from their own. More specific visual and audio cues such as exaggerated facial expressions or saying “Yum, I like carrots” could better help children make the connection between the ingredient choice and the customer’s preferences.
During our testing in China, we found that kids aged 6 began to understand the feedback expressed by subtle facial and sound cues, but cultural differences limited them. For example, a character said “Hooo” to show his preference for tomatoes, and a 6-year-old girl asked, “What does he mean when he says ‘Hooo’?”, as that expression doesn’t have any meaning in Chinese.
3. Use existing mental models and knowledge about the world to help kids accomplish tasks.
Although kids’ cognitive capacity is still developing, they already have mental models and tacit knowledge about how the world works. Referencing their existing knowledge reduces the effort required for kids to understand how websites or apps work.
A common example is the coloring book metaphor in drawing games. When presented with an interface that looked like a coloring book and crayons (e.g., 123Draw), our study participants immediately chose colors and tapped or clicked the areas they wanted to color in the painting. Any variations from their familiar environment, such as “redo” and “undo,” had to be learned. During our testing, every child used the eraser instead of the “redo” and “undo” buttons to recover from a mistake. Young kids didn’t 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.
Another way of taking advantage of kids’ existing mental models is to build on the common knowledge they already have from their daily life. The Panda Restaurant 3 app used children’s familiarity with cooking activities to help them play a game of cooking and serving food. Skeuomorphic-design elements such as household foods, tools, and gestures made the game easy to learn and play.
During our testing, even a 3-year-old girl was able to make a pasta dish by herself: she put pasta in the pot by dragging the bag of noodles to the pot. She also knew she should turn on the stove switch in order to heat the pasta.
4. Reduce cognitive load by designing self-explanatory interfaces and preventing possible errors.
A good design (whether intended for kids or for adults) reduces cognitive load and minimizes the mental resources needed to understand and interact with the system. When the users are young, their working memory capacity is even smaller than that of adults, so it is crucial to pay attention to how much information your users need to carry around to use your interface.
When an interface is not transparent and self-explanatory, cognitive load can increase dramatically. For example, during our testing, two pairs of 7-year-olds were confused by a game called Puppy Quest on the PBS Kids site. The visual instructions told them how to operate the controls (drag the items to attract the puppies’ attention), but there weren’t any on-screen instructions for how to win the game. The game showed a golden pad with a large number above, which represented the number of puppies that kids needed to rescue to that position. A 7-year-old girl kept asking, “What does this ‘2’ mean? It’s annoying!” The kids didn’t connect that number with the game’s objective. Putting a puppy icon or the outline of 2 puppies next to the number “2” would be worth testing. We should note that the game did provide audio instructions, which explained: “this number shows how many puppies it requires to open the door.” But, the sound was blocked by the browser, so our participants never heard that explanation (and even if they had heard it, it’s not clear that they would have remembered it later on).
For kids, as with adults, figuring out that something has gone wrong and then how it can be fixed involves a lot of mental resources. Because children often have less interface knowledge than adults, they can feel more frustrated and confused than adults when an error happens. Thus, preventing possible errors relieves their cognitive load.
Let’s take search as an example. During our testing, we found that kids aged 5 to 11 relied heavily on the autocorrect function of the search engine, because they often made typos and struggled with spelling. The search engine was usually tolerant of such mistakes and corrected them appropriately. For example, when searching for “children mesuem phoenix” in the search engine, it showed the results for “children museum phoenix” instead.
Unfortunately, many in-site search tools failed to support autocorrection and partial matching, which increased kids’ cognitive load as they tried to recover from errors. For example, during our testing, a pair of 8-year-olds tried to find a video related to “exploding toads” on the National Geographic Kids site. However, they failed to spell the word “exploding” correctly and typed “expolding toads”, which resulted in zero search results. They even tried to shorten the query to “expolding”, but still got a “No results” message. The kids were upset; one of them was sure that she had watched that video on the site before. She shouted, “I know there were exploding toads! But how do you spell exploding?”
Clearly, just like adults, children were frustrated by zero-search results. Offering feasible and attractive next steps could reduce their frustration. Not long after testing, the site did return a related result. However, there were still two usability problems: 1) the word’s spelling was not corrected; 2) there was no indicator of how the search terms related to the search-result listing. A better solution would be to show search results for the corrected keyword, as well as highlight the keyword in the search results.
5. Instructions should be clear and specific, but not too prescriptive.
The immaturity of children’s prefrontal lobe means they are less able to process complex and conflicting information compared to adults. Because kids’ reasoning skills are still developing, they are more likely to take specific instructions literally. For example, during our testing, a pair of 7-year-old kids tried to play a drawing game on the Nick Jr. site. The audio instructions specifically told her to “use the mouse to click the bucket.” However, the girl was more comfortable using the trackpad to play (we found that kids under 9 prefer a trackpad over a mouse because of their physical development stage). But because the instructions specifically told her to use the mouse, she switched away from the trackpad. Due to her inexperience with the mouse, she quickly got frustrated and left the site.
A better solution would be to avoid naming a specific device when there are multiple possibilities. If the game had simply said “click the bucket,” or “touch the bucket”, the girl could have kept on using the trackpad and been able to play the game.
Ethical Considerations in Designing for Children
Because kids’ ability to plan and execute is still limited, they are more vulnerable to attractive games and may develop addictions to games or apps easily. Recently, the Chinese government announced a plan to curb the time that kids spend online because of growing fears over addiction.
During our usability testing in China, we found some apps for young kids enabled parents to limit the time kids could play. For example, the Baby Bus app that offered games and songs for kids aged 2 to 8 had a Parent Center section where parents could set the possible longest time for kids to continuously play, the length of time for kids to take a rest after playing a certain amount of time, and a sleeping time during which the kids couldn’t use the app.
During the prohibited times, the app presented a content wall preventing kids from changing the settings on their own. The content wall required users to recognize traditional Chinese characters for numbers, which was extremely difficult for kids but easy for adults. These techniques aren’t yet as common in U.S. apps as they are in China. However, given the ethical issues around marketing to children and increasing their screen time activities, designers should consider the benefits of offering such parental controls.
Conclusion
When designing websites, apps, and games for kids, keep in mind that their cognitive ability is still developing. State the goal and how to achieve the goal clearly with specific instructions. Craft instructions to make sure they are within children’s level of understanding but not too prescriptive. Leverage their prior knowledge and mental models to get them familiar with the website or app. Most of all, remember that even a few years make a big difference in children’s cognitive abilities, so what works for one age group will not work for another. Designs that fail to consider kids’ cognitive capacity won’t bring joy, but only frustration.
Learn more: full 399-page report UX Design for Children (Ages 3-12), 4th edition, with 156 design guidelines is available for download.
Share this article: