C R A P

Reference: Williams, R. 1994, The Non-Designer’s Design Book, Peachpit Press, USA

Review the Color Matters site and determine why some colours appear to hurt the eye!

Upon first click, color matters is quite lacking in colour. I was expecting something a bit more colourful but the site remains very black and white, with red text on the side bar and then the occasional splash of colour when navigating from one topic to another.

“The human eye can see 7,000,000 colors. Some of these are eyesores. Certain colors and color relationships can be eye irritants, cause headaches, and wreak havoc with human vision. Other colors and color combinations are soothing. Consequently, the appropriate use of color can maximize productivity, minimize visual fatigue, and relax the whole body.”

“Yellow, pure bright lemon yellow is the most fatiguing color. Why? The answer comes from the physics of light and optics. More light is reflected by bright colors, resulting in excessive stimulation of the eyes. Therefore, yellow is an eye irritant.”

From the same site – Color Matters – explore how computers generate colours and what this can mean to your multimedia images

How Computers See Color

The following components work together to create color on your computer:

1. The computer hardware on the motherboard
In the simplest terms, deep inside your computer is a “brain.” It may or may not be able to see and recreate accurate colors.

2. Graphic cards or video cards/boards
You may have a graphic card or video card/board installed. If so, this helps your computer to see better colors and more colors. (Note: This is built into all Macintosh computers.)

3. Your monitor
Cheap monitors deliver terrible color. You get what you pay for. If you have an old monitor or a PC monitor that cost less than $200 (US), you probably have very little color accuracy.

The colors generated on your monitor are also affected by anti-glare screens and devices that lower the radiant emissions. These will darken the actual color and may cast a grey haze over the images you see. A better solution is placing your monitor away from glare sources. This will give you better color and optimum visual conditions. Regarding electromagnetic field emissions, it is represented that good monitors are properly shielded and that emissions are restrained to the sides and back. The validity of these reports is subject to further questioning.

To sum it up, the monitor can be the major cause of good or bad color … or the monitor can be part of the combination of several components that creates good or bad color. In other words, if you have a good video card, good operating system software, and good application software, a bad monitor can still create inaccurate colors. And even if you have a fantastic monitor, the other components can still create bad colors. So you’re looking at a case-by-case kind of situation.

4. The web browser (Firefox, Explorer, Safari etc.)
Consider the browser to be the messenger who delivers the colored graphics to your computer.

At the present time, most web browsers do not support graphic file formats that contain essential information about color (such as PNG and JPEG 2000). The current standard is the 216 web-safe color palette which is based on the colors that are known to exist in the color vocabulary of all computers (from 8 bit and up). Link to see the 216 Color Palette.

What this all means for multimedia images is that for different learners, if they do not have access to the right technologies the intention that multimedia images were meant to enhance learning may not come to effect.

The Psychology of Colour

Some colours make us happy and others, sad. Colours have the ability to provoke a psychological reaction. Look at the objects around you: their colours have been chosen specifically because they create a mood or an association for the viewer.

Because of their power to provoke reactions in us, we use colours for their symbolic meaning. It is no accident that fire engines are painted red; red is a hot colour and denotes the idea of danger. Police uniforms are blue; being a cool colour, blue projects the idea of being under control, being calm and collected.

You can use colours in your visual designs to convey a mood, create an association or express your feelings about a particular event, activity or object.

Choose colours to convey the following:

Aggression - Red

Friendly – Yellow

Solid - Grey

Weak - Pink

Serious – Black

Depressed - Blue

Selecting Colours

Many things will affect your choice of colour. Consider the situation and choose your colours wisely. Think about the following factors.

Fashion
Colours go in and out of fashion. Bright colours are used to demand attention and make a statement. Designers of luxury items want their products to appear reputable and durable, and be seen to outlast the fashion of the day; gaudy colours such as bright pinks and yellows are unlikely.

