Fun games

This in an Internet game called Curve Fever

It can be found here http://curvefever.com/ 

It il a multi player game where other people can play against each other online. It is simple yet fun. The game involves the player to move about collecting different power ups which either effect you or the other players. the aim is to avoid crashing into other player and be the last one standing. points are given to to best players.

This in an Internet game called Ice Temple

It can be found here http://www.miniclip.com/games/ice-temple/en/

This game allows the player to control 2 different characters with the arrow keys and W,A,S,D keys.
one character is made of fire and can only go in the fire pits, he will die if he touches water.
the other character is made of water and can only go in water, she will die if she touches fire.
they have to help each other out by pulling  levers to help each other out to collect diamonds and get to the checkpoints. It is simple yet addictive.

This in an Internet game called Snow Line

It can be found here http://www.miniclip.com/games/snow-line/en/

This game involves the player having to draw a line with a pencil to create a path for Santa  The path needs to be in  the right place to enable Santa to collect the presents and get to the checkpoint. If the path is drawn wrong then Santa will stop moving or fall over. This game makes it quick and easy to retry if the line is drawn wrong. it evolves problem solving skills and slight accuracy with drawing the path.

---

What makes a game fun?

• Make it easy to replay
• Simple controls
• Make it challenging, so the player wants to continue
• But not too challenging, so they don't want to give up
• Good looking illustrations 
• Sound effects 

Computer and videogames are potentially the most engaging pastime in the history of 

mankind.  This is due, in my view, to a combination of twelve elements: 

1. Games are a form of fun.  That gives us enjoyment and pleasure.

2. Games are form of play.  That gives us intense and passionate involvement.

3. Games have rules.  That gives us structure.

4. Games have goals. That gives us motivation.

5. Games are interactive.  That gives us doing.

6. Games are adaptive.  That gives us flow.

7. Games have outcomes and feedback. That gives us learning. 

8. Games have win states.  That gives us ego gratification.

9. Games have conflict/competition/challenge/opposition. That gives us 

adrenaline.

10. Games have problem solving.  That sparks our creativity.

11. Games have interaction.  That gives us social groups.

12. Games have representation and story.  That gives us emotion. (Prensky, M 2001)

Microsoft’s Encarta World English Dictionary (2000) defines “fun” as

1. amusement: a time or feeling of enjoyment or amusement Just for fun, we wore silly 

hats.  

2. something amusing: something such as an activity that provides enjoyment or 

amusement Skiing is fun for the whole family.  

3. mockery: playful joking, often at the expense of another What's said in fun can still 

hurt.  (Prensky, M 2001)

These state what makes a game fun

1. Rules 

2. Goals and Objectives 

3. Outcomes & Feedback 

4. Conflict/Competition/Challenge/Opposition  

5. Interaction, and 

6. Representation or Story.   (Prensky, M 2001)

Prensky, M. (2001). Fun, Play and Games: What Makes Games Engaging. In: Hill, M Digital Game-Based Learning . MN: Paragon House Publishers. p05-1-05-31.

Homework

These eyes were created using the mapping function. the eyes X and Y are controlled by the mouse X and mouse Y. The mapping creates an offset so for example when the mouse is at x 0 the eyes position will be at x 200. when the mouse x is at x 600 the eyes will be at x 400. It creates boundaries that the eyes position stay inside. 

This doesn't seem to work embedded on the blog. if you click on the link, you can view it in open processing  this was created using the same method as the example above. the only difference is I have replaced the ellipses with images to give it a better look and feel.


This example doesn't seem to work properly either. Embedding it doesn't seem to find the images. this uses an combination of the mapping function. particle arrays and a mouse over with a mouse pressed function.

Tutorials in class

These are all the tutorials that Seb demonstrated with us during class. with all these tutorials I know all the basics to coding with processing.

This is using a simple function which adds 1 to the x any y position on every frame drawn. this causes the rectangle to move down the page diagonally. once it reaches the the bottom corner an if statement is used to reposition the x and y back to 0.

