Evaluation The Lost Bear Interactive Ipad App

Evaluation of Ipad project

For the Ipad project we were asked to design an interactive story app for the Ipad. After some extensive research I chose to do a child’s story app that would be based on an existing story; I needed to decide on a story that allowed development of the main character and had elements that would work well being interactive. My initial idea was to do a Postman Pat adventure because I felt these stories were crying out for interaction, but the character is so well established it would have been hard to do any character development. Looking back on this idea I could have easily used the basis of a Postman Pat story and changed it to a different character, such as a Milkman.  However I decided to use the Old Bear stories as a guideline for my idea and I started by reading some of the Old Bear adventure books. I then decided to develop my own bear character. To do this I took photos of an old bear that I had and used them as a layout guide to draw over in Illustrator. I am pleased with my bear character but I feel I could have added more texture to him to make him have more of a cute factor that would appeal more to children. I then went on to research my target audience and decided on an age group that my product would target – 4-7year olds, with the ability of under 4years to still enjoy my app with their parents.

After I had established a character I went on to designing some wireframes. I started by producing some rough wireframes that had a lot of text across them with all my thoughts and ideas for the interactive elements. I then reduced these down to simple wireframes with a key to show what each part of the frame was. From these I then started to do some mock-ups of storyboards using some photography and found imagery. These gave me a good idea of the look and feel of the piece I was producing. It also gave me chance to test the idea in the early stages of the design because I could show the layout of the app. I then decided on a technique to produce my storyboards and visualisation. I decided to do Rotoscoping, which is something I had never done before but always liked the idea of it. I started by researching this and then went on to photograph the movements I wanted so I could Rotoscope over the top of them in Illustrator. I am really pleased I persevered with this technique because although it was long and tedious it has been well worth it. I really like the style and once I had produced all the frames, I had the basic elements for both my storyboard and digital visualisation.

Overall I am very pleased with this project because I feel that I have improved my time keeping which has allowed me to produce some great work because it has not been a last minute rush. I had also done some good research before I started to develop my idea which meant I had a good knowledge of the Ipad and User centred design; this meant my design would appeal to my audience and they would be satisfied with my app. I feel the project has a unique style and will appeal to my target audience. I have produced a user friendly app that uses basic interactive elements that a child will enjoy using. I think that this has enhanced the Old Bear stories because it brings the child into the story because they have to make choices and they control how the story progresses through a game type interaction.

Final Ipad work

http://www.propelics.com/services/enterprise-ipad-app-development/

Visualization

The key to realizing the true benefit of the iPad is to understand the user experience through visualization. There are four distinct stages of defining and refining iPad interaction prior to the actual iPad app development effort. In the strategy phase, it is critical to understand the key roles, processes, and technology intersection points that create opportunities for iPad integration. This conceptualization exercise generates the high-level concept model that provides business and technical context, leading to the true opportunities to fully leverage the strengths of the iPad. The concept model will be decomposed into UI sketches then refined into wire-frame digital mockups. Prior to coding, the static mockups will be transformed into an interactive prototype to ensure the user experience can be fulfilled as outlined in the concept model. Each step of the visualization process provides a checkpoint where the user experience team can cost-effectively refine the proposed iPad apps prior to committing to actual developed code

Design

The design phase focuses on taking the conceptualized flow and the definition of the core functionality and translates it into a design specification for the iPad apps. The design phase has two tracks:

• Functional User Design: This user design consolidates the learnings, decisions, and artifacts created during the visualization process to provide a forum for approval prior to development. This design document also provides a clear baseline to reconcile any defects or issues during the development or testing phases. The detailed definitions of each field including; conditional behavior, mathematical calculations, business logic, default data values, automated workflow, and visibility features are documented to ensure minimal re-work for the technical development team. The user design also ensures that the plan conforms to the Apple iOS Human Interface Guidelines and provides the basis for creating the training, FAQ, and support documentation.

