Instructional Design Principles As They Apply to Web Design

1. Instructional Design PrinciplesAs They Apply to Web Design Charmin Suttles TEC 542

2. Basic Interface Design • What is an interface? • Thorsen(2009) describes an interface as “the consistent color, font style, and placement of informational and navigational elements of a program or an operating system.” • What does good design look like? • Good design applies the four main principles of simplicity, structure, consistency, tolerance, as well as interactivity.

3. Simplicity • Do not decorate just to decorate. • Eliminate unneeded items. • Match the system and the real world. • Use one main topic per screen. • Make system status viewable. • Use on screen information to orient users

4. Structure • Keys for Structure Design • Easy navigation • User control • Flexibility • Efficiency • Aesthetic • Minimalist • Size and placement matters • Larger objects and objects placed at the top appear more important • Group objects with similar functions • Notice the grouping on the FunBrain website above.

5. Consistency • Consistency of the following is essential for good interface design: • Color Schemes • Font Styles • Placement of Informational and Navigational Elements • Notice the consistency between the two pages below. The main links across the top remain the same and the background and formatting also remain the same.

6. Tolerance • Websites should be tolerant of user mistakes. • Error diagnosis and recovery should be provided. • For example, the graphing calculator website below recognizes invalid inputs and points them out to the user.

7. Appropriate Font Styles • No more than 3 styles per screen. • One for headings • One for navigation and control buttons • One for body text • Styles should be consistent • Use upper- and lowercase • Sans serif fonts are best for computer screens • Like Arial and Helvetica

8. Text Guidelines A V O I D V E R T I C A L T E X T • Keep text lines short (8 and 10 words) • Use single spacing – double space between paragraphs • Use bold, italics, or underlining for emphasis • Do not use flashing text – it is more of a distraction • Lists are helpful • Do not use vertical text

9. Use of Color • Use no more than 3 or 4 colors per screen. • Colors in a graphic do not count. • Colors should be used for attention, relationships, and to provide data. • Color schemes should be consistent. • Good background colors: • blue, black, white and yellow • Consider printing costs of dark colored backgrounds.

10. Use of Color • Avoid low-contrast text and background combinations • Like orange on yellow • Too much contrast may also be hard to read • Others to avoid are green on blue, red on blue, and red on green Avoid Avoid Avoid Avoid

11. Interactivity in Interface Design • Interactivity allows for user input and computer response through: • Menus, hot links, and nonlinear format • Figure A shows a linear format where users simply click next to view material • Figure B allows for a little interactivity with a nonlinear format where users can click on the link to the information they want to view • Figure C actually requires users to actively engage by dragging questions to their correct answers Figure A Figure C Figure B http://psychology.wichita.edu/surl/usabilitynews/62/interactivity.htm

12. Resources Brady, Laurie. (n.d.) The Role of Interactivity in Web-Based Educational Material. Retrieved from http://psychology.wichita.edu/surl/usabilitynews/62/interactivity.htm Thorsen, Carolyn. (2009). Tech Tactics: Technology for Teachers (3rd ed.). Boston, MA: Allyn & Bacon.