The experience of interactive eBooks should not be confined to animations based on touch-and-response interaction, or merely flipping the page; when designing these Books one must ask what is the enhanced experience—why to move from print to digital, and how to create value and fun.

Interactivity for the Sake of Interactivity

If a book app does not use interactivity in order to enhance the reading experience, it does not belong in the interactive eBook category. In the race to bring interactive books to market, some of the books have only featured very superficial interactivity—what I call “interactivity for the sake of interactivity”—where, for example, touching an image activates a simple animation such as making a butterfly fly, or a tree drop leaves to the ground. These interactive experiences do not add value to the story, and are therefore somewhat meaningless.
 
There are a few exceptions where this type of interactivity is actually a success. For example. one of the first books published as an interactive app for the iPad was Alice in Wonderland. This book was a phenomenal success though offered nothing but eye-candy interactivity. When the app was first published, the reviews called it “a reinvention of reading” that made clever use of the accelerometer to make Alice grow as big as a house or to throw tarts at the Queen of Hearts and watch them bounce. Although these activities through the 52 pages of the book are fun, I think they distract from the actual story. The reason this book was such a success is due its having been published when the iPad was fairly new, and touch interactivity was still an exciting experience.
 

 
 
Another book that was fairly successful at the time was The Pedlar Lady of Gushing Cross, which offers narrated animation with very basic interactivity, but was considered revolutionary when it came out because reading the story while seeing the animation unfold was definitely an enhanced experience to the young reader. However, this book did not offer any real value through interactivity, and might as well be classified as a short animated movie. The limited interactivity of seeing letters animate while you tilt the device was merely a gimmick, as you can see in the video below
 

 
 
Cozmo’s Day Off is an interactive eBook that was on the top-seller list for many months, and is packed with interactive elements that made it a great success. It contains over 100 unique audio and animated interactions. However, this app would be better characterized as a game for young kids and not as an interactive storybook because the story seems secondary to all the bells and whistles, and it’s written in style not intended for young audiences. But perhaps this is a case where interaction simply for the sake of interaction can be the whole point of a book.
 
The image below shows all of the hotspots that trigger an animation sequence for one page of the book:

 

Interaction for Value

It is possible for interactivity to go beyond the superficial, to add value to the book and create an experience that would be impossible in print. Here are a few examples of such cases.
 
Al Gore’s Our Choice is a great example of how meaningful interactivity creates an engaging and fun learning experience. With clever use of interactive infographics, animations, documentary videos, and images, this book is a great example of what the future has in store for digital publishing.
 

 
 
The Martha Stewart Cookies iPad app is a wonderful example of an interactive recipe book. Besides just offering great recipes, it also allows you to search recipes based on ingredients and cookie type to find the perfect cookie for your needs. For example, you might use the app’s search wheel (below) to look for bars and biscotti-type cookies with oatmeal as the main flavor component. This is a great added value because this type of interaction is unmatched in print.
 

 
 
Paris: DK Eyewitness is probably the most complete travel guide you can find for the iPad. It features beautiful cutaways of buildings that can be explored by tapping and zooming, complete offline maps for all the central districts of the city, interactive city and park walks with “hotspots,” and extensive listings of the best sights relative to your current location. No more searching aimlessly for your location on a map or looking through index pages; the interactive app shows what’s around you within walking distance, making the iPad a must-carry on in your travel bag for an experience unparalleled in a traditional travel guides.
 

 
 
Bobo Explores Light is an educational experience for young adults. It puts a fully functional science museum in the palm of your hand, teaching you about lasers, telescopes, lightning, reflection, bioluminescence, and sunlight. This is great example of using simple interactivity to explain relatively complex topics through science experiments that you can actually perform on your iPad. Bobo, a friendly robot, serves as a guide, taking the young reader through space, land, and sea, to learn all about the science of light.
 

 
 
In my book, Timor the Alligator, kids participate in the story by picking toothpaste and helping Timor brush his teeth. This story could not have been told in a printed book because, without the use of interactivity, young kids would not be able to visually understand that brushing actually helps keep a clean mouth. The simple process of choosing a toothbrush, adding toothpaste, and brushing Timor’s teeth until they turn white serves as an educational experience for preschoolers and toddlers reading the book.
 

 
 
With the Numberlys app, kids (and adults) learn about the alphabet through a series of fun interactive games. This book probably has the most spectacular visuals I’ve seen to date. Its aesthetic is inspired by Fritz Lang’s silent film, Metropolis, so the app offers a unique cinematic experience and gameplay to engage users to learn about the (fictitious) “origin of the alphabet.”
 

 
 
As you can see from these examples, interactive eBooks are no longer just about a touch-to-animate type of interactivity, nor simply the touch interface controls. Rather, they are about adding value through interactivity by using the full capabilities of a touch device to engage the user and enhance the learning and reading experience. These engaging experiences are what I call a true reinvention of reading.

I recently attended a conference about the upcoming Windows 8 user interface from a UX perspective. The meeting held at the Microsoft’s headquarters is part of the company’s effort to accelerate application design for this new platform.
 