This uses and if statement which makes the ellipse show on mouse pressed. the position for x and y is controlled by the mouse position. because the background colour is inside the setup function it only draws the background once. this gives the affect of lots of ellipses being drawn.

This uses a combination of a class and an array. the class holds all the properties of the rectangle ( x and y position, width and height). the array list is then used to call up the rectangle class and draw it in different x positions 3 times. A Boolean statement is then used to define whether the mouse is inside the rectangle width and height.  if true the colour will change, if false it will stay as it is.


These particles are drawn with an array. the particle size are generated at random sizes between 0 and 2. velocity is applied to the x and y positions to make the particles move. the velocity is generated at random speeds too to make them look more natural. An array is cycled through generating a new particle every frame. there is a maximum number of particles generated before they are deleted, this stops processing slowing down from to much data. the maximum amount for these particles is 5000.


This example is using a for loop to create an ellipse through a range of HSB (hue, saturation, brightness) colours. It uses the map function to cause the ellipses to increase in size when the mouse rolls over them. we use 'dist' (distance) to work out how far away the mouse is away from each ellipse.


This is using a class to contain the data for the particles. It has gravity, fade and shrink added to it. Gravity causes's the particles to float up, fade causes the opacity to fade out and shrink causes them to get smaller in size. the particles class is called up with an array which counts through all the particles to draw them and apply the effects to every particle.


This is using the same particle technique as about but with the x and y positions controlled by the mouse position. It is them activated by the mouse press. With the properties tweaked it gives the affect of an explosion.


This is using float variables to hold the properties of the shape. It adds  the grow property to the width and height to make it get larger on every frame. it uses a counter to keep it between  0 and 600.


This is using the float variables to store the properties in.  an if statement is used to choose between red and blue. the if statement say it the rectangle reaches a set size then shrink. then when it reaches the next set size, grow.


This is using an array to draw out the rectangles with a different x position each time. it then uses the if statement to cycle through the array and decide whether the mouse is inside or outside each rectangle. if the mouse is inside the width and height of the current rectangle then the set colour will change.


This is using easing by multiplying the speed by a percent. this means that when the speed reaches the mouse position it will slow down by a little bit each time it passes. this will happen until the number reaches zero then the trail will end.


This uses an if statement with else if. it detects whether the mouse position is in the top corner then if its not it cycles through each corner to find where the mouse is. depending on which corner the mouse is in the colour of the rectangle will change.


This i an example of a basic pong game. it is using float variables to hold the properties for the ball. The speed is added onto the position in both x and y to make it move around the screen. An if statement is then used to make the ball bounce back in the opposite direction if it hit the edge of the screen. this is done by saying if the ball position plus the radius is equal to width or height, -speed away from position.
the bat it just a rectangle with the x and y position added to the mouse x and y. An if statement is then used to   to find whether the ball is inside the width and height of the bat. if it is bounce off, if not it will go outside the edge of the screen.

Learning the Basics

This was the first lesson with processing. It was a good introduction to get familiar with drawing the basic shapes. I learnt how to set-up the page with size dimensions then started creating within the draw function. 

This example was to introduce colour with opacity. it uses RGB followed by opacity eg. 

fill(255,0,0,200);

this Exercise was toget tha hang of drawing the basic shapes with:
rect();
ellipse();
line();

This was a good exercise to get used to the grid system of x and y. I planned my image out on graph paper first before applying it into processing. I used a combination of lines, rectangles, ellipses and bezier curves

PixelPhones

After looking at Seb's work I got a better understanding of what could be done with processing. These examples involved the user to  be interactive with the work. I feel like I will start to understand processing more thought once I start having ago at it myself.

http://seb.ly/work/pixelphones/

PixelPhones is an open-source platform that can turn smart phones into individual pixels of a massive audience-sized display.

Lunar Trails

http://seb.ly/work/lunar-trails/

PixelPyros -Digital fireworks 

