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