The talk by Lior Yair, a senior UX Designer inspired me to think that the new Windows 8 Metro (design language) is really about content first, traditional navigation and the application shell is now visually obsolete.
 
The concept and the philosophy for “content first” is not new when it comes to interface design but Microsoft really braved this idea forward and did a great job doing so. Content is now king when designing applications for the Metro UI; allowing people to interact directly with what they want to see helps design better experiences.
 
Here is an example:

RSS Reader app. Before and After. The area in green marks the content area. In Windows 8 users will focus on content instead of trying to work around the navigation.
 
In the example above you can see the RSS Reader is stripped away from any navigational components and presented in a clean well structured environment relying on the actual content to also function as the main UI.
 
Additionally, the Windows Metro UI is specifically designed for Tablet and Personal Computers and offers advance thinking when it comes to these platforms. After seeing a demonstration of Windows 8, the iPad iOS feels now more than ever like an upgraded version of the iPhone iOS and not designed specifically for the larger screen. I say that with a great conviction because often I encounter UX blunders when using my iPad, for example the back button at the upper left corner is inconvenient to reach or even the simplest jump between two running applications takes extra clicks that the metro UI does not require. Furthermore, the new Windows UI offers a split screen view so you can run two applications at the same time with what they call “Snap View”.
 
Microsoft has created extensive documentation for developers and designers. I recommend reading more about this topic here: http://msdn.microsoft.com/en-us/library/windows/apps/

Designing Skype for Windows 8

I was motivated to investigate this topic even further, as a personal challenge I decided to brave and design Skype for Windows 8. I chose Skype because it’s a familiar program and hopefully people could relate to my design through their own experiences.
 

Login screen. An opportunity to let the Skype brand shine.
 
 

Skype for iPad. The green marker shows the content area within the iPad user interface.
 
 

My Design for the Home Screen. Focusing on recent conversations and easy access to the Contact List.
 
I felt that the content and substance of Skype is the Contact List. The people that you communicate with is the most important feature, and that’s why I created a home screen that allows you an easy overview of all your contacts and recent conversations.
 
 

Contact Page. An overview of recent communications.
 
 

Call Screen. Although the icons at the top right would be a perfect fit for the bottom App Bar I wanted to have a visual overview of the critical interactions on this page.
 
 

Windows 8 Snap View allows you to surf the web while having a conversation.
 
 
In conclusion
If you plan to design applications for windows 8 I recommend considering the following points:

• Content is king
• Think minimalist. Less is more.
• Metro is only framework and guidelines, it’s ok to think outside the box.
• Negative space is positive. Spacing is your friend. Keep a consistent space between elements and always align.
• Use typography to create structure and hierarchy
• Present only relevant content for each screen.

 
Persisting with the Metro design language Microsoft has quite possibly created a revolution in interaction design and I definitely commend them for that.
 
You can read more about the Metro design principles here:
http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/
 
UX at Microsoft from a designer point of view:
http://ux.artu.tv/?page_id=190
 
 
 

Kids are curious and eager to explore. They tend to touch everything they see on the screen and notice things adults sometimes miss. For example, they don’t experience banner blindness; for them, a banner is an exciting opportunity to learn what will happen if they touch the screen. Most interaction problems for young users occur when they are forced to navigate away from what they want to do because they unintentionally trigger an action they did not intend to. Banner ads, a swipe gesture, or even a simple menu button are sometimes causes for aggravation for the young user and the observing parent.

Kids explore an interface by touching almost aimlessly on the screen, trying to discover as much as they can. A banner ad or a Facebook “like” button may work for some applications, but when designing for kids we must realize that banners link to pages toddlers cannot return from, and pressing “like” takes them out of the app and into to a browser with the Facebook page.

A Childproof Navigational Interface

A similar usability problem happens when a young user inadvertently touches a menu button. For UX designers and developers, making it easy to access menu controls at any point in the app is a normal part of making easy-to-navigate interfaces; for inquisitive kids, however, a menu button visible on all screens can sometimes be a source for frustration.

When designing for toddlers and preschoolers I recommend creating a “childproof” navigation interface to prevent children accidentally brushing or touching the menu while using the application. The idea is simple: design menu access for the parent only. Just like a childproof safety cap for a medicine bottle or other devices made safe for young children, we create a menu system that is childproof.

For example, a childproof app might require that a menu button be tapped once to change its color, and then tapped again after a short interval to activate the menu. This short delay gives the child an opportunity to divert attention to something else on the screen. If the child presses once without any rewarding feedback, he is not likely to press again. Another example is a banner type graphic that you must “pull” (swipe down) in order to see a menu, or even basic linear navigation flow without a menu to allow a focus on the tasks at hand with no unwanted interruptions.

Here are a few interesting examples of apps designed with kids in mind:

Heydooda! The kitty says: Hello animal kids

–Tapping the home button in the lower left side will slide the button to the upper left side.

