Archive: How to design for children

Children make huge developmental leaps every single year of their lives, young children lack the fine motor skills of older children whilst the very act of reading instructions can be a barrier. It makes sense to think about how to design for children in a different way to adults.

Using our 9 principles is like following a recipe, each principle (or ingredient so to speak) will taste fine on its own but their real power lies in when they are combined.

You can also learn about the principles in our video of playful principles for designing for children.

Rewards are the moments of joy that we give our users in recognition of their efforts and achievements.

Why reward users?

Rewards give us a tool for leading young users though our experiences, whilst giving them satisfaction and keeping them coming back for more.

How do we reward users?

Simple rewards

The positive reinforcement and guidance that rewards offer is really important. These rewards don't always need to be grand gestures. It could be as simple as a lovely little animation when we select a character. Where appropriate, reward the user for each interaction, however small.

Tailored rewards

The rewards we seek change a little through our early years. Toddlers have a challenge on their hands just getting to grips with the world, so rewards should be given for basic interactions. They are less likely to understand the concept of scoring and performance.

Surprise refers to the unexpected or astonishing events that make children's experiences exciting.

Why use surprise?

Children enjoy being surprised just as much as adults do. Our brains are hardwired to enjoy it.

Surprises help to add variation and depth to the otherwise safe environment of games and apps.

Surprises create an element of delight, encouraging 'replayability' and engagement by reducing consistency. So long as these inconsistencies remain positive ones, the result is an experience with more possible outcomes and therefore it feels more varied and enjoyable.

Gameplay should always be intuitive for children, but the outcome can vary, providing an element of surprise and delight. If players can look at a game state and always know what to do next and what to expect, the game will quickly lose it's challenge and become boring.

How do we use surprise?

Look out for opportunities to include joyful elements that add to the experience. Make a button wave, have characters run on screen and mess things up… make the mundane magical.

Don't be afraid to be anarchic and disturb the experience or gameplay in a positive way. It's good to have non-functional elements of your experience that act in an unexpected way.

This builds the tension and excitement that great experiences tend to possess. There's a thrill to the unknown.

Challenge refers to the difficulty or amount of skill required by the player to progress through the game experience. Utilised well it can create a sense of personal achievement and incentivise mastery.

Why implement challenge?

Very young children respond to experiences rather than challenges, older children want to be challenged as part of the experience.

If an experience is too challenging for too little reward, it will fail. Likewise if an experience offers too little challenge and too little reward it will also fail.

This makes challenge a crucial thing to consider and tailor appropriately when designing experiences for children.

How do we introduce challenge?

At all ages we want to challenge the user's ability without ever producing impossible or unfair obstacles.

For all age ranges allow the challenge to increase progressively and appropriately in your content so that the child feels a sense of personal achievement.

For younger CBeebies age groups (2-6 years), the challenge should obviously be achievable, whilst positively rewarding users for their effort and engagement. Feedback loops are important in coaching users, helping guide them through the experience.

For CBBC age users (6 years and older), use challenge balanced with reward in your content to provide the incentive of mastery. As the level of challenge and difficulty presented rises, accompany this with sufficient rewards and measures to allow the user to share their successes and learn from their failures.

The feeling of feedback and responsiveness from buttons and game elements that make our apps and games feel alive.

Why make interactions delightful?

Feedback helps the user to know what's going on, why it's happening and what they can do next. For younger children, with less experience of the world around them, it's really important to give clear feedback in order for them to make sense of how things work. Children need quick feedback and if they do not get it they are likely to divert their attention.

How do we make interactions delightful?

Use clearly defined hit states and animations, with accompanying audio so that the user can feel each interaction they make.

Kids love exploring and finding new things through play. Build on that natural curiosity to create worlds where it's fun to try new stuff without worrying about getting lost.

Why make discovery natural?

If you have ever seen a child open a new toy, they very rarely read the instructions. So treat your experience as a toy, that children should be able to pick up and play.

Children come to apps and games to have fun so make the content the focus.

High visual complexity can overwhelm anyone, let alone children who cannot process visual information as quickly as adults.

How do we make discovery natural?

Visual means of interacting with user interfaces are crucial to the success of software for children who are preliterate or are just beginning to read.

Icons for children should be designed so they represent actions or objects in a recognisable manner. They need to be easily distinguishable from each other, be recognised as interactive and separate from the background. Also have no more visual complexity than that required to accomplish their task.

Complex tasks

Look to reduce complexity in the UI so that the experience is simple, clear and welcoming of exploration.

