Designing iPad apps for pre-schoolers

Kids today are becoming more and more comfortable interacting with computers, whether that’s playing simple Flash games, getting used to motion controlled gaming systems like the Wii or XBox Kinect, or getting their grubby mitts all over your shiny iPhone or iPad on dedicated apps. We’re always astounded when a pre-school child can pick up and operate a new game or gadget, but they soon get frustrated and give up if the interface isn’t as supportive or responsive as they’ve come to expect.

We can learn a huge amount by watching how kids react and engage with the interfaces we design, and also help improve our designs all round by following some of the same principles. Whether you’re designing a site, game or piece of educational software, one thing’s for sure: kids can be a tough audience.

Patience and focus doesn’t rank too highly in a four year old’s priorities. Their boundless energy, goldfish-like attention span and unerring ability to dismiss anything that doesn’t grab their attention right away mean that so many products fall at the first hurdle.

Easy to engage

It doesn’t need to be that way though. There’s nothing particularly complex about a kid's needs when it comes to providing engagement.

At pre-school age, kids are predominantly driven by visual and auditory stimuli. Their fine motor skills are still being developed along with a basic understanding of spatial awareness, so their actions are often clumsy and not particularly accurate. They love and react warmly to simple shapes, bold colours and funny sounds. They’re also naturally curious, and without fear or apprehension they learn a huge amount through exploration and discovery.

They relish validation and praise: small victories are easily won through positive feedback and/or reaction. This not only provides the encouragement to let them know they’re doing something well, but (as anyone who’s watched a kid's face light up after solving a problem can appreciate) a massive sense of satisfaction and achievement too.

Spotting opportunities

As most UX and interaction designers know only too well, once you start designing and building interfaces, you tend to start looking at things slightly differently to most people. You get frustrated by seemingly unnecessary complexity and annoyed at things that just seem so poorly designed they feel broken. Much to the chagrin of those around me, I’m always prodding and poking at stuff, ripping things apart and thinking up new ways to make them better, simpler or even just functional.

I’ve had an iPad since it was released and from the minute it came home, my little girl had been fixated with it. I’m sure it gets pretty boring hearing how everyone’s kids master the iOS interface before they can walk/talk/use a toilet or whatever.

But gushing aside you have to marvel at an interface that with literally zero precedent or prior understanding, a small child can pick up and use with no instruction That just blew me away. Regardless of what you think of Apple and their products, even the most ardent hater has to admit that’s some achievement.

Naturally, she soon got pretty bored playing with ‘Daddy’s apps’ so I started poking around the App Store to find some kids games for her.

After wading through and installing (then removing) what seemed like hundreds of cute, fluffy and basic educational games, it struck me that the bulk of games were either massively overcomplicated and probably pitched at slightly older kids, or perhaps too far down the educational end of the spectrum to still be fun and engaging.

It seemed to me there was room for something a lot more simple; designed around the needs of small kids: still educational but with a strong gaming element and above all, fun.

So I decided to do something about it and build my own. As is often the way, the small matter of the bright idea proved to be a lot easier in theory than in practice and for weeks I was stumped for a direction.

Then one Saturday morning I found my little girl quietly playing with a bunch of alphabet fridge magnets that had come free with some Innocent smoothies. She was contentedly picking out matching letters and trying her best to make simple words up from the letters she recognised. It was a bit of a lightbulb moment and the perfect interaction hook and Mental Model I was looking for to base the game on.

Mental models & metaphors

Mental Models are interaction patterns and processes that designers can tap into to provide familiarity and context to a user. Imagine you’re designing a new word processor app. Naturally you want it to be familiar and intuitive, with as few barriers to entry as possible.

A great place to start is to look at the most ubiquitous example of that kind of tool and reference the task flows and metaphors that people are already familiar with.

Of course it’s fine to break or deviate from these patterns if there’s a genuine argument to do so, but digressing unnecessarily from expected behaviour is a surefire way to irritate your users. When designing for kids, you need to consider they have yet to learn many of the more convoluted models that the software industry has contrived over the years.

So instead of referencing a pattern that has only come about through software development, look around and see what real-world interactions can map naturally to your product. This doesn’t just apply to kids either. By referencing a real-life experience faithfully enough you can make on-screen interactions feel as natural and familiar as the real thing.

Simplicity, encouragement and longevity

So with an established Mental Model and metaphor in place, I set to work designing how to build that into a game. I started with some initial sketches and paper prototypes and tested them on my daughter to check my thinking was headed in the right direction.

It’s always important to test early as possible and on this occasion it was instantly apparent that any deviations from the fridge and magnet metaphor were not only confusing but really frustrating to her. So before i’d even started on the interface or code, I reeled the more complicated gameplay back in and made the final idea as close to our simple word-making game on the actual fridge as possible.

Once the interface started taking shape, I got it into testable code as quickly as possible to check the interaction model was working as intended. The fridge magnets proved to be quite tricky to pick up with little chubby, clumsy fingers and without any haptic (tactile) feedback. So we experimented with audible cues to fake those haptic signals you’d get in real life. A small click was sufficient to confirm that the user had successfully picked up a piece and then a small wiggle animation was added to show it was now draggable.

I wanted a way to give that essential feedback and encouragement without being too intrusive or ruining the gameplay. I wanted them to be able to get spellings wrong and learn they were wrong, so I experimented with a few alternatives before settling on a really subtle visual cue of a ‘lit’ line when a letter was dropped in the correct place. All small details and at first glance not at all obvious, but so important when building something that is not only easy to pick up but allows them to play along without any help from an adult.

With the majority of the game in place I started on a final round of testing The game mechanics were working well, but I’d based the game on a preset number of simple illustrations that the child had to recognise and spell. It turned out that 20 just wasn’t going to cut it, and also that kids were pretty fussy about what characters or shapes they wanted to engage with.

This kind of thing was key to making sure the game had some longevity, so I went back to the drawing board and came up with the idea of parents being able to add their own words and pictures to the game. This turned out to be the surprise killer feature, with kids loving the idea of having pictures of themselves, friends, toys or favourite cartoon characters as part of the game. It made it personal and special to them and added a vital element that I’d initially missed.

If you have the chance to design for kids, I’d highly recommend it as an exercise for any designer. It makes you think harder about your decisions and not rely on safe models that you know inside and out. Not only that it’s immensely satisfying to make something that can please your toughest of critics...

If you're an iPad fan, check out the rumours surrounding the iPad 3.