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

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


Figure A
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 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).
(3rd ed.). Boston,
MA: Allyn & Bacon.