1 / 33

ISD 651 – Technology Based Instruction I

ISD 651 – Technology Based Instruction I. October 22 Visual Message Design Interface Design Assignment #8. AGENDA. Introduction / Greetings Discuss Midterm Visual Message Design Interface Design Discuss Weekly Assignment #8 Turn in Assignments Discuss Next Week Go Home.

daniel_millan
Download Presentation

ISD 651 – Technology Based Instruction I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 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!

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

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

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

  12. HIGH LOW LEARNING LOW HIGH REALISM

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

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

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

  16. 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 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 EnvironmentsbyMarshall Jones and Jim Okey(1995) http://ddi.cs.uni-potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htm

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

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

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

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

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

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

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

  26. INTERFACE DESIGNGuidelines 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 Environmentshttp://ddi.cs.uni-potsdam.de/HyFISCH/Multimedia/Learning/InterfaceDesignJones.htm

  27. INTERFACE DESIGNGuidelines for the use of Unfamiliar Territory • Provide cues such as maps and menus as advance organizers that help users conceptualize the organization of the information in the program. • Use a fixed format of frames to keep the information at the same place on screens. • Provide users with program orientation. • Provide users with information to let them know where they are in the program. • 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. • Choose specific fonts, font sizes and font characteristics to represent certain types of information. • Provide users with immediate descriptions of program controls on the same screen as the control Jones. Okay (1995) Interface Design for Computer-based Learning Environmentshttp://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, 2002Topics: 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. TITLE OF THE PROGRAM Word Word Word

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

  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

More Related