ui design

Lessons in Feedback: Toca House

The concept of feedback in product design has fascinated me for some time. At its minimum, it serves as a clear signal to the user that your experience is alive and thinking. At its pinnacle, it’s a vehicle for rich communication to your user, inspiring delight, trust, and stickiness. 

While designing for kids, feedback is a critical part of the experience. As in life, each action they take merits positive reinforcement that pushes them to continue learning and challenge themselves. Grander achievements, similarly, call for celebration and reward. Feedback in apps—whether visual, audible, or tactile—serves as that reinforcement in the digital realm, and it can have a tremendous impact on your experience for young users. 

Feedback is a wide topic, and there are many good examples of it in kids apps. I began my investigation with Toca House, one of my favorite app experiences in general. (Full disclosure: I am an adult who owns 10 Toca Boca apps!) 

Though framed as completing household chores, the games in Toca House are quite fun and addictive. To understand why, I recreated a matching game in which the user is asked to sort the house’s mail.   

A prototype that recreates a drag and drop interaction from Toca House. Made with Framer.

Lessons Learned

1. Emphasize Where Interaction Begins

As soon as the view loads, the first letter pulses, calling the user to action. This is a crucial first step, as it achieves two things:  

  1. It tells the Guest which items are interactive.
  2. It offers a starting point, and allows him or her to quickly comprehend the goal of the task at hand. 

2. Offer Neutral Feedback For Mistakes

True to its pillar of “free-play,” there are no mistakes in Toca apps. I can’t recall ever seeing negative feedback in a Toca experience, and Toca House is no exception. 

In our example, a user can try to drop a letter in the incorrect mailbox. Instead of displaying an error state, the letter simply returns to its starting point. Though a more subtle approach, making the user restart the task encourages him or her to try again. This road of repetition not only moves the user toward success, it may also teach a lesson in perserverance. 

3. Celebrate With Gusto

In his book, Creativity Inc., Pixar president Ed Catmull encourages his readers to be “generous with praise.” This principle is certainly exercised in Toca House, where the user is congratulated for both small and big successes. 

In our example, several events occur when a user drops a letter in the correct mailbox. First, the mailbox scales with a slight, jelly-like bounce as the letter passes over it. Then, when the letter is dropped, the mailbox rotates a full 360°.

While such a bold animation may not gel with an adult-focused app, it communicates two things to Toca’s younger users:

  1. It clearly tells the user they’ve completed the task correctly.
  2. It also ends the interaction on a satisfactory and high note of congratulations, compelling the user to repeat it over and over again. 

Lessons in Kids Navigation: PBSKids Video App

Through my work at Disney, I often design with kids in mind. Yes, it is as fun as you would imagine. It is also no easy feat.

Lately, I’ve aimed to deepen my knowledge and strengthen my eye for noteworthy kids experiences, whether digital or otherwise. Since I mainly design for mobile apps, I began with one of best ones I could think of: PBS Kids Video

By recreating the visual and UX design of the app, I hoped to gain deeper insights into the intentions behind its successful architecture and navigation. I also created a prototype of its key transitions and interactions to get a sense of how motion and feedback contributes to its high usability for a range of young users. 

I recreated the key transitions used by PBS Kids Video to analyze and learn from its design. Made with Framer (https://framer.com/).

 

Lessons Learned

1. Use Visual Cues to Encourage Interaction

As the experience transitions from its initial splash screen to the video player, you may catch the vertical characters slider on the right sliding up automatically. A possible intention is to emphasize a breadth of content as well as cue younger Guests to interact with the slider.

2. Scale Across Age Groups

This app is a great example of an experience that caters to different age groups. The first view, for example, is straightforward and incredibly simple: you watch, pause, go to the next or previous video in your playlist. You may also switch “channels” that are represented by familiar characters on the right hand-side. This is perfect for the 3-5 age group, and allows them to navigate independently without getting too overwhelmed. It also is a largely tappable interface, which caters to younger kids' lack of dexterity.

Advanced gestures are reserved for sections of the app aimed at an older crowd. By dragging the character drawer to the right, an older Guest can select a specific video from the chosen playlist. This interaction can be intuitive for the more selective 4-6 age group. It's also a quick way for parents to curate their kids content experience.  

The "Grownups" section can be accessed similarly, by swiping up on its tab at the bottom left of the screen. Though this area of the screen is very accessible to any age group, only much older Guests are ergonomically able to complete the "swipe up" gesture that close to the screen's edge. (I also appreciate its placement to the far left, where it will not interfere with accessing the iOS control panel.)

3. Visually Distinguish Sections of Navigation

Through my work with Disney Junior and DisneyLife, I've seen many kids struggle with way finding.  To address this common challenge, PBS Kids Video utilizes color to clearly communicate transitions in navigation. Warmer, brighter colors, for example, are used in the kids' experience, whereas cooler, muted hues distinguish the grownups experience. 

Using "drawers" as a paradigm also makes each view distinct. When dragged in, the view's contents layer over the previous view, like pieces of colored paper. This makes it clear that the views are separate from one another, and helps the user comprehend where they are at all times. 

My Square Cash UI Kit is Now Available

I am largely interested in developing product concepts and flows, such as the alarm clock app I wrote about in June. While I plan on continuing that project, I am also keen to develop my UI design skills.  

To achieve this, I've chosen to borrow a tactic I learned in art school: study "the masters." Seek out and dissect the best work out there. Learn how they use the fundamentals of interaction and visual design. Integrate their best practices and philosophies into future projects. 

The products of these studies will be a series of UI Kits built in Sketch. Each of these kits will be modeled after an app or website that I admire and will be made available for the wider community. 

First up is a UI Kit for Square, and you can download it here for free.