Learning with Vince =)

In concluding to the course

Special thanks to the baol students and Mark Lee our lecturer for another exciting e-learning subject. Hope you enjoy my blog and best wishes to all readers.

Note: if your reading this Mark want a HD…please

The following is a brief overview of the 4 basic principles of design :

C R A P

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

Contrast

Contrast can be the most important visual aspect of a page. The principle is to avoid elements on the page that are merely similar – if they are not the same – then make them VERY different.

Purpose:

• To create interest
• Aid in the organisation of information
• Supports visual hierarchy

Eg. Use of colour

Repetition

Repeat visual elements throughout – colour, shape, etc. Develops organisation and strengthens the unity.

Purpose:

• To unify and add interest
• For consistency

Eg. Navigation, colour identifiers, layout – anything your learner may visually recognize. Avoid repeating the element so much that it becomes annoying and distracts from the message

Alignment

Nothing should be placed on your page randomly. Every element should have some visual connection with another element on the page.

This creates a clean, sophisticated look.

Purpose:

• To unify and organize your page design
• Be conscious of where you place your elements – always try to find something that aligns them

Avoid:

• More than 1 type of text alignment on the same page
• Don’t always centre align

Proximity

Items relating to each other should be group close together. Items in close proximity become one visual unit rather than several separate, unrelated units.

Purpose:

• Reduces clutter and confusing your reader
• Organizes information – reduces cognitive load
• Logical information is more likely to be remembered

Understanding Colour

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

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

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
• Friendly
• Solid
• Weak
• Serious
• Depressed
  

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?

• Culture of the organization
• Corporate Colours
• Fashion
• Your Message
• Mood of message

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

Colour plays a important role in information delivery. The use of organisational colours are key in establishing official learning setting and are essential in order to contrast key concepts as well as establishing links which do not distract the learner. Simple colours can be used as a foundation for visual hierarchy which engage the learner. Whilst its important to note in designing take into account visual symbolic association with negative emotions or meanings i.e. red associating with anger or blood.

Exploring Visual Design

“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 channeling 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?

Complete the quiz in UTSOnline – Visual & Interaction Design – available in the Course Information tab.

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 socialization 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 recognize and comprehend. For example, a road sign needs to communicate its message to a wide audience instantaneously.

Visual hierarchy

Read:

About Page Design and Visual Hierarchy from the Webstyle Guide

http://www.webstyleguide.com/page/index.html

Use the navigation on the right hand side.

How would visual hierarchy influence learners?

Visual hierarchy influences the way in which learners perceive information, content, images. The position of key features, symbols, colours and tones on web pages and software can either distract or engage a learner. Visual hierarchy can becomes the crucial component in information delivery as the design can either distract or engage learners highlighting information and establishing learning improving learning. For example a bold heading and bright colour title can be used to underline or categorize key information whilst it can also be used to differentiate or link concepts, create associations or comparisons or establish a specific order which moves from one heading to another.

A multimedia instructional message is a communication using words and pictures that is intended to promote learning.

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.
(PDF File in Subject Documents folder in UTSOnline)

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.

Now consider your course and make notes where multimedia may be of value:

Consider the media elements in your design – use the questions above as a guideline if you are using animation, video or sound.

What are your recommendations?

Spatial Contiguity Principle allows the learners to learn better if the application link to the related context. Whilst the multimedia principle and temporal contiguity principle would enhance learning as interaction and a combination of images and written text simultaneously would help establish links to content.

Provided examples of multimedia elements you would recommend.

Providing resources sites and more detailed information and resources will aid in reference and developing the learners understanding of key concepts. Whilst podcasts, audio files (mp3’s) animations and narrations or role playing can further contribute to establishing links and interactivity.

“Multimedia is an eerie wail as two cat’s eyes appear on a dark screen.

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.

Review the following websites:

Examples of Multimedia in e-Learning

http://www.adrworkshops.com

From the map, click on Australia, then Test your Skills in the left-hand column, choose a scenario

http://www.listeningadventures.org

Carnegie Hall – learn about a Dvorak Symphony

http://www.bbc.co.uk/history/lj/victorian_britainlj/sour_entry.shtml?site=history_victorianlj_sour

