Visual Message Design

Dawn WrightKatherine Jackson

What is it?

Consistency, feedback, the ability to recover from errors, and user control are just a few principles of good user-interface design.

What is it?

Visual message design involves the appropriate considerations of visual perceptions when designing an instructional program. The interpretation of pictures is based on prior experiences, culture, etc. When designing an instructional program it is important to consider the culture, educational ability, and language of the audience. The purpose of visual message design is to gain attention, create meaning, and facilitate retention.

Main Points

Do not assume that every audience will understand the pictures they see, or interpret them in the way they were intended. Functions of visuals: Attentional Affective Cognitive Compensatory

Main Points (cont.)

Visuals that realistic and reinforce the text are very useful to the learner.Types of Visuals: Representational Analogical Charts and graphs

Practical considerations

Use simple graphics as often as possible.Be certain colors and graphics are not offensive to audiences from other cultures.Use organized design.Make something dominant.Present one idea at a time.

Relation to ID

AttentionAffectiveCognitiveCompensatory

Main people

Marshall Jones and Jim Okey – Interface Design in Computer-Based Learning Enviroments

Interface Design for Computer-Based Learning Environments

BrowsingChanges in stateClosureInformation accessInteractive tools for interactive tasksInterface consistency

Media integration and media biasesMetaphorsModelingProgressive disclosure

Roberts, D., Berry, D., Isensee, S. and Mullaly, J.

OVID: Object, View, and Interaction Design.

OVID stands for Object, View, and Interaction Design: an interface methodology that attempts to bring some structure to the often chaotic design process. You can do a good job at user and task analysis, but still have a poor product if the implementation is flawed. The authors combine notation and modeling techniques used by successful coders (UML, state diagrams, class models) with the methods of user interface designers.

Use in D&C #1Visual Design & Gagne’ Nine Events

1. Gain attention – Use bright color or animation2. Identify objective - pose question: 3. Recall prior learning – use culturally appropriate

graphic4. Present stimulus – use related text and images 5. Guide learning- use graphics to elaborate 6. Elicit performance -7. Provide feedback - provide immediate visual

feedback8. Assess performance- provide immediate visual

feedback9. Enhance retention/transfer – use color to highlight

important info and cues/mnemonics

Use in D&C #2

Use Interface design principles in computer-based and on-line instructionConsider in Learner and Environmental Analysis to insure compatibility with culture, physical abilities

Websites

The Visual Messagehttp://www.netresult.ws/sitedev/dev1.htm Notes on Visual and Interaction Dsignhttp://www.valcasey.com/webdesignInterface Design for Computer-based Learning Environmentshttp://ddi.cs.uni-potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htmInternational Visual Literacy Association (IVLA)http://www.ivla.orgMessage Designhttp://www.ualberta.ca/~bskaalid/newmedia/messagedesignlinks.htm

Books

1. Essential guide to user interface design : an introduction to GUI design principles and techniques / Wilbert O. Galitz

2. Practitioners handbook for user interface design and development / R.J. Torres

3. Usability engineering lifecycle : a practitioner's handbook for user interface design / Deborah J. Mayhew.

4. User and task analysis for interface design / JoAnn T. Hackos and Janice C. Redish.

5. In your face : the best of interactive interface design / [introduction by Kai Krause].