1. Charmin Suttles TEC 542

2.  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.  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.  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 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.  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.  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.  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 AVOIDVERTICALTEXTAVOIDVERTICALTEXT

9.  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.  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

11.  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 B Figure C http://psychology.wichita.edu/surl/usabilitynews/62/interactivity.htm

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