• Technical Design: The technical design focuses on defining all aspects of the technical components pertaining to the iPad application. This includes the details of the integration methods, the detailed messaging structures, data management, data privacy and caching methods, authentication, application performance, and other architecture decisions related to iPad application design. The foundational aspects and key decisions are locked down at this stage but some of the implementation details can be handled in the initial Agile sprints. A key consideration is the conformance to Apple’s standards and recommendations for iPad application design.

Crit Feedback

Crit Feedback for Ipad idea:




For the crit i had produced wireframes and nearly finished storyboards of my idea:
The Lost Bear- an adaption to the Old Bear stories.


Points made:
Think about how page will turn or whether it will just appear - arrows/swipe
Settings bar options - at top of page?
Ability for user to exit the app
Produce first screen - main screen (book cover)
Storyboard - Instructions for developer (for each frame/screen)
Colours for blind people
More 'child's' elements - colours - drawings - textures
loft needs to be brighter - more colour - white walls
Boxes brighter colours - not browns
Indicate which bowes can be tapped/touched
Try putting drawings or paintings on wall behind stairs.






Overall opinion was that I had done alot of work but it would pay off when i produce the visualisation because apart from the final text elements and motion the rest is all there.


COGAPP


Cogapp is a design agency that is based in Brighton; it has expanded from 7 to 35 people in the last 10years. The company has 15 tech people; no one specialises is just one programme.  They have produced several app designs such as a set of apps for the DK Europe Guides. These apps contain a huge amount of information that had to be ordered and visualised so that the user can find the the information easily. 
Cogapp also gave us a very useful talk about usability and user testing. They gave us a talk and demo about the different ways that testing can be carried out. They stated that usability is to create useful digital designs that have a purpose and meaning and user testing should be carried out throughout the designing and development stages of a project as well as testing the finished product.  This was extremely helpful and gave me lots of ideas for this project and future assignments. 
Overall the Cogapp visit was an extremely useful visit that was informative and helpful for my future work and this Ipad project. Cogapp have been very thoughtful and invited us down to help them with user testing because this will be beneficial for my work as well as helping out the company. 

Child Development Studies

