Wireframes

Here are the basic wireframe layouts for my proposed story app.

Flow Diagram

Here is the simple linear flow diagram that represents the navigational structure in my story app, from the title page you can move forward to the first page, from there you can move forward and backward throughout the app, when you reach the last page, you are taken back to the title page to start again.

Script

Script

Text on page, Description of page, Interactivity, Navigation

Whatever - William Bee

This is Billy

Page with drawing of Billy

When you click Billy he shrugs

Slide to change page 

And this is Billy’s Dad

Drawing of Billy and his Dad

When you click Billy he shrugs, when Billy’s dad is clicked he waves

Slide to change page backwards or forwards

Billy can be very difficult to please

Drawing of Billy and his Dad surrounded by presents

When Billy is clicked he continues to shrug, when Billy’s dad is clicked he sighs

Slide to change page backwards or forwards

Show him something very tall

Drawing of Billy and his Dad looking at a giraffe

Slide up to reveal more of giraffe, this automatically slides back down when fingers are taken off screen

Slide to change page backwards or forwards

And he’ll say Whatever

Drawing of Billy and his Dad next to giraffe

When you click Billy he says “whatever”

Slide to change page backwards or forwards

Show him something very small 

Drawing of Billy and his Dad, Billy’s dad is holding a mouse

Click on the magnifying glass to zoom in on any part of the image, use this to see the mouse closer

Slide to change page backwards or forwards

And he’ll say Whatever

Drawing of Billy and his Dad, Billy’s dad holding a mouse in hands

When you click Billy he says “whatever”

Slide to change page backwards or forwards

Play him a tune on the world’s funkiest trumpet

Drawing of a trumpet

When you press the buttons on the trumpet, it will play the notes

Slide to change page backwards or forwards

And he’ll say Whatever

Drawing of Billy and his Dad on stage, Billy’s dad holding the trumpet

When you click Billy he says “whatever”

Slide to change page backwards or forwards

Bounce him off the bounciest castle 

Drawing of Billy and his Dad on bouncy castle

When you click Billy or his Dad they jump up and down on the castle

Slide to change page backwards or forwards

And he’ll say Whatever

Drawing of Billy and his Dad, Billy’s dad is on bouncy castle in background

When you click Billy he says “whatever”

Slide to change page backwards or forwards

Take him for a ride on the world’s smokiest train

Drawing of Billy and his Dad on a steam train

When you click the train horn sounds and smoke comes out and floats across screen

Slide to change page backwards or forwards

And he’ll say Whatever

Drawing of Billy and his Dad on the steam train

When you click Billy he says “whatever”

Slide to change page backwards or forwards

Fly him to the moon and back

Drawing of Billy and his Dad in a rocket flying to the moon

The rocket can be dragged around in space 

Slide to change page backwards or forwards

And he’ll say Whatever

Drawing of Billy and his Dad in a rocket

When you click Billy he says “whatever”

Slide to change page backwards or forwards

And when you try and scare him with the world’s hungriest tiger

Drawing of Billy and his Dad in a pen with a tiger

When you click the tiger it roars

Slide to change page backwards or forwards

he’ll say Whatever

Drawing of Billy and his Dad in pen with tiger- Billy is closer to tiger

When you click Billy he says “whatever”

Slide to change page backwards or forwards

(Tiger eats Billy)

Drawing of Billy getting eaten by the tiger

You can move Billy in and out of the tigers mouth

Slide to change page backwards or forwards

“Dad! I’m still in here you know...”

Drawing of Billy’s Dad walking tiger, speech bubble coming out of tigers belly

When you click tiger, he burps

Slide to change page backwards or forwards

(Billy’s Dad) “Whatever”

Drawing of Billy’s dad walking the tiger, speech bubble from Dad saying “WHATEVER”

When you click Billy’s Dad he says “whatever” like Billy

Slide to change page backwards, slide forward to go back to cover of app

Three Little Pigs App

