GalaxyGoo Blogs

Introduction:

What does a chalkboard and the internet have in common?

• tools for communication
• interactive
• dynamic
• text and graphic (chalkboard great for real time illustration)
• only as effective as it’s used

Math and science are very visual. Research techniques use visual signals. Math problems are converted into symbols before solving. Charts, and tables, and micrographs...oh my!

Note: A lot of good design practices are especially important when teaching a complex subject.

Basic Web Design Tips:

Navigation:

• Navigation is a summary of your web site or project.
  
• Use descriptive terms for menu items
  
• Keep navigation and content discrete (don’t blur them): If elements of the navigation and the animation are too similar it can be confusing, at least on a subliminal level.
  
• But don’t make them hunt for the Interface, and if you have to use banner adds on your site, be sure that you're interface doesn't look like a banner add.
  
• Keep the navigation in the same place. Don’t make them hunt for the "next" button, and don't let your buttons jump about from one screen to the next.
  
• Use navigation, when needed, to lead through the story

Readability:

• Use relative font sizes
  
• Make your default font size at least 10 point
  
• Text is Text, don’t use graphics for text,
  • Style sheets, and user settings, don’t have any effect on graphics.
  • using images for text takes the meaning out of the document
  • Search engines can’t index the content of the graphics, without alt tag <--increases download time.
  • If a heading, the importance of the text is lost when graphic
• If you can, provide alternate style sheets -->low-vision users, color-blind
  
• Maximize the color contrast between the text and the background
  
• Avoid color clashes --don’t put red text on a blue background!!!
  
• Keep background simple--so it doesn’t interfere with text

Misc. Points about HTML :

• Use alt text for all graphic elements! --for screen readers, especially
  
• Frames: avoid them!!
  
• When choosing courseware package, look for optional use of frames <--don’t get locked into a package that only generates frames.
• IF you must use frames, provide a fallback / alternative , and be sure to include navigation back to your site from every page.
• If you’re tempted to use frames, for design purposes, why not use Flash?
  
• Site map (table of contents) -- link to it from every pager
  
• Essential links at page footer , especially if graphic menu is used
  

Animation & Design Tips:

Start with the Subject

• What you’re communicating has unique character, and challenges.
  
• Break it down into smallest units
  
• If you’re working on an animation, and you have illustrations to start from, figure out how the stills are related. Often, textbook illustrations are not clearly connected. This is where context and continuity can be the biggest challenge.
  

Context & continuity

• Opportunities for making connections!
  
• Tell the whole story.
• Don’t just skip from illustration to illustration-- connect them.
  
• Some gaps will pop up when you start animating, gaps that no one thinks of ahead of time.
  
• Plan for them, and expect at least one round of additional research.
• When zooming into more detail, maintain context for the user.
  • A great example of maintaining context, and easy user interface: http://www.arthritis.com/content/flash/arthritis_rheum.swf
  
  
• Show the mechanism for the change, if possible

Accuracy is Critical

• Inaccurate use of symbols, models, and captions can be misleading, and users can jump to incorrect conclusions.
• Design artifacts can lead to misinformation, be careful.
  

Use the whole canvas!

• Make use of all the space you can. (But don’t forget to use white space.)

Using color:

• Color can be a powerful tool for communication
  
• When distinguishing between units that look similar (like amino acids), use color to emphasize difference instead of using shapes, or another gimmick, that are unrelated to the content.
• Color and transparency (alpha) can also be used to organize complex information without oversimplifying or overwhelming.
  
• In Flash, set colors programmatically, and use a style-color object to set color variables.
  

Sound:

• Let user decide if sound is off or on.
  
• Make it easier on low bandwidth users, and only load sound if user selects it.
  
• Don’t rely on sound
  
• Offer a version that makes sense without the sound on at all (include text captions).
  

What to show, and when:

• It’s a delicate balance between showing too much and too little information in illustrations and animations.
  
• With animations you can use various design tricks to emphasize particular elements at different times.
  

Danger!

• Elements that suddenly appear, can be distracting and misleading. Example: an animation of a synaptic cleft showing Na+ ions appearing only after the ACh has bound. This could imply that the H+ ions move into the cleft only at this time, when they are actually present all along, but because we are emphasizing the movement of Ach we might be tempted leave out the Na+. http://www.blackwellscience.com/matthews/nmj.html
  
• Too much at once: Too much information on one "page" can make it difficult to mentally organize what we’re seeing http://www.johnkyrk.com/H2O.html & http://www.johnkyrk.com/cellmembraneA.html
  

Legends and Labels:

• Try to keep them separate from the animation, so that the animation is less cluttered.
  
• When using lines for labels, use straight lines, and right angles to more clearly signify them as pointers and not part of the illustration/animation.
  

Use Icons Carefully:

• If using icons, have a legend that gives an explanation of them, and keep it readily available to the user.
  
• Avoid using icons for navigation ---("mystery meat").

Challenges:

Math Notation --Displaying math statements properly in digital documents:

• pdf files: static, large file size...
• gif images: interrupts flow of text, be sure to use ALT attribute to provide for accessibility ---Cannot be interpreted by screen readers or Braille-- displays Cannot be edited-- No two way communication of math
• MathML: where we're headed, and best solution within reach, currently
• Amaya browser: renders mathML natively (http://www.w3.org/Amaya/)
• webEQ: authoring, and viewing tools. currently on the market, but not open source
• MathML in Flash: open source project in the works

Build for the future:

• Program animations to run at relative speeds, or future computers may zip through the animation too quickly to benefit the user.

• Keep source files, and documentation of project, so that they can be more easily updated in the future. If possible, make programs open source.

• Main challenges, for math and science communication online, revolve around notation. We're getting close.

One Last Thought

Think of the internet as a chalkboard. By itself it’s not very useful, but give it to a talented teacher with a box of colored chalk, and it becomes a powerful tool for communication and learning.

Author's Bio:

Kristin Henry is President of GalaxyGoo, Inc, an interdisciplinary think-tank dedicated to exploring expressions of science and math with online technologies, for public benefit. Her research interests include: expressing science and math concepts with new-media techniques; exploring user interface and database application design and implementation; and integration of webMathematica with various client-side solutions, including Flash.

References and Further Reading:

1. How To Teach Over The Web, Accessibly. CSUN Conference - March 21, 2000. Laurie Harrison, Jan Richards, Jutta Treviranus. http://snow.utoronto.ca/courses/csun2000.html
2. Designing an Interactive Internet-Centered Course in Environmental Chemistry: A Multifaceted Approach to Distance Education. Thomas R. MacDonald and Robert F. Toia. Chemical Education Journal (CEJ), Vol. 4, No. 1 /Registration No. 4-8/Received February 8, 2000 http://chem.sci.utsunomiya-u.ac.jp/v4n1/toia/header8.html
3. Readability Guidelines for Websites. useit.com http://www.useit.com/alertbox/20020819.html\
4. Optimizing Flash or Search Engines: http://australia.internet.com/r/article/jsp/sid/13073