Vintage Cottage Big Jigsaw Puzzles, 500, 1000 pieces. Kids between ages 2 and 4 are fascinating. They're transforming 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 wonderful to design for, because they haven't yet formed assumptions about how the world should work.
Create a Clear Visual Ranking
Children 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.
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. This visual distinction is easy to recognize, even without the accompanying voice prompts.
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 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.
The Milkman, Falcon
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 interesting 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. 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.
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.
Autumn on the Farm, Falcon
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 prominent 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 Colors
There 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 overwhelmed 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 Guglto see how the developers have creatively limited their color palette to increase usability for kids.
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, 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.