The mass market
Strong and bold colours are used to attract the mass market. Advertisers usually use primary colours because they are the most appealing colours to the bulk of the population.

The environment
Australians live in a hot, dry environment so often use cool colours (such as pastel tints) in their buildings to make their physical environment seem cooler. In a European environment that is predominantly cold you tend to see warm, bright primary colours, creating a cheerful, cosy illusion.

Culture
Culture and history shape colour choice. If you visit Asia you will find temples painted in bright, primary colours. A European church is more likely to have more sombre colours.

Consider your e-Learning product – what colours might work? Why?

In regards to my e-Learning product, different colours can be used to highlight different modules. Sticking to a set palette will set the tone of the product. Contrasting colours will emphasis different things. I wouldn’t be too sure on the colours I’d use because I want to have some elements of fun among the serious topics. I would however avoid neon colours and pink – only because I have a preference against them. Reasons for choice of colour include:

• Culture of the organisation
• Corporate colours
• Fashion
• Your message
• Mood of message

Do not underestimate the power of colour to influence your learners!

“At the beginning of a project, the screen is a blank canvas, ready for you, the multimedia designer, to express your craft. The screen will change again and again during the course of your project as you experiment, as you stretch and reshape elements, draw new objects and throw out old ones, and test various colors and effects – creating a vehicle for your message…many multimedia designers are known to experience a mild shiver when they pull down the New… menu and draw their first colors onto a fresh screen…this screen represents a powerful and seductive avenue for channelling creativity.”

Tay Vaughan, 1998

Visual design takes the composite of elements: text, symbols, photos, colours, video, in fact any graphic element and much more, to communicate your message – it is your primary connection with the learner.

Visual design is the process of producing visual images that are able to communicate information to other people.

Visual images are made up of lines, colours, textures, tones, hues and shapes applied in a spatial composition. We are surrounded by visual images in our everyday lives. Each visual image is trying to tell us something.

To produce images that people understand, you need to consider the following:

1. What message are you trying to communicate?

2. What audience are you trying to communicate with?

3. What is the best way to visually communicate that message?

4. What are the elements and tools necessary to produce the visual image?

Understanding Perception

When you look at a visual image you see lines, shapes, colours, tones, hues and objects in a spatial dimension.

The eye collects visual information from these images and objects and this information is transmitted to the brain. The brain interprets and constructs meaning from this visual information.

To design visual images that are meaningful to an audience you need to understand the way your audience actually sees. That is, how does the eye collect visual information and how does the brain interpret it? This line of inquiry is called the science of perception.

Discovering the way the eye works will help you understand how visual elements function in visual design.

Understanding Visual Communication

No two people ever see the same thing quite the same way. Cultural differences, the level of acquired knowledge, an individual’s psychology and socialisation will all affect the way we construct meaning from a visual image.

Physiology can also affect the way a person sees. The eye itself can have defects in the retina lens or suffer from colour blindness. The brain can also have its own problems that affect perception such as brain dysfunction, and alcohol and drugs.

To cater for these differences in perception you need to construct a clear, unambiguous image and know your audience well enough to construct visual images that they will easily recognise and comprehend. For example, a road sign needs to communicate its message to a wide audience instantaneously.

Review the image below:

The image above plays tricks on your mind. At first glance i can count five legs but then I know that an elephant only has four legs but when I concentrate on the image I can’t make out four clearly defined legs. I think if you were to ask different people the numbers may vary. In relation to visual design, the slightest markings can make a difference to how the image turns out. We see the role that lines can play in conveying different elements of the image and how it can change perception.

Visual hierarchy

Read: About Page Design and Visual Hierarchy from the Webstyle Guide http://www.webstyleguide.com/page/index.html

How would visual hierarchy influence learners?