One way of dealing with visual complexity is to use multilayer strategies where children are first presented with few actions and objects. Then as they become proficient with these, can move on to add other actions and objects to the user interface.

If they lose their way offer a helping hand in the form of a contextual hint. Things are so much more rewarding when we figure it out for ourselves

Transitions

Transitions help the user to understand changes in relationship between elements over time. Showing the journey between two places makes it much easier for our young users to work out where they are, where they've come from and where they're going.

Ensure each transition helps frame the story for the child, allowing them to know exactly where they are and why.

Try to show the results of actions clearly. If tapping a UI element causes something to change, make that link apparent.

Making joyful experiences where it's ok to make mistakes without feeling punished or confused.

Why make designs forgiving?

Children are still learning fine motor skills so lack accuracy in their movements. By taking account of this in your designs you can remove the potential for a child to become frustrated with unintended actions or mistakes without feeling punished by the UI.

How do we make design forgiving?

Use large hit areas, minimum 64px (based on a medium density screen) 9.6mm on all interactive elements.

This means that interactive elements have enough forgiveness in them to account for a child's lack of accuracy.

Although the hit areas are big, the underlying graphic doesn't necessarily need to be. Visuals should be purposeful not clunky.

Sufficient forgiveness in drag targets

Few things are as frustrating to a child as something not working in the manner it should. Dragging an apple into a basket for example; for younger children should be simple. But a lack of forgiveness in the target area that the apple needs to be dropped into, can feel like the child is being punished for lacking accurate motor skills.

Ensure that drag targets are sufficiently forgiving by increasing their area outside the dimensions of the underlying graphic.

**Reversibility **

Reversibility of actions is important to encourage exploration. Allowing a child to step back from an action gives them confidence to continue.

Add personality to animations to help convey a wide range of emotions from drama to humour in a way that makes experiences delightful, playful and rewarding.

Why put personality into animation?

Characterless or poor quality animation can have negative effects on how immersive an experience is.

How do we add personality to animation?

Use physical weight and inertia to base animations on how objects behave in the real world.

By adding exaggeration to this base you can create animations that imbue personality and feel fun, adding character to your designs.

When animating use curves or arcs of motion to give your animations a more natural feel unless you are purposefullly creating a mechanical feel.

An example of this in its simplest form would be the use of easing to prevent abrupt and awkward ends to animations.

Audio is an incredibly powerful tool to convey meaning to both UI elements and content, it lifts design to create an experience. For children with visual impairments it can help create worlds.

Why make audio immersive?

Audio and sound FX can communicate mood as successfully as visuals. It can also help shape the UX by acting as confirmation of changes of state.

For children with sensory disabilities, cognitive conditions or learning difficulties a rich balance of audio feedback aids comprehension and enjoyment.

Implemented well, immersive audio can open up new worlds for children with visual impairments, allowing them to play games or navigate UI's with the use of audio cues alone.

How do we make immersive audio?

Sound FX

Associate sound FX to UI elements to help with cognitive understanding.

Provide a sound equivalent to any transitional states such as loading bars or scene changes.

Be judicious in the tone of FX ensuring that repeated play doesn't irritate.

Use audio design to describe environmental changes i.e. from gravel to grass, reverb in large enclosed spaces, and the distance of an object by its relevant volume.

Audio

Use audio soundtracks to immerse the user in the experience. The soundtrack should convey the tone and pace of the experience ensuring the music provides editorial context. Keep background noise and music to a minimum during speech.

Smooth the edges of an experience through a consistent visual design and an authentic tone of voice to create a constant sense of wonder. "You don't notice the bins at Disneyland"

Why is it important to be consistently captivating and authentic?

To increase engagement in an experience by ensuring there are no communicative elements that jar.

How do we make experiences consistently captivating and authentic?

Consistent styling

Visual design and illustration can take any number of forms, the important aspect is that each visual element created should feel part of the same world it was intended for.

Visual focus

Younger children are unable to process visual information as quickly as adults so bold, simple visuals can be more powerful than overly fussy, complicated designs that are hard to maintain. Try to ensure clear focal points of visual interest on each screen.

Character lead

Children are very much driven by character lead imagery and association, use characters to pull children into the world you have created.

Tone of voice

Jarring or an inconsistent tone of voice can cause confusion, especially in younger children when there is no ability to perceive tone from facial expressions.

Any speech should be in keeping with the brand's tone of voice.

The use of text

The use of text should be minimised, especially for younger children who are unable to read, unless of course the aim is to teach reading and writing.

Use any or all of these principles when designing for children and you will go some way to creating an experience that is compelling, delightful and inclusive for children.