Key Websites for Processing
http://processing.org/
http://www.learningprocessing.com/
http://www.openprocessing.org/
Some Examples and Inspiration:
Below is piece created using processing and shape outines. The outlines of the shapes move and create 3D patterns with lots of texture and bright colours using differnt opacities. This piece could be developed into a great interactive piece that changes colour when the mouse is clicked or moves with the mouse.
Below is a non interactive tree that grows and from one stem and flowers. The part that really makes this for me is the fact that you can see the previously drawn trees slightly faded belind. This gives the image alot of depth.
This is an interactive piece that follows the direction of your mouse. If you click it resets the image. I think this is a basic looking interactive piece but iw works well with grey scale to show depth to the image. Could edit by adding different colours.
This is another interactive piece that i really like. You can make the hair move by passing the mouse overtop of the image or make it bounce by clicking on the image. I think this is a really fun little interaction.
Tuesday, 6 December 2011
Tuesday, 29 November 2011
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:
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
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.
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.
Friday, 18 November 2011
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:
Kids learn to:
Kids learn to:
(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.
Ages 4-5: learning pre-reading skills
Kids learn to:
- substitute words in rhyming patterns
- write some letters
- pronounce simple words
- develop vocabulary
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
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.
Tuesday, 15 November 2011
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/)
(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)
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.
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.
Monday, 7 November 2011
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
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.
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.
Starting Off Generic
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.
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
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?
(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
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.
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.
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?
- Make it work seamlessly in landscape and/or portrait mode
- Minimize full frame swipes, stay within the same frame as much as possible
- Try to reduce navigation to a left side bar in landscape mode and a pop over in portrait mode
- 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.
- 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.
- 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.
(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.
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.
Wednesday, 2 November 2011
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)
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:
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:
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:
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.
(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?
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
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.
Tuesday, 1 November 2011
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.
Monday, 31 October 2011
Aquapax advert (the comp I presented to the client)
Client Crit 19/10/11
This is not yet finished but i was in the middle of experimenting with small changes to my idea. I have film footage in this that is pixelated due to poor lighting conditions and some blurring of movement. Theses improvements will be made and the client crit will be analysed and changes will be made. I have learnt alot so far about film making because I have come across many problems that I have needed to solve such as the type of camera to use to film and the lighting needed for the film to look crisp.
Client Feedback:
Client liked the concept but gave me a few ideas to change parts of my piece.
Where the camera goes out of the bottle is to dark and it doesnt lead on to the next scene.
The whole out of the bottle needs to be white so it leads onto the white background behind the person drinking. (to dark looks more like a tunnel)
Lay water over the scene coming out of the box to show that the camera is going out through the water.
I need to use a younger model and have much less in the scene: so zoom in to see just the bottle with the hand around it and the lips.
(Cadburys flake advert - girl with volumised lips)
Could overlay layers of the ink in water to fill the scene (changing transparency)
Journey from inside can to outside
Could work well (particularly on smartphone context) with attention to aesthetic and keeping ‘on brand.’
Transition from inside to outside needs to be more subtle – more transparency of water layers could help this aswell as colour choices.
The model drinking water could be more abstracted, using blurs / depth of field, and tight framing of the face
Editing:
After proceeding to edit these improvement i started by refilming the part where the hand puts the lid back on the bottle. This part was not crips and the movement was streaky and grainy. I refilmed this several times but the movement was still of a poor quality and i could not work out why because i had tryed various lighting conditions and settings on the video camera. I then had to find a way to overcome this problem. From i previous project i learnt a technique of placing still photographs into a composition to create a video. To recap on this i watched this tutorial.
Green Screen
(Research From 15/10/11)
http://www.mediacollege.com/video/special-effects/green-screen/
I have started to produce some of my film work and it was suggested that I used a green screen so that I could edit out the background of the footage and add a much mroe interesting background such as the sun rays from the Aquapax bottle. I have never used a green screen before so I researched how to do it and what I needed.
http://www.greenscreenwizard.com/
Chroma Keying defined:
http://www.signvideo.com/chrom-ky-wks.htm
Luma Keying defined:
http://www.youtube.com/watch?v=mFmbE6readY
Luma keying wouldnt work for Aquapax because there is white within the bottle design.
http://www.youtube.com/watch?v=9XOaWuZEm80
Tutorial:
How to Chroma key in After Effects CS3
http://www.mediacollege.com/video/special-effects/green-screen/
I have started to produce some of my film work and it was suggested that I used a green screen so that I could edit out the background of the footage and add a much mroe interesting background such as the sun rays from the Aquapax bottle. I have never used a green screen before so I researched how to do it and what I needed.
http://www.greenscreenwizard.com/
Chroma Keying defined:
http://www.signvideo.com/chrom-ky-wks.htm
Luma Keying defined:
http://www.youtube.com/watch?v=mFmbE6readY
Luma keying wouldnt work for Aquapax because there is white within the bottle design.
http://www.youtube.com/watch?v=9XOaWuZEm80
Tutorial:
How to Chroma key in After Effects CS3
Wednesday, 12 October 2011
Water Movement Ink droplet
http://youtu.be/CJ-AX1G0SmY
Slow motion filming of ink being dropped into water - very clear and slow movement of water. Could experiment with coloured ink (blue to show Aquapax colours) or food colourings to see what creates the best effects with the water.
After seeing some examples of ink in water i started to experiment with this idea. Below are some of my experiments.
I started experimenting with Photography beacause this is my strength. I have captured some facinating shapes with the ink (food colouring) in the water. However i need to think about this idea carefully becasue otherwise it could look like i am indicating that the Aquapax water is blue or has additives in it!
I then went back and experiemented using film with just water droplets. But it is just not as effective as the Ink!
Looking down on the clear water you can see every detail of the bowl that contains the water aswell as any reflections from surrounding objects. This would need careful lighting to stop the reflections and make the water look clean and white. I feel this would also need showing down so much that you could only view one water droplet because it would need to be that slow. This would mean I would need an extremely good video camera and exellent lighting to make the water droplet bight and look clear. I think it is more aesthetically pleasing to watch the ink droplet transform into shapes than it is to watch one water droplet. I will experiment with the ink droplets further to see if my idea of reversing the footage would work to get the right concept for Aquapax.
Monday, 10 October 2011
Bottled Water Adverts
http://www.youtube.com/watch?v=5dCC7d8vCD0
Such a simple animation with a voiceover that sets the scene. Without the voiceover the advert would be nothing; but I am designing an advert that will be viewed on a smart phone and therefore sound will not always be clearly heard. Therefore i want to create a piece that is enhanced by sound but not dependant on it incase the advert is viewed in noisy suroundings.
http://www.youtube.com/watch?v=pMeVF1B5KjU
Simple use of colour - black and white footage with a hint of blue at the end of the piece to enhance the water theme. Doesn't really tell you anything about the product, it just shows that its bottled water!
http://www.youtube.com/watch?v=vuyRIcothMI
Evian water advert uses active babies to sell their product - indicates the product is safe for small children but does not inform anyone about the product. Advert designed to emphacise their selling point of live young.
http://www.youtube.com/watch?v=aNgkz0COMu4
Volvic advert shows that their water is filtered by volcanic rock to make it pure. The advert looks like it is aimed at children because the characters are unrealistic ad they use humerous character voices.
What makes a good Advert?
http://www.mrlweb.com/tips/goodad.html
http://www.practical-entrepreneurship.com/resources/advertising/089_what_makes_a_good_ad.pdf
Powerpoint on Making a good advert
http://docs.google.com/viewer?a=v&q=cache:hArPbD_ymPcJ:www.pua.edu.eg/Version2/Courses2/Tourism/Freshmen/Spring/GEN121/Lectures/Chapter%25202.ppt+what+makes+a+good+advertising&hl=en&gl=uk&pid=bl&srcid=ADGEESgXR8rxj6fu1p-dGSBzBJI5tvFA3MQ8-Pb_wrhvuDwj3kRcLDMQNUdiIfsMSpuuyHO5CM6jVwNbAybr8fFFFnCFiHqBScAQ-8Mme63rvB6T2McMY78wr1ZIbyXDPYpvECcYpZI9&sig=AHIEtbTUr7pHXkP0v6BWgzls-o0rn1EphA
Monday, 3 October 2011
Water!
http://youtu.be/gUW8GDVjhuA
I am looking at filming water dropping from a tap. I want to then edit this and slow it right down to see the energy within the water. This short clip shows that there is so much movement created by that one droplet of water. I want to show what is inside the Aquapax bottle because it is not see throught like a plastic bottle.
http://www.smashingmagazine.com/2008/09/25/38-photoshop-tutorials-on-rain-showers-and-water-drops/
Photoshop Tutorials on water movement and droplets
Experimentation using Photoshop to create water droplets and effects that I can then take into After Effects and create movement with.
Thursday, 29 September 2011
Research: Water Photography
For my initial ideas research I have looked at basic research around the key elements of Aquapax. Firstly I have looked at water photography and adverts using water.
http://www.digitalfieldguide.com/blog/861
Fantastic Photography of water droplets within natural surroundings. I love the way that the surroundings are captured inside the water droplet. This could be an ideal starting point for Aquapax because the water comes from the environment.
http://www.liquidsculpture.com/
Martin Waugh combines art and science to capture nature's infinite beauty.
Creating sculptures through liquids. Martin Waugh captures the movement of one water droplet and using really effective coloured lighting he highlights the movements of the water.
Ideas:
- film water droplet into clear bowl of water - represent water inside bottle.
- Coloured water - blue droplet.
- Show how pure water came from earth to be protected in bottle.
http://youtu.be/-Kkgh0We9Xg
Slow motion footage of water droplet hitting pool of water. Shows how such a small droplet creates such as huge movement - movement elegant, clear, clean, pure.
http://www.digitalfieldguide.com/blog/861
Fantastic Photography of water droplets within natural surroundings. I love the way that the surroundings are captured inside the water droplet. This could be an ideal starting point for Aquapax because the water comes from the environment.
http://www.liquidsculpture.com/
Martin Waugh combines art and science to capture nature's infinite beauty.
Creating sculptures through liquids. Martin Waugh captures the movement of one water droplet and using really effective coloured lighting he highlights the movements of the water.
Ideas:
- film water droplet into clear bowl of water - represent water inside bottle.
- Coloured water - blue droplet.
- Show how pure water came from earth to be protected in bottle.
http://youtu.be/-Kkgh0We9Xg
Slow motion footage of water droplet hitting pool of water. Shows how such a small droplet creates such as huge movement - movement elegant, clear, clean, pure.
Brief: Aquapax
Official website for the Aquapax carton water.
http://www.justdrinkingwater.com/
Distinct colour theme: Blue, white and silver.
Key themes:
health
fashion
nature
style
Aquapax natural still mineral water tastes amazingly fresh and pure, just as natural water should and won the 2008 QATRAH award as Best Bottled Water in the world. With a near perfect pH balance, it is low in minerals and ultra low in nitrates, making it even suitable for infants.
The Carton
http://www.tetrapak.com/Pages/default.aspx
Aquapax unique selling point is natural mineral water protected by a Tetrapak carton that keeps the water fresh and can be reused many times without and chemicals from the carton being released into the water; unlike a plastic bottle.
http://www.justdrinkingwater.com/
Distinct colour theme: Blue, white and silver.
Key themes:
health
fashion
nature
style
What is Aquapax?
At Just Drinking Water we produce Aquapax, one of the purest natural mineral waters on the planet. It’s packaged inside a beautiful 500ml carton that’s mostly made of wood, a natural and renewable resource.Aquapax natural still mineral water tastes amazingly fresh and pure, just as natural water should and won the 2008 QATRAH award as Best Bottled Water in the world. With a near perfect pH balance, it is low in minerals and ultra low in nitrates, making it even suitable for infants.
The Carton
http://www.tetrapak.com/Pages/default.aspx
Aquapax unique selling point is natural mineral water protected by a Tetrapak carton that keeps the water fresh and can be reused many times without and chemicals from the carton being released into the water; unlike a plastic bottle.
Subscribe to:
Posts (Atom)