100 likes | 212 Views
Designing Screens for CBT/WBT. Principles of Computer-based Instructional Systems educ 610. Designing Screens for CBT/WBT. Vertical Split – equal columns or 1/3-2/3 Three Zones Horizontal Split Four Quadrants Alignment Maximize interactivity Optimize use of images, video and audio
E N D
Designing Screens for CBT/WBT Principles of Computer-based Instructional Systems educ 610
Designing Screens for CBT/WBT • Vertical Split – equal columns or 1/3-2/3 • Three Zones • Horizontal Split • Four Quadrants • Alignment • Maximize interactivity • Optimize use of images, video and audio • Put user in control
Designing Screens for CBT/WBT • State goals and objectives • Give all necessary instructions • Acknowledge user input • Keep learner informed of location and progress (orientation) • Provide only what is needed
Designing Screens for CBT/WBT Text on the screen: • Line Length • Density • Fonts • Color • Justification • Speed of Display • Tool tips
Designing Screens for CBT/WBT CRAP: • Contrast • Repetition • Alignment • Proximity
Designing Screens for CBT/WBT Contrast: • Avoid elements on the screen that are similar • If elements are to be different (i.e. type, color, line thickness, shape) make them very different • Contrast is the most important visual attraction on a screen
Designing Screens for CBT/WBT Repetition: • Repeat visual elements of the design throughout modules • Repeat color, shape, texture, spatial relationships and sizes • Navigation icons or buttons must be consistent
Designing Screens for CBT/WBT Alignment: • Place nothing on the screen arbitrarily • Every element should have some visual connection with another element on the screen • Avoid overlapping elements (pop-ups may overlap though)
Designing Screens for CBT/WBT Proximity: • Group related items together • Create one visual unit rather than several separate units • This helps the organization of information and reduces clutter
Designing Screens for CBT/WBT Other considerations: • Be sure each screen emphasizes a major point • Shorten long text passages and enhance with graphics and animation where appropriate