Bartleby’s Book of Buttons Vol. 2

–Dragging the red banner down activates the menu.

Roxie’s Doors

–Dragging the red arrow down displays menu options.

Nighty Night! HD

–Basic linear navigation with no menu access

Gestures for Young Kids

Sometimes a swipe gesture is used to flip the page in interactive storybooks, but for young children trying to interact with the story, flipping the page may not be what they’re trying to do. For an inquisitive child, a swipe is sometimes a clumsy press or an attempt to move things around the screen; “next” and “back” buttons to change a page would be more effective in this case especially when combining other interactive elements on the page. Generally, I recommend avoiding any sensitive triggers when designing for young kids.

A Present for Milo app is a good example of a confusing experience for children using the swipe for navigation. Although it’s a fun book to read, tapping the interactive elements on the screen sometimes flips the page unintentionally and distract from the story.

–Tapping the interactive elements on the screen unintentionally flips the page

Consider the Device

Accelerometers and young kids don’t go together. The tablet is an expensive device, so invoking accelerometer triggers as means to create interaction for kids should be avoided, as children don’t have a strong grip and tend to drop things. Shaking the device to erase a drawing or tilting a device up to play a game could be a cause for disaster.

Toy Story Read-Along

–Using the accelerometer could be dangerous.

Kids love playing together, so applications for kids should allow multi-touch for a more enjoyable experience. For example, a drawing app should allow painting with multiple fingers to allow two kids to draw at the same time. Allowing multi-touch will also make the interface more forgiving when a child is holding the device. If the child is touching the corner of the screen with one finger and tapping with another, he would be frustrated when nothing happens because the application only allows for one-finger touch. Luke Wroblewski writes about this in his article Touch-based App Design for Toddlers.

Toca Boca Birthday Party Playtime

–Toca Boca Birthday Party Playtime allows two participants to play at the same time.

Luke also writes about how interface elements sometimes intrude on the experience for young kids, replacing large, colorful buttons and appealing intuitive controls with a generic design that children cannot relate to. Here is an example:

Toy Story Read-Along

Toy Story Read-Along presents kids with options they don’t understand.

Hush Little Baby

–Hush Little Baby – a setup menu kids cannot use

The iPad’s five-finger pinch-to-terminate gesture, or the four-finger swipe are definitely causes of frustration for young users. Additionally, the iPad Home button and the Android Menu Bar are not childproof, as they are always visible and invite a curious touch. Apps for kids should allow a quick return to the application in case these buttons are pressed. For easy recovery, avoid displaying a logo splash screen and menu each time the application starts.

 
Below you will find some of our work for logo and brand development.
 

 

Our Design

Original Sub Page

Our Design

Enter the dream of John the fly, Louie the spider, Edgar the flea, Albert the cricket, firefly Joe, Cathy the beetle, Betty the ant, ladybug Berta, dragonfly Leo and Lucy bee.

Find out what bugs dream about in this interactive storybook for kids. Each page of the story allows children to color a funny bug’s dream and bring it to life; perfect as a bed-time story!

iTunes Interactive Storybook for iPad:
http://itunes.apple.com/app/what-do-bugs-dream-about/id455569315

See Video:
http://www.xgmedia.com/bugs/

 
For updates on our next Interactive eBooks please sign up with your email below or look for us on Facebook.
http://www.facebook.com/xgmedia
 
Our new Interactive Book for iPad Timor the Alligator – Brushing his Teeth is now available on the App Store:
http://itunes.apple.com/us/app/timor-the-alligator/id446126171
 
See the Video Demo here:
http://www.youtube.com/watch?v=H7ASZOZNd1U

“We decided to focus on the problems that parents are facing with younger kids” says Avi, author and designer of the book. “Studies show that most parents struggle with the daily routine of getting their kids to brush their teeth mainly because children fail to understand the importance of this task and therefore uncooperative.”

In this Book, Timor, a lovable alligator, enjoys playing all day and like any other good alligator, eats his broccoli for lunch. When it’s time for bed, Timor picks up a toothbrush, applies toothpaste and brushes his teeth for a perfect alligator smile. Developed for the iPad, kids take part interacting with the storyline and helping Timor brush, which makes the reading experience unique and enjoyable. Perfect as a bedtime story.

See iTunes Interactive eBook for iPad:
http://itunes.apple.com/us/app/timor-the-alligator/id446126171

 
See Video:

 

As advanced as magazines and comics are getting, they are still “just” an improved version of their paper equivalent, and some would still argue that the paper “feels” better, which I personally disagree with, except if I’m in direct sunlight. Interactive books bring things on the table that paper just can’t, like animated sequences, mini-games or even self-reading.
 
Right now, such content is mostly designed for kids because their visual learning ability is far greater than their reading abilities (which is sometime nil, hence the self-reading feature). Titles like Timor the Alligator or Food Fight are good examples of what the first generation of Interactive books can do.

 

 
 
Read Artical here:
http://www.ubergizmo.com/2011/06/tablets-content-next-level/