design for kids - rosenfeldmedia.com

viii

CONTENTS

Foreword xiiIntroduction xiv

CHAPTER 1

Kids and Design 1Designing for Kids, Then… 2…And Now 5The Good and Bad News 6

CHAPTER 2

Playing and Learning 9So Which Is It? Playing or Learning? 10Designing for Kids vs. Designing for Adults 12The Similarities Between Kids and Adults 15A Framework for Digital Design 17Chapter Checklist 27

CHAPTER 3

Development and Cognition 29The World According to Piaget 30Theory of Cognitive Development 34The Sensorimotor Stage: From Birth to Age 2 34The Preoperational Stage: Ages 2–6 36The Concrete Operational Stage: Ages 7–11 38The Formal Operations Stage: Ages 12–Adult 39Chapter Checklist 41

CHAPTER 4

Kids 2–4: Little People, Big Expectations 43Who Are They? 44Create a Clear Visual Ranking 44

Contents ix

Use a Few Bright Colors 48Assign a Single Behavior to On-Screen Elements 51Maintain a Strong Separation Between Foreground

and Background 53Make Literal Use of Pictures and Icons 55Use Clear Audio Cues 58Support, Don’t Enforce, Gender Differences 61Chapter Checklist 64Emil Ovemar 67

CHAPTER 5

Kids 4–6: The “Muddy Middle” 71Who Are They? 72Make It Social 72Make Learning Part of the Game 75Give Feedback and Reinforcement 79Keep It Free-Form 80Keep It Challenging 82Chapter Checklist 83

CHAPTER 6

Kids 6–8: The Big Kids 87Who Are They? 88Outside Influences 88Leveling Up 88Explain, Explain, and Explain Again 91Saving, Storing, Sharing, and Collecting 93Playing by the Rules 98We Need Some Stinkin’ Badges 101Stranger Danger 103Chapter Checklist 107Linnette Attai 110

x Contents

CHAPTER 7

Kids 8–10: The “Cool” Factor 115Who Are They? 116Getting Away with It 116Provide Instructions After Failure 117Up the Complexity 120Ads Aren’t Content 122“Poopyhead” Is a Perfectly Acceptable User Name 124A Matter of Trust 127It’s OK to Lie if Nobody Gets Hurt 129Chapter Checklist 136

CHAPTER 8

Kids 10–12: Growing Up 141Who Are They? 142Take The Guesswork Out 142Let Kids Tell Their Story 146Mobile First 150Celebrate Individuality 151Specialize 154Chapter Checklist 155

CHAPTER 9

Design Research 159General Guidelines 160What You Need to Know About Informed Consent 163Recruiting Kids as Participants 165Researching with the Littlest Users 165Researching with the Control Freaks 168Researching with the Experts 172Chapter Checklist 175Catalina N. Bock 176

Contents xi

CHAPTER 10

An App for All Ages 1812–4-Year-Olds 1844–6-Year-Olds 1866–8-Year-Olds 1908–10-Year-Olds 19810–12-Year-Olds 208Chapter Checklist 209

CHAPTER 11

Putting It All Together 211First, the Questions 212Next, the Design Particulars 214Finally, Getting It Out There 217Designing for Kids…and Beyond 219

Index 223

Acknowledgments 230

About the Author 232

CHAPTER 4

Kids 2–4: Little People, Big ExpectationsWho Are They? 44Create a Clear Visual Ranking 44Use a Few Bright Colors 46Assign a Single Behavior to On-Screen Elements 51Maintain a Strong Separation Between Foreground

and Background 53Make Literal Use of Pictures and Icons 55Use Clear Audio Cues 58Support, Don’t Enforce, Gender Differences 61Chapter Checklist 64Research Case Study: Noah, Age 3 63Industry Interview: Emil Omevar 65

Emerson or Easton, twins, Age 4

44 Chapter 4

We must teach our children to dream with their eyes open.

—Harry Edwards

Kids between ages 2 and 4 are fascinating. They’re transform-ing from babies into real little people. They’re developing opinions, preferences, and personalities of their own. They’re

starting to express their feelings through words. And they’re won-derful to design for, because they haven’t yet formed assumptions about how the world should work.

In this chapter, we’ll talk about how to design for these kids. We’ll look at who they are, what they like, and how to create experiences that appeal to their physical, emotional, and cognitive skills.

Who Are They?Let’s take a look at some key characteristics in Table 4.1 that shape the behavior and attitudes of 2–4-year-olds and how these might impact your design decisions.