The BBC have a huge variety of e-Learning short course – try this one and see if you can improve Victorian Britain’s living conditions!

http://www.howstuffworks.com/toilet.htm

An amazing site full of all sorts of resources – this is a particular favourite!

http://www.cadre.com.au

Cadre Design are a Sydney based multimedia design company – from the home page, click on the Education link, this will take you to the Showcase. Click on the first example – the Astronomy site. Examine the possibilities (maybe learn something too)!

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 today can be defined as a tools used to engaged learners through interactivity. In the changing world today Web 2.0 technologies are becoming a greater source of entertainment and information. This has meant increased innovation, creativity and resources diversity that respectively change, shape and influence the way we learn and teach in a social and education context. As the internet becomes a increasingly part of learning we see the shift from passive learning to interactive which ultimately aims to enrich learners understandings through exploration, simulations and engagement.

It’s that time again where i dont know what the assignment is about…Special thanks for the baoler students and our lecturer for guiding me through what to do and how it relates to e-learning.

For a simpler view of how the assignment works…heres a easier way to look at it:

1. Context of e-learning course (150-200 words)

Background information about the subject or topic (why is it important)

Learner profile i.e. demographics Target audience

Organisational context

Purpose/rationale (purpose statement)

Learning Outcomes (unit of competency name/code)

2. Learning theory/ies underpinning the design (250 words)

Summarize the key features of theory/ies

Justify choices of theory/ies

3. E-learning Design (300 words)

Storyboard (annotations outlining learning and assessment activities+ showing integration of technology). Summary in a nutshell

Explain *

Show how the design has been influenced by the learning theory/ies and the target audiences

4. Integration of technologies (200 words)

Selecting at least two technologies in details (NOT tools)

Web based assessment (hot potatoes)

Simulation

Show how the way in which the technologies are used takes into account the learning theory/ies and target audience

NOTE: (wiki assignments) Blogs in general are the technology

Edublogs and e-blogger are tools

NOTES:

Overall test required students to analysis 3 websites visual and audio aspects to demonstrate how they may influences learning delivery and suitability to various learners.

Things to consider are using elements and ideas to cater to a range of learners and to simplify information with a coherent delivery that does not distract the initial content.

Part II: Visual Design Evaluation

Due: Exercise will be conducted in class

Weighting: 10%

Task:

Evaluation of visual design components from 3 existing e-Learning courses. Explanation of how the screen design effectively addresses the principles of visual design.

Activities included in this Section

3.1 What is multimedia?

3.2 Principles of multimedia

3.3 Visual Design

3.4 Colour

3.5 CRAP

References used for this module:

Clark, Ruth Colvin & Mayer, Richard, 2002, e-Learning and the Science of Instruction, Pfeiffer, USA.

Gotz, V. 1998, Color & Type for the Screen, Rotovision SA, Switzerland

Kristof, Ray & Satran, A 1995, Interactivity by Design – Creating & Communicating with New Media, Adobe Press, USA

Lynch, Patrick J. & Horton, Sarah 1999, Web Style Guide – Basic Design Principles for Creating Web Sites, Yale University Press.

Williams, Robin 1994, The Non-designer’s Design Book, Peachpit Press, USA

Things to consider whilst doing visual design evaluation:

1. Describe screen layout
2. Visual hierarchy: (Evaluate the use of contrast to draw attention to the key elements
3. Placement of graphics: (Evaluate in terms of multimedia principles, alignment and proximity principles
4. Styles of graphics: (Describe in terms of appropriate and multimedia coherence principles)
5. Use if colours: (Do the selected colours enhance or distract from the learning content)
6. Do you consider the visual design effectiveness from a learning perspective?

• Visual hierarchy
• Image size
• Context and information condensation
• Movement
• Colour dominance
• Colour association
• Font size-> lower importance
• Line vectors
• Right to left, top to bottom…
• Drawing attention to image rather than content

• Graphics
• Where the graphics are situated
• Contrast
• Highly visual-> 3 dimensional aspects to draw attention to layers of context and importance
• Interactivity
• Image coherence principle
• Linear visual
• Alternative outcomes
• 7 principles of multimedia design
• Temporal contiguity theory