Adobe Creative Cloud

June 8, 2015 /

Why Responsive Design is Kid-Friendly

Responsive design has made us rethink how we look at design and interact with content on the web. We are designing for a multi-device world and ever growing mobile user base. Many countries around the world are skipping over the traditional use of the desktop as a way to access the internet and are adopting mobile as the primary way to interact with digital content. Even most pre-school children use tablets and other mobile devices over standard desktop computers.

Think about the reach your content will have when it is accessible on a wide range of devices and platforms.

Device Shifting is the New Normal

One of the largest segments of digital content consumers are kids. Today’s kids are the digital first generation and will often interact with several devices throughout the day. The are now more mobile devices than people on the planet and most are used at some point in the day to access content. From tablets at school to a parent’s smartphone or even their own mobile device, kids have unprecedented access to digital content). Pre-teens and tweens are actively engaged in device shifting, with video viewing playing a major role in kids digital consumption habits. Mobile accounts for 22 percent of all digital video consumption according to one report.

Boy that use the mobile phone sitting on a tree branch

Scrolling is a Continuum

So why is responsive design an important consideration? It is accessible and incredibly user-friendly for kids. If you watch a child interact with the world around them, it is based on pointing, tapping, touching and swiping. These are natural gestures. Responsive content allows kids to maximize their interaction with digital content without having to rethink interactions when moving from device to device.

Responsive is kid-friendly because it presents content up front in the largest format as possible, creating an unbroken and immersive experience, and it avoids using “pinch and zoom” as a means of interacting with content. LEGO’s Mini Figures is a great device friendly site, right down to easy login and the personal MiniFig collection checklist and thumb (or full finger) ready “I Have It” buttons.

lego-minifig-screengrab

Hasbro’s My Little Pony site offers a similar set up with large product images, full finger/thumb ready buttons and character driven content. Recognizable visual cues and markers are key design considerations for great small screen experience. Use your screen real estate wisely. Maximize content presentation and don’t worry about “the fold”, kids will naturally swipe and scroll through the content. Keep tasks and interactions short and simple. The My Little Pony site uses arrows and character images to help kids navigate the site.

mylittlepony_screengrab

Design for touch, plan for the thumb

A child’s fingers are smaller than that of adults, but one thing to consider is that the content will most likely be used by both the child and the parent. According to an MIT study, the average adult index finger is 44 to 57 pixels (1.5 cm to 2 cm) while the adult thumb is approximately 72 pixels (or 2.5 cm). Your buttons and user interface should be designed for the touch, with the primary means of input, the thumb. Even though kids fingers are smaller, children tend to press  with the entire finger pad (and press harder) than adults.

If it looks like a button, it should be a button. Kids will not read labels or identify features as quickly as adults and will press and tap as a means of exploring the interface. Features that look pressable will be pressed and if their is no interactivity or action, kids will press harder. When using advanced features driven by javascript, consider using onPress events rather than onRelease events to help move the interaction through the content forward. A child’s natural gesture interactions will be to press and hold, rather than press and release.

Quality Content, Quality Screen Time

There will always be arguments over screen time whether it’s the television or mobile devices. When designing your responsive project, think about producing high-quality content and high-quality screen time. A kids interaction with your site maybe short. By creating better experiences and content, you increase future engagement, bringing the kids back to interact with your content over and over again. Remember kids are not just interested in playing games. Video content and the social aspects of your content should be considered high priority. Keep tasks and interactions simple and short.

Preschool boys playing on smartphone

Maintain a consistent user experience. Kids interact with content and navigation through learned bias, meaning they will use the same actions or methods that were successful in the past. The sequence of tasks or identifying content by landmarking will be repeated with each visit.

Ask Your Users, Ask the Parents

User testing with kids does not need to be difficult. Ask your friends, co-workers, relatives to show your mockups on a mobile device to their kids and have them note the amount of time kids interact with the mockups. Kids will give you very quick and honest feedback. You will get some interesting responses, “Why is this blue?”; “What is this? (pointing to an icon)” or “I don’t like it!”. Question, why did you make it blue? For icons, try to be clear first, clever second. And for the “don’t like it”, time to do some research and find the answer(s).

While working on a project for a television network, I was given the “I don’t like it” answer. After a little coaxing, the generic “I don’t like it” turned into a laundry list of things to correct, from menu systems, off canvas content and background colors.

Older users will have the same reactions, however, adults tend to curb their feedback. Go for the honest feedback and act on the feedback. Designing for kids can be difficult, but it is rewarding. Take the time to learn from your user base and allow them to give you the proper feedback you need to build engaging responsive content.