Who do you think you are, God? ChemDraw is smart enough to warn a user (with a red outline) when something is chemically impossible.

Chemistry is one of the great non-verbal disciplines.  In so many ways it reminds me of music.  Atoms are too small to see, even with a microscope, so chemists must measure the invisible as spectra and then visualize the data as waveforms – just like audio engineers do with sound in applications like ProTools.  To express themselves, chemists draw things in complex symbolic notation – just like a composer draws sheet music.  Chemical structure drawings not only represent a molecule’s make-up, but also it’s spatial arrangement, information about it’s chemical properties, and it’s potential intermolecule interactions.  From their first days as students, chemists quickly learn to think in two-dimensional planes of geometric shapes such as hexagons and dashed lines, and rarely need to reach for the English words to describe the same concepts (cyclohexane rings and partial bonds, in case you were wondering).   By the time one is working as a professional in the field, the visual vernacular is not even questioned.  The complex notations are scrawled (by hand) in lab books and on fume hoods, then ultimately plugged into a computer  in order to utilize specialized search engines, lab-book software, PowerPoint presentations to colleagues, and to illustrate scientific articles.  It is a natural, living language, bending itself over time as new abbreviations and rival ways of doing things are constantly introduced.

In 1937, the structure drawing conventions were quite different. Here every atom in the molecule is labeled independently. Source: TotallySynthetic.com

Today the molecule, Geranic Acid, is rendered in a greatly simplified shorthand. Chemical structure notation is a living, breathing language.

A chemical has a common name (ex. geranic acid), like you might see in a drug advertisement, but there are so many different possibilities at the atomic level that this is trivial information to the scientist.  Chemicals have a longer, more specific name too, regulated in something called the IUPAC Gold Book (ex. 3,7-Dimethyl-2,6-octadienoic acid), but nobody relies on these alone for identification because they are virtually impossible to remember.   A chemical formula, which looks like this C₁₀H₁₆O₂ and represents the exact amounts and order of each element in a structure is more descriptive but contains incomplete information.  Chemists need to see certain things – for instance, the nature of and relationship between the bonds, which is related to spatial geometry in three dimensions (referred to as stereochemistry).  One reason the visual information is so important is that molecules have “isomers,” which are chemical structures that are identical in chemical formula but differ in the structural relationship between their functional groups.  There are even some molecules that are identical in structure, but who don’t form super-imposable mirror images of one another because they lack an internal plane of symmetry.  Therefore they need to be annotated in their “R” and “S” orientations (R is the Latin rectus for right, and S from the Latin sinister for left). A compound called Carvone, for instance, smells like caraway in one orientation and spearmint in the other.  (This phenomenon, known to chemists as chirality, is well illustrated in this famous case study – “Two Enantiomers of Carvone”).

Strait lines, hashed wedges, and bold wedges in chemical drawings are indications of 3d perspective. Source: How to Draw Organic Molecules

Most chemical compounds are easier to draw from memory than they are to name from memory. Here a single structure is portrayed with it's two possible IUPAC chemical names beneath.

The seven structure isomers of C3H6O. Such variation of bonding arrangements between the same atoms is one reason that chemical drawing is the lingua franca of chemistry. Source: Cheminformatics: A Textbook by Dr. Thomas Engel (Wiley)

Orientation matters in chemistry. The (S) variant of carvone smells like caraway, the (R) smells like spearmint.

