ISD 651 – Technology Based Instruction I October 22 Visual Message Design Interface Design Assignment #8

ISD 651 – Technology Based Instruction I

October 22Visual Message DesignInterface Design Assignment #8

AGENDAIntroduction / GreetingsDiscuss MidtermVisual Message DesignInterface DesignDiscuss Weekly Assignment #8Turn in AssignmentsDiscuss Next WeekGo Home

Introduction / Greetings• HI!• Favorite TV Show? Movie? Book?• Jobs / Careers?• Dissertation? R & D Projects? Theses?

Discuss MidtermMost people did really wellMore important to learn than to make an A on the QuizWhat is interesting / important about the 1st half of the course? What will you take with you? How has it changed your thoughts about ID?REVIEW! REVIEW! REVIEW!Great Comps Questions!

Visual Message Design Visual perception

The way people see pictures

There seems to be an assumption that pictures are some kind of intellectual or cross-cultural language that everybody understands. However, the ability to read pictures is the result of an informal educational process. People interpret pictures in different ways, depending on a number of things related to who they are, where they live, what they do etc. Dempsey, J.V. ISD 651 Technology Based Instruction I Spring 2002

Visual Message Design• We cannot assume that people understand whatever

pictures they see. The degree to which people understand pictures may depend on:

– Literacy level– Previous exposure to and experience with communication materials– Social, cultural and religious beliefs and practices – The relevance of the material to the situation of the audience– If the subject is threatening– The length of the materials – Convenience/time of the respondent– Colors– Language– Complexity in presentations. For example Super-impositions, Perceptivity

Dempsey, J.V. ISD 651 Technology Based Instruction I Spring 2002

What is your interpretation of this picture?

Visual Message DesignGood visual design helps to: • Gain and maintain the learner's attention • Explain something • Help the learner to remember the information.


Visual Message DesignTypes of Visuals

Representational: Line drawings, sketches, photographs that look like the person, place or thing they represent are called representational visuals. Analogical: An analogical visual type of visual that represents a concept that is similar in some ways but otherwise unlike. Analogical visuals are often used with abstract concepts; for instance the flow of water is sometimes used as an analogy for the flow of electricity. Charts and Graphs: Graphs represent numerical ideas, and charts can represent numerical or abstract ideas. 3 EXAMPLES????


Visual Message DesignFunctions of Visuals in Instruction

Attentional - pictures or graphics attract attention to the material or direct attention within the material - hopefully using graphics in this way will heighten the likelihood that a user will remember the material. Affective - pictures enhance enjoyment or affect emotions and attitudes. Cognitive - the cognitive use of graphics involves using pictures to increase comprehension (for example, providing elaboration for a text explanation), to improve recollection and retention, or to provide information that is not otherwise available.

Compensatory - the compensatory use of pictures involves

helping poor readers by adding pictorial clues to decode text.


Visual Message DesignProper Use of Visuals

Illustrated visuals used in the context of learning to read are not very helpful Illustrated visuals that contain text-redundant information can facilitate learning Illustrated visuals that are not text-redundant neither help nor hinder learning

Illustration variables (cueing) such as size, page position, style, color, and degree of realism may direct attention but may not act as a significant aid in learning There is a curvilinear relationship between the degree of realism in illustrations and the subsequent learning that takes place.


LOW HIGH

HIGH

LOW

REALISM

LEARNING

Visual Message DesignConsiderations for using Visuals

I Germaneness - Germaneness means that a picture is not only relevant to the discussion, but also essential. It cannot be removed without harming comprehension. Realism - although it would seem evident that high quality, realistic pictures would be most effective, research has not verified this understanding. In many instances, "the detail of a photograph may also overwhelm the learner with irrelevant information so that instructionally salient features are difficult to discern". In many instances, simplified drawings will prove better instructional aids since they focus attention on the salient points under construction.


Visual Message DesignConsiderations for using Visuals

