Transcript Instructional Design Principles As They Apply to

Charmin 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.





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

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.

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.


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.

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



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
A
V
O
I
D
V
E
R
T
I
C
A
L
T
E
X
T

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.

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

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
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.