The molecules themselves exist in 3D space, so drawing them on two-dimensional paper and computer screens introduces a problem of perspective.  And perspective can literally be a life and death matter in chemistry (see the Thalidomide disaster, to understand why.)  Painters and graphic artists use tricks like foreshortening and vanishing points to deal with perspective in portraying realistic information about 3d orientation on a 2d plane, but it is actually quite rare to handle perspective in a symbolic information system.  One example is geologic maps, which use contour lines as stereodescriptors, but in other fields (architecture and engineering, for instance) 3d information is mostly handled in 3d (think AutoCAD).  Interestingly, in chemistry, 2D notation tends to work better and greatly speeds the chemist’s workflow, so its use is nearly ubiquitous.  3D formats exist, but they are marginalized to the areas of (1) chemical education (students need a considerable amount of time with physical models of molecules before they really understand the forces involved, but pro chemists have internalized this to such a degree that the such models are a hindrance to identification) and (2) biochemistry applications such as working with polymerized macromolecules like enzymes and proteins (but even here, 3D is used more as an analytical technique than it is for communication and calculations.)  What’s amazing is how complex the 2D stereo-chemistry notations are and how much practice it takes to truly master them.   The notations for basic orientation of elements, rings and bond-types are a  fairly straightforward collection of shapes, hashes, dashes, wedges, straight lines, dotted lines, and wavy lines.  Where things get tougher is when shapes are twisted into tetrahedral, trigonal, pyramidal, bipyramidal, planar, see-saw, and octahedral orientations.  According to a chemist friend of mine, drawing this stuff is not particularly intuitive and just gets learned by trial and error over years of schooling.  The common shapes get memorized (having names like “chair,” “boat,” and “other chair.”) Adding to these problems of perspective are problems of consistency and ambiguity.   Each journal has a house ’style’ for chemical drawings, but there are many subtle variations and a loose climate of enforcement among scientific editors – who realize that some labs have their own time-tested style and are hesitant to intervene.

Drawing sugars in flatland. It's easy to draw a perfect hexagon, but as molecules add energy they go through "conformations" that require different geometry to render on a 2d plane, as you can see in these more complex shapes on the upper left. Image Source: Nature Chemical Biology Style Guide for Chemical Structures

One way to remember how to draw the various conformations of cyclohexane molecules is to remember their handy nicknames, "boat," "chair," and "other chair."

On this organic chemistry blog, 3D molecules appear, but always next to their standard 2D chemical structure notation. The 2d version, with it's stereodescriptive annotations such as the hashed and solid black wedges, is the fastest way for a chemist to quickly size up the key information, such as "Where are the bonds?"

These are two chemical diagrams that ran in the same issue of JACS (a prestigious chemistry journal.) They have two different styles. Note the wedged hashes used as stereo-descriptors in Corey vs. the non-wedged hashes in Danishefsky. While Danishefsky's version was done with intent (as a "relative" vs. absolute stereo perspective) It could potentially be misconstrued as a particularly thick partial bond. One controversy here is the different uses of line weight between the two styles. Danishevsky uses variable line weights to communicate information about the bond strength. Source: TotallySynthetic.com

Constructing the structures in a computerized environment using a mouse introduces its own sort of problems and advantages.  In some ways, the modern chemical drawing application is a mere iteration away from its historic analog of plastic stencils and India ink.  A palette of simple shape tools allows one to quickly “hand-draw” a structure from predefined building blocks in a manner that’s only bested by, well, hand-drawing a structure with paper and pencil.  Where the programs shine is in the use of templates – where known compounds and functional groups can be quickly rendered by the program and then tweaked with the hand-drawing tools by the chemist.

ChemDraw, the leading chemical drawing software, has a very concise interface. Element names themselves (represented by letters) do not appear in the tool-palette. They are more easily typed in, rather than chosen from a menu, because organic chemists only work with 5 out of the 118 elements on the periodic table.

Templates for known compounds and functional groups are powerful features of chemical drawing programs. For instance, a 12 amino acid chain can be instantaneously rendered in ChemDraw by merely typing in a series of shorthand letters to describe each amino acid in the chain, then choosing the command "expand label" from the global menu bar.

Using templates as starting points for chemical drawing is fundamental. In this example - a retrosynthesis of taxol - separate templates for carbon rings, fused rings, aliphatic chains, groups, arrows, and reaction symbols were deployed, then hand-edited together. Source: Li, Wan, Shi, Ouyang (2004)

Once the structure is rendered, simple calculations, like molecular weight, are a snap.  The programs can also perform complex calculations, such as simulating the bond “fragmentation” that happens when a compound is subjected to measurement in a mass spectrometer.    3d models are instantly generated by most desktop chemical drawing software these days, which can then be used to bend the shape of a molecule into the correct conformation, while the program renders it simultaneously with it’s correct 2d shape and stereoindicators in a second window.

ChemDraw's ability to instantly generate 3D versions of a structure is useful in understanding "conformations," which is how a molecule twists it's bonds as energy is added. By simultaneously rendering it's 2d structure format on the same screen, a chemist can see how to draw the correct notation.

