« Flash Happy Hour, December 19th | Main | mathML reader algorithm »

Reinventing the Chalkboard

These notes got burried in the obscurity. Since some folks may benefit from them, I'm posting them here.

Reinventing The Chalkboard

Presentation Notes for May 22, 2003

By Kristin Henry


Effectively communicating science and math online presents a unique array of challenges. When considering design, it is important for content, concepts,
and interfaces to be approachable and usable. But there is also a technical dimension: for example, how to render scientific and mathematical concepts within
a browser environment. Kristin Henry, President of GalaxyGoo, Inc. (an interdisciplinary think-tank dedicated to exploring expressions of science and math using online
technologies), will discuss these challenges and demonstrate effective solutions drawing on her own work, and other examples drawn from the Internet.


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


  • 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.
  • 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.


  • 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.


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").


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