Upload
anissa-mcdowell
View
213
Download
0
Embed Size (px)
Citation preview
Instructional Design Principles
As They Apply to Web DesignCharmin Suttles
TEC 542
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.
Basic Interface Design
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
Simplicity
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.
Structure
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.
Consistency
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.
Tolerance
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
Appropriate Font Styles
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
Text Guidelines AVOID
VERTICAL
TEXT
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.
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
Use of Color
Avoid Avoid AvoidAvoid
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
Interactivity in Interface Design
Figure A Figure B Figure C
http://psychology.wichita.edu/surl/usabilitynews/62/interactivity.htm
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.
Resources