Another useful set of tricks the programs provide is speeding along the information sharing process.  The American Chemical Society (ACS) notation style, as well as the style from most other major journals, can be automatically loaded into the software as a template, allowing a chemist to cut and paste the molecule into a PowerPoint or into their journal article submission directly. (Increasingly, publishers will ask for the ChemDraw files themselves, as static images like GIFs and PNGs used mostly in articles today to display structures will be replaced by more dynamic, functional formats like ChemML).  I mentioned before that chemical names and shorthand can be typed into the software and the programs will automatically draw the structure, but far more useful is the fact that it works the other way around: draw a structure and the program provides the proper chemical nomenclature and InChl metadata which allows for quick Google searching of what has been rendered on the sketchpad.  The programs also have elaborate shapes palettes that have nothing to do with chemical structures whatsoever, but might be useful for a chemist’s presentation.  For instance, a bevvy of common chemical glassware shapes  might be useful in order to demonstrate a particular laboratory method or set-up.  Such features allow something like ChemDraw to be used as a PowerPoint replacement tool – handling the full needs of composing slides – although strangely, it doesn’t have a “presentation mode.”

ChemDraw is not only about structures. It's also the chemist's Visio & PPT, allowing them to select from a wide variety of images and shapes to communicate chemistry concepts. Here's one of the menus of lab glassware shapes, in case a chemist wants to illustrate an experimental set-up.

Besides journal articles, chemists communicate almost exclusively in PowerPoint. One common complaint is getting ChemDraw structures into Powerpoint. Copy and paste tends to generate low resolution images of the structures, since the images lose their anti-aliasing on the computer's clipboard.

CambridgeSoft (CS), who makes ChemDraw, has tendrils in all aspects of the chemist’s workflow.  ChemDraw, for instance, is integrated with CS’s E-Notebook software – which is intended as an electronic replacement for the chemist’s paper lab-book.   (In fact, if you’re wondering what CambridgeSoft’s ambitions are in the scientific market, I’ll just point out that their various programs for chemists are packaged as “ChemOffice,” a grandiose nod to Redmond style supremacy.)  In E-notebook, an organic chemist can create a new “page” for an experiment – just like they do in a paper lab-book.  Then they can drag a template for, say, Benzene onto the canvas and indicate that as their starting material.  Add a catalyst or a reagent.   Make a note about the solvent or what temperature is being used- then record information about the results (which for a chemist, is usually a digital file from the spectrometer that the CS software conveniently allows them to upload.)

A chemical experiment captured in CambridgeSoft's "E-Notebook" software.

While E-notebooks are theoretically powerful, I’ve discovered many barriers to usage in my conversations with organic chemists.   A major one is quite obvious:  while there are computers in an organic lab, they don’t typically exist within the chemist’s bench itself, and it’s hard to type with rubber gloves and goggles on.  Dry erase pens scrawled on the fume hoods work just fine, thank you.   Another barrier is just sheer comfort level and accuracy.  Many chemists still want to do calculations by hand and feel that a lot of cutting and pasting in tools like E-Notebook will lead to errors.  A third barrier is that the companies who make the software just didn’t think enough about the chemist’s actual workflow.  They are poorly integrated with other software (such as spectral analysis tools or simulation software).  But most of all, they are just overkill.  Look inside a chemists’ lab-book and you typically see just a few notes about the parameters of the experiment – maybe a calculation or two.  The lab-work is generally not shared with colleagues until it is massaged and written up as a PowerPoint slide – so what’s the incentive to have it all tidily digitized? Industrial chemists, who are sometimes obligated to surrender their lab books in patent defenses, have a more powerful incentive to computerize all aspects of their workflow.  Therefore, it’s most likely that e-lab workflow tools will take hold in environments such as Pharma companies before they are widespread.

The chemist's bench is no place for a computer. Drawing structures on the fume hoods with a dry erase pen usually makes more sense.

Most organic chemists have a comfort level with paper lab-books and calculators that is hard to match with software, thus the slow growth of "E-Notebook" software in chemistry labs.

While I’ve focused on the powerful desktop tools like ChemDraw in this post, there are several stripped down web-based structure editors in wide usage as well- mostly at publishers as a search interface for chemical journals and databases.  I’ll get more into the challenges of using structure drawings to look for things in Part 4 of this series, which deals with research and publication workflow.

More reading on Solid State UX:

The User Experience of Organic Chemistry – Part 2: NMR Spectroscopy

