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 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.

The game Mission PAW on the Nick Jr. site used clear visual animation and audio instructions to explain what kids need to achieve and how to accomplish the puzzle task. First, the game showed the goal state: all three complete armors (the left image). Then, the game showed the start state and how to play by using the mouse to drag the pieces to where they belonged (the right image).

Kids can get confused when no information about the game is presented. For example, the Counting to 100 game on 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.

p2_Starfall_WeakConnection The game Counting to 100 didn’t have any instructions about the game’s goal or how to play it. Young kids didn’t understand the connections between pennies, dimes, and the number displayed on the left of the screen. 

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.

Panda Restaurant 3 app: When kids selected ingredients, the characters made subtle noises and faces to show their preferences. Kids under 6 failed to notice that feedback during our testing. In China, children above 6 noticed the cues, but failed to understand them fully because of the cultural differences in sounds associated with various emotions.

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.

123Draw app: Kids knew how to use the app, because it followed their mental model of a coloring book. They preferred using to the eraser to recover from a mistake, even when they knew the meaning of the undo/redo buttons (visualized as arrows).

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.

The Panda Restaurant 3 app’s skeuomorphic design took advantage of kids’ existing knowledge about the world. Even a 3-year-old girl was able to successfully make pasta in the app: first, she put some pasta in the pot by dragging the bag to the pot, and then turned on the burner switch in order to cook it.

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).

The visual instructions of the Puppy Quest game on the PBS Kids site didn’t state the goal of the game clearly. They showed how to operate the game (drag items to attract the puppies), but our study participants didn’t understand that the number 2 (displayed in the bottom left corner) meant that two puppies needed to get to the golden pad. An audio explanation tried to help, but the browser blocked the sound from playing.

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.

Google’s autocorrection feature prevented kids from failing to find their desired search results when they made a typo.

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.

During our testing (the top picture), the search-result page of expolding toads on the National Geographic Kids website returned Sorry, no results were found; on a more recent version (the bottom picture), it showed a search result, but didn’t correct the spelling or show if or how the search result related to the keyword.

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.

The Coloring Book game on the Nick Jr. site had audio instructions, but asked kids to use the mouse to operate. In testing, a 7-year-old girl preferred using the trackpad but turned to the mouse because of the instructions. Her inexperience with a mouse frustrated her, and she left the site quickly.

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.

The Chinese app Baby Bus for kids aged 2–8 enabled parents to specify the amount of time kids could continuously play. When the child had used the app continuously for the set amount of time, the app told them to take a break and stopped showing content.

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.

On the Parent Center page in the Baby Bus app, parents could set the sleep time (20:00–6:00 in the picture) and force kids to take a rest for 3, 5, 10, or 15 minutes at regular intervals (15, 30, 45, or 60 minutes) of playing.
A content wall prevented kids from changing the settings on their own. It required users to recognize the traditional Chinese characters for numbers, which was extremely difficult for kids, but easy for adults. This is one case where knowledge of children’s limited cognitive development can be used advantageously to deliberately design a UI that’s not for kids.


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.