When creating experiences for 2–4-year-olds, you’ll need to remem-ber that these kids are just figuring out how to use technology. They haven’t developed expectations about how things should work yet. You’ll have lots of opportunities to be creative with this group, but you may need to reconsider some basic visual and interaction design principles in order to design an experience that meets their needs.

Let’s go through each of the items in Table 4.1 to understand the impli-cations that these elements have when designing for 2–4-year-olds.

Create a Clear Visual RankingChildren in this age group can’t easily tell what the “important” parts of an interface are. They tend to click on just about everything to see what happens; it’s all part of the game for them. So you’ll want to create a strong visual separation between the elements that users can interact with and those they can’t.

Let’s look at two examples from kids’ TV show websites. The first example, from the Caillou website, shows how a clear hierarchy makes it easy for kids to tell what they’re supposed to click on. The second example, Angelina Ballerina, shows what happens without this visual ranking and how this can be confusing for young children.

Kids 2–4: Little People, Big Expectations 45

On the Caillou site, kids can launch mini-games from items in the environment. Almost all the elements on the site react in some way, but only the ones with the white borders have games associated with them (see Figure 4.1). This visual distinction is easy to recognize, even without the accompanying voice prompts.

In Figure 4.1, the dollhouse and train, which have white borders, launch games when clicked. The items without the borders (for example, the rug, sun, and bookshelf) animate when users mouse

TABLE 4.1"CONSIDERATIONS FOR 2–4-YEAR-OLDS

2–4-year-olds… This means that… You’ll want to…

Focus on details instead of the “big picture.”

They can’t distinguish main elements of an interface from the details.

Create a very clear visual distinction between interactive items and design extras.

Can rank items by only one characteristic at a time (i.e., color, shape, and so on).

They get overwhelmed when there are too many variables competing for their attention.

Pick a smallish set of easily identifiable elements (like colors) and use them consistently throughout your design.

Can only associate a single function with an item or object.

If an item expands or makes a sound on rollover, they’ll believe that’s the sole purpose of that item and won’t know to click on it.

Limit the behavior of your navigation elements to navigation (for example, don’t have them pop up or make noise).

Can only see items on a screen in two dimensions, not three.

Everything on a screen looks like it’s in a single, flat plane to them.

Make your foreground items much clearer and more detailed than stuff in the background.

Are just learning to think abstractly.

They are unable to understand icons and symbols that are second nature to adults.

Use icons that are highly representative of the task you’re trying to communicate.

Use sound to identify items in their environment.

They get confused when different sounds have different meanings (for example, a police siren and an ambulance siren).

Make sure that every sound you use has a specific meaning and function.

Are starting to develop their own identity.

They develop a sense of self at around age 2, complete with gender identity, which forms very early.

Create a design that allows for gender identification without forcing kids down a specific gender path.

46 Chapter 4

over them, but they don’t open any additional functionality. This distinction makes it easy for kids to learn how to access the games and to remember what to do on return visits.

FIGURE 4.1It’s easy to see that items with white borders on the Caillou site will launch games.

It’s important to note that kids under age 6 tend to associate only one behavior or action with an object, which means that to an average 4-year-old, if something on the screen moves when he touches it, that’s all it’s supposed to do. So you’ll want to make sure that your navigational items look clickable, but don’t do anything too interest-ing to detract from their purpose. We’ll explore this in more detail later in this chapter.

On the Angelina Ballerina site, children can launch various activities by clicking the windows in the schoolhouse; however, it’s really hard to figure this out. Only by mousing over the windows and waiting for an overlay to pop up can users tell if there is an activity there or not (see Figures 4.2 and 4.3). This visual hierarchy is confusing to kids, because everything on the screen looks the same and seems to be of the same level of importance.


FIGURE 4.2On the Angelina Ballerina site, kids have to roll over the windows to find out how to play the games.

FIGURE 4.3The overlay with words on Angelina Ballerina is the only way that users know they can play a game. Unfortunately, most of these users don’t read yet.

48 Chapter 4

If the clickable windows in the above screens were highlighted or differentiated in some way, it would be easier for kids to know what to do. For example, if the mice in the windows were dancing, or were dressed in brighter colors, or were a bit larger, children would know that something would happen if they clicked on them. Currently, their size and colors blend in with the pale background, which makes them hard for a young child to see.

Kids haven’t cultivated the visual filtering skills adults have. They’re unable to understand hierarchy unless it’s clearly communicated through visual indicators. If your interactive elements aren’t promi-nent enough, kids will have to learn what to click on through trial and error, and you’ll run the risk of alienating and possibly losing your audience.

