The safe bet: following a print metaphor

As of right now, the most common interface metaphor for digital book apps remains the printed book. As I mentioned earlier, sometimes it’s no more than a default (i.e. unthoughtful) design choice, and it can be too restrictive to treat a tablet’s “window” (the screen) as an unchangeable printed page. But whatever limitations this approach brings, they’re not stopping the bulk of developers.

On the other hand–before you think I’m against the print metaphor–veering away from the print concept has its own dangers, especially if you don’t replace it with something just as simple and intuitive. If you create an interactive digital book that doesn’t look or act like a book, you have to take extra care to avoid ending up with a generic app that doesn’t feel like much of anything.

Below are a few examples of apps that reference the printed page with varying results, as well as one app that throws it out but fails to replace it with anything better. My point: it may seem too easy a solution, but abandon the print metaphor at your peril! (I’m setting aside the apps that successfully move beyond the print metaphor for a later post.)

“The Cat in the Hat” (Oceanhouse Media)

Let’s start with the acclaimed Dr. Seuss titles put out by Oceanhouse Media. These are widely considered the kings of the digital book category in the iOS marketplace, and rightly so, because they are sophisticated combinations of content, user interface, and programming. (Seriously, if you plan on developing digital childrens’ storybooks for touchscreen interfaces, invest in a couple of these apps and figure out how to copy them.)

“The Cat in the Hat” is packed with lots of little touches that don’t show themselves at first: in standard mode, if you touch the text the audio track kicks in, and it fades out if you lift your finger; if you touch an image from the famous illustrations, the related word is spoken aloud and that word pops up under your finger, expands, then fades (if the word is repeated in the text, then it turns red there too); and as the audio plays, the text is highlighted in a subtle dark red that stands out well but doesn’t distract or look too “digital” (a problem Disney suffers from in its Toy Story 2 book, in my opinion). Even if you turn off the read-long audio, there are subtle ambient sound effects–rain heard through the window, the ticking of a clock–to enhance the story without detracting from the reading experience.

When you touch an image, the word appears; it’s also spoken aloud and highlighted in the text.

Many pages use a pan-and-scan approach to create a sense of action without using animation.

What’s striking to me is that “The Cat in the Hat” is incredibly traditional in its presentation. In auto-play mode, it’s almost a virtual recreation of pointing a video camera at a printed version of the book, and slowly panning across pages as a talented voice actor reads the text. In self-guided mode, it captures the feeling of having that same voice actor sitting patiently next to you to help you along when you point your finger at a word or image.

“The Three Pigs” (StoryChimes)

By contrast, StoryChimes only keeps a couple of design elements from the print world for its retelling of the Three Little Pigs: page turn animations, and static, composed illustrations that could be at home on the pages of a printed book. Other than that, the presentation is closer to a slideshow than a book.

I wanted to think that StoryChimes deliberately avoided the print metaphor to try something more innovative, but one look at the control panel makes it clear that the company instead just approached the app like a software program. The result is that the control panel is confusing, or at least busy, and it doesn’t carry any intrinsic charm or humanity the way Oceanhouse’s interface does.

With transparencies and grayed-out areas, the user interface feels more like a CD-Rom app than a book.

The least book-like element of the design is that you can turn the text off entirely, which you will want to do after seeing how it’s displayed: in a scrolling, shallow text field overlaid on the bottom of the image. This is how we used to include optional closed-captioning on corporate marketing presentations at a company I worked at a few years ago. It’s a convenient solution from a developer perspective, because you can slot in any transcript and have it display in sync with the audio, but you lose everything valuable that comes from typography and layout. This is largely why I say that the effect is more like a slideshow than a book.

Reading isn’t fun after all.

To its credit, the app actually has more features than “The Cat in the Hat,” so it’s a shame that the overall effect is less satisfying. I suspect that even if you redesigned the interface, there would be aesthetic issues: it’s perhaps unfair to compare a classic to a contemporary lesser work, but the artwork, the voiceover, the soundtrack, and the text are all lower quality than what’s available in “The Cat in the Hat”.

But I can’t place all the credit/blame on the source material. In many ways Oceanhouse takes a “less is more” design approach, and the results are better. However, I also have to admit my personal aesthetic preferences are at work here, and which title you think works better may depend on how you think content should be presented to children. Oceanhouse Media chooses a more adultlike, sophisticated voice to narrate “The Cat in the Hat,” limits the palette to only a few colors, and does away with a distracting musical soundtrack. StoryChimes opts for a bright, full-color palette, a loud and hyperactive musical soundtrack, and the chirpiest narrator you can imagine. Which is better? Disney also uses an enthusiastic, strangely nuance-free narrator for its Toy Story 3 digital book, and I find it distracting there too.

“Toy Story 2″ (Disney Digital Books) and the Activity Book concept

Okay, I’ll leave poor StoryChimes alone now and look at a Disney offering. “Toy Story 2″ is about as polished an app as you can imagine, which is no surprise considering Disney’s deep pockets and financial commitment to maintaining its reputation for high quality content.

Ultimately, I don’t think the experience is as satisfying as “The Cat in the Hat” for reasons I mentioned above: the text highlighting feels machine-like, and the voiceover is (to my ears) grating.

I. AM. A. ROBOT. HIGHLIGHTING. YOUR. BOOK. FOR. YOU. BEEP.

But there’s no doubt that it’s a premium digital book app, and Disney also does something extra that the above two companies have avoided: it digitally recreates the activity/coloring book experience for a touchscreen interface.

At specific pages/screens in the digital book, the user can leave the story temporarily and jump to a coloring page or a simple game. Note however that the activities aren’t integrated completely into the narrative, but rather sit on a parallel path to the story proper.

(Left) Disney’s nav pane is only slightly better than StoryChimes’, but the design elements are warmer. (Right) I have mad coloring skillz.

Disney packages several activity modules into its digital book, but the app store is filled with one-off toys and interactive apps that could easily become parts of a larger work.

“Mooh” and “Five Spots”, examples of the hundreds of stand-alone activity apps that could easily be integrated into book apps.

“Five Spots” is a spot-the-difference game for kids, while “Mooh” is essentially an animal sounds soundboard app, where the buttons are resizable and can be moved around the screen for no good reason. (Note: both of these apps are produced by other companies, not Disney.)

They aren’t book apps, but I wanted to show them mainly to show that there’s a wide variety of activities that can be integrated into a digital book, ideally in ways more organic than Disney’s solution. In the case of the Mooh soundboard, I see the beginning of a way to include toys and games that enhance the story, so that the activities become integral to the experience and not just diversions. Certainly a barnyard-themed story could integrate soundboard functionality into its illustrations, thus giving the reader the chance to create his own ambient soundtrack while enjoying the story.

Instead of turning “pages,” a digital book could use simple, integrated puzzles or activities that unlock the next section of text: imagine finding a hidden key in an image, then dragging it to a locked chest to open the chest and see the next chapter; or dragging a character through a maze in order to get to the meadow in the middle of the forest, where the next scene takes place.

I could probably list another two dozen book apps that use the printed page metaphor and then augment it in different ways with interactive elements, but when it comes to interactivitity they’re more or less all alike: the interactive elements are a bonus, but they’re rarely crucial to the presentation–unlike for example the paper engineering of a pop-up book. In other words, the content is usually independent of the interactive aspect, and I suspect there’s a lot of room to innovate in bringing these two halves of the digital book experience closer together.

Tomorrow Friday - What happens when the interactive element is the content? What about when the interactive element highlights the lack of content–is interactivity enough on its own?