II Complexity/Simplicity - "The general rule of thumb is to use graphics that are as simple as possible. Complexity should be added only where absolutely required." Size - Larger pictures cause more arousal, were better remembered and were better liked than smaller ones. Since larger pictures are more memorable, it would seem important to include the largest pictures you could possibly use on your page. It is necessary to balance the need to have a graphic that is large enough to be comprehensible with the need to have the page download quickly before users move on. It is also important that you design graphics that are not too large for the user's screen. Cultural factors - Since it is possible that users from other cultures will be viewing our sites, it is important that care is taken to ensure that the use of certain colors or graphics does not offend users from other cultures.


Visual Message DesignGraphics Tips

Keep it simple Leave white space Keep it organized Create a path for the eye Make something dominant Divide space in an interesting way

Present one idea at a time Graphics or photos should face the middle of the picture Use a horizontal format Dynamic visuals (with active, diagonal lines) gain and retain attention better Overlays can be used to add more information Don't get carried away


Visual Message DesignUsing Color

• Color can be used to highlight an aspect of the graphic you want to focus on

• Ensure sufficient contrast between the background and the object or text (projected visuals need more contrast than those read off paper or a computer screen)

• Don't overdo colors (2 or 3 are enough) • Colors often have specific meanings,

but these vary from culture to culture


Visual Message Design• Research into static and dynamic

illustrations in text and computer based instruction may give some guidelines as to how graphics are used and when they are useful or distracting in web design.

• Visuals that complement the text information being presented increase the likelihood for retention of that information, but visuals that are not related to the text have no effect on retention.


WHAT IS INTERFACE DESIGN?

Interface Design for Computer-Based Learning

Environmentsby

Marshall Jones and Jim Okey(1995)

http://ddi.cs.uni-potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htm

INTERFACE DESIGNConcepts Of User Interface Design I

Browsing (Jones, 1989; Laurel, Oren, & Don, 1992). Browsing allows for the flexible exploration of the content of the program through a variety of controls.

Changes in State (Nicol, 1990). Animation, movement or other visual effects used to provide users with a visual cue that a particular action is taking place is known as the concept changes in state.

Closure (Jones, 1989) The concept of closure deals with two aspects of information within a computer-based learning environment. 1) organization of program information into manageable segments 2) users know that a segment of information has been chosen or completed

Information Access (Laurel, Oren, & Don, 1992). Implementation of the concept of information access provides users with the controls to conduct deliberate searches for information to fill a particular need.

Jones. Okay (1995) Interface Design for Computer-based Learning Environmentshttp://ddi.cs.uni-potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htm

INTERFACE DESIGNConcepts Of User Interface Design II

Interactive Tools for Interactive Tasks (Reingold, 1990) the information contained in the program need to be appropriate to the task, and capable of supporting the program theme.

Interface Consistency (Laurel, Oren, & Don, 1992). the users' ability to "scroll around" within text and audio segments in the same manner as they are able to do within text.

Media Integration and Media Biases (Laurel, Oren, & Don, 1992). Media integration deals with allowing users to search for and retrieve information across different media types.

Media biases means that some types of media are seen as being more credible than others


INTERFACE DESIGNConcepts Of User Interface Design III

Metaphors (Jones, 1989) Metaphors help users define what the interface can do and what information is contained in a program by relating it to a known function or process taken from an area or discipline familiar to the users.

Modeling the Process and Coaching the User (Nicol, 1990) The concept of modeling the process and coaching the user provides users with help in using the program and in finding specific information in the program.

Progressive Disclosure (Jones, 1989) keeping information within the computer-based learning environment presented to the user in small, manageable segments.


INTERFACE DESIGNConcepts Of User Interface Design IV

Searchability and Granularity (Laurel, Oren, & Don, 1992).

Unfamiliar Territory. Nicol (1990)

Visual Momentum (Jones, 1989)

Way Finding (Jones, 1989)