After establishing the target audience for my narrative app, I decided to take a further look at some current apps that are on the Ipad market. The most effective by far was this three little pigs app.

When you first open the app you find this title page which introduces the three main characters and gives you three options, the first is auto play which has come up in a few other examples, where you simply press it and the content will play through like an animation rather than an interactive book. The next two options of read it myself or read it to me are extremely common in these types of books, these give the viewer a chance to read the book themselves or have a voice over read it to them, getting rid of any restrictions on reading ability, I will definitely be carry this idea into my book so that the user can have the option to read it without the help of their parents. 

The navigation throughout the app is very simple, you have the left and right arrows at the bottom of the page which more the user through the story. The button in the top right hand corner opens out when clicked to reveal options for the user to play mini games that are separate from the main storyline.

What is really good about this app is that most of the content is interactive, so the user can freely click around the screen to find hidden animations and sounds. Each text box is in the top left hand corner which is where apple specified is the most viewed part of the screen, this is an idea I will also carry through to my design, with each text box come a series of options, one of these options is to press play and have the text spoken to you even if you have chosen to have the read alone mode on, this is a nice idea but the icons are distracting and sometimes cover part of the image you want to see, I want to have this feature on my app but I will need to look at ways around where to put it. 

WHATEVER!

The story that I have chosen to do for my interactive narrative app is called "Whatever" by William Bee.
This story was published in 2006 and is a short story about a boy named Billy. In the book Billy is stubborn and hard to please, his dad tries to impress him with tall, small, funky and bouncy things and even flies him into outer space but Billy simply replies with "Whatever" each time. Billy's dad tries hard throughout the book to get some interest from his son but nothing works. In the end Billy's dad shows him the worlds hungriest tiger who has also had enough of Billy's attitude so when Billy says whatever, the tiger eats him whole. A speech bubble from the tigers belly reads "Im still in here you know" and Billy's dad simply relies "whatever". The target audience for this book is young children aged between 4 and 8 as it has a potentially upsetting ending with Billy being eaten.

This funny kids story is perfect for making interactive as the user will be able to connect more with how much of an effort Billy's dad is making to impress him. In the book the items Billy is shown look nice, but the user can not get involved with them to understand how truly impressive they are, my app will give the user a chance to play with the objets in the story which will make the whole thing come alive and will be much more engaging for the younger audience, along with this, the app will give the user the option of read along, this feature will read the story and highlight the words so even young children who struggle reading alone can enjoy the story and the interactive features.

Narrative Apps

To get a clear idea of what does and does not work well in an interactive story app, I downloaded some onto my Ipad and tried them out. Here are a few of them that I have analysed further.

Goodnight Safari

This is an interactive narrative app about animals that could be found on safari, the reader is first met by a title page which gives them options of "pick a page" "read to me" and "read alone" along with "new games" and the option to turn the sound on or off. As the structure to the book is linear Im unsure about the need for the pick a page button as this is only useful if the story is very long or if the user does not have the ability to move onto the next page without the whole animation being played which can be frustrating and make the user feel the app is slow. The other options on this page about reading alone or being read to are very effective as having the choice of a voice over is essential especially for this age range.

As you can see from the pictures above the text is in a hand drawn style which stands out well against the background, however if any of the backgrounds were to be lighter than this one, the text may become hard to read. I feel it would have been safer to have a background on the text or place it in a box to make sure it is clearly visible all of the time. This app does not let the user move onto another page without completing the entire task, this makes the pace of the app feel very slow, and almost boring. I think the app would have benefitted from letting its users choose which parts to do rather than put in a restriction. However, the button that does come up to show the user that section is finished is good as it makes the viewer aware they have more missed anything important on the page. This app overall looks very appealing but the restrictions put in by the inability to move through the app freely are a real down point, making the app frustrating and boring to play with. 

Timmy Tickle

