framer js

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. 

Prototyping Exercise: TinyCards Card Flip

For some time,  I've wanted to learn more about using 3D animation with interaction paradigms. Through my paper-crafting hobby, I've come to understand tangible, 3D space rather well. Simulating it in digital space with code, however, felt tougher to grasp. 

My infatuation with TinyCards, the new app by the creators of Duolingo, finally inspired me to give 3D animation a try in Framer. I began by recreating their card flip interaction, which is performed as a user attempts to refresh his or her memory of a subject. 

Click here to try the prototype. 


CODE NOTE:

To complete this prototype, I chiefly utilized the "Flip Card Module" created by Jacky Lee. To understand the concepts behind Jacky's work, I examined similar projects by members of the Framer Facebook Community

Learning Framer 03: Joel on Demand

After three short months, I can safely say I love Framer JS. Its powerful front-end capabilities have reignited my curiosity about animation and motion design, two skills I look forward to augmenting as I continue using this wonderful tool. I also appreciate Framer's ability to make me feel like a builder. When I make something with Framer, I feel as I do when I craft paper or build models. I feel the rush of discovery and wonder as I bring something to life. I feel the push to make it better with each iteration. And I feel the connection to others when they see and interact with my work. 

Building with Framer, a code-based tool, has unexpectedly revived my efforts to strengthen my programming skills. I want my prototypes to be even more functional than they have been. This can help with communicating my vision to others, accommodating various use cases, and robustly testing with real users. With all this in mind, I took a small step to add more complexity to a Framer prototype. In this this quick prototype, I aimed to (a) read text inputs and (b) complete specific actions based on the text written.

As the backdrop to this experiment, I chose to put my love of Billy Joel on display. The concept is called "Joel on Demand," an imagined app that allows a user to search for and play any Billy Joel song his or her heart desires. 

You can try (and download) the interactive Framer prototype here


CODE NOTE:  Gratefully, this exercise forced me to dive deeper into CoffeeScript, the language on which FramerJS is based. I also used Modules, an advanced feature, for the first time. These allowed me to integrate open-source code directly into my prototype, freeing me to focus on marrying the functionality to the user goals and interaction design I imagined. 

The Module used for this prototype is called "Input-Framer" by Adria Jimenez.