Use a Few Bright ColorsThere is a popular misconception among designers that kids like lots of colors. It’s true that younger children love things that are bright and bold, but actually they prefer a limited color palette and can get over-whelmed if there are too many colors competing for their attention. Because kids between ages 2 and 4 hone in on details instead of the big picture, a design with lots of different colors and shades, as well as textures, makes it harder for them to figure out what to click on.

Let’s look at an iPhone app called Smack That Gugl (see Figure 4.4) to see how the developers have creatively limited their color palette to increase usability for kids.

FIGURE 4.4Smack That Gugl does a great job using a limited palette with bright colors.


The premise of Smack That Gugl is very simple: smack the creatures before they explode. The designers of this app used just five colors for their interface. By positioning bright colorful elements on a plain white background, they made it easy for kids to know what to click and touch. If they had used any additional colors, even within the same color family, it would have increased the visual complexity for kids and made it difficult for them to use. Older children look for more visual excitement when it comes to color and texture, but younger ones prefer simplicity.

Color serves as the primary “preattentive variable” for 2–4-year-olds, meaning that they mentally categorize items based on color instead of size, shape, or location. This is true for adults, too, but adults have the ability to continue to categorize cognitively based on other factors as well.

In a similar game called Smack Match Gugl (see Figure 4.5), kids can play against the device, sliding Gugls to the opposite side of the “field” before they explode. The designers rely on color alone—as opposed to shape, size, or orientation—to differentiate between the two “teams” of Gugls. This colorizing puts much less cognitive burden on little users, as they can easily identify which Gugls are on their team and which are not. It also ensures a greater level of success for them as they play the game.

FIGURE 4.5Smack Match Gugl uses color to help its young users categorize.

50 Chapter 4

Designing Touch Interfaces for Younger Kids

Children ages 2–4 are the perfect audience for touch-based inter-faces, simply because they haven’t been tainted by years of poorly designed screen interfaces like adults have. However, these kids also haven’t been exposed to a tremendous number of real-world gestures yet either, so designing touch interfaces for these young users can be complicated. For example, kids think of “pinching” as either (1) picking up a small object or (2) something you do to your friend when you’re mad at her, not as a way to shrink an on-screen element. In addition, these little ones are still a bit clumsy, so some of the finer gestures are difficult for them to master.

When designing touch interfaces for younger ones, you’ll want to do the following:

Focus on large, broad gestures instead of small, fine ones. Try using swiping and grabbing instead of pinching and flicking.

Make on-screen elements big enough for kids to manipulate. This can be hard on smaller screens. You’ll want to do some testing to make sure that items are large enough for little hands

When possible, make use of full hand gestures instead of relying on the thumb and index finger alone. Kids under age 5 tend to use their whole hand to scroll instead of just a single finger.

Place navigation controls at the bottom of the screen, in the left and right corners to indicate the forward and backward motion. Make these large and easy for clumsy thumbs to tap. Kids under age 5 won’t recognize left- and right-facing arrows as progression, but they will realize that right means forward and left means back (in Western cultures, at least).

There are plenty of offline gestures kids are comfortable with, like turning pages in a book or rubbing a crayon on a piece of paper. Just make sure the gestural metaphors you choose map to ones your young users already know.


PARENTS ARE USERS, TOO

As adorable as the Gugl game is, it makes a lot (A LOT) of noise. It also occasionally pops up messages asking the user to sign in to the GameCenter. For parents who “pass it back”—for example, hand tablets and smartphones over to kids as a form of distraction for a long car trip or in a restaurant—it’s really annoying to have to constantly reach back and close a dialog box or correct an error. These messages can have financial and privacy implications as well, particularly when they ask for access to Facebook accounts, photos, location data, or permission for the user to make in-app store purchases. When designing apps for kids, make sure there are “set it and forget it” parental controls for things like volume, upsells, and messaging so that parents can set their preferences once and hand the device over without worry.

Assign a Single Behavior to On-Screen ElementsI did some in-home interviews with 2- and 3-year-olds last year and asked them to show me their favorite toys. Most of these favorites were toys with electronic components, like toy laptops, cell phones, or dolls that spoke or sang. When I asked the kids to show me how the toy worked, most of them showed me a single feature of the toy, like a noise it made when they pushed a particular button, or an action it performed when they shook or squeezed it.

