Simplicity and Consistency

To make communication clear and precise

(Thorsen, C., 2009).

Basic Interface DesignPrinciples of learning -- Students learn better when:

Words and pictures are presented,

simultaneously

in close proximity

http://www.celldiagram.net/plant-cell-diagram.html

(Thorsen, C., 2009).

Basic Interface DesignPrinciples of learning -- Students learn better when:

Animation and narration are used with no extraneous words or on-screen text.

http://www.youtube.com/watch?v=VlN7K1-9QB0

(Thorsen, C., 2009).

Basic Interface DesignOrient users so they know where they are in the presentation

Use Headings and Captions

Be consistent in layout

Simplify the structure

http://www.mhhe.com/biosci/genbio/tlw3/virtual_labs/lab1/labs/lab1/home.html(Thorsen, C., 2009).

Limit text styles three maximum

Basic Interface Design

Always use sans-serif fonts for your Web page main copy. Arial Geneva Helvetica Lucida Sans Trebuchet Verdana

Use monospace to provide instructions Courier Courier New Lucida Console Monaco

Use fantasy/cursive fonts in images, headlines or call-outs. Copperplate Desdemona Impact Kino

(Thorsen, C., 2009).

Justify text appropriately

Left justify text

Right-justify or decimal-justify numbers

Basic Interface Design

Keep text lines shortUse lists

• Bullets• Numbers• Check boxes

(Thorsen, C., 2009).

Basic Interface Design

Use upper- and lower- case letters

Use single spacing

Double space between

paragraphs

Do not use flashing text

Do not stack text—use horizontal(Thorsen, C., 2009).

Basic Interface DesignUse a color scheme

Limit colors -- three maximum

http://www.biology.arizona.edu/biochemistry/tutorials/chemistry/main.html

http://www.biology.arizona.edu/biochemistry/problem_sets/photosynthesis_2/photosynthesis_2.html

(Thorsen, C., 2009).

Basic Interface Design

Limit the focus

One main topic per screen

Five to nine subtopics

Provide Emphasis Use bold, italics or underlining

http://www.biology.arizona.edu/cell_bio/tutorials/cell_cycle/main.html

(Thorsen, C., 2009).

Basic Interface DesignEnhance text with graphics and interactivity

http://www.hhmi.org/biointeractive/click/index.html

(Thorsen, C., 2009).

Basic Interface DesignKnow your audience!!

(Thorsen, C., 2009).

References

The Biology Project (2010) The cell cycle and mitosis. Retrieved January 30, 2011 from the University of Arizona http://www.biology.arizona.edu/cell_bio/tutorials/cell_cycle/main.html

The Biology Project (2010) Chemistry tutorial. Retrieved January 30, 2011 from the University of Arizona http://www.biology.arizona.edu/biochemistry/tutorials/chemistry/main.html

The Biology Project (2010) Photosynthesis problem set 2. Retrieved January 30, 2011 from the University of Arizona http://www.biology.arizona.edu/biochemistry/problem_sets/photosynthesis_2/photosynthesis_2.html

Cell diagram (n.d.) retrieved January 29, 2011 from http://www.celldiagram.net/plant-cell-diagram.html

References

Howard Hughes Medical Institute BioInteractive (2010) Click and learn. Retrieved January 30, 2011 from HHMI http://www.hhmi.org/biointeractive/click/index.html

McCammon, W. R., (2009) A GREAT mitosis video. Pisgah High School retrieved January 30, 2011 from http://www.youtube.com/watch?v=AhgRhXl7w_g

Raven and Johnson (2010) Catching evolution in action. Retrieved from McGraw Hill Online Learning Center January 30, 2011 from http://www.mhhe.com/biosci/genbio/tlw3/virtual_labs/lab1/labs/lab1/home.html

Thorsen, C. (2009). TechTactics: Technology for teachers (3rd ed.). [Electronic Version]. Allyn & Bacon.