More reading from around the web:

Some musings on chemical crawings… TotallySynthetic.com

Personal Experience with Four Kinds of Chemical Structure Drawing Software… [Li, Wan, Shi, Ouyang (2004)]  *Requires ACS subscription

How to draw Organic Molecules

How do you know if you are well suited to a career in information architecture?   Well, here’s a little test.  When you are finished reading this post, follow the link I provide to the US Department of Transportation’s Manual on Uniform Traffic Control Devices(MUTCD), which is the definitive, 864 page style guide for the country’s road signs, signals, and traffic markings.  If you soon find yourself delightfully lost in the visual minutiae and obscene specificity of the guidance provided, then you are either Rain Man or what I suspect is a natural born IA.

A new version of MUTCD was published December 16th, 2009 – the 10th edition in 74 years.   No document quite illustrates how design affects our daily lives and safety greater than this one does.  Most of the nuances of driving a car are deeply internalized by us drivers, so it’s not always obvious that the traffic experience is as designed as it actually is.  Take the shapes of regulatory signs, whose shifting geometry roughly correlates the number of sides of a sign to the intensity of the approaching danger ahead.  Stop signs (8 sides) are much sterner in their warning than diamond shaped Slow signs or triangular Yield signs. Circular signs, such as those at a rail-crossing, signal the most danger of all.  Afterall, the number of sides of a circle is infinite.  This dates back to a scheme created by the very first attempt to standardize signage in the early 1920’s.

Speed Hump is the correct term, but they offer the less hilarious "bump" option as well.

MUTCD takes careful consideration not to use traffic-planner jargon in such a way as to confuse drivers (or – let’s face it-make them laugh), even if comes at the expense of introducing misnomers and contradictions into their system of wayfinders.   Any leftish turn requiring a driver to initially make a right turn, such as those looping lefts on highway onramps, is called a “jughandle” turn by the pros, not a U-turn or a Left Turn, but the sign will say something like “U-Turn from Right Lane.”  A lesson to interaction designers – favor literalness over jargon in navigation.  A road-bump is actually technically a “hump,” but the sign says Bump anyways to avoid dangerous snickering by amused drivers.

Night speed limit signs are rendered in black with white characters - symbolizing "night" but sacrificing retro-reflectivity.

Information design, particularly color and iconography, is fussed over perhaps most of all.    Florescent yellow is the color of choice for most signs due to it’s high luminance and saturation – a combination that allows it to be seen in day, night, dawn, dusk and fog, with or without headlights.  The color yellow is also highly durable, meaning it takes longer to lose its’ color and retroreflectivity than other colors and making it a safe choice for a road sign’s design.  Curiously, the approved sign for showing night speed is an all black background with white characters – the black itself communicating “night-time” but making it less visible in the very time for which it is intended.

Purple is never used for lights or LED signs in traffic control even though it is high contrast.

Purple, it turns out, is also a very safe color due to it’s high contrast and saturation  – particularly Pantone^® Matching System^® (PMS) 259 (the exact color used by 13 states for E-Z Pass lanes).  Ever wonder why there are purple signs on those E-Z pass lanes but no purple lights or LED signs?  It’s because of a phenomenon called small-field tritanopia, which results in a “loss of sensitivity to blue light when the signal appears very small. As a result, a purple light might appear red with a blue haze surrounding the signal, potentially causing confusion that could result in erratic behavior as drivers approach toll booths.”  This is one reason why purple was not used much until recently as a road sign color, even though DOT has had it on it’s official “reserved” color list for decades.

Iconography is fussed over, but strangely optional.  Nearly every bit of icon bearing signage in the MUTCD offers up an icon-less alternative.   They seem to be saying, well if you’re an icon type go with this – but we understand some municipalities are just not into icons. Does that mean one is just not safer than the others?  Are there not studies proving that icons add important non-verbal cues and contribute to highway safety?

Use icons or don't use icons. What do we care?

Huh? The limitations of stand-alone imagery in road-signage.

And it’s interesting that traffic control designers face some of the same types of challenges that web designers do.  One central debate is clutter and the competition for that scarcest of all resources -even amongst drivers – attention.  Afterall, the MUTCD was started as a reaction to too many signs.  In the very early days of the automobile, local auto clubs used to put up signs and sometimes there would be 10 or 11 signs for a single popular road or attraction.