http://seb.ly/work/pixelpyros-digital-interactive-fireworks/

http://areweinthefutureyet.com/

Here is an example of processing using a screen  shot from back to the future. It uses processing to generate the current date and time to the viewer.

The start of processing Module

To get started with processing I have looked at what it is and what is possible with this coding language. here is a brief write up of what processing is.

"Processing is an open source programming language and environment for people who want to create images, animations, and interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing also has evolved into a tool for generating finished professional work. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production." Fry (2012).

Before this module I did not know what processing was. I have looked at examples of what can be achieved with processing top get a better understanding of it. Here are some examples of peoples work created with processing.

City Symphonies

A traffic simulation is used to power the movement of vehicles through different sections of road networks in London. From a street level perspective the motions of traffic combine the sounds to create sound scapes that are unique to the place and time. The roadside becomes a new context for sound – the city is the score. McKeague. (2012)

Solar, with lyrics

Solar, with lyrics. from flight404 on Vimeo.

Weird Fishes: Arpeggi

Weird Fishes: Arpeggi from flight404 on Vimeo.

Magenetic ink, test render 01

Magnetic Ink, test render 01 from flight404 on Vimeo.

Flint ball

Flint ball from flight404 on Vimeo.

Memo Akten - Ameoba Dance

All these examples are very inspiring to what can be achieved with processing. I do find them far to complex to get a vision of what I might be able to achieve though. All these examples look like it would take years of practice to get this good. I need to see some basic examples to get a better understanding of the concept.




Fry, B and Reas, C. (2012). Processing. Available: http://processing.org/. Last accessed 9th Dec 2012.

McKeague. (2012). City Symphonies. Available: http://markmckeague.com/work/city-symphonies/. Last accessed 9th Dec 2012.

User Test

I have done a user test on my app with my 2 year old niece. I have submitted this with all my other files. The user test was done using  the still jpeg images of  the story board. this was very difficult to do because Freya got fed up pretty quickly. because nothing would happen when she pressed the screen, she had no incentive to carry on doing it. This shows that the content needs to be rich with interactive elements.  

From what she did press it proved that she was capable of pressing the right objects when asked to do so.

Looking at iPad app advertising

I have looked at different was of advertising iPad apps. This is to help me generate ideas for displaying my dynamic visualisation. I want to show mine mounted inside the ipad to make it look more realistic. I'm planning on green screening a hand to show the interactive parts of the app.

What the video is about

This video is advertising 'the heart and the bottle' app. I have chosen this as part of research for displaying my dynamic visualisation. This app is aged at a similar target audience to mine which makes it relevant. 

What I like about it

I like the way they show as many different parts rom fthe app as possible. It is lively and gives you a clear example of the app. I t is nice the way it is narrated which gives it a friendly edge to it.

What the video is about

This video is advertising 'the new yorker' app. I have chosen this because it has a completely original approach to show off the app. 

What I like about it

I like the way it shows different places you can use the app making a point that it can be used any where on the go. They use good humour to make the app look more appealing to the viewer  I don't think this is the approach for my app.

What the video is about

This video is advertising a fake product. the app does not really exist and it would not be possible if tried. 

What I like about it

I like the fact that even though this is not a real app, It has been created to make it look as real as possible. This makes the whole idea look more convincing to the audience.

What the video is about

This video is advertising 'The NY Times' app. I have chosen this video because it show the app mounted inside the ipad and is animated to show how the app works. 

What I like about it

I like the way this is shown inside the ipad. This is similar to what i have in mind for my display  It would  be simple to place the video screen inside the screen of the ipad and create a background to make it look more polished.