Selection Indicators

Control Types

Tool Availability


INTERFACE DESIGNGuidelines for Browsing

1. Provide selectable areas to allow users to access information.

2. Allow users to access information in a user-determined order.

3. Provide maps so that users can find where they are and allow provisions to jump to other information of interest from the map.

4. Provide users with feedback to let them know that they must wait when significant time delays are required for the program to access information.

5. Provide users with information that lets them know that they are making progress.

6. Arrange information in a non-threatening manner so that users are not overwhelmed by the amount of information contained in a program.

7. Provide visual effects to give users visual feedback that their choices have been made and registered by the program.


INTERFACE DESIGNGuidelines for Media Integration

1. Integrate the program information across different media types.

2. Provide information from all media types that is relevant, appropriate, and valid so that users know that the information is credible.

3. Provide access for all types of media in the same manner.

4. Use similar control icons for all types of media.


INTERFACE DESIGNGuidelines for the use of Metaphors

1. Use a metaphor or theme for the program.

2. Make the metaphor obvious to users.

3. Make the metaphor applicable to the program's content.

4. Provide navigational tools and interaction styles that allow users to interact with the information contained in the program in a manner that is consistent with the metaphor.


INTERFACE DESIGN Guidelines for the use of Information Access

1. Allow for guided searches for specific information. This may be done through the use of indexed lists of all the information contained in the program, or by letting users type in search terms. Additionally, designers may consider using some type of path for users to take through the program when searching for certain types of information.

2. Allow users to search for information across different media types. This guideline may be one that is not employable at the moment. It accounts for idea or concept searching for information within different media types. While interactive video allows for access of designer determined sections, all video needs to be searchable for single words, phrases or ideas. Video needs to be cross referenced with other types of information in a user determined manner.


INTERFACE DESIGNGuidelines for the use of Unfamiliar Territory

1. Provide cues such as maps and menus as advance organizers that help users conceptualize the organization of the information in the program.

2. Use a fixed format of frames to keep the information at the same place on screens.

3. Provide users with program orientation.

4. Provide users with information to let them know where they are in the program.

5. Use location indicators and progress reports to let users know where they are, where they need to go, and how long it will take them to get there.

6. Choose specific fonts, font sizes and font characteristics to represent certain types of information.

7. Provide users with immediate descriptions of program controls on the same screen as the control


International Visual Literacy Association (IVLA)

IVLA is a not-for-profit association of educators, artists, and researchers dedicated to the

principles of visual literacy. IVLA was formed for the purpose of providing education, instruction and training in modes of visual communication

and the application through the concept of visual literacy to individuals, groups, organizations, and

to the public in general.

http://www.ivla.org/

Discuss Weekly Assignment #6

Points: 15 (out of 300 possible for the course - 5% of your overall grade) Due Date: November5, 2002 Topics: Interface DesignAssignment: Interface Design Mock UpUse PowerPoint to create a mock up of a computer based training module. Include 10 slides that represent important screens of your CBT. (You don’t have to have a slide for every possible CBT screen). Use the interface design principles described by Jones to create a CBT module that conforms to CBT interface design guidelines. On a separate screen (or screens) describe which interface design guidelines you considered, which ones your program would score high on, which ones your program may need work on. Also describe the metaphor you used, why you selected that metaphor, and how well you think the metaphor works. You may include concepts from Visual Message Design if you want

WordWord Word

TITLE OF THE PROGRAM

Discuss Next Week

October 29Text DesignDiscuss Weekly Assignment #9

Discuss 2 Weeks from Now

November 5AudioDiscuss Weekly Assignment #10

Go HomeHave a Good WeekReview Things You Missed on the MidtermAlabama vs. Tennessee Saturday 6:45 CT on ESPN Fun Run and Picnic Nov 2

Documents

ISD 651 – Technology Based Instruction I October 22 Visual Message Design Interface Design Assignment #8