The way in which visual hierarchy influences learners is by directing the learners eyes through the page. Page layout, typography and illustration are used to emphasize particular content or to draw attention to this content. Visual hierarchy essentially describes the visual elements that stand out the most in comparison to those which are not as predominant. Thus in regards to the learner, having specific content highlighted will emphasize its importance to what they are learning and will also aid them in remembering content.

Notes from Mayer and Moreno reading

• Multimedia Learning – learning from words and pictures (p.43)
• Multimedia Instruction – presenting words and pictures that are intended to foster learning. The words can be printed (e.g., on-screen text)or spoken (e.g., narration). The pictures can be static (e.g., illustrations, graphs, charts, photos or maps) or dynamic (e.g., animation, video, or interactive illustrations) (p.43).
• Meaningful Learning – deep understanding of the material, which includes attending to important aspects of the presented material, mentally organizing it into a coherent cognitive structure, and integrating it with relevant existing knowledge. Meaningful learning is reflected in the ability to apply what was taught to new situations, so we measure learning outcomes by using problem-solving transfer tests (Mayer & Wittrock, 1996) (p.43).
• Meaningful learning requires that the learner engage in substantial cognitive processing during learning, but the learner’s capacity for cognitive processing during learning, but the learner’s capacity for cognitive processing is severely limited. Instructional designers have come to recognise the need for multimedia instruction that is sensitive to cognitive load (Clark, 1999; Sweller, 1999; van Merrienboer, 1997) (p.43).
• Cognitive overload – the learner’s intended cognitive processing exceeds the learner’s available cognitive capacity (p.43).
• Three assumptions about how the mind works in multimedia learning:
  1) dual channel – humans possess separate information processing channels for verbal and visual material
  2) limited capacity – there is only a limited amount of processing capacity available in the verbal and visual channels
  3) active processing – learning requires substantial cognitive processing in the verbal and visual channels (p.44)
• Meaningful learning often requires substantial cognitive processing using a cognitive system that has severe limits on cognitive processing (p.45).
• Three kinds of demands for cognitive processing in multimedia learning:
  1) essential processing – aimed at making sense of the presented material including selecting, organizing, and integrating words and selecting, organizing, and integrating images
  2) incidental processing – aimed at nonessential aspects of the presented material
  3) representational holding – aimed at holding verbal or visual representations in working memory (p.45)
• The total processing intended for learning consists of essential processing plus incidental processing plus representational holding. Cognitive overload occurs when the total intended processing exceeds the learner’s cognitive capacity. Reducing cognitive load can involve redistributing essential processing, reducing incidental processing, or reducing representational holding (p.45).

• Multimedia instruction should be designed in ways that minimize any unnecessary cognitive load (p.50).

For example, a multimedia instructional message in a book could include printed text and illustrations, whereas a multimedia instructional message on a computer could include narration and animation.

Examples of multimedia instructional messages include words and pictures intended to explain how lightning storms develop, how car braking systems works, and how a bicycle tyre pumps work.

Richard Mayer, p.21
Multimedia Learning

READ: Mayer, Richard E. & Moreno, Roxana 2003, Nine Ways to Reduce Cognitive Load in Multimedia Learning in Educational Psychologist, 38 (1), pp43-52.

7 Principles of Multimedia Design

1. Multimedia principle: Students learn better from words and pictures than from words alone.

2. Spatial Contiguity Principle: Students learn better when corresponding words and pictures are presented near rather than far from each other on the page or screen.

3. Temporal Contiguity Principle: Students learn better when corresponding words and pictures are presented simultaneously rather than successively.

4. Coherence Principle: Students learn better when extraneous words, pictures, and sounds are excluded rather than included.

5. Modality Principle: Students learn better from animation and narration than from animation and on-screen text.

6. Redundancy Principle: Students learn better from animation and narration than from animation, narration, and on-screen text.

7. Individual Differences Principle: Design effects are stronger for low-knowledge learners than for high-knowledge learners and for high-spatial learners rather than low-spatial learners.

Consider your course and make notes where multimedia may be of value.