The follow-up conversations with parents were very interesting:

“We spent all this money on a toy tablet for Gabriella, but she only does one or two things with it,” said Gabby’s mom. “She likes to push the picture of the fish and hear it say ‘fish.’ In fact, she calls it her ‘fishie machine.’”

“My parents got Leo this little computer,” said Leo’s mother. “It’s supposed to teach him letters and colors and words. There’s one button that makes a loud honking noise when you push it. That’s the only thing this child will do with this computer. He hasn’t learned anything from it, I don’t think. A waste of money, if you ask me.”

52 Chapter 4

This tendency, to associate a single behavior with an object or item, manifests itself in digital environments as well. If an element on-screen makes a noise or jumps around when the child rolls over it, the child is going to think that’s the sole purpose of the element. This becomes especially problematic when designing navigation.

Many designers think that in order to get a child to click on some-thing, that thing needs to attract her attention. As a result, we see navigation buttons highlight, move, and chime on rollover. Unfor-tunately, that will make young children less likely to click them, as they’ll believe their only function is to highlight, move, or chime. Let’s look at an example.

Daniel Tiger’s Neighborhood is a wonderful TV show with a great companion website that has activities and games for the under-four crowd. Its designers fell into the familiar trap, however, of creating navigation that reacts when a child mouses over it (or, on a mobile device, taps it a single time.) Take a look at the “Printables” button in Figure 4.6. The top navigation bar shows the default state of the but-ton, and the bottom bar shows the expanded and angled button that appears when the user places her mouse on it, on the desktop site.

FIGURE 4.6Keep navigation static so kids won’t get confused about its purpose.

Interestingly, when a child uses the Daniel Tiger’s Neighborhood site on a tablet, the navigation changes appear when the child taps an icon, requiring two taps to actually navigate to that section of the site. This further reinforces the idea that the only purpose these images serve is to get bigger and shift position, as that’s all they do when tapped.

I actually witnessed this phenomenon first-hand during a baseline usability test of a kids’ website (and have seen it many times since.)


When designing the site, we thought it would be cute to have the characters in the navigation pop up and make a sound when users rolled over them. During the test, kids got so excited when they saw the characters jumping around that they forgot to actually click on the items to see more content.

Bottom line: If you feel compelled to add audio and animation to your navigation because you think kids might not understand it, you may need to revisit the design of your buttons.

Maintain a Strong Separation Between Foreground and BackgroundChildren are able to see things in 3D starting at around 5 months of age, when both their eyes start working at the same time;1 however, they can’t really visualize a 3D experience on a flat screen until they’re almost 5 years old.2 As a result, it’s hard to figure out how to position elements so as to give them context. You’ll want to make a realistic-looking interface, so these very literal-minded users under-stand what’s going on, but it’s better to focus on using color and detail for foreground (important) elements and rely on simple shapes and muted colors for background (secondary) elements, instead of designing a fully realized environment.

Figure 4.7 highlights Little Pim Spanish for iPad, where you’ll see that the Panda characters are brighter and more detailed than the background. There is enough visual information in the background to communicate context and representation (for example, you can tell you’re outside on the grass), but it has limited texture and detail to help kids understand that those things are less important.

Let’s contrast that with Handy Manny’s Workshop (see Figure 4.8). This interface will look very flat to a young child. The main characters in the toolbox blend into the background simply because they are at the same level of fidelity as the rest of the screen, which makes it hard for kids to understand what’s in the front and what’s in the back. Instead, it will all look like a lot of clutter, and young users will have a hard time figuring out what to tap.

1 http://www.aoa.org/patients-and-public/good-vision-throughout-life/childrens-vision/infant-vision-birth-to-24-months-of-age

2 http://www.visionandhealth.org/documents/Child_Vision_Report.pdf

54 Chapter 4

FIGURE 4.7Little Pim Spanish uses less color and detail in the background to help kids focus on the important parts of the interface.

FIGURE 4.8Handy Manny’s Workshop has a very detailed background, which will make it difficult for kids to identify what it is they need to do.


Make Literal Use of Pictures and IconsKids ages 2–4 are just beginning to understand abstract thought. As a result, icons and images common to adults can confuse them. By the age of 3, most of them understand that clicking on an “X” closes a window, and that left- and right-pointing arrows move forward and backward, but this behavior is learned, not understood.

Of course, kids in this age group can’t read, so pictures and icons are even more important. As a general rule of thumb, if you need more than a word or two to describe how something is supposed to work, the interaction is too complicated. You know you’re on the right track if you can identify a representative symbol to communicate your task.

