In part one of this series on making touch-based apps for kids, we talked about a fascinating research project that Sesame Street’s technology development arm released on best practices when developing touch-based apps for children. In that first article, we looked at what the primary objectives should be, interactive design suggestions, and the most common touch gestures that most children use when within an app. In this article, we’re going to talk about the least intuitive touch gestures that developers should endeavor to stay away from, screen design, visual layout, and more.
Not all touch gestures are intuitive
We’re just getting started in touch-based applications and how we know users really use them. A recent study spearheaded by Daria Loi, UX Innovation Manager at Intel, titled "The Human Touch: Building Ultrabook™ Applications in a Post-PC Age", found that out of the 81 participants in several different countries surveyed, a whopping 77% approved of the touchscreen experience, equating it to a “laptop with extra gear”. Touch-based interactions have traditionally been on mobile devices, but with touch-enabled Ultrabooks, touch is becoming part of the laptop experience as well.
Touch is becoming more ubiquitous over the array of devices we use every day, and it’s especially relevant in apps developed for children, since they explore the world by using their senses. Not all touch gestures are necessarily intuitive or easy to execute, however, according to Sesame Street’s findings:
- Pinching: The pinching gesture is quite difficult for children, and this is an input gesture commonly used in many applications to resize an object. Sesame Street suggests using it for actions that aren’t necessarily essential; hand/eye coordination is intrinsic in pinching, and while it’s one that kids find tricky to implement, it is one that is good for developing motor skills.
- Tilt/shake: Encouraging kids to tilt or shake anything larger than a smartphone, like a laptop or tablet device, has typically ended in a less than desirable outcome. It’s difficult for children to control these devices. Phones are smaller and therefore easier for kids to control, so this kind of functionality is encouraged when building apps for smartphones.
- Multitouch: Studies have shown that kids dive into multi-touch functionality whether or not it’s been enabled in the app, but they don’t necessarily use it with a lot of accuracy. Sesame Street suggests using multi-touch for actions that don’t require a lot of precision or finesse; perhaps a drawing app would work well here.
- Flick/fling: Multiple studies showed that kids don’t quite get the concept of flicking something to input; they tend to use tap and drag more. Sesame Street recommends that apps create scenarios in which both of these touch interactions could work successfully.
- Double tap: Kids expect immediate responses from anything touch-based, and an input control that requires two taps makes them think that something is wrong with the app – which invites more tapping, which can lead to errors and frustration. However, the double-tap could be used for activities that require a finite decision; perhaps when an activity is finished, or if the user wants to access parental content.
Kids tend to be hard on their devices; they tap too hard, too long, or do it too many times. Sesame Street suggests that developers program input upon touch rather than lift to cut down on potential frustration. In addition, kids are still developing motor skills and it’s hard to do things with just one finger; developers should prepare for multi-touch scenarios.
Cross-platform screen design
The goal of an app should be visually explicit. Every screen needs to have an obvious goal, with steps to achieve that goal clearly outlined. Fundamental elements should have fundamental designs that make it clear what they are intended for.
- Input actions: Interactive elements in a touch-based app for kids should be distinguishable from other elements in the app. Input actions (like buttons, sliders, pull down menus, etc.) should be separate but related (in the context of design) to the rest of the app. In other words, it’s important that these elements aren’t hidden away in the design; rather, they should stand out but at the same time it should be obvious that they are part of the app.
- Organization and Continuity: Navigation should be easy and intuitive. Don’t hide things that are supposed to be part of the app, and put similar content together, like a Help section and FAQ.
- The More question: Make it obvious to children when there is something more to be explored within an app with visual elements that indicate this. A peek of the next item in a list, an arrow that points to the side of the screen so kids will swipe or tap to the next section; these are both common industry design standards that help to indicate that there is more beyond the current screen. For more advanced users (like parents and guardians), a fade out at the edge of a screen and scroll bars are also effective.
- Scrolling: Most design pundits would agree that it’s not a good idea to create something that makes the user keep scrolling down past the fold. Studies have found that horizontal scrolling – at least for children – seems to be more intuitive. Sesame Street suggests that any important interactive elements should be on the screen in order to make the child’s experience as user-friendly as possible.
- Highlight Color: Colors should be considered carefully to make sure a highlight color (like on a link) is distinctive from all other colors used in the app. The overall color palette should be coordinated in order to make sure it is not visually jarring.
- Hot Spots: Kids’ motor skills are still developing, so hot spots have to be well separated and adequate for fingers that might not be sure of themselves (actually, this is good advice no matter what audience you’re developing an app for). Hot spots should also indicate where they are by some kind of visual cue; Sesame Street uses sparkles and glows to make a child aware of where they should be touching or have touched:
“We suggest helping a child identify hot spots by utilizing a "glow" or "sparkle" as a time-out after instructions or story text are read. Speciﬁcally for storytelling, we recommend that all hot spots and interactivity be frozen until after the story text on the page has been read.”
- Camera: Activities need to be made easy to do with two hands, not just one. Aiming the camera at the destination, clicking a button, focusing, etc.; there is a series of tricky maneuvers involved in taking a picture, especially for children, and so the process needs to be made as seamless as possible.
Text and Reading
If your primary audience can’t read yet, don’t design apps for them that require textual cues. Sesame Street suggests visual experiences that kids can use without a lot of parental input, with instructions relayed not only visually, but verbally.
Highlighting text is very useful for emerging readers, especially in storytelling apps. Words should be highlighted as they are read out loud, but this should be made an option, and not set by default. Many parents prefer to read the story to their kids themselves, and early readers can also read at their own pace.
Fonts should be child-facing and as easy as possible to read. A font that is free of serifs should be chosen, with clearly delineated design.
Reinforce concepts both visually and verbally whenever possible. An on-screen counter is an especially useful way to do this; for example, if a character is counting out loud, a counter could be featured as well to reinforce number recognition. Sesame Street recommends always providing more than one way to connect with the concept.
A navigation menu should be available at all times if possible, accessible by a callout/pull-down/other design. Arrows indicating where a menu is are also helpful. Storybooks should include an easily accessible index, with studies indicating that a page by page breakdown is the layout most responded to.
Touchscreen studies have shown that children tend to hold their devices in landscape view, so developers should make their design responsive to that orientation (but responsive to portrait posture as necessary). Knowing postures is important: developers should watch where app controls are, making sure they don’t conflict where studies have shown people to rest their hands, their wrists, and how they hold devices in general. Kids generally rest their wrists along the bottom edge of the screen, so if controls or icons are place there, they can accidentally get pushed out of whatever activity they are doing.
You might not be shocked at this if you’ve got kids in the house, but typically, kids don’t pay attention to just one set of instructions. They do best with double sets of information; visual AND verbal, visual AND touch-prompts, etc. For example, perhaps a character on screen asks the child to write a number. This could also be prompted by a “sparkle” in the space where the number is supposed to be placed.
There should also always be an indication of where the interactivity is supposed to happen. Kids shouldn’t have to guess where the touch-based interaction is supposed to happen – discoverability must be inherent in design:
“Touch gestures are implemented without on-screen control prompts (arrows, icons, etc.). They are, quite literally, invisible. How can we help people discover the touch options available to them within programs? There’s no visible interface element saying “hey, click on me and I’ll help you do something!”….. There are actually several ways to make touch-based interactions within an app more discoverable. When in doubt, people will try out things that they think just might work. Give them immediate feedback to their actions, letting content follow fingers and aligning with natural motions. People will guess what they need to do, and most of the time, their intuition will serve them correctly.” - Source
Make something that is supposed to be touched look like it wants to be touched. This means visual highlights that focus on the input control, like the color yellow behind an active icon. Animating objects that are supposed to be interacted with has also been found to be highly successful.
Navigation buttons shouldn’t be an excuse to reinvent the wheel. Use designs that are standard and that everyone knows about, like a square for stop, two forward arrows for moving ahead, etc.
As mentioned previously, children respond best to instructions relayed two different ways. This is especially true when integrating audio content into an app – verbal must go along with visual. Keep instructions short and to the point, putting the action that they need to complete at the end of the sentence rather than in front. Touch screen terms aren’t automatically known to kids, so for first time interactions, it’s helpful to give verbal and visual instructions that show how to accomplish something.
Sesame Street studies found that audio prompts make children impatient if they aren’t able to be cut off. For example, perhaps a child wanted to hear just one part of the instructions again; this audio stream should be able to be paused when the information has been delivered.
Everyone wants immediate feedback when they touch something in an app, and kids are no different. Sound effects are a great way to let users know they’ve done something and the device is recognizing that. In fact, Sesame Street suggests that all pertinent user actions be accompanied with sound for maximum user experience.
Sesame Street assumes that parents are assisting their kids while using touch-based apps – remember, their primary audience are preschoolers. Eventually however, kids are encouraged to make their own logins, and these can be accompanied with character icons. The registration process should therefore be made as simple and as streamlined as possible, with very little identifying information required. There should be a separate section for parents to receive any email information.
All parent-focused information needs to be behind a “baby gate”, so to speak, and made unpalatable to children, especially anything that includes purchasing something. Anything that requires parental input should be in the Parents section, along with a Help menu, app settings, tutorials, and FAQ. In addition, Sesame Street suggests placing content in the parents section that gives parents tips on reinforcing the concepts introduced in the app.
Kids and touch-based apps: a good fit
There’s a lot of information here for developers who are looking to make touch-based apps for kids. If you’re a developer who’s made an app especially for children, tell us your experience in the comments section below.