Because I am not a Program Design student, I’ve been allocated the ‘Facilitating e-Learning’ course to use as the basis of my second assignment and as such, multimedia will be immensely valuable to the course as using multimedia will be integral to facilitating any form of e-Learning. And so using multimedia in the delivery of the course as well as including activities where the learner would be required to create different types of multimedia will educate the learner about multimedia. Furthermore, it has been addressed that because of time restraints, we will not be required to look at multimedia in regards to our assignment. We will only be asked in these exercises to think about it and so responses will not be too comprehensive.

It’s a small window of video laid onto a map of India, showing an old man recalling his dusty journey to meet a rajah there…”

Tay Vaughan, 1998, Multimedia: Making it Work

Multimedia is understood to mean a product that is digitally constructed utilising and seamlessly integrating various media: text, graphics, images, video, animation and sound.

Multimedia enriches the user through medias and technologies with the intention of engaging people’s minds!

Initially the delivery of multimedia products was via CD-ROM, but the internet provided a global distribution system that changed the structure and style of the multimedia products.

High levels of interactivity are now achievable using a range of software that runs on almost any current desktop computer.

The future of multimedia will be even more challenging as a plethora of delivery systems and displays are marketed. Enhanced program material provided on digital television and internet information displayed on mobile phones are just two examples of new multimedia systems.

Our notion of multimedia needs to encompass all new forms.

How do you define multimedia in today’s e-Learning context? Compare this to the experiences with the Web 2.0 technologies and the issues raised in the Seely-Brown article.

Multimedia encompasses the wide range of delivery methods used to engage learners in the learning content. In the e-Learning context, multimedia is being used more often as it has become easier to develop and to integrate into learning as the tools and technological infrastructure to support it have become more accessible.

I’m not sure how to answer this question as I can’t remember what the Seely-Brown article was. But in my experience of Web 2.0 technologies, I would say that multimedia is increasingly present and used to get messages across in a more direct manner. For example, tracking back a few blogs, I discovered vokis and integrated one into a blog as a test. I then integrated one onto my homepage. Such tools as these can be used to give quick introductions or overviews and save the learner from having to read more chunks of text. It’s also colourful and attractive and hence engaging.

EXAMPLES

SMH, Financial Review, CNN, Cirque de Soleil, McDonalds

SMH - Screen layout mirrors that of a newspaper. It is organised into coloumns, with lots of print and perhaps one of its flaws is this overload of information (cognitive load – too much information for the learner to absorb). Navigation toolbar across the top.

Financial Review – As a subsidiary of SMH, same layout. More emphasis on the text though based on visual hierarchy concept of left to right

CNN - Different layout, less text and more images. The bold red line divides the navigational elements and the content.

Cirque de Soleil - More about the graphics. Use of yellow on black – strong contrasts. The use of graphics is more predominant. Bearing in mind the target audience of the site will determine the content.

McDonalds – multiaward winning site. Interactive. Highly visual. Use of 3D to emphasise visual hierarchy. The areas where they want more emphasis are larger and in the foreground. There are also shadowed elements that light up if the cursor is hovered over it. They’ve taken a complicated site and made it easy to use. Cognitive learning is taking place one thing at a time. Single elements on the page not a multitude of elements.

We also had a discussion about visual hierarchy and graphics.

Visual hierarchy – what attention is drawn to. The learner gets drawn to the image first. Other things that affect visual hierarchy:

• text: font, size and face
• motion: moving images
• colour: contrast/complementry – The use of contrast can both help and deter.
• more emphasis placed on information that is presented first from left to right, top to bottom

Style of graphics – is the choice appropriate? Does the image comply with the text. What is the purpose? Is it aiding the comprehension of the learner or is it distracting? Idea of type of graphic. Static pictures or motion? Should the graphic be interactive? Videos – are they better? – perhaps not because videos are quite linear. They are not interactive. Depending on the purpose is what it will depend on.