TIP KEEP IT SIMPLE

You’ll know your design is too complicated for 2–4-year-olds if it needs text or audio instructions. Any design—or part of a design—requiring more than a couple of words to describe what kids are supposed to do needs to be re-thought.

The Nick Jr. website uses iconography that’s probably confusing to a lot of young children. Take this control panel from the Backyardigans section, for example (see Figure 4.9.) The game’s icon, a video game controller, isn’t a great choice here, because it represents a specific interaction model unrelated to the website. Kids of this age group

FIGURE 4.9Nick Jr.’s control panel has confusing iconography.

56 Chapter 4

may not have even seen a video game controller like this before, as game systems like Nintendo and XBOX target older kids. A better choice would have been an image of a child playing a computer or tablet game, to give the users some information about the types of things they’ll see in that section.

The video icon is confusing, too. Young children don’t yet under-stand that a green, left-facing arrow means “play.” Also, as we discussed in Chapter 2, “Playing and Learning,” since these kids only see things from their own perspective, they’ll look for something that implies watching a video, not playing a video. The difference is subtle, but important. A TV or video monitor would be a better option here.

Some other options for common icons include the following exam-ples in Table 4.2

TABLE 4.2"APPROPRIATE ICONS FOR 2–4-YEAR-OLDS

Action Symbol Description

Print A piece of paper with a picture on it

Favorite/Save A heart or a star

Start A finger pointing

Finish/End A stop sign

Share Two people sharing something between them

Volume An ear, with “sound waves” coming out from it. No sound waves = no sound; 3 sound waves = loudest sound


Designing Icons for Children

For Chapter 10 of this book, I designed a video app to demonstrate how interfaces need to change for kids of different ages. As part of this exercise, I wanted to use a set of icons to represent different subject areas. This ended up being more difficult than I expected, because I needed concrete imagery to represent abstract topics like “communication.” I worked with an illustrator, Shelby Bertsch, on these icons, and we went back and forth several times, as it took awhile to find pictures that did an adequate job of representing the concepts I wanted to include. Looking at the pictures below, you can see how the pictures represent the following topics:

Computers Cool Tools Math

Animals Art Books & Authors Communication

Physics Sports Story TimeNew Technology

World CulturesWeird Animals

58 Chapter 4

These icons shown in the sidebar may not seem intuitive to you, but that’s because you’re able to think abstractly, and you’re already used to common symbols used in interface design. To a child under 4, these make a lot of sense.

You’ll notice that some of these icons—like the heart and the stop sign—are actually symbols, as opposed to real representations of the actions. However, kids learn these symbols at an early age and have already assimilated them into their cognitive toolbox. When choosing your icons, you’ll want to make sure that you take this into consideration. And, of course, you’ll want to evaluate and test your icon choices with actual kids during the “assess” stage of the process.

Use Clear Audio CuesSome designers believe that, when designing for young children, everything has to make noise. While it’s true that these younger users like auditory feedback, there has to be a method to the mad-ness. Sound needs to communicate, inform, and instruct, as opposed to simply entertain. It’s better to identify specific conventions for sound types and stick to those rather than to have noises coming from all over the place. This principle is true because kids of this age are only able to associate a single response or action to an element.

You’ll need to be strategic when thinking about how to use audio in your interface. First, identify the types of sounds you want to include, and then figure out a single use for each type. Table 4.3 shows a sample inventory chart that may help you plan how to identify your sounds.

If you’re planning on having lots of sounds, you may want to create a more detailed inventory with columns for characters, elements, specific actions, and so on. Establishing audio conventions relatively early in the design process will help ensure that you use sounds consistently and appropriately, which will in turn help your young users figure out how to use your design. Let’s look at an example.

Sago Mini Sound Box is a phenomenal app designed for toddlers and preschoolers. What makes this app great is that it lets kids interact with the entire device, not just images on the screen. This specific interaction helps improve the child’s gross and fine motor skills and teaches some basic physics concepts as well. The premise is simple:


kids first select a sound category and then create different sounds by tapping to add multi-colored circles, which, when dragged, crack open to reveal various friendly household animals. Kids can make all sorts of collective noises by shaking, swishing, and rotating their device so that the circles whirl around and ricochet off the sides of the screen. (Incidentally, this app captivates middle-aged adults as well.)