How many signs does it take? Well, enough to get the job done but not so many that drivers "consume" the safety benefit.

But how many signs is too many when it comes to public safety? Do signs cancel one another out like sidebar ads on a website?  It turns out that more road signs do not lead to greater safety, but not because drivers don’t notice them.  It has more to do with what an economist would call ‘consumption’ of the safety benefit provided by the extra signage.  If a driver is given a safety improvement, such as clearly marked lanes, signs, lights, etc. – she will “consume” the benefit and drive faster as a result.   So, guess what, it turns out traffic circles have less accidents than traffic signals – because drivers understand they are responsible for their own risk, shifting risk away from that of government.   It’s a paradox that web designers just don’t have to deal with.

Related Posts from Around the Web:

The Manual on Uniform Traffic Control Devices (MUTCD)

Distracting Miss Daizy – The Atlantic Magazine

Well, typically this would lead to a discussion of bad, or extraneous, cognitive load and how to avoid it in the design of multimedia materials.   Attention is a resource, and a limited one at that.   When users strain their ability to actively process material, they are forced to make decisions about what they do and do not pay attention to.  If you ask the user to process more than a few chunks of information simultaneously, working memory is easily overloaded.  Designs which add to this effect are thought to actively generate extraneous load.   You can control for this by following a few basic principles, most notably those outlined in Richard Mayer’s seminal 2001 book, Multi-Media Learning.   An example of a design principle that minimizes bad cognitive load is spatial contiguity.

Mayer’s Spatial Contiguity Principle – Student’s learn better when corresponding words and pictures are presented near rather than far from each other on the page or screen.

Integrated (top) vs. Separated Captions (bottom) in Multi-media Instructions. The Integrated Approach is Said to Reduce Extraneous Cognitive Load

There are many more of these principles in the book and all of them are worth reviewing.   Curiously, what Mayer doesn’t explicitly lay out as an anti cognitive-load principle is one you hear all the time from clients if you are in the design game – make it “less busy,” “clean,” “less cluttered,” more googley.  Surely unsightly clutter must increase extraneous cognitive load, so why doesn’t he mention this?   Because reduction of complexity is not, in itself, a sound instructional design principle.   Some material is just more complex – it has more elements and more types of element interactivity within it.   This inherent complexity is a fact of life and is thought to generate intrinsic cognitive load.    Think of this as cognitive load that the designer inherits as a baseline, only to add to it by breaking Mayer’s rules in their design process.

And now for my favorite part.  Designers can actually create good, or germane cognitive load.   Germane cognitive load “enhances” learning rather than interferes with it; this may be attributable to effects like motivation or increases in effort that can increase the amount of cognitive resources devoted to a task.  You can tell if you are getting germane cognitive load when you have a high degree of intrinsic cognitive load but learners stay within their working memory capacity due to the intelligence of the way the materials are designed.   In other words, a lot of meaningful learning activity would be impossible without cognitive load – it’s just a tougher design challenge.   Mayer’s research was focused on reducing overall cognitive load, with the assumption that mostly it was extraneous load that was effectively isolated in his study design.  But researchers still are looking for ways to measure the different types of cognitive load, so at the moment it’s unclear exactly what can be done to increase good cognitive load (see Kalyuga, 2009).

Edward Tufte Has Inspired A Generation to Create "Germanely" Loaded Data Displays

So why did I go into all of this?  Because I think people shouldn’t complain about clutter and busy-ness in web designs without pausing to think about the benefits of considered complexity.    As Don Norman has said – Simplicity is Highly Overrated.   Of course, in this essay he’s talking about products mostly – and the fact that people value and are willing to pay for complexity and additional features.   But simplicity is overrated in design circles too… complex things are beautiful and persuasive.  Nature is complex.   Sometimes the user’s task is aided by complexity in the interface.  For instance, pattern recognition is a common task for a user on a product website’s list pages, which can be  aided by having more information on a single screen, not less (particularly when it’s optimized for comparison tasks such as the famous Orbitz grid design for listing airfares, now universally imitated.)    We may not know exactly what generates germane cognitive load, but I have a strong hunch that the work of Edward Tufte does exactly that.   So let’s do both – reduce the bad cognitive load and seek to add the good stuff – and we’ll find yet another reason why we should think like an Instructional Designer.