Smashing Magazine (Things  to think about designing an ipad app

Here I am getting ideas and tips for my iPad app. Now that I have a visual idea of my app, I need to think about how to make the interactive elements work. I want to keep it simple to use and clear at the same time.

• Take A Goal-Oriented Approach To Simplify Functionality.
• Leverage What You Know To Create A Fully Personalized Experience.
• Think About The Place Of Use.
• Consider Multi-User And Multi-Device Cases.
• Don’t Do Crazy Navigation Unless It’s A Game Or One-Hit Wonder.
• Provide A Home Page.
• Beware Of Awkward Pop-Overs.
• Avoid Gratuitous Splash Screens.
• Use Gestures In Clever Ways, But Don’t Overdo It.
• Make Clear What’s Touchable, And Make It BIG.

Stanford, J. (2012)

Stanford, J. (2012). Ten Things To Think About When Designing Your iPad App. Available: http://uxdesign.smashingmagazine.com/2012/01/31/ten-things-think-about-designing-ipad-app/. Last accessed 30th oct 2012.

Benefits of interactive narrative 

Here  I am looking for evidence to back up my report, I have started off my research by looking at different journals. I have started off placing the research on here then continued with it on the report.  everything I have researched after this has been referenced and placed within the submitted report.

"Storytelling, meant as the  process of creating narrative
structures or of engaging with them, is pervasive in many
aspects of children’s life. In early childhood (e.g., at
kindergarten or at home), storytelling is a means to support
children’s development, to help them express and assign
meaning to the world, to develop communication,
recognition, and recall skills, and to enforce their
relationships with peers and adults. From primary to high
school, storytelling activities are proposed to students in
order to improve their linguistic and literacy skills, and to
foster their ability of interpretation, analysis, and synthesis.
For disabled children, the storytelling paradigm is used in
different forms to support the development of a wide
spectrum of cognitive functions and skills. Theme parks
and museums often offer storytelling opportunities to
engage young visitors and make their visit more
educational and enjoyable."

(Garzotto 2010)

http://hoc.elet.polimi.it/idc/2010/assets/doc/Interactive_storytelling_Workshop_IDC2010.pdf

“anything you can show and touch can be a UI on this device. There are no standards and no expectations.” (neilson 2010)

Garzotto, F, Paolini, p, Sabiescu, A . (2010). Interactive Storytelling for Children. Social issues in interactive storytelling . 1 (1), p1-4.

Nielsen, J . (2010). iPad Usability: First Findings From User Testing .Available: http://www.useit.com/alertbox/ipad-1st-study.html . Last accessed 30th oct 2012.

 http://www.useit.com/alertbox/ipad-1st-study.html 30/10/12

Benefits of Multimedia Courseware

This section provides short descriptions of the key benefits of learning using interactive multimedia courseware. The list is meant to assist in helping you think about how the adoption of multimedia for training and education in your organisation could enhance the learning process and help you achieve measurable performance results. The following are common benefits in using multimedia courseware.

Improves Learning
Numerous studies over the years have shown that interactive multimedia learning takes less time, is enjoyed more and increases learning. In a review of numerous meta-analysis studies Najjar (1996:30) found that "learning was higher when information was presented via computer-based multimedia systems than traditional classroom lectures" (Hick 1997).


Interactive
Interactivity is mutual action between the learner, the learning system, and the learning material. Numerous studies have found that interactivity has a strong positive effect on learning (Bosco, 1986, Fletcher, 1989, 1990, Stanfford, 1990). For example, Bosco (1986) reviewed 75 learning studies and found that learners learn faster, and have better attitudes toward learning when using interactive multimedia (Hick 1997).

Flexible
Multimedia courseware on CD-ROM can be used at work on the desktop or at a learning centre, at home, while travelling, or to enhance facilitated management development programs. Multimedia courseware can also be used on networks, Intranets or the Internet. These distributed learning approaches allow for even more flexibility, but in the cases of Internets will involve much lower quality images and will preclude the use of video, at least in the near future. Multimedia courseware off-loads repetitive training tasks and frees facilitators to focus on company-specific, department-specific, or even team-specific issues (Hick 1997).

Modular
Each topic or section can stand alone, so managers or trainers can delve deeply into the topic areas they need to learn, and skip over the ones they don't. In many cases applications include the option to custom build the application for your specific use where you can choose modules, and even edit the content in some fields (Hick 1997.

Practical
It is capable of presenting true-to-life situations that learners face every day. Adults are very practical learners—they learn best when faced with real problems that have real consequences. Decision tree simulation, video simulations or simple animations allow learners to learn-by-viewing, learn-by-doing or learn-by-coaching. All are effective methods for developing practical skill and increasing information retention (Hick 1997).

Consistent
All learners learn the same principles and skills. Computer-based courseware typically forces instructional designers to better organise and structure learning materials, and this alone can result in learning advantages (Hick 1997).


Timely
Learners can turn to the program when situations arise on the job, or when they are faced with new or increased responsibilities. This is critical, since research has shown that learning is enhanced and better retained when the topic is relevant to current needs (Hick 1997).

Engaging
Interactive learning with live-action video, audio, graphics, feedback, expert advice, and questions and answers keep learners interested and reinforces skills. Because it is exciting, challenging, and fun to use, it encourages learners to return to the program again and again. Through continual practice, learning is absorbed and integrated into daily performance (Hick 1997).


Cost-effective
Multimedia courseware may have higher up-front development costs, but overall studies have shown that it is less expensive and more effective than traditional classroom learning only. There can also savings on expensive and time-consuming travel, lodging, facility rentals, the loss of productivity caused by sending learners away, and other expenses. The ability to practice new concepts in a risk-free environment improves learners' skills and ability. When using a built in course management system which collects and analyses learner delivery and performance data substantial administrative time savings result (Hick 1997).

Hick, S. (1997). BENEFITS OF INTERACTIVE MULTIMEDIA COURSEWARE.Available: http://http-server.carleton.ca/~shick/mypage/benifit.html. Last accessed 30th oct 2012.

http://http-server.carleton.ca/~shick/mypage/benifit.html

iPad App Talk With Stacy From Demi Books 

We had a talk at college which was pitched to us over the Internet. this was pitched by Stacy Williams who works at Demi Books. She talked to us about making iPad apps and her thoughts on this. She then went through the software 'Composer' Which is used to create an app on the iPad

• Most apps are based on an original story because it it less risk.
• Society of children's books (Presentation).
• Dynabook (1968) Looks very similar to the ipad. 
• 1994 Steve Jobs had vision on ipad.
• International digital publishing forum (IDPF)
• Book app = Interactive & Games
• What makes a good e-book
• Book in progress (Plural Animals) - Change for children to touch, engage and learn new words.
• She hates alice in wonderland e-book - It has pointless animations.
• Astrojammies is her e-book - Good bedtime book but can be too stimulating for bed time. The actual book would be better for bedtime. 
• iPad switches kids into video game mode.
• Add subtle animations to my app - eg. turn lights off, draw the curtains
• We had a look a the jack and the bean stalk app in composer.
• follow the actions of the story with animations.
• allow the animation to play again but without music as music can get annoying after a few plays.
• Composer- Free iPad app to create ipad e-book
• $99 set up Demibooks account.
• getsatisfaction.com/demibooks
• She found user testing important but most clients don't pay enough to bother with.

(Williams 2012)

Williams, S (October, 2012) ‘Demi books talk’ Speech presented at Sussex Downs College, Brighton

Which Font to use for my iPad ebook

After researching at the beginning of this project, I found out that San serif fonts are easier for children to read on a screen. It is now time for me to decide which font i will use.

I have decided to go with a type face called open dyslexic. My target audience will not yet be able to read or will be in the process of learning. They will need everything possible to help make things easier for them. I found reading the text below to be far easier than many other fonts available. My eyes stayed focused on the works and it is very clear to read each letter. For this reason i have decided to use this font for my iPad story. Even if a child is not dyslexic it will still make the whole learning to read process a lot easier for them.

"OpenDyslexic is a new open sourced font created to increase readability for readers with dyslexia. The typeface includes regular, bold, italic and bold-italic styles. It is being updated continually and improved based on input from dyslexic users. There are no restrictions on using OpenDyslexic outside of attribution.Your brain can sometimes do funny things to letters.OpenDyslexic tries to help prevent some of these things from happening. Letters have heavy weighted bottoms to add a kind of "gravity" to each letter,helping to keep your brain from rotating them around in ways that can make them look like other letters.Consistently weighted bottoms can also help reinforce the line of text. The unique shapes of each letter can help prevent flipping and swapping.OpenDyslexic also takes a different approach to italic styles. It is generally recommended that italics be avoided in reading material for dyslexia. However,instead of taking the normal approach of "slant x% for italic," OpenDyslexic's italic style has been crafted to allow for its use for emphasis while maintaining readability."

http://dyslexicfonts.com/

Pro's and cons between paper book and apps

Here I am looking at the Difference between a traditional book and app. I am using this as research to see the benefits from having an app. 

The "Classic" Paper Book.

Paper books offer multiple advantages:

• They're easily obtainable (Bookstores are everywhere).
• They're easily portable.
• They don't normally cause significant eye-strain.
• They're cheap.

Okay, that much was obvious. Specifically, some types of content paper books are better for are:

• Textbooks (or any books which are generally large-format).
• Picture / Photo books.

Another factor to bear in mind is that paper books don't need power to function. They can be read anywhere with sufficient light, and are perfect travelling companions for exactly this reason.

The obvious cons are:

• Paper books are bulky and heavy. Carrying more than 2-3 around can become a chore.
• You need a light source to read them - another thing that you'll probably carry around.
• If you make notes in them, those notes are there to stay (Yes, even pencil. You can always see the imprints, even if you erase every last shred of graphite).

The app

eBooks offer the following obvious advantages (assuming you have an ebook reader):

• They're easily readable. Most readers offer zoom functions, letter resizing, and so forth.
• They're easily portable. You can carry multiple books on one device.
• They're much more environmentally friendly. You don't have to kill a few trees for each book, and let's not even talk about the ink. Recycling only goes so far.
• Note-taking is much more powerful, and the notes you write can be found and referenced quickly and easily. And they don't have to be permanent.
• Lighting conditions essentially become meaningless. Many readers incorporate display lighting allowing you to read whenever and whereever you like.

eBooks are useless without a reader. There are a few on the market, such as Amazon's Kindle, Jinke's Hanlin reader series, Sony's eReader series, and a few others. These are mentioned because they incorporate a technology called e-ink, which resembles paper very closely, and eliminates most eye-strain issues.

Some types of books especially suited for a reader are:

• Novels or non-fiction books without many pictures.
• Web-sites with html links and cross references.

The disadvantages of ebooks generally stem from the hardware you're reading them on. If it's a computer, you've got the normal computer problems which detract from your reading pleasure:

• Eye strain and RSI. Long periods spent in front of a computer are healthy for nobody.
• Power. Your average laptop has 4-6 hours of battery life.
• Portability. Why lug a laptop around if you can simply carry a book?

The cons of the reader devices are a little more subtle:

• You still have battery life to worry about.
• Nasty software bugs in the reader can cause it to freeze up.
• They're not very robust. If you spill <insert beverage of choice> on them, chances are that's the end of your reader. Not to mention scratches, dropping them, and so on.

In general, ebooks suffer from other cons as well:

• They're not readily available, and format wars are making the decision to buy a reader very difficult. Will you go for the Amazon one, and buy books (only) there? Or the Sony?
• The pricing model hasn't been worked out yet, causing some major discrepancies.

Coeus. (2012). Ebooks Vs. Paper Books: The Pros and Cons. Available: http://coeus.hubpages.com/hub/Ebooks-Versus-Paper-Books-The-Pros-and-Cons. Last accessed 20th oct 2012.

Illustration with improvements 

New version

After looking at different styles of illustrations I realised the image needed more detail. I made the most of zooming right into the image so I could concentrate on the little bits of detail. once zoomed out, these subtle changes made all the difference. I also took off the heavy black edges and replaced them with subtle colours.  

First draft

This was my first attempt at illustrating the artwork for my storyboard. although I was happy with mu first attempt, it did not look quite right. all the lines are too straight and everything has a gradient which looks to digital. 

Clear Left Talk

Here are my notes from the clear left talk which was pitched to us in Brighton. After my notes is an example of a user test which Ben went through with us as a group.

Speaker- Ben

·         Don’t make people click on stuff

·         Don’t make people think

·         Inventing all principle, you never know what might be the next big thing

·         Treat users fairly

·         Clear left focus on good design (front end only), they leave the heavy backend stuff to other companies to finish off.

·         Empathy map – see, think & feel, hear, say & do

·         Spend time on paper prototypes. This saves time and money in the long run

·         Silver back software very handy to film user tests as evidence for usability issues (windows equivalent is BB Flashback)

·         Responsive website – works on all devices so no need to create different versions for different size screens

·         Clients often think of features – boil it down to simplify to user experience

·         Information architecture

·         Find out what the best story apps are

·         Make everything your best work

·         Don’t be afraid to spend money

·         http://alpha.gov.uk/

·         Fitt’s law was used to help improve usability on a MacBook

User testing

·         8 people user test can solve a problem – try and mix up the age groups

·         Always do user tests, approach people in cafes, post adverts for volunteers or just ask friends and family.

·         Flow charts

·         Wire frames

·         Usability testing

·         Doesn’t like focus groups bigger than 1 on 1

·         Plan the user test - make a list of tasks for the user to try and find on the website (try not no hint words that might give away the navigation process)

·         Give them a leading question

·         Observe each other doing user tests

Recommended People

·         Christopher Nolan – Inception (architecture design)

·         Jared spool

·         Jacob nelson

Recommended Books

·         Steve Krug – Don't Make Me Think!: A Common Sense Approach to Web Usability

·         Patterns of Software: Tales from the Software Community

·         101 Things I Learned in Architecture School

·         design with intent

·         the design of everyday things

·         undercover user experience design

·         universal principles of design

Ice Breaker Game

·         Chat Pack

Ben (October, 2012)

User test

Ben got us all as a group to write down a couple of words each onto post-it notes. These words word  be things that we would expect to find on the UCAS website. The post-it notes were then placed on the wall and ordered into category's of search order. 

I was then selected to use the UCAS website to try and find the BA Digital Media course. this was recorded   so my mouse movements and typing were tracked, it also recorded my face at the same time. 

During this process we discovered how difficult the UCAS website was to use. I really had to think to find what I was looking for. Because this process was recorded it could be used as evidence  to show UCAS how bad their site is and that it needs to be improved. 

Ben (October, 2012) ‘User Experience’ Speech presented at Clear left, Brighton

                                                                                                    

Looking at different illustrator designs

This is my first attempt at my design using illustrator. I am pleased with the outcome but think it needs improving still. It seems to be missing something. I will look at other images from similar styles to get inspiration to come up with my own style.   

All of the designs  below have a different style to one another. the thing I have noticed on all of them which i don't have is detail. Event the simplest of detail helps make the image come to life. I need to zoom into my image and add more detail to make it more realistic. Also the edges are too straight on my image, nothing would look like this in real life. 

This Image has very bright colours. This makes it appeal to children.They have used shading on the images which helps add a depth of field. 

http://www.monikabookillustrator.com/free-christmas-theme-illustration.html

This image is very detailed making it look more life like than the image above. this isnt the type of style I would go for but it helps to look at different styles. 

http://aaronpocock.wordpress.com/2009/12/10/latest-picture-book-illustration/

This image is very scruffy. This has made me realise that my first draft is far too neat. I need to make my edges look more rounded and take off all the straight edges.  

http://www.childrensbookillustration.com/view_illustration.php?id=784

This image uses pastel colours giving it a very traditional look and feel. I dont think this would make the most off the high res display on the iPad. My app needs to be bright too show off the high res colours on the ipad.

http://www.flickriver.com/photos/katinthecupboard/7086204833/

I have noticed this image does not have heavy outlines. this is one thing i need to change on my image. 

http://www.123rf.com/photo_11248590_illustration-of-a-cartoon-house-inside-beautiful-meadows-landscape-in-summer-season.html

The grass in this image as subtle detail. the lines help make the grass look more realistic giving it the feel of a freshly mowed field.  

http://depositphotos.com/7943135/stock-illustration-Dairy-Cow-In-Summer-Landscape.html

This image shows detail on the tree and grass. this helps separate each part of the image. The path is not straight, it has a curve to it which is more realistic. 

http://depositphotos.com/3654323/stock-illustration-Illustration-of-isolated-cartoon-house-with-tree.html

This image has shading on the windows and doors. It helps make it look less still. 

http://yaymicro.com/stock-image/cartoon-house/4139582

This is a good image to look at because everyone likes the Simpsons. the drawings are simple which  little bits of detail. Rich colours are used.

http://www.guardian.co.uk/books/2011/jan/14/neil-gaiman-appears-simpsons

This is a very popular game for mobile phones. I like the use of rich colours and gradients . the main characters have a black outline then the background is more subtle. 

http://stuffpoint.com/angry-birds/image/52903/angry-birds-wallpaper/

WHERE GOOD IDEAS COME FROM by Steven Johnson

This was shown to us during the lesson. It has some good inspiration to generate ideas, This is defiantly worth watching. The drawing  keeps you interested as he is talking through the video.

iPad usability guidelines Text in yellow background is my writting.

"Think twice before hiding the status bar if your app is not a game or full-screen media-viewing app. bar, you should understand the ramifications of this design decision. Permanently hiding the status bar means that users must quit your app to find out, for example, whether they need to recharge their device."

"Note that most iPad apps do not need to hide the status bar to gain extra space, because the status bar occupies such a small fraction of the screen. On iPad, the subtle appearance of the status bar does not compete with your app for the user’s attention. The small size of the status bar, combined with the slightly rounded corners of the app’s upper bar, make the status bar seem like part of the device background."

apple. (2012). iOS UI Element Usage Guidelines. Available: http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines.html. Last accessed 4th oct 2012.

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines.html


Most younger children  are not going to be bothered about looking at the time or the battery status of the device. In some cases it may worry the child if they see that they don't have much battery left. for this reason I will keep the status bar hidden away during app play. 

Width of finger space minimum 10 x 10 mm. any smaller and it will be to tricky to select interactive elements. Because my app is aimed at young children the buttons need to be big and easy to use. 

Use a short title when creating an icon for the app. There is only a small amount of space in which the text will fit into. 

Switch
A switch presents two mutually exclusive choices or states (used in table views only).

apple. (2012). iOS UI Element Usage Guidelines. Available: http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines.html. Last accessed 4th oct 2012.

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines.html

This style switch can be used for my settings menu. It will give the user the option to turn on/off things such a sound, navigation and subtitles.

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.

For iPhone and iPod touch both of these sizes are required:

• 57 x 57 pixels
• 114 x 114 pixels (high resolution)

For iPad, both of these sizes are required:

• 72 x 72 pixels
• 144 x 144 (high resolution)

When iOS displays your app icon on the Home screen of a device, it automatically adds the following visual effects:

• Rounded corners
• Drop shadow
• Reflective shine (unless you prevent the shine effect)

For example, a simple 57 x 57 pixel iPhone app icon might look like this:

When it’s displayed on an iPhone Home screen, iOS adds rounded corners, a drop shadow, and a reflected shine. So the same app icon would look like this:

apple. (2012). iOS UI Element Usage Guidelines. Available: http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines.html. Last accessed 4th oct 2012.

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines.html