Mini Sound Box does a great job with its audio cues, which is espe-cially difficult, given that it’s a sound-creation toy. The designers created a very clear distinction between system sounds and sounds produced by kids as part of the game (see Figure 4.10.) In fact, they limited their system sounds to only the essential pieces of functional-ity (adding a circle, opening a circle, tapping an animal) and let the kids create the rest of the sounds within the app experience itself. There are no extraneous sounds for selecting a category or navigat-ing back to the landing screen, just little sound files communicating progress to keep kids engaged.

Mini Sound Box features a home screen with no verbal or written instructions, which is an extremely difficult feat. An upbeat song plays when kids open the app, to let them know it’s working and ready for them to play. Big pictures with familiar images enable kids to engage with the app immediately, but tapping these images doesn’t produce additional noise. It just takes kids to the next screen, which shows an adorable cartoon animal ushering in one of the sound circles (see Figure 4.11).

TABLE 4.3"SAMPLE INVENTORY OF SOUNDS

Sound Type Description Use

Voice-over Brief sound bites from characters, no more than five-word sentences

Instruction/explanation/invitation (for example, “Touch the ball to play!”)

Music Short (1–2 seconds), upbeat, continuous tunes

Beginning/completing a task (for example, winning a game, starting a new activity, leaving a virtual space)

Beep Quick single beep sound “Time’s Up” or “Try Again”

Doorbell Loud “Ding-Dong” When a new character or element enters the screen

Click Very brief, smooth single click sound

User action (for example, moving a game piece, pressing a key, or selecting a navigation item)

60 Chapter 4

FIGURE 4.10Mini Sound Box uses specific sounds to communicate progress and functionality.

FIGURE 4.11A short animation introduces the concept of sound circles to kids using the app.

Kids can tap anywhere on the screen to add additional sound circles. Depending on the category initially selected, the sounds can be per-cussion instruments, piano chords, barks, tweets, meows, or cars and trucks. Any movement of the device itself zooms the circles around the screen, releasing a cacophony of wonderfully discordant sounds (see Figure 4.12.)


FIGURE 4.12Mini Sound Box helps children work on their fine motor skills by letting them interact with the entire device.

What makes this an all-around great app for preschoolers, in addition to its clear audio cues, is that it promotes exploration and discovery, has a flow but allows for non-linear play, and provides rewarding visual and auditory feedback with every interaction.

Another wonderful aspect of this app is that it works for kids around the globe, as the sounds used don’t require knowledge of any specific language or culture.

Support, Don’t Enforce, Gender DifferencesChildren begin to identify gender at around age 2. A child who likes to play with neutral items, like blocks and balls, may start choosing baby dolls and dress-up clothes or superheroes and cars at this age. Neu-roscientist Lise Eliot, in her book Pink Brain, Blue Brain,3 explains that these differences in gender identification come from small competency differences in infant brains that are then reinforced by adults. For example, boys’ brains develop certain types of spatial reasoning skills earlier than girls’ brains, while baby girls make eye contact earlier and

3 Lise Elliot. Pink Brain, Blue Brain: How Small Differences Grow Into Trouble-some Gaps—And What We Can Do About It (New York, NY: Houghton Mifflin Harcourt Publishing Company, 2010).

62 Chapter 4

develop the ability to empathize and communicate earlier. The result? “Boys are better at math,” and “girls are more nurturing.”

At around age 2, children will start developing their own rules for gen-der behavior (for example, boys like Batman and girls like Cinderella.)

So what does this mean in terms of design? If you’re creating a site meant to appeal to both genders, you’ll want to make sure that you have an equal balance of activities requiring spatial skills and promoting exploration. Keep the characters gender-neutral, like the Gugls, or create an even balance of male and female characters. It’s a good idea, if you’re able, to make your characters non-human, like Disney does with it’s Jungle Junction (see Figure 4.13.)

While these animals have genders, they don’t base their actions on their genders. This design allows children to identify with the charac-ters without siloing themselves into gender-specific behavior patterns.

FIGURE 4.13Disney’s Jungle Junction features animals instead of humans.


From the Experts: On Gender and Identity

Here are some interesting insights from kids, which were gathered during a series of user research sessions that I did from 2009 to 2010.

Me: “Who’s that on your dress?”

Sydney, age 3: “Umm” (pause) “Ryan has a Superman shirt, and I have a Snow White dress because I am a girl and a princess is a girl.”

Me: “And what’s Superman?”

Sydney: “Superman is a boy.” (pause) “He is funny. I like Snow White.”

Me: “What do you see on the computer?”

Connor, age 4: “Umm… a car. It’s blue.”

