Useful Resources for Designing Web Content for Children

Peter
7 min readNov 2, 2017
Painting by children, International Peace Day 2009, Geneva (Source: Original File; Yann Forget / Wikimedia Commons / CC-BY-SA-3.0)

Designing for children can be very different to designing for adults. This is true especially for very young children, who don’t have the language and fine motor skills to navigate a conventional, text-based website. Here is a curated list of resources to help you create a fun and engaging experience:

Understanding the Child Demographic

A short video on child and teenage use of the internet in Australia (Source: Office of the eSafety Commissioner)

Children represent a huge demographic. A 2016 survey revealed that 71% of Australian children aged 8–12 use tablets to go online. On average, they spend 19hrs a week online.

Trine Falbe’s talk on designing web interfaces for children (Source: Front-Trends)

This is a video of a presentation by Trine Falbe at Front-Trends 2015 in Warsaw, Poland. Trine talks about the importance of designing for children, and how their brain and fine motor skills develop throughout their life. She then presents 10 guidelines to follow when developing for children between 7–12.

…I’ve realised that kids under the age of 7 mostly use touchscreens, and they work in very controlled environments (like games). So they don’t use the browser.
Whereas, kids between 7 to 12, they’re slowly starting to use the browser to access information. Kids above 12 are slowly adapting to adult patterns of interaction.
So the 7 to 12 year-olds — when it comes to browser-based interaction — are the most interesting.

Trine Falbe (Source)

In this article, Tanya Unger discusses some differences and similarities between designing for children versus designing for adults. For example, children develop faster than adults.

Early childhood is the most and rapid period of development in a human life. The years from conception through birth to eight years of age are critical to the complete and healthy cognitive, emotional and physical growth of children.

— UNICEF (Source)

Thus, when designing for children, Tanya recommends targeting a maximum age range of 2 years.

Guidelines Towards Designing for Children

In this article, Becky White talks about the importance of involving children in your design and development process. She shows how user-research methods such as observation, participatory design, and usability testing can contribute to fun and engaging products. She then recommends some best practices when designing for children, such as providing clear visual indication that interactive elements (such as buttons) can be tapped, and muting colours in non-interactive backgrounds.

Making the call to action (CTA) the most compelling and physically largest button will help ensure kids don’t get lost.

— Becky White (Source)

This article, written by Catalina Naranjo-Bock, specifically talks about typography for children between 3 and 10 years of age. Catalina notes that fonts should emphasis legibility, as children learn to read letter-by-letter until they make sense of an entire world. She provides examples of fonts designed specifically for this purpose, such as Gill Sans Infant (formerly Gill Sans Schoolbook) and Bembo Schoolbook.

The above two articles are also written by Catalina. She identifies three different age groups (3–6, 7–10, and 11–14 year-olds), each of which require their own design patterns.

Her first article shows how to make interfaces appealing to toddlers and preschoolers. If you look at some the examples she uses, you can see that they are rich and colourful, and do not follow a conventional grid layout. Generally, children between the age of 2 to 3 years old “prefer prefer bold, primary colors and high contrasts in graphic layouts that evoke exploration and discovery.”

The age of the audience you are trying to reach, the theme of your application, and the types of activities you want users to perform should determine the look and feel for your applications.

— Catalina Naranjo-Bock (Source)

Her second article divides older children into two age groups: 7–10 year-olds and 11–14 year-olds. In the former group, children will “focus on discovering their favorite activities, artifacts, colors, and friendships.” Gender differences start emerging at this point; Catalina recommends using gender-neutral colours if you want to appeal to both boys and girls.

The latter group will begin to use applications for specific objectives instead of simple exploration. Although colour and layout is still important, “the main emphasis starts shifting toward content, social interaction, and other activities.” According to Trine, this is when children start adopting more adult-like interaction patterns.

Although designers should be careful not to reinforce gender stereotypes through their choice of colors and graphics, there are particular Web sites and applications that appeal to one gender over the other.

— Catalina Naranjo-Bock

This article by Louis Lazaris, although a bit dated, provides a thorough analysis of other “trends, elements, and techniques” used by commercial websites targeted towards children. Louis provides examples where such practices tend to be unique to children’s websites, such as changing the default cursor. Such changes, while unconventional, can add a sense of playfulness to a site.

It is a pity that some of the examples have since changed (such as the In the Night Garden website), or can no longer be accessed (such as the Hannah Montana website).

This article, by Rian van der Merwe, provides several best practices for content navigation. Perhaps more importantly, he also notes how dark patterns can be used to lure children into making accidental purchases. Purchases might not be a concern for browser-based experiences; however, Trine notes how websites can expose children to intrusive advertising.

This is very bad for two reasons:

  1. Young children are quite impressionable. Children under 8 years-old are likely to believe the content of advertisements. This is because they cannot critically comprehend the difference between advertising and content.
  2. Some ads contain or lead to malware. Children are likely to interact with malicious ads, which will then compromise their devices (and maybe everything else connected to it). Since they lack the ability to predict the consequences (children begin to develop abstract thinking around 12 years of age), they are also likely to do it again.

Please, design responsibly!

Further Reading

This is a 2010 article by Anup Shah. It provides a brief discussion about the ways in which children are targeted by advertising. A 2015 article by Omnibus Research provides a more up-to-date view of why this is a thing — i.e. the buying power of children.

What do you call a consumer who wants to buy everything you have, doesn’t care what it costs and is less than five feet tall? A marketer’s dream? Nope. You call them kids.

— AdRelevance Intelligence Report, 2000 (Source unavailable)

https://www.unicef.org/dprk/ecd.pdf

The above link is to a small booklet on early childhood development. Unfortunately, I was unable to find the UNICEF page it belongs to. It briefly summarises the psycho-social development of a child, as well as their social and environmental needs from birth until 8 years of age.

This page, from Sesame Workshop (the non-profit behind Sesame Street), contains a link to a (.pdf) guide to best practices when designing “touch tablet experiences for preschoolers”. The guide is very thorough and, in many cases, goes into more technical depth than the articles above:

We consider a wrong answer to be an opportunity for a “learning moment.” The use of audio and visual feedback should be encouraging and incremental. Wrong answer feedback typically occurs within 3 scaffolded [sic] levels.

First Wrong Answer: Identify a wrong choice and offer encouragement. Example: “That’s not it. Try again!”

Second Wrong Answer: Identify a wrong choice, restate the objective, offer a hint, and provide encouragement.
Example: “That’s not right. You need to find a triangle. It has 3 sides and 3 angles! Try again!”

Third Wrong Answer: Identify a wrong choice, restate the objective, offer a hint, and highlight the correct answer.
Example: “That’s not right. You need to find a triangle. It has 3 sides and 3 angles! <Triangle highlights> Tap on the triangle!” This should be repeated until the correct answer is selected. In some cases, we may suggest moving a child forward if he/she is struggling for a determined period of time.

— Sesame Workshop (Source)

This book is written by Debra Levin Gelman. I haven’t read it myself, but several of the articles above either recommend or quote from it. It’s worth noting that Chapter 2 Playing and Learning, Chapter 4 Kids 2–4: Little People, Big Expectations (pdf), and Chapter 5 Kids 4–6: “The Muddy Middle” are freely available online. The excerpt of Chapter 5, which is published on A List Apart, also contains a code for a 20% off discount when you buy Debra’s book.

Finally, I really recommend watching Trine’s talk (embedded above) on designing web interfaces for children. Otherwise, I suggest reading her article over on Smashing Magazine:

--

--