Sharing a storybook with a child can be one of the most rewarding experiences a parent can have. When an adult reads with a young child, they provide a host of well documented benefits that support a lifetime of good reading habits. We asked ourselves how we could take advantage of the functionality of the Kinect to enhance the reading experience between a parent and child.
The result is The Kinect × Three Little Pigs, an interactive storybook that explores new ways young readers can enjoy a shared reading experience. Our interactive book is designed to captivate young readers through graphically enhanced narratives and engaging interactions that is reminiscent of reading with an adult.
Aaron Calzado, Daphne Hsu, Kim Lewis, Jillian Moses
RESEARCH: secondary research, environmental scans, task analysis
INTERACTION DESIGN: concept development, gesture development, storyboarding, user flow
VISUAL DESIGN AND PRODUCTION: color design, inking & coloring, sound recording
We crafted a version of The Three Little Pigs designed to engage early readers in an interactive experience while maintaining the familiar structure and flow of a traditional narrative. Unlike other interactive experiences, our book maintains the linear structure of conventional storytelling but affords the child an opportunity to immerse themselves in the narrative.
RESEARCH & DESIGN OBJECTIVES
As with any good design project, we began with the research. Taking a deep dive into the academic literature on early childhood reading, we identified key factors that produce good early readers and makes the experience of reading with an adult so special. Based on our findings, we decided to design around the following features:
We made an early decision not to create another animated game; instead we wanted to keep the look and feel of a traditional storybook but with a twist. We discreetly added dynamic content to specific elements in the storybook to enhance the storytelling experience without dampening the reader’s imagination.
READ AT YOUR OWN PACE
Paired with the Kinect’s capabilities, our interactive storybook adapts to the level of involvement exhibited by the reader. By standing up, the reader has the ability to take control of the story, exploring words and objects. This engagement allows them to truly immerse themselves in the interactive reading experience. Alternatively, should the reader desire a more passive experience and simply wishes to be read to, the Kinect can sense the lower activity level and continue the story without additional prompts.
An important component of our interactive storybook is the visual cues that prompt our readers to perform specific functions. One method we use to achieve this is a small pig avatar in the lower left corner.
DO YOU HAVE A QUESTION?
Children learn by asking questions. Incorporating behavior children will be learning in the classroom, the child is able to initiate a question by raising their hand. The screen will gray out, except for the content with definitions in the system. For example, they can highlight a portion of the text in order to have it read to them or select an object to hear its name and receive a definition.
BREAKING THE FOURTH WALL
Manipulation of the ‘fourth wall’ though the characters’ interactions with typographic elements highlights the relationship between the written word, the images and ideas they relate to, and the narrative structure. This has been shown to enhance word/object correlation and is an integral part of the experience a child has while reading with an adult.
Developing a gestural language: we explored an array of possible gestures we could use in our interactive storybook and decided to make the gestural inputs a supplementary feature that give children the option to either read passively or actively interact with the storybook.
Ultimately, not every gesture shown in this section made it to our final design. We narrowed our selection down by removing gestures like “Hug” and “Hold (Items from Falling)” since these gestures were being occupied by more important functions that played a more significant role in progressing the story.
We explored key interactions through storyboarding and then produced lo-fi video mock-ups to visualize and critique our ideas.
CONCEPT DEVELOPMENT AND VIDEO PROTOTYPING
During the early stages of concept development, we drafted storyboards and produced rough video cuts to quickly present our design ideas. Instead of illustrating diagrams, we found that filming ourselves was a great way to prototype gestures.
An animated storyboard depicting the user asking the system a question and reading text word-for-word.
DEVELOPING A VISUAL STYLE
Our graphic style was inspired by our favorite storybooks while embracing the new visual capabilities of the Xbox 360 and Kinect. We wanted young readers to feel connected to the characters and experience the sensation of reading while interacting with our book. To create a storybook feel for our target audience, we analyzed visuals and illustration styles found in popular children’s entertainment.
DEVELOPING A TYPOGRAPHIC STYLE
Some of the main elements of our graphic style include breaking the fourth wall, dynamic and interesting perspectives, playing with typography, and maintaining a simple sketch-like quality to our illustrations. We felt that this style was appropriate as it would maintain the interest of our young readers and emphasize the importance of the printed word. We focused in on these techniques by examining several popular children’s books and television shows.
TRANSLATING THE STORYBOOK EXPERIENCE FOR THE DIGITAL AGE
Children’s storybooks are built on rich visuals that reach out and engage young viewers. In our storybook, we intended to create rich visual landscapes that children can explore. In any given scene, children will be able to pan through the spread and examine the page and its objects in detail.
SETTING THE MOOD WITH COLOR
We chose a few simple, cohesive color palettes for our story. The general background contains a muted texture to imitate the feeling of a storybook and keep an analogous appearance across scenes.
SYSTEM TYPEFACES AND TYPOGRAPHY GUIDELINES
For the typography in our interactive story we chose several different typefaces that would work well together, yet provide enough contrast for the reader to recognize shifts in dialogue. We chose to display body copy in Archer since it is a friendly slab serif that matches the visual style of a traditional storybook and fit well with our visual objectives.
LITTLE PIG TYPEFACE
For the dialogue of the pigs, Gotham Rounded was selected. We felt that it reflected their cheeky personalities, and the roundness was reminiscent of a pig.
BIG BAD WOLF TYPEFACE
And finally, for the wolf’s dialogue, we chose Tungsten Medium because it reflects his tough exterior and cunning demeanor.
ADDITIONAL USES OF TYPE
In order to keep the child interested in the content of the story and focused on reading, we added many playful elements to the type. For example, when the wolf comes to blow down the pig’s house, the reader is prompted to repeat the sentence, “Then I’ll huff, and I’ll puff, and I’ll blow your house in.” The type grows larger as the child’s volume increases, adding to the playfulness.
Occasionally, words and type become an informative tool for learning about peripheral objects within a scene. For example, when young readers pull a turnip out of the ground, the bottom half of the vegetable reads “turnip” – creating word-to-object association.
PUTTING IT ALL TOGETHER
In order to demonstrate our design in context and to showcase the value of our interactive storybook, we chose to produce a concept video.
FINALIZED VISUAL STYLE
CREATING A VISUAL PROTOTYPE
The final video prototype