Interactive promotion report: flash websites and animations

[Tags: interactive pr, pr, flash]. In the latest of my Interactive Promotion students research reports, todayAzim Haque looks at flash websites and animations:

Flash websites, animated introductions etc.

“Back in 1994, Yahoo had only just launched, most websites were text based and Amazon, Google and eBay had yet to appear”. Mark Ward, ‘Technology Correspondant, BBC News website (2004)

Flash is said to be ‘99% bad’ and until recently, I would have thought that this statement was mistaken by one percent. There seems to be a divide amongst designers between those who like using flash, and those don’t. It was at one point quite trendy to have a flash website but as with most new fancy tools of the trade, designers can overuse an idea and it can become tired for many reasons. However when the tools are used effectively, the results can be quite impressive; as we will explore.
Here are some examples of websites that have used flash effectively, but who decides what makes it a good website or not? To understand flash, we must explore it through the designer’s vision, and the user’s experience. The context in which the designer has created the website will give us an understanding as to why the website looks the way it does, and how it was meant to be consumed.
I looked at these three websites created with flash are designed for young users to compare how flash is used in different ways, and to breakdown the pro’s and cons of using flash. These websites should therefore be easy to use, entertaining, colourful, fun and should satisfy and capture the imagination of a child.

www.nick.com
Nickelodeon Television Channel
The Nickelodeon website is colourful, the designer uses yellows, oranges, bright greens – if we look to colour theory, these colours stereotypically convey a sense of youth and vibrancy. The designer makes interesting use of bold typography and rollover button action. Aspects such as these create a more exciting and animated experience for the user. It is not so busy as to put the user off, but there is, in my opinion too much writing on the screen to sustain the interest of a young consumer.
This is a perfect example of how technology advances and how problems are quickly over come, the designer on nick.com, like many others has adapted the design to tackle a common problem with using flash. Usually the back/forward controls within the internet window do not correspond with flash as flash is a series of animation frames, and not a series of pages (unlike hand drawn cartoons, flash can be used cleverly to ‘tween’ groups of frames to create seamless movement from one point to another). This back/forward page control can still be a great problem, but in this case the designer has placed the individual flash movies onto a flash stage which allows for much easier and linear navigation as it separates the flash movies, and gives back the user of going back and forth with the normal controls.

www.citv.co.uk

Childrens BBC Channel

The Children’s ITV Channel makes very little use of flash, and fails at inspiring its user. The colours are dark, deep reds and navy blue colours are usually associated with formality. The website was created to look quite formal, possibly masculine, but it is not, to my knowledge, in keeping with its target market.
The flash advertisements, and tiny preview screen of shows to come are the most interesting thing on this website. Both these things are created effectively in flash and do add something to the page, but are also equally irritating as they bombard the user with flashing images. The advertisement for upcoming CITV shows looks very much like an advertisement for something that may not have anything to do with the site itself as it follows the same layout and conventions of a flash advertisement. Jakob Nielsen, ‘expert on Web usability’, suggests that “unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising” Top Ten Mistakes in Web Design (www.useit.com, 2006) . It would be an area of concern for any company if its target market was not receiving, or purposefully ignoring their intended message.

www.peppapig.com

Official PeppaPig Website
The Peppa Pig website is an exciting website, and a great example of this sort of website should be like. As soon as you enter the website, you are given the option to customise your mouse, to skip sections, to watch an episode, print out pictures to colour in, and much more. The design is really quite simple, which makes it user friendly for all, Lee Gomes suggests that “it's really dangerous to design for a technical elite. We have to design for a broad majority of users” Wall Street Journal Online (2006). And that is exactly what this website is so great at doing. The problem arises when the user wants to navigate back and forth, but the designer has used an easy drop down menu and a ‘Back to home’ button to counteract this setback.

Those were some examples of websites for users of a younger age, now we look at websites created for a mature user. All these things have to be taken into account, age, computer/Web literacy, gender, ability - eye sight, hearing, navigation, mouse control and so on when designing a website; therefore it is crucial to know who your target market is.

www.viktor-rolf.com

Official Viktor and Rolf Website

The Viktor and Rolf website is designed for a reputable fashion house, the design of the website is stylish, chic, minimalist and timeless. However, the usability of the site is another matter. Jakob Nielsen warns, “don't assume that users know as much about your site as you do”, the first page of the website asks the user to install flash, enable pop-ups, then the user is to find an additional page to enter the site and is confronted by a page that repeats the names ‘Viktor and Rolf’ incessantly in a monotonous voice, there is a ‘sound off’, and a ‘fast forward’ option, but the writing is quite small – and the website assumes that the word ‘fast forward’ is the same as the word next, or skip.
The website takes some time to load, but once the user is in the main area of the site (the showcase of the new fashion collections) the usability is relatively simple. An elitist fashion website such as this may go against Lee Gomes’ on designing for the technically elite, as they may want to create an elite and sophisticated identity to their site. So it is quite possible that the designer has purposefully decided not to adhere to the codes and conventions of web design.