Timmy Tickle is an app for parents to share with their toddlers, when you first open the app you are greeted by Timmy, the orange octopus who is brightly coloured and does not sit still for very long which is great for holding a young ones attention.

When you click on the "play" button on the first screen you are then taken to this one, this menu page gives the options for the parents to choose from, here they can select autoplay which will simply play all of the animations through with sound to let the child enjoy effortlessly. The next option is sound, this option will play the animations when it hears noise encouraging the child to interact with the app even if they can not yet speak. The final option on this page is voice, this option allows the parents to record their own voice so the child recognises it and interacts more with the app. All of these options are very useful and have opened the app up to cater for a wider audience than if it was  a simple book and this is what is important when making an interactive narrative app, it needs to be more beneficial that buying a book, otherwise it is pointless to own.

Above you can see the last bit of navigation in this app, in the top right hand corner, there is a home icon. When the icon is clicked you are faced with the sentence "hold for menu" as you hold the button down, you are then taken back to the home page. This is a very cleaver feature for the app to have as the chances of a small child or toddler bashing and tapping all over the screen are high and if the app simply let touch take you back to the menu the parents would be forever having to reselect options to get back to this point. Overall this app is very simple and clean but it is very well thought out and through decluttering the navigation, the result is a very parent and child friendly app which is more effective than its book counterpart. 

Ipad Story App

This years first brief is to design an interactive story/narrative for the iPad. We have been tasked with taking an existing story be it fiction or non-fiction, and make it interactive.

On the list of requirements we have:

• Wireframes
• Flow diagrams
• Storyboards with useful details for the developer
• Create a dynamic visualisation to show how the app would work- demonstrate this with animated content

The brief has also stated that research into Apple's rules on app design and content as well as looking into usability and user testing is essential and should take place early in the design process.  

Deadlines:

• 24th October - Deadline for Storyboards
• 27th November - Crit 
• 2nd Dec - Final Deadline

Designing for IOS

As this project has specified that the app is for Ipad, I have taken a look at Apple's support page on designing for IOS 7. There are some key points which I will take into consideration when moving forward with this project. 

Position- Apple have shown this image in their support page suggesting that the top left hand side of the screen is the most important, because of this, I will try and work my design around having my text in the top left hand corner as the narrative is the key to this project and I want to make sure it is not missed by the user. 

In the above image you can see that Apple have also noted that having a start or a splash page is not recommended unless necessary. They have said that a customer will spend no more than a minute or two evaluating a new app, a start up screen can put a user off as they will feel the app is slow, it is much better to let them just straight in and use the content. Although I agree with this idea, I feel that with a story, it is key to start with a cover page or a title page, I feel that to get a good balance of the two ideas, it would be best to have some usable content on the title page, such as settings and help, so that the page is not wasted with the user having to feel like they are waiting. 

The font section of the Apple's support page has suggested that apps should have a consistent font throughout like the image on the above left, rather than a mix of different font faces and weights as shown on the right. It has also said that the font should not be bold or light weight and should be a minimum for 22 points. These are all things that I will take forward into my design, making sure that I stick to regular weight font that will be suitable to be used throughout the entire app. 

Another key point that Apple have made in this document is about button size, as the Ipad is touch controlled, the buttons will need to be large enough to stop the user clicking another by accident causing frustration and possible loss of interest in the app. Apple have suggested that buttons should be a minimum of 44x44 points in size. This part of the design is key, any navigation on my app will need to be clear and easy to use, I will make sure than any buttons or objects that need to be clicked are a good size and also distance away from any other buttons to prevent the user discarding the app. 

Ipad considerations

Below you can see a chart that shows the name of the devise, the size, dimensions and the common problems each one has. These are very important things to think about before heading into designing an app. Making sure that all of my graphics and elements are the right shape and size for the Ipad is key along with making sure I do not ask the user to do something the Ipad has problems doing. Having confirmed the resolutions and seeing that there are no common faults that should hinder an interactive narrative app, I can now move forward to think about what sort of story I would like to use for this project.