Me: “What do you think would happen if you clicked on the car?”

Connor: “It would drive fast! I like to go fast. All my guys like to go fast.”

Me: “Who are your guys?”

Connor: “My friends, Ryan and Tyler.” (pause) “Lily is my friend, too. She likes cars that are pink.”

Me: “What else does Lily like?”

Connor: “She is a girl. She likes pink and flowers and dolls.”

When I spoke with parents after the sessions, most stated that they didn’t start buying gender-specific toys until their child started asking for them, at around age 2.

Ava’s mother: “I never really thought about it, but I guess we only recently started giving Ava (age 2) princess stuff. When she was a baby, she had a couple of dolls, but was always more interested in her stuffed bear. She saw a Cinderella doll at a birthday party a few weeks ago and has been asking for one ever since. So we’re giving her one for Christmas. She got Ariel pajamas and a Snow White dress-up dress for her second birthday.”

Connor’s mother: “We tried very hard to keep all gender-specific toys out of our home. We didn’t want Connor to feel as though he had to play with cars and fire trucks just because he was a boy. But now he loves Batman and Spiderman. It’s almost like a force beyond our control.”

64 Chapter 4

Chapter ChecklistBefore we move on to designing for 4–6-year-olds, here’s a checklist to help you if you’re developing sites or apps for younger kids:

Does your design cover the following areas?

Clearly highlight items the child can interact with?

Use only a few colors?

Feature static navigation that doesn’t react unless tapped?

Have a clear distinction between foreground and background items?

Use icons that are highly representational?

Use sounds judiciously to communicate function and meaning?

Relate to kids, regardless of gender?

In the next chapter, we’ll see some shifts in cognition and behavior as we look at slightly older kids and learn how to design for them.


Research Case Study: Noah, Age 3

Favorite App: LEGO Minifigures GameNoah, an adorable bundle of boy, worships everything his 6-year-old brother does. When his brother started playing with LEGO bricks, Noah wanted to play too, but the little pieces were too small for him to actually build anything of substance. He enjoyed playing with DUPLO blocks (essentially, larger LEGO bricks), but he didn’t have the level of concentration to play with them for more than a few minutes at a time.

Noah’s father downloaded some LEGO-themed apps, and Noah immediately gravitated to the Minifigures game, which allows kids to match up the different parts of a minifig and collect entire series. Noah loves the big buttons, the sounds, and, most of all, making crazy mixed-up minifigs (see Figure 4.14).

FIGURE 4.14LEGO Minifigures game lets kids mix-and-match their own characters.

sidebar continues on next page

66 Chapter 4

Research Case Study: Noah, Age 3 continued

Noah had a hard time answering my questions while he was play-ing, but when he showed me his father’s iPhone, he kept saying “Series! Series!” I didn’t quite understand what he meant, but then he quickly navigated to the app, opened it, and showed me how he used it to build minifigs. When Noah “correctly” completed a minifig (see Figure 4.15), he showed me the character screen and then the series page, which had a collection of all the minifigs he’d completed to date.

“This is my series,” he said proudly. “These are my guys!”

FIGURE 4.15Noah loves collecting minifigs and adding them to the app.

The main themes that surfaced during my time with Noah included discovery, creation, irreverence, and experimentation, with accomplishment a very distant second. He just loved playing on the iPhone and creating funny characters. He understood that the ultimate goal of the game was to add items to his “series,” but like most 2–4-year-olds, his main focus was on the play itself.

Emil OvemarProducer and Co-Founder, Toca Boca

Emil Ovemar is the producer and cofounder of Toca Boca, a play studio that makes digital toys for kids. Toca Boca has released 17 titles since its inception in 2010, including the award-winning Toca Tea Party, Toca Kitchen, and Toca Robot Lab. Its new-est game, Toca Tailor, won a 2013 iKids Award for “Best Game App—6 and Up.” Emil lives in Stockholm with his wife, Frida, and kids Abbe and Annie.

DLG: I love the concept of “digital toys.” How did this idea (and Toca Boca) come about? How did you decide to make this your focus?

EO: My colleague Bjorn Jeffery and I worked together at a company called Bonnier Group in 2009. He and I were charged with coming up with prototypes and new ideas for existing, traditional media such as magazines and books, but we wanted to do something new. We looked at all the different options and asked ourselves, “What are people already willing to pay for?” When the topic of creating something for kids came up, I was excited, since I had two kids—ages 5 and 3 at the time—and was starting to see how technology could enter their lives. Parents are willing to pay for educational toys and experiences to help their kids, and I saw this as an opportunity to work on something I was interested in that could benefit kids.