(http://children.webmd.com/features/when-should-kids-learn-read-write-math)

Ages 4-5: learning pre-reading skills
Kids learn to:

• substitute words in rhyming patterns
• write some letters
• pronounce simple words
• develop vocabulary

Ages 6-10: learning to read
Kids learn to:

• read simple books by mid-first grade and know about 100 common words
• understand that letters represent sounds, which form words, by mid-first grade
• enjoy a variety of types of stories and talk about characters, settings and events
• remember the names and sounds of all letters and recognize upper- and lowercase by second grade
• read independently and fluently by third grade
• sound out unfamiliar words when reading

Ages 11-13: "reading to learn"
Kids learn to:

• read to learn about their hobbies and other interests and to study for school
• comprehend more fully what they've read
• read fiction, including chapter books, and nonfiction, including magazines and newspapers

(http://en.wikipedia.org/wiki/Child_development)

Child development refers to the biological and psychological and emotional changes that occur in human beings between birth and the end of adolescence then through adulthood, as the individual progresses from dependency to increasing autonomy. Because these developmental changes may be strongly influenced by genetic factors and events during prenatal life, genetics and prenatal development are usually included as part of the study of child development. Related terms include developmental psychology, referring to development throughout the lifespan, and pediatrics, the branch of medicine relating to the care of children. Developmental change may occur as a result of genetically-controlled processes known as maturation, or as a result of environmental factors and learning, but most commonly involves an interaction between the two. It may also occur as a result of human nature and our ability to learn from our environment. Human beings have a keen sense to adapt to their surroundings and this is what child development encompasses.

Designing for IOS devices

(http://www.hongkiat.com/blog/ios-development-guide-part1/)
(http://www.hongkiat.com/blog/ios-development-guide-part2-your-first-app/)

Developing Apps in Xcode

Below is a little bit about designing apps for development in Xcode which is the main apple development tool. I have experimented with this so that i no abit about the programme that i could potentially be producing my app in. This means that i have an understanding of what my ideas need to be like in order to work if developed with this software.

The developer tool for iOS and Mac OS X programming is named as Xcode. If you’re running OS X Lion you can find Xcode and all applicable packages for free in the Mac App Store.

After the installation is completed, launch the Xcode and its welcome screen should come up. From here you can load an older project or choose to make a new one. For now you need to click “Create a new Xcode project“, then the template window will come up with a few options. Under iOS > Application, click on “Single View Application” and hit “Next”. You can give the new app a name, such as Test (preferably no spaces), then on the Company Identifier, type in any word such as mycompany, and finally pick a directory and hit “Save”.
Xcode will build the file directory and send you into a new window for working. You should see a lot of file options listed, but the folder which is named after your application is the primary focus.
With the new Xcode 4.2 you have two options for designing front end elements. The classic xib/nib format is standard to Mac OS X and iOS apps, which requires you to design a new page view each time. However, as you are creating more views in a single app the amount of nib files can become far too overwhelming, so a new storyboard file holds all of your nib views in a single editor pane. From here you can remove and add UI elements and features with ease.
Additionally you’ll come across .h and .m files in the same folder group. These are short filenames for header and implementation code. These files are where you write all the Objective-C functions and variables required for your app to run. It may be a good idea to explain how Xcode works with MVC (Model, View, Controller), which is the reason that we need 2 files for each controller.

iOS and Wireframe Downloads
(http://www.hongkiat.com/blog/designing-for-mobile-devices/)

Childrens Ipad Apps

(http://www.ipadapps.org/kids-apps)

General Observations About Kids Apps

"There are lot of kids apps on the market already. In fact, there are so many, it takes some effort to find the best ones. There seems to be an endless amount of pair matching games and puzzles but not that many kids apps with original ideas. Most kids apps we’ve tested work pretty well with 3 year olds but there are some games types / mechanics that work better with older kids. I have noticed that slider puzzles, some spot the difference games, and tilting & shaking mechanics are a little too difficult for my daughter."

Some of the best kids apps:

Itsy Bitsy Spider
Kids Song Machine
Yahoo! Kids
Jack and the Beanstalk Children’s Interactive Storybook
Treat Street HiDef
Park Math HD
Animal Hide & Seek Adventure
ColorPlay HD – Kids Animated Coloring Book
My first puzzles : Aliens HD
Grimm’s Rapunzel – 3D Interactive Pop-up Book

The best elements in these kids apps:

Stand out artwork
Pop- ups
2D and 3D elements
vibrant graphics
cute character factor
good sounds
educational value
entertainment
games element
choosing elements for the story
exciting touchable elements
catchy music
sing along/read along
unique visual style

The Old Bear Stories



This is the Old Bear story that I have chosen to base my design around. I think that the character would allow a good character development because bears can come in several shapes and forms and i also have lots of ideas for interactive elements. I would also make the user a part of the story, so insted of Old Bears friends going to find him it would be the user that looks for the bear. This would then allow for development of more apps to go in a series of adventures after the bear is found.

Ideas Research

Kids apps range from:
0-4years where they play/interact with their parents - not really understanding but listening to noises and watching graphic elements.
5-8years This age group are learning to read, write, speak and will often be left alown to interact with the device.
9-12years More interactive elements, indepth gaming and educational values (puzzles)
(http://www.bestkidsapps.com/category/ages-0-4/)


(http://www.bbc.co.uk/cbeebies/stories/)
Cbeebies and Cbbc are two channels aimed directly to children. They involve learning programmes and adventure stories that are engaging for children. There is also a website that has short videos games and interactive puzzles for children to play.
Song time
Watch & listen
Play Games
Story time
Make & colour
On the website every choice (link) has the text spokenn when you hover or pass the mouse over the link. The stories have no words on the screen and everything is spoken but there is an option to print the story text. Everything on the website is bright big and colourfull and text elements are often backed up with a picture and sound.

(http://www.squidoo.com/kidlit_storybooks)
Story time is one of the most wonderful things about being a child. Whether it's fun and silly, with plenty of 'audience participation', or calm and relaxing, reading with someone you love is what makes books so precious.

When you read to a child, not only are you sharing something magical with them, but you are preparing them for all the learning they will do in their lives. Every time you sit down together with your favorite story, you encourage a love of reading - something that they will use forever.

Books are so much more than words and pictures. Each one has a message, as lesson that can help kids make good decisions and have high hopes. They are windows into other places, times and worlds, and can teach us many things.

Classic Storybooks

These stories have been around for generations, and are still best sellers and favorites in many families. These tried and true books will be around as long as parents pass on their love for great stories and enjoyable reading. Many of these classic books have lasted because kids have such a great time reading them. They're fun and exciting, and have beautiful and interesting illustrations.

(http://www.eastoftheweb.com/short-stories/childrenindex.html)

Short stories for children

User Interface Design

(http://webdesignledger.com/tips/getting-started-in-ios-user-interface-design)

Starting Off Generic

status bar

navigation bar

tabs/tab bar

sliders and switches

input fields

table lists

App Prototyping
Before opening Photoshop it can be handy to spend some time sketching out your idea first. This could be on a simple piece of paper or laid over an entire spread (wireframing). These are very basic templates (line drawings) of your idea. They show where main elements such as buttons, text, pictures and interactions will sit within the page. You can then go on to looking at the design elements and start to storyboard ideas. These will inform the developer of your intentions and what you want to happen with the design.

iCake wireframes

An app mission statement
Create personas
Wireframe

The above slides show how to produce wireframes and what content a wireframe should hold - no imagery just layout of the design.

User Experience Research

7 User Experience Lessons from the iPhone (Introducing UX)



User Experience:
Place better experiences above more features
Start with actual experiences
Solve the real problem
Play to think
Treat interfaces like conversations
Lead with a vision
Obsess on the details

Ipad Research

User Experience Guidelines
The user experience of iOS-based devices revolves around streamlined interaction with content that people care about. The guidelines in this chapter apply to apps that run on all iOS-based devices.

User experince elements to think about when designing:
Focus on the Primary Task - telling a story
Elevate the Content that People Care About - story - text and pictures
Think Top Down - the way people interact - from top down - focus point.
Give People a Logical Path to Follow- flow of story - pages
Make Usage Easy and Obvious - consistancy
Use User-Centric Terminology - easily understandable for audience
Minimize the Effort Required for User Input - one tap not two
Downplay File-Handling Operations
Enable Collaboration and Connectedness - personal, be apart of the app/story.
De-emphasize Settings - options for settings at start of app not half way through
Brand Appropriately
Make Search Quick and Rewarding
Entice and Inform with a Well-Written Description
Be Succinct
Use UI Elements Consistently - standard and consistency
Consider Adding Physicality and Realism - mimic real life events
Delight People with Stunning Graphics - imagery/pictures/videos.
Handle Orientation Changes- set app to one orientation otherwise file size is too big.
Make Targets Fingertip-Size
Use Subtle Animation to Communicate
Support Gestures Appropriately
Ask People to Save Only When Necessary
Make Modal Tasks Occasional and Simple
Start Instantly - once users no what they want they want it instantly.
Always Be Prepared to Stop - x exit app
Don’t Quit Programmatically - warning messages
If Necessary, Display a License Agreement or Disclaimer
For iPad: Enhance Interactivity (Don’t Just Add Features) - make the story benefit from interaction.
For iPad: Reduce Full-Screen Transitions
For iPad: Restrain Your Information Hierarchy
For iPad: Consider Using Popovers for Some Modal Tasks
For iPad: Migrate Toolbar Content to the Top
Designing for the Ipad - Rules and design constraints

(http://www.informationarchitects.jp/en/designing-for-ipad-reality-check/)

Typography: Is it nice to read?

Is the font big enough?
Is it too big?
Does it render well?
Is the Schriftbild (text impression) inviting or rejecting?
How does it feel to read?

SFX & UX: What about that phony 3D stuff?

1. Make it work seamlessly in landscape and/or portrait mode
2. Minimize full frame swipes, stay within the same frame as much as possible
3. Try to reduce navigation to a left side bar in landscape mode and a pop over in portrait mode

Interaction design: So what works?

1. The limited screen estate and the limited credit on the number of physical actions needed to complete one task (don’t make me swipe and touch too often), pushes the designer to create a dead simple information architecture and an elaborate an interaction design pattern with a minimal number of actions. This goes hand in hand with the economic rule of user interaction design: Minimize input, maximize output.
2. Since the smallest touch point for each operation is a circle of the size of a male index finger tip, we cannot cram thousands of features (or ads!) in the tight frame; we have to focus on the essential elements. Don’t waste screen estate and user attention on processing secondary functions.
3. We found that the iPad applications we designed, made it relatively easy to be translated back into websites. iPad could prove to be a wonderful blue print to design web sites and applications. If it works on the iPad, with a few tweaks, it will work on a laptop.

Useful design tips for your Ipad App

(http://www.smashingmagazine.com/2010/04/16/design-tips-for-your-ipad-app/)
(http://mattgemmell.com/2010/03/05/ipad-application-design/)
(http://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/MobileHIG.pdf)


- Design For People - Who Are Your People?
                               - What Is Your People’s Story?
- Page Flips Are Better Than Infinite Scroll

Use Modes to simplify UI

Modes, or modal interfaces, are where the user deals just with one particular area of a piece of software at a time. They see only the relevant controls and information for one particular task or type of work; an example would be iPhoto’s photo-editing interface, or the Ribbon in the recent versions of the Microsoft Office applications.
There’s been a history of modes getting some bad press on the desktop. The issue is that they trade stability (things always being in exactly the same place in the UI, and not changing) for simplicity (not having too many controls to look through at once). On the iPad, it’s clear where the winning side of the balance is: simplicity. Modes are completely appropriate on this device.
The challenge is in keeping our UI clear and uncluttered. Not only that, but our UI has to be actually usable with a finger - an incredibly imprecise, enormous, screen-hiding input device - rather than a pixel-perfect mouse pointer. Modes can help us keep plenty of space around. Move UI elements into modes, and/or position them contextually and temporarily - but just don’t go overboard with the number of modes.

• Modes are preferable to clutter.
• But removing a feature might be preferable to adding a mode for it.

The modal organisation of features is better than an all-at-once approach, but don’t let it become an excuse for feature creep. One of the primary rules of iPad app design must surely be that less is more.
Childs Story research:



My first idea was to do an interactive Postman Pat story becasue there are lots of opportunities for interaction such as reading the letters, opening doors, picking the parcel; But the character is so well  developed that it would be hard to do any character development without changing the storyline.



My next idea was to produce a new Mr Men character. There are very simple looking characters so character development would not be a problem but i would be limited on the interaction that i could produce for a story like this.



I then had an idea to produce an interactive nursery rhyme because it could have sing along settings and interactions or choices as to which drain pipe the spider went up. But after more research I found that Insy Winsy Spider had already been produced as an app.

Brief 2 Ipad Story App

Before I begin to develop ideas for this brief i need to no the basics of what i am designing. I will study User Experience and User Centered Design so that the product i design is appealing to the right audience and aesthetically pleasing.

(http://developer.apple.com/library/IOS/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html)

Great App Design Begins with Some Clear Definitions

When you’re starting with an idea for an app, it’s crucial to decide precisely which features you intend to deliver, and to whom. After you’ve determined this, you need to make sure you tailor the look and feel of your app to the device it runs on and to the task it enables.
If you’re bringing existing software to iOS, you face many of the same challenges. As you redesign your existing software for iOS, it can help to learn about some of the design decisions that informed other successful interdevice transitions, such as those for Mail and Keynote.

Human Interface Principles
A great user interface follows human interface design principles that are based on the way people—users—think and work, not on the capabilities of the device. A user interface that is unattractive, convoluted, or illogical can make even a great application seem like a chore to use. But a beautiful, intuitive, compelling user interface enhances an application’s functionality and inspires a positive emotional attachment in users.

Aesthetic Integrity
How well the appearance of an app integrates with its function. Using standard ipad controls: tap, double tap, scroll, tilt, pinch, shake, means that users are more likely to know what they are meant to do when it comes to using a new app. Imagery that is simple or that backs up the story and works with the ipad layout will also enhance user experience.

Consistency
An application that takes advantage of the standards and paradigms people are comfortable with and uses them within a design. Keeping a consistant design throughout the app and an overall design that is unique but still inkeeping with other app designs will give users a good app experience.

Below are the questions i need to be asking myself when i am designing my app:

Is the application consistent with iOS standards?

Does it use system-provided controls, views, and icons correctly?

Does it incorporate device features in a reliable way?

Is the application consistent within itself?

Does text use uniform terminology and style?

Do the same icons always mean the same thing?

Can people predict what will happen when they perform the same action in different places? Do custom UI elements look and behave the same throughout the app?

Within reason, is the application consistent with its earlier versions?

Have the terms and meanings remained the same?

Are the fundamental concepts essentially unchanged?

Direct Manipulation
The touch screen allows people to directly manipulate objects rather than use buttons or controls; this allows the user to be more engaged with the task, giving users a bigger sense of control.
Experiences:

Rotate or otherwise move the device to affect onscreen objects

Use gestures to manipulate onscreen objects

Can see that their actions have immediate, visible results.

Feedback
when a user taps or interacts with the device they expect some sort of feedback to indicate that processing is occuring. With an Ipad users want immediate feedback or an indication that what they have demanded is going to happen - processing. If an app takes a few seconds to load it is a good idea to have a loading screen or a counter to show that the process is happening rather than the user thinking the device has not reacted to their interaction. Good indicators can be a slight glow if something interactive is tapped, an immediate reation to user interaction or if the device is not working a message that will inform the user about what is happening. Ipad apps should never leave the user waiting for something to happen, they should always know or have expectations of what will happen if they interact in a certain way.

Metaphors
When a devise mimics the actions of everyday life. For example to turn a page in a book you grab the corner and pull it across the previous page; This can be simulated on an Ipad.
iOS provides great scope for metaphors because it supports rich graphical images and gestures. People physically interact with realistic onscreen objects, in many cases operating them as if they were real-world objects. Metaphors in iOS include:

• Tapping Music playback controls
• Dragging, flicking, or swiping objects in a game
• Sliding On/Off switches
• Flicking through pages of photos
• Spinning picker wheels to make choices

In general, metaphors work best when they’re not stretched too far. For example, the usability of software folders would decrease if they had to be organized into a virtual filing cabinet.

User Control
People like to feel like they are in control so people need to feel like they are in control of an application when they interact with it. Users feel more in control of an app when behaviors and controls are familiar and predictable. And, when actions are simple and straightforward, users can easily understand and remember them. Being able to exit an app or cancel an interaction are controls that users like to have.

Final Aquapax Advert

Evaluation of piece:

I feel that overall I have chosen the right idea for this Aquapax brief and I have executed it to the best of my ability. I started this project with a fantastic idea that had a huge potential but when i discussed this with the client he told me that it would be great but it would need a huge film crew to pull off the idea. I was not happy with what he had said and once I had discussed with my tutor I felt I needed to experiment with the idea and go out and film in the setting I wanted to see what the quality of the footage was like. Once I had done this filming I found that the client was right and that even if the surroundings were perfect I would need alot of help to get the footage right. Therefore I looked into adapting my idea and i went back and looked at my initial ideas to see if i could combine them.

When i presented to the client I had a half finished piece and it made me realise how hard it is to film a brilliant quality piece; there are so many factors that influence the footage. I presented my piece to the client and he was pleased I had chosen a simpler idea.

The feedback I have had from the client has always been positive aswell as critical. He helped me to secure a good idea that was adaptable to my skills and the time scale of the project. I feel that my time keeping has not been my best for this project because i would have liked to have my idea more towards a finished state when we had the crit with the client. I also feel i should have got the motion piece to a finished state earlier so that is was less of a rush to prefect the last few bits.

I have tested my piece with the client and i have also showed it to a variety of people from the clients target audience. This has made sure that my finished piece attracts the right target audience and I was also give a few amendment ideas to do before submission. 

Overall i am please with the final piece and it has been a huge learning curve for me into the world of film and motion graphics; an area before i had not been so familiar with.