Playful Things

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. 

Learning Framer 02: Whise

I admire the open office concept for many reasons. The ability to see interact with colleagues in a "free-range" environment provides accessibility and sparks collaboration. When in my own open office, I often enjoy the soundtrack of conversations around me: lively, cheerful and humorous banter. This soundtrack is a constant reminder of the talented minds I I work with and the fact that they are deeply invested in what they do and one another. 

There are times when a design challenge requires complete focus, compelling me to fade out my surroundings. To do this, I summon my precious noise-cancelling headphones and drown the audible world in white noise. Finding a choice of good quality, long duration, and an appropriate vibe is frequently a challenge. The search through YouTube and all my subscribed music platforms breaks my connection with the task at hand. When I finally do settle on a track, it takes a bit more time to get back into the original "flow." 

The scenario described above inspired my next Framer JS project: an app concept called "Whise" (short for "White Noise"). The core functionality of "Whise" is to curate the best white noise options based on your preferences. The Framer prototype below demos the core interaction of "Whise," which is choosing and playing a noise track. I decided this task should be incredibly quick, allowing the user to swiftly return to their task. 

You may download the Framer JS prototype here.

Though this was mainly an exercise in learning Framer JS, I chose to put some thought and effort towards the UX and UI of the prototype (it's often hard not to!). I chose a layout of a 2x2 grid to offer few options that could be quickly identified, compared, and selected but the user. Though the audio tracks would hypothetically come from various Internet sources, I felt that fact should be hidden from the Guest. Harmoniously individual colors and descriptive hieroglyphic icons identify each track with a consistent look and feel. 

Sketching helped me narrow down the symbols I'd use in the prototype. 

Other visualizations of "Whise," which I originally dubbed "10 Hours of White Noise." Man, that's a lot of white noise....


CODE NOTES: 

This exercise built upon my practice of integrating JSON data into a Framer JS prototype. This time, I blended hard-coded data (stuff that I typed) and live data (urls from the Web) to create something a bit more dynamic. 

I also used this as an exercise to get better at using "for" loops to apply a single instance of properties and behaviors to multiple objects. After many iterations—and some help from the awesome Framer Facebook community—I was able to keep my code DRY! Each white noise track object is following the same interaction and UI template (with a few overrides such as symbol and identifying color). This is a technique I expect to use in countless future prototypes, particularly ones that echo games and other robust interaction patterns! 

Learning Framer 01: AlphaBits

Over Christmas break, I began learning Framer to build up my prototyping skills. From day one, I must admit, I was hooked. The ability to realistically simulate interaction ideas in a concrete and compelling way is liberating. Already, I can feel my confidence growing. 

Learning Framer has also allowed me to strengthen my beginner-level coding skills. Once I got through the basics, I began to dive into the juicer stuff. I revisited old friends like Fraulein For-loop and Constable Conditional, and I met new acquaintances such as Event Listener, Esquire and Señor Random(). With these tools in tow, I realized I could make things beyond interactive animations.

The first of these projects is a digital toy called, AlphaBoxes. I created it for my 18-month-old goddaughter, Olive. Currently, her two favorite things to do are reciting her ABCs and swiping on her mom’s iPhone. This is a productive way for her to do both. 

A video of the prototype in action. 

Once I had the prototype in working order, I sent it to my aunt, Olive’s grandmother. Together, they tried out the toy and recited their letters. Even Olive’s cousins, all under the age of 4 at the time, joined in. Knowing it was engaging to my favorite kids was exciting, and it inspires me to create more playful experiences for them to enjoy. 

Click here to view and download the prototype

 

A quick sketch to capture thoughts on how the prototype should function.  

A quick sketch to capture thoughts on how the prototype should function.  


CODE NOTE: 
For this prototype, I learned how to create and parse a JSON file. I’ve become familiar with JSON through my professional work, but this is the first time I’ve practically applied it to code. Seeing its power first-hand has augmented my appreciation for the folks on my team who wrangle JSON on a daily basis. I’m also excited to apply it to another project in an even more compelling way.