I’ve always been interested in the ideas of play and fun, and to design some-thing that incorporated these interests in a visually entertaining way was exciting to me. I did some research on what we could do to engage kids, and what I found was not very interesting. Most of the apps available for kids were either simple games or straight instructional experiences. In observing my kids with my iPhone, I saw that they used the device itself as a toy, and they didn’t seek out particular games or apps. They liked the sounds it played when they touched different buttons and the animations it played when they switched screens. I thought, why can’t we create something that kids can just play with? Why can’t we make a toy from the technology itself?

This led to some explorations around creating a new type of toy, and as a result, a new way to play, using advances in touch-screen technology. Toca Boca was born from these explorations (see Figure 4.16).

DLG: Where do your ideas for games come from? How do you decide which ones to build?

EO: We start with a broad concept and theme and then identify opportunities for play within that theme. For example, with Toca Hair Salon, although hair salons are associated with fashion and beauty, we wanted to focus on the fun things that could happen when you play and interact with hair (see Figure 4.17).

Industry Interview

Industry Interview

So we created a bunch of characters, each with a different type of hair, and then focused on all the different things you could do, like cutting, dyeing, washing, and shaving. We concentrated on making these micro-interactions as fun and interesting as possible. So the theme serves as the vehicle for the play, but then the smaller aspects of the theme become the actual game.

DLG: How do you involve kids into your design and development process? What kinds of participatory design activities do you conduct? How much do kids influence what you build and why?

EO: We involve kids throughout the design process. In the beginning, after we identify our concept and theme, we create paper prototypes for small, small aspects of the experience. We use plain paper, or sometimes we use strings on cardboard, and then we put it in front of kids and watch what they do. If they don’t respond, we go back and ask ourselves what we need to change, about either the theme or the interactions.

FIGURE 4.16Toca Band lets kids make music in unex-pected ways.

FIGURE 4.17Toca Hair Salon lets kids do interesting things with hair.

Industry Interview

Sometimes, we’ll put real physical toys in front of kids and then watch them and ask questions. When we were building Toca Train, we gave kids toy trains and just watched how the kids interacted with them and the different things they were trying to do. We kept asking ourselves, what is it that the toymakers have missed that we can do in a digital space? How can we hack the notion of play so kids can do more interesting things?

A great example of this happened when we were working on Toca Tea Party. I cut out a bunch of pictures—of teacups, plates, utensils—and then laid them out on the floor in front of my kids. I thought about things that might happen at a real tea party that might be interesting and unexpected. When I was pouring the juice, I pretended that some had spilled, and the kids loved it. That made me think about how to incorporate these fun little “conflicts” into the overall experience. Kids are great at uncovering these because of their ability to hone in on details.

DLG: What are the most important differences between designing for adults and designing for kids?

EO: When we think about designing for adults, or designing games for adult audiences, we usually think of them having some purpose. For example, there are games that adults play to help them with behavior change, or things that they do to earn badges in a gamification environment. But there are very few things adults do digitally for pure enjoyment. That’s a major difference. Kids learn, communicate, and grow through play itself, whereas adults usually need a larger purpose for doing so.

Another thing that’s different is that feedback is really important when design-ing for kids. All kinds of feedback. Adults prefer feedback when they do something wrong, or to confirm when they do something right. Kids like to get feedback from a system whenever they do anything at all. They like it when something fun and unexpected happens. Adults don’t tend to like the unex-pected. Also, the idea of friction is different from kids to adults. Adults do not like friction; they like the tasks to be as straightforward as possible. With kids, they like a little friction, a little challenge. For kids, something like pouring juice or stacking boxes in a digital environment should have an element of adventure to it. Adults just want to get it done. Q

64 Chapter 4

Chapter ChecklistBefore we move on to designing for 4–6-year-olds, here’s a checklist to help you if you’re developing sites or apps for younger kids:

Does your design cover the following areas?

Clearly highlight items the child can interact with?

Use only a few colors?

Feature static navigation that doesn’t react unless tapped?

Have a clear distinction between foreground and background items?

Use icons that are highly representational?

Use sounds judiciously to communicate function and meaning?

Relate to kids, regardless of gender?

In the next chapter, we’ll see some shifts in cognition and behavior as we look at slightly older kids and learn how to design for them.

design for kids - rosenfeldmedia.com

Documents