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

2. AGENDA Introduction / Greetings Discuss Midterm Visual Message Design Interface Design Discuss Weekly Assignment #8 Turn in Assignments Discuss Next Week Go Home

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

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

5. 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

6. 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

7. What is your interpretation of this picture?

8. Visual Message Design Good visual design helps to: Gain and maintain the learner's attention Explain something Help the learner to remember the information. Dempsey, J.V. ISD 651 Technology Based Instruction I Spring 2002

9. Visual Message Design Types 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???? Dempsey, J.V. ISD 651 Technology Based Instruction I Spring 2002

10. Visual Message Design Functions 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. Dempsey, J.V. ISD 651 Technology Based Instruction I Spring 2002

11. Visual Message Design Proper 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. Dempsey, J.V. ISD 651 Technology Based Instruction I Spring 2002

12. LOW HIGH HIGH LOW REALISM LEARNING

13. Visual Message Design Considerations 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. Dempsey, J.V. ISD 651 Technology Based Instruction I Spring 2002

14. Visual Message Design Considerations 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. Dempsey, J.V. ISD 651 Technology Based Instruction I Spring 2002

15. Visual Message Design Graphics 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 Dempsey, J.V. ISD 651 Technology Based Instruction I Spring 2002

16. Visual Message Design Using 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 Dempsey, J.V. ISD 651 Technology Based Instruction I Spring 2002

17. 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. Dempsey, J.V. ISD 651 Technology Based Instruction I Spring 2002

18. WHAT IS INTERFACE DESIGN? Interface Design for Computer-Based Learning Environments by Marshall Jones and Jim Okey (1995) http://ddi.cs.uni- potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htm

19. INTERFACE DESIGN Concepts 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 Environments http://ddi.cs.uni-potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htm

20. INTERFACE DESIGN Concepts 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 Jones. Okay (1995) Interface Design for Computer-based Learning Environments http://ddi.cs.uni-potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htm

21. INTERFACE DESIGN Concepts 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. Jones. Okay (1995) Interface Design for Computer-based Learning Environments http://ddi.cs.uni-potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htm

22. INTERFACE DESIGN Concepts 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 Jones. Okay (1995) Interface Design for Computer-based Learning Environments http://ddi.cs.uni-potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htm

23. INTERFACE DESIGN Guidelines 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. Jones. Okay (1995) Interface Design for Computer-based Learning Environments http://ddi.cs.uni-potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htm

24. INTERFACE DESIGN Guidelines 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. Jones. Okay (1995) Interface Design for Computer-based Learning Environments http://ddi.cs.uni-potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htm

25. INTERFACE DESIGN Guidelines 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. Jones. Okay (1995) Interface Design for Computer-based Learning Environments http://ddi.cs.uni-potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htm

26. 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. Jones. Okay (1995) Interface Design for Computer-based Learning Environments http://ddi.cs.uni-potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htm

27. INTERFACE DESIGN Guidelines 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 Jones. Okay (1995) Interface Design for Computer-based Learning Environments http://ddi.cs.uni-potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htm

28. 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/

29. Discuss Weekly Assignment #6 Points: 15 (out of 300 possible for the course - 5% of your overall grade) Due Date: November5, 2002 Topics: Interface Design Assignment: Interface Design Mock Up Use 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

30. Word TITLE OF THE PROGRAM

31. Discuss Next Week October 29 Text Design Discuss Weekly Assignment #9

32. Discuss 2 Weeks from Now November 5 Audio Discuss Weekly Assignment #10

33. Go Home Have a Good Week Review Things You Missed on the Midterm Alabama vs. Tennessee Saturday 6:45 CT on ESPN Fun Run and Picnic Nov 2