www.pulsethemovie.net

Official Pulse the movie Website

The FWA, Favourite Website Awards website, www.fwa.com, showcases many examples of websites created purely in flash.
The Pulse movie Website is one of those, it allows the user to immerse themselves into the film, as it uses conventions such as windows on the screen which can be moved around the page, closed and so on. The customisation on this site is limited, but it has an interesting flash introduction to the site, but this can become irritating as today’s users are ‘internet savvy’, “more Net savvy, the longer people have been using the Internet, the more likely it is that they'll use Google, study finds” By Juan Carlos Perez, IDG News Service (2005) www.inforworld.com, and know that this is not ‘real’. Although we must not forget that not all users are equally Web literate. This website, very much like the official Madonna website, www.madonna.com, as it gives the user control of sound, windows, text, images and can allow the user to make additions and interact with the website, and other users. These kind of websites can be clever in design, but are they really making things easier or difficult for the user. Another example of some bad/difficult design is the official Donnie Darko movie website, www.donniedarko.com

www.jaguar.co.uk
Looking now at a more commodified website, such as Jaguar where the main purpose is to showcase the product and to reinforce company values, we see that it can add much more to the experience than viewing the car in real life. We are presented with a fully rotatable 360degrees view of the car, where the user can customise and select which colour, make and model he or she desires. Flash allows for a smooth navigation and a more real sense of the product, this would not be possible to create in a html document.

www.flickr.com

Official Flickr Website
Websites such as MySpace, Google, and Flickr have thousands of hits per day, these websites have well defined web searches, are broadly used for numerous reasons, and are increasingly branching out into different business ventures of their own. None of these are created in flash and are almost bare in terms of design. Some would argue that Google is more complex than other search engines, “is Google simple? No. Google is deceptive. It hides all the complexity by simply showing one search box on the main page. The main difference, is that if you want to do anything else, the other search engines let you do it from their home pages, whereas Google makes you search through other, much more complex pages” Don Norman www.jnd.org
Perhaps it is best to keep flash simple, as with any other website, flash designers could try and evaluate the success of their campaigns, not by how many hits they get per day, but judge their site on their campaign technique as well as usability.
Flash is constantly amending itself, with new versions steadily perfecting the tool to keep up with the fast paced nature of new media. “Faster download time, cross platform/browser compatibility and stability are not the only benefits that Macromedia Flash can deliver. Macromedia Flash can also deliver an improved user experience, when the developer makes the effort to include usability into the development cycle”. http://www.flazoom.com

Psychologist Donald Norman recognised some key principles. Norman, D (1988) the Design of Everyday Things, New York

“Principles:

1 - Recognize Diversity

• diversity of users
  • User Profile
    • age, gender, education, cultural background, job
  • novice / first time users
    • novice - know little of task or interface concepts
    • first time users - have task conceps but shallow knowlege of interface
    • need to be able to accomplish basic needs with small number of consistent actions
  • knowledgeable intermittent users
    • know about the task and general knowledge about the interface - will forget specific features
    • need to easily rediscover how to perform tasks
  • expert frequent users
    • thoroughly familiar with task and interface concepts
    • need ability to quickly carry out actions, get rapid reponses, brief feedback
      
• diversity of tasks
  • determine set of tasks early in design
  • choose 'atomic' actions
  • look at task frequencies
    
• diversity of interaction styles

	Advantages	Disadvantages
Direct Manipulation	- visually presents task concepts - allows easy learning - allows easy retention - allows errors to be avoided - encourages exploration - affords high subjective satisfaction	- may be hard to program - may require graphics display and pointing device
Menu Selection	- shortens learning - reduces keystrokes - structures decision making - permits use of dialogue management tools - allows easy support of error handling	- presents danger of many menus - may slow frequent users - consumes screen space - requires rapid display rate
Form Fillin	- simplifies data entry - requires modest training - gives convenient assistance - permits use of form management tools	- consumes screen space
Command Language	- is flexible - appeals to 'power' users - supports user intiative - allows convenient creation of user-defined macros	- has poor error handling - requires substantial training and memorization
Natural Language	- relieves burden of learning syntax	-requires clarification dialogue - may require more keystrokes - may not show context - is unpredictable