Example Storyboard for Book App

Example Storyboard for Book App
A book app storyboard should indicate the interactions and animations for each page of the app. You will need to know the type of interaction that occurs. Is it a tap on an object or by shaking the tablet? You will also need to know what should happen as a result of the interaction. Will something disappear, will something change size or will a sound effect by played? A storyboard helps to insure that both the app developer and client understand what to expect in the finished app.

When we continue to examine the sample storyboard, we can see listed the interactive design elements and the interaction that occurs when they are tapped, swiped or whatever. You will want the name of the object that the reader taps to trigger the interaction and the name of the object that is affected by the interaction. Sometimes this will be the same object, such as when an object makes a sound or disappears when tapped. Other times, what triggers the interaction may be different from the object that is animated. For example, if the reader tilts the tablet, a graphic on the screen may float down or to the side via the physics engine.

As you can see from the sample, the Christmas ornaments begin swinging as soon as the page loads and do not require any interaction to begin the animation. The animation will continue forever or until the page is replaced with another page. However, when the ornaments are tapped, we will hear the jingle sound, which only plays once.

The second interaction is the cookie graphic. It also begins a bouncing animation automatically when the page loads. The animation will get the attention of the reader and the message tells the reader that the bouncing objects are interactive. This is true throughout the book app. When the reader taps the cookie, we hear a laughing sound effect, the message disappears, he stops bouncing and the graphic is replaced with a graphic of the cookie that is missing a foot.

In the next section, we have information about any special buttons on this page. Because it is the cover page and the first page of the app, we have the Read-to-Me or Read Myself buttons. Depending on which is clicked, the reader will hear the narrative on every page or the pages will load without playing the matching audio files. The Games button will take the reader directly to the games center, which has thumbnails for three jigsaw puzzle games. These buttons only appear on the cover page.

At the bottom, we have a general description explaining how all the elements should work together. Here is where the client may add any special instructions to the app developer or you can make notes yourself during the client meeting.

Blank Storyboard Template

← Back

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.