Solid State UX » Interaction Design

The Trouble with Scientific Figures

Todd Toler — Fri, 30 Sep 2011 21:41:23 +0000

A beautiful figure can get you a cover on a top journal. Some institutions, like the University of Illinois, have special scientific visualization departments to help their faculty get published.

I’ve been reading issues of the prestigious journal, Science, lately, which I always approach in the same way. First of all, I flip through the first third or so of the pages impatiently. This is the part of the publication that contains the essays, letters, commentary, political events, news, and short science pieces on things of interest to normal humans- like sex, or how to win an argument, or cool robots, or oil spills, or funny monkey behavior. In short, this is the material which I’m capable of understanding.

Instead, I go straight to the “Research Articles” section, which contains pieces with titles such as “How the CCA-Adding Enzyme Selects Adenine over Cytosine at Position 76 of tRNA.” My brain starts to whirl. This is one of the main articles in Science, man. Impact Factor something like 32. Muy Importante.

I have zero background in molecular biology, so I admit that I don’t get much out of the title. Onto the abstract, where I am counting upon them to tell me why this article matters. A certain type of enzyme, I learn(ATP(CTP):tRNA nucleotidyltransferases), can add something called CCA onto the 3′ end of transfer RNA precursors without using a nucleic acid template. Now here’s where the novel part comes in. I learn in the abstract that this process is well understood for Position 75 of the transfer RNA. But, Position 76? Get the hell outta here – you kidding me?

So apparently these loony-birds in the Department of Molecular BioPhysics at Yale who wrote the article had the nerve to stick some of this CCA stuff at Position 76 and pulled it off. So having comprehended that much, I flip the page and voila!, there it is, my favorite part… something that looks like this:

Or, if I’m really lucky, something that looks like this (from a different article, on the phenomena of tetrophilic liquid crystals):

This stuff is beautiful. Mesmerizing. Addictive. Information. I just let it wash over me. Does it really matter that I don’t understand the underlying science?

But of course, this is Science. Careers are made getting published in this journal, so I can imagine a lot of thought goes into the visualizations. What about more average journals? What is the overall quality level of the figures we see there?

This TOC image from the Journal of Physical Chemistry proves that the most dangerous apparatus in the hands of a chemist is PowerPoint. (source: TOC ROFL)

One word. Ouch. And I could go on and on…. Make sure to check out the hilarious TOC ROFL (Table of Contents, Rolling on the Floor Laughing) blog for endless examples of this sort of thing.

Another TOC image from The Journal of Physical Chemistry. Source TOC ROFL

Everyone seems to agree that figures are the most important part of a journal article. Most readers skip directly to them, which explains a rise in graphical table of contents and figure galleries on scientific publishers’ websites. In their real lives, scientists communicate in visuals, not paragraphs, which can be witnessed by popping into a weekly lab meeting at any research lab in the world.

Yet published scientific figures are often an explosion of data noise, chart junk, and lazy clip-art visualizations. Their poor quality is often dismissed since their creator does not expect the material to be understood outside of a narrow field. And journal editors and peer reviewers don’t much care about matters of presentation style, outside of what appears on the issue’s cover, for which they unashamedly seek out a beautiful and sexy image.

In science, there is peer pressure not to look like you are trying to present your work to a general audience.

“You’re thought by some of your colleagues to be wasting your time and perhaps endangering your academic career,” writes Max Brockman in his preface to the book “What’s Next: Dispatches on the Future of Science.” This sentiment clearly extends to the creation of figures. Don’t make things look too polished, you’re supposed to be a scientist.

One would never guess that there is a rich heritage and body of accumulated knowledge about scientific illustration – in fact, it has long been a recognized skill, even a profession of its own, and often a source of pride to the researcher. Galileo made beautiful, skilled watercolors of what he saw through his telescope. His line drawing style of planetary movements, a durable and considerate example of information design, is still in use today.

Galileo Galilei's "The Phases of the Moon." These are his own skilled watercolors that he made while looking through his telescope, causing noted scientic illustrator Felice Frankel to wonder 'Did his paints freeze on a cold night?"(Image courtesy of Biblioteca Nazionale - Florence, Italy)

The first scientists who started looking into microscopes at the fascinating new world of the infinitesimal were even more fussy about their figures. Robert Hooke’s Micrographia was published in 1662 and was the world’s first scientific best seller. The illustrations, famous for their beauty and sophistication, were done by Hooke himself. The temptation is to think of Hooke as artist first, and scientist second, but he was no lightweight. He was the Royal Society’s first curator of experiments, the first microbiologist, the first crystallographer, and a precocious physicist who developed a wave theory of light 250 years prior to Foucault’s official discovery of it.

Robert Hooke's illustration of a flea, from Micrographia, 1662.

In the early days of discovery, the researchers with the best mastery of the instruments become the most notable. Galileo was seeking a fortune at manufacturing top of the line naval spyglasses before thinking to point one of his creations skyward. A continuum of scientific visual communication begins with pictures, simply trying to convey the magisteria of nature. As the researchers get deeper into the paradigms in which they study, the pressure is to show how things work, mostly in the form of schematic diagrams. Therefore the demand for skillful creation of explanatory visualizations should be increasing.

Yet over time, as science embraces new instrumentation and communication tools, the art of visual presentation is democratized and deemphasized. It becomes less the pervue of the specialized and the talented, and more dominated by the grammar of ubiquitous platforms such as digital cameras, ChemDraw and MS Office. We progress in technological sophistication yet we regress in graphical communication – a simultaneous renaissance of explosive scientific breakthrough combined with a dark age of visualizing evidence.

eBook User Experience (and why I know so little about it)

Todd Toler — Wed, 30 Mar 2011 18:24:31 +0000

Catalyst Group, who published a comparative usability study of eReaders in 2009, knows a lot more about eBook user experience than I do.

Tomorrow I’ll be participating in a panel discussion for Digital Book World called Reader Experience and eBooks: What UX Experts can Teach Digital Publishers. (A free webcast!) One of the points I’ll be making is that eBooks are only a part of the digital publishing landscape, even a fairly minor one up until now. On balance, web publishing has been a far more important source of digital revenue for Wiley, and also is generally perceived as the area in which to evolve whole new product lines and revenue streams away from the print business. This seems to be changing as the eBook technologies and web technologies are converging, but still web publishing gets the lion’s share of investment in the sort of customer experience work that I do. In fact, those of us with technologically focused jobs in the publishing business are practically mandated to break apart the very concept of the book. It is an informal mantra around here that we don’t just want to put the book online, we want to create a value added service, get deeper into the customer’s workflow. It comes up on every project. We are not in the book business anymore, we are in a broader content and services business. It is the status quo way to talk about digital if you are a person of ambition in the book business.

I’m the Director of User Experience at a major book publisher and have never been involved in design or user research directly related to an eBook. Perhaps it is because eBooks are quite unembarrassed about being based on books, and I’ve been conditioned not to think about books. This simple association (the word “book” is in the title, afterall) may have caused me to pigeonhole eBooks as a format (think PDF) and not a platform for innovation (think, the Internet or the iPad). I was impressed with my fellow panelist Brett Sandusky’s description of how the book proposal process is evolving over at Kaplan. He writes, in a UX Matters article he posted back in January, “Our book proposals look nothing like book proposals. In fact, each day they resemble functional specs more and more.” According to Sandusky, the teams at Kaplan are interdisciplinary and intra-departmental from the earliest stages in the publishing workflow, from when the book ideas themselves are coming together.

We create our fair share of functional specs at Wiley, not to mention wireframes and other UX deliverables, but I don’t think I’ve ever seen this process done for a book idea. Usually the book is planned, produced, and sold and the digital ideas that hit our central technology group (where I work) are either completely separate or are created downstream as a form of “line extension” of the print product. The exception to this, and it is a very long-standing exception, is when the editorial content of the book has a technological component or supplement, in which case the functional bits are planned along with the print product itself. You’ve seen this sort of thing in textbooks for the past quarter of a century, for instance in the form of a CD-ROM with some extra problems or animations or a quiz on it that comes shrink-wrapped with the book. This type of development is generally handled in-house by a special “media editor,” who sits in the editorial division but works with a wide variety of technology and design specialists, both internal and external, depending on the nature of the development work. The CD-ROM has gradually morphed into a “book companion website,” and, now, book companion websites are morphing back into the book in the form of “enhanced” eBooks.

In the central technology group, it is rare that I or my team work on an individual title. Usually we work on a broad platform, on a capability for an entire imprint or product line, or some other digital business idea that encompasses a wider swath of business than a single book title. This is partly a question of revenue (most books have small budgets), and partly a question of where we think our UX design efforts will have the most impact.

So why has there not been a lot of thought put into eBooks so far from the in-house UX team? One reason is that the eBook formats themselves are quite limited in what can be done with them. It would be difficult to enforce a design principle uniformly across all of the competing device formats such as Kindle, iOS, Nook, not to mention legacy desktop eBook technologies like those from Vitalsource, the company behind Wiley Desktop Editions, and DRM controlled Adobe PDFs. The various formats have nowhere near the level of standardized presentation conventions as web browsers do, and this means a publisher has to give up a fair amount of control over the reading experience itself in exchange for having their content available in as many locations as possible. This is a fundamental trade-off. In a Frommers travel guide, for instance, the print books make thoughtful use of wayfinders, icons, color photos, call-out boxes, and annotated maps – most of which are not available in a reflowable eBook such as those that appear on a Kindle or Nook. But this is changing as I type this, with significant development efforts underway to add enhanced features to increase the usability of this type of content.

A Frommers book makes extensive use of color photographs, wayfinding devices such as the colored side-tabs, and interactive maps and icons.

Frommers content in a reflowable eBook format. Stripping out the content's design has made it less usable. Managing this balance between content presentation and the affordances of the eReader devices is at the heart of the eBook's future user experience.

This leads to the obvious question of why be on a platform where we can’t control the user experience? The answer is equally obvious: a publisher is generally not looking to limit the formats a book is available in – the more, the better. As people’s reading habits change (going from print to Kindle, for instance), it’s important to keep your content and your brand where your customers want to consume their information. And customers who are excited about their devices are surprisingly forgiving of a challenging user experience – at least at first. As these devices evolve and get more and more capabilities, publishers will have to invest more in usable electronic content.

It is such a daunting challenge to think about developing and distributing a consistent user experience across all these formats, in fact, that most publishers are content to resign this work to their print production people – not user experience designers. The basic workflow is such. Manuscripts, in the form of MS Word documents, are laid out in InDesign with specific instructions to the typesetter for use in preparing the book. The typesetter delivers web-optimized ePDFs that preserve the exact layout of the print book. Once the print PDFs are approved and sent off to the printer, the typesetter then bundles them up in a variety of standardized XML formats for distribution across the various electronic channels – Wiley’s own XML for the web, MOBI and ePUB for eReaders, and proprietary formats such as the one Amazon uses for the Kindle.

Depending on the affordances of the particular electronic format, the publisher can include or exclude properties that the print book design may have had. And this is the rub. For instance, most eBook formats are “reflowable,” which means the book’s pagination and page layout is not applicable. Some “enhanced” eBook formats, on the other hand, are quite elaborate, like the Apple iPad edition of Ryu Murukami’s book, which was released straight to the iPad in app form, jam packed with cool transitions, sound effects, arty layouts and DVD-style extras. (This event triggered many resounding predictions of death to traditional publishers as a result, despite that fact that it is in Japanese language only and contains what is essentially a straightforward paginated eBook at its heart. The potential shake-up is, of course, that Murukami didn’t need a big publishing company to release his book to the iPad, only Apple’s approval.)

Murukami's The Singing Whale was released straight to the iPad.

What would I focus on if I did work on eBooks? Well, lets talk a little about the usability of eBooks themselves. For a certain type of experience, a linear text-based one, eBooks are downright dreamy. “The technology is built for romance novels,” a veteran publisher told me. “They do a great job of serving up row after row of text.” This may explain why some of the Kindle’s initial demographic success was not with your typical high-tech gadget early adopter crowd. Anecdotal evidence would point more towards the moms-on-vacation set. 50% of Kindle users were over 50 in 2009, and 70% over 40. The electrophoretic, e-Ink displays are great poolside, even in bright sun. And besides connoting fabulous retirements revisiting the classics on the beach, e-Readers are also great assistive technology, providing tremendous benefits for arthritic hands and impaired eyes.

But the eReader is more mainstream technology every year, and if you count the electronic reading that occurs on phones and tablets, it’s not long until they reach near ubiquity. It is the obvious benefits of not being in print that are driving electronic book sales – the ease of getting updated content, the ability to annotate and take notes, the fact that it’s often cheaper than the print version, and the most obvious benefit of all, portability (note: the combined physical weight of just two of the books currently on my iPhone, Atlas Shrugged and The Wealth of Nations, would be 4.7 pounds if I were to carry even the smallest paperback editions and not the Kindle editions.)

eReaders, with their resizable text and text-to-speech features, are brilliant assistive technology.

From a user experience point of view, the benefits more or less end there. For one thing, the underlying concept still has a sizable army of detractors. eReaders give many people the feeling of putting just too much technology in their lives. When a book goes electronic, it feels like the electronics are intruding into a sphere into which they don’t belong. New York interaction designer, Chris Fahey, writing about he and his wife’s resistance to digital books back in 2007, mused “We both grew up surrounded by the printed word — looking at them, feeling them, smelling them — and we intend for our family to continue in that tradition.”

And Fahey makes his living designing user experiences for digital products. “I’m not going to say much about Kindle,” Fahey wrote. “As an iPhone owner, I find both the device and the service colossally dumb.”

Collegehumor.com mocked the very idea of refactoring books on electronic devices with their spoof ad for a (then not yet released) Kindle 3, in which the device basically plays the Hollywood movie version of a book, complete with crisp color video and Dolby surround sound (the signature line, uttered from a headphone wearing kid over the explosive sounds of The Fast & The Furious: “I can’t hear you. I’m reading!”)

The Library of Chris "I don't need no stinkin' Kindle" Fahey. Fahey's point is that books aren't just a technology. A person's library reflects their lives and values.

But those predictions of the Kindle’s failure that were written circa 2007 and 2008 sound pretty hollow now. In 2009 Amazon heavily promoted the news that their digital sales had eclipsed their print sales. And by 2009, the Kindle was a clear success with estimated sales close to half a million units and projected sales in 2010 of almost a billion dollars. This NYTimes essay attributed the Kindle’s success to making it really, really easy to use. But is it?

Nick Gould released some eReader usability research that his firm, Catalyst Group, conducted in 2009. The Kindle 2, which has been replaced by newer models such as the Kindle 3G since the time of this study (although the interface hasn’t evolved much,) was considered better off usability-wise than some of it’s competitors like the Sony eReader. But it still had loads of usability issues, mostly as a result of a lot of peculiar and specific (to them) navigation conventions. For instance, reflowable eBooks don’t have page numbers, they have “locations,” an abstraction which makes little sense to most readers and presents the rather significant problem of orientation within the linear experience of a book. The hard keys on the Kindle (necessary on e-Ink displays unless a separate touch-screen panel is added, which is the approach taken by the original Nook. Note the color Nook uses an LCD display, not an electrophoretic one) require a significant amount of getting used to, such as the large, redundant “next page” buttons that appear on both the left and the right side of the device (versus having the left-hand one devoted to “previous page” and the right-hand one devoted to “next page” which most users in the Catalyst study expected.) Their are other peculiarities, such as trying to find the “text-to-speech” feature of the Kindle behind the text-resizer button and not in the main menu, which is entirely devoted to shopping. The software versions of the Kindle reader, like the iPhone app, have a few issues of their own. There is no back button, despite the fact that there are multiple internal linking conventions, such as end-notes, that can cause a reader to jump out of their current position.

What makes the Kindle easy to use, of course, is the ease of acquiring content. Similar to how iTunes cracked the digital music nut, the Kindle team invested most of their energy in having a wide range of titles with unbelievable ease of purchasing and transferring content to the device. But the real underlying issue affecting eBook user experience has far more to do with how the content itself is packaged, reflowed, and displayed – not any device conventions. Expect to see real changes in the next few years as eBook producers develop their own design vocabulary and UI conventions. One thing is for sure: electronic reading is here to stay.

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

Todd Toler — Mon, 07 Mar 2011 20:22:37 +0000

Go out and grab a coffee when the NMR guy is refilling the liquid helium, unless you are willing to risk quick freezing of body parts or catching shrapnel from a surprise tank explosion. (image source: Dephologisticated)

Most of an organic chemist’s physical work appears to the naked eye as an interchangeable set of clear liquids and white powders (that is to say, if they are lucky enough in the lab not to produce brown sludge.) This is because atoms, even entire molecules, are too small to be seen through the lens of a microscope, so chemists must deduce their shape and structure indirectly. This is achieved with a variety of instrumentation and analytical techniques, most of which output data in the raw form of spectra, wavy lines that with a little experience can be used to paint a high-resolution image of the unseen. Because atoms and molecules, even gigantic ones such as a protein or enzyme, are smaller than a wavelength of light, they appear under even the most powerful electron microscopes as a nothing more than a fuzzy blob. Because it’s not part of our human perception, interpreting spectral data is a difficult challenge that chemists face every day starting when they are undergraduates. Operating the obscure equipment, and the hardware and software interfaces that this entails, is its own sort of challenge.

There are several types of spectroscopy, which is a broad concept that describes any kind of radiation of energy as it passes through a given material. Mass spectroscopy or Infrared spectroscopy is widely used in organic chemistry, but is mostly good for identifying mixtures. For instance, a winemaker might use one of these techniques to understand levels of eugenol in their chardonnay and therefore determine how long to toast their French oak barrels (eugenol is a compound from oak which gives the clove-like aroma and flavor to wine). Ultimately the Mass and IR techniques are too low in resolution to do what most organic chemists really need to do, which is to confirm if the thing you think you made in the lab is what it is supposed to be. Step in, NMR. Nuclear Magnetic Resonance, the work horse tool of the organic chemist, and therefore the only one I’ll get into much detail with here. It is said that if the NMR machine is shut down for some reason, then the organic chemist goes home for the day. (So in my world I guess that makes it a bit like a Starbucks.)

The ability to detect the resonance of magnetized nuclei and its implications as an imaging technique was one of the great post-war scientific breakthroughs. What is resonance? Think of how sound resonates from a crystal glass when you run a wet finger around its rim. A proton makes a similar effect when you hit it with a radiowave, and a scientist can “listen” for how it responds. Well, that is, some protons do. To be useful for NMR, an atom must have protons with a property called “spin,” which means their magnetic fields line up cleanly, sort of like a dipole magnet. These atoms (13C and 1H are the most commonly used by far) can get disrupted and relax back to their normal state without too much asymmetric rotation going on and distorting things, which makes them great for the technique of NMR.

An NMR machine is a complicated instrument. It consists generally of a large thermos bottle that contains a layer of liquid nitrogen surrounding another layer of liquid helium. This set-up acts as a large superconducting magnet. A sample of the chemical to be analyzed is inserted down into the middle of the thermos and the giant magnet causes the protons to all line up in the same direction. Then from this state, the molecule is disrupted with radio waves (or RFs, radiofrequency pulses) and the instrument records the time it takes for the protons to relax back into their normal state. This time to re-equilibriation (T1) is one of the most telling variables about a molecule’s composition and arrangement of atoms. For instance, if a proton is shielded because it is densely surrounded, it doesn’t move around much when blasted with an RF pulse. That sort of information helps chemists put a picture together of the molecule’s structure. The larger the NMR machine(typically expressed on a range of 300-600 megahtz), the greater the resolution is. And if you are a chemist working on a large molecule, say a protein with 500 hydrogen atoms in it, you need a lot of resolution to separate the signals.

An NMR machine consists of a sample, inserted via the probe, which sits within a magnetized chamber. A layer of liquid helium surrounded by a layer of liquid nitrogen turns the machine into one big superconducting magnet. Source: Rsc.org

The physical operation of the NMR process is fairly straightforward, with a few minor quibbles. Since these are big-ass magnets, one might need a ladder to insert the sample. Also, it is advised not to wear a pacemaker in the general vicinity. And, importantly, try and step out for coffee when the liquid helium guy comes to refill the machine. (Quick-freezing of body parts from escaped vapor, or catching some shrapnel from a highly pressurized tank explosion is no fun.) Most of the usability pain of an NMR is in the proper calibration and operation of the instrument via its companion software interface and the subsequent interpretation of the results – also done on a computer.

Chemistry labs are still places full of Rube Goldberg contraptions. The NMRs, particularly older ones, are no exception.

A 500 Mhz NMR spectrometer, like the one they have at Rutgers University, is large enough to require a ladder in order to insert a sample.

Try not to trip on the air hose attached to this monstrous NMR in the basement of Bagley Hall at The University of Washington.

Despite a gradually growing commitment to ease of use by the industry (primarily through automation, not necessarily design), NMR machines are a long way from “point and shoot.” Some of them can auto-lock and auto-acquire the sample. Some of them have auto-feed magazines, which can rotate in multiple samples overnight while the chemist steps out to the nearby brew pub. Some of them have web-based clients for remote analysis directly from the machine. But ultimately, there is still a lot of old-timey, goldbergian aspects to the electronics and mechanics involved. Step on the air line that is draped across the laboratory floor from the nearby air compressor, slightly choking the air flow but maybe not enough to notice, and the finicky machine will start giving odd readings with very little feedback as to what went wrong. The attached PCs run homegrown software provided by the manufacturer and there is little standardization across the industry in terms of file formats, navigational idioms, or iconography.

“They have the worst interfaces” says Dr. David Flanagan, a former Umass polymer scientist and now Editor in Chief of the journal Advanced Functional Materials. “They still had green screen, command-line interfaces when I went to grad school. And this was well after Windows 95 had been released, so the general public was used to a windows based graphic interface by then. I don’t think it’s changed much since.” According to Flanagan, the NMR software culture borrows its style cues from early silicon valley, back in the GNU era, when the place was still dominated by bearded, slightly crazed, anti-social types. NMR is more Woz than Jobs, sort of a UNIX nerd service at the heart of the larger nerd-dom of organic chemistry. “It’s all very retro, very black arts,” he told me.

In this excerpt from a user guide for Topspin (from major NMR maker Bruker), one gets a taste of the sheer number of steps and arbitrariness of how the features are named, grouped, and sequenced. If you want to adjust the number of scans, simple - just type "eda" into the command line or click on the tab called AcquPars. Got that?

The single most onerous part of getting a good reading from an NMR machine is in controlling the smaller magnetized elements that are wrapped around the sample. These are used to fine tune the way the sample is calibrated, a process called shimming. It’s the equivalent of focusing the lens of a camera in order to get a clear image – but an almost infinitely more abstract concept that can be the most difficult aspect of mastering these machines. Originally, the shimming process involved a cabinet with a bunch of knobs, cryptically labeled, that the operator tweaks while staring at the feedback coming back from an oscilloscope. Long symmetrical waveforms on the scope mean the machine is picking up the resonance clearly, sort of like tuning a guitar with a chromatic tuner. Flanagan reminisced about the university NMRs he had encountered in his student days. “The controls are not labeled clearly enough for a noob grad student. It’s a little intimidating at first. A few knobs invariably had ‘don’t touch’ signs on them.”

To shim the control magnets, an operator sits there and tweaks the knobs in trial-and-error fashion until something like a trumpet appears on the oscilloscope. If you don’t get your trumpets, you’ll get a pretty messy looking spectrum and it will be a problem if you are trying to get your results published in a top journal. The NMR guy in the lab might write down the best shims of the day nearby to help people out. The knobs may have been replaced with sliders on a computer interface in a modern spectrometer, but the challenge is more or less the same. The operator is asked to adjust controls with cryptic labels like X, Y, Z, Z1, & Z2, all of which are variables in mathematical formulas used to understand the homogeneity of magnetic fields. This requires some substantial mathematical modeling skills in order to understand, and using them is not intuitive for less experienced operators. Spectrometers with auto-lock and auto-acquire features are starting to make this process a little less onerous. The NMR technicians, or facility managers, do a lot of day-to-day coaching to help chemists figure out what they have. “Having good relationships with these guys is invaluable to a grad student’s success,” says Flanagan. “The real usability issues start to come when things go wrong. The machines don’t provide a lot of feedback or guidance in troubleshooting or recovering from mistakes.”

The spectrometer blasts a sample with (typically 16) radiofrequency RF pulses which display on the oscilloscope as "resonances."

The computer attached to the instrument then transforms the resonances into a useful spectrum using a mathematical process called a Fourier Transform.

A properly calibrated, or "shimmed," machine will give off nice little trumpet shapes.

The shimming control unit on a Bruker Avance DMX-500 spectrometer, conveniently located behind all the dangling cables. Fortunately, the shims are controlled via the computer on this model.

Hard key shim adjustments (left) and the software versions (right) of the same controls. While the machines are more automated these days, understanding how to properly shim the smaller, controlling magnets around the sample is one of the hardest things to master in NMR usage.

Assuming you can get things set up and you’ve fired your RF pulses and you’ve got nice little trumpets coming up on your oscilloscope and the NMR machine hasn’t vibrated itself off of its pedestal, the battle is still nowhere near over. It is time to analyze the results, which is another pain point in the chemist’s workflow. The traces of each proton’s activity after receiving the RF pulse show up in the spectrum itself as a series of peaks, whose areas are proportional to the number of protons they represent. The bottom axis of an NMR spectrum (usually expressed as a dimensionless unit called “ppm”) is an abstraction of the difference in chemical shift position between atoms in the molecule, which differs based on how well a proton can absorb electromagnetic radiation in its position within the compound, as well as the resolution of the machine (expressed in MHz). What is interesting is that the chemical shifts of protons in organic compounds fall into predictable ranges on the ppm range based on their type, which is what makes NMR so powerful as an analytic technique. In fact, it is possible for a chemist to interpret an NMR spectrum by a simple visual inspection once they master the basic theory. (Note: this isn’t true of IR and Mass spectroscopy)

A typical NMR spectrum. This one is from the compound strychnine. The numbered peaks from the spectrum itself (bottom part of image) can be used to draw the chemical structure (top part of image) which is used to identify the compound.

NMR spectra are an efficient way of identifying a compound and drawing a chemical structure. Since types of elements tend to appear in predictable ranges based on their chemical shift properties, it's possible to visually inspect the spectra and piece together the compound's structure. This chart shows where certain classes of elements tend to show up on an NMR spectrum, with alkanes and alcohols in the upper right region and aromatics and aldehydes in the lower left. A diagram like this helps to interpret an actual compound's spectrum like the one that appears in the preceeding figure. Source: "NMR Spectroscopy," MSU faculty website.

Upon closer inspection of a "peak," a chemist will find that they are split into particular patterns of height and spacing called "multiplets." These patterns are caused by the magnetic fields of the adjacent protons (2 adjacent protons will split a peak into three peaks with a heights ratio of 1 to 2 to 1, or a "triplet.") This phenomenon gives the chemist a great deal of information about the substance's exact chemical structure.

Interpreting multiplets of spectral peaks is an inexact science, as can be seen around 2.9 on this proton NMR spectrum. The peaks themselves are sort of a blob, but an organic chemist would infer that the short height of the lines and location of this particular cluster means that this signal is coming from a highly shielded proton (e.g. this proton is surrounded by a lot of other hydrogen protons). A chemist therefore can use several different clues to deduce the likely chemical structure of the substance.

Spectral analysis on a computer typically requires a lot of zooming. The macro display (left) needed to see the entire spectrum is too low in resolution to do proper peak analysis needed for identifying the compound. So the user mouses over an area, blows it up (left), but loses the wider context.

NMR spectra are analyzed in 1D or 2D, but typically not 3D. This creates the problem of figuring out whether certain shapes are overlapping peaks (such as those occuring around 7.5-7.8), or just strong couplings. Source: P2C2E

There is such a thing as an analytical chemist, one who works with organic chemists in the same way that a radiologist might work with surgeons – partnering with them as a diagnostic specialist and expert on the equipment. Big pharmaceutical companies have these people around. The analytical chemist is particularly adept with the equipment , and can roll up their sleeves and work with the algorithms and pulse sequence formulas that are behind the scenes of how spectroscopy works. In drug discovery, where the organic chemists are cranking out multitudes of new molecules on a daily basis chasing marketplace gold, there is considerable need for help with the identification process of novel compounds. But most organic chemists, especially in academia, have little choice but to use the machines themselves. It’s the only way a chemist can makes sense of what they’ve done in the lab. So therein we introduce the heart of the usability problem, a mainstream technology right in the middle of the experimental workflow turns out to be difficult to both learn and master. The machine needs to be operated correctly and the results need to be interpreted correctly. It turns out neither of these are very straightforward.

We NMR spectroscopists have to accept that for a majority of the scientists in todays chemistry/biology research, NMR is a black box that’s neverless – and “unfortunately”- absolutely necessary. They like to use software that seems to generate listings and plots without requiring knowledge by the operator. We still try to teach our own students about the innards of NMR-experiments. But the reality is that black-box attitude and the trend for automation are increasing all the time. – From Italian NMR Spectroscopist and Blogger, “Old Swan.”

The data itself is often transported to a chemist’s personal laptop computer for analysis, typically with a thumb drive. When I asked several academic chemists why they don’t keep the NMR PCs on the network for easier file access, most were concerned less by security (it’s not top secret what most university labs are working on) than they were by the intense desire to keep the expensive, and fickle machines operating. If the NMR machine was on the network, most felt, it would probably eventually stop working. Some spyware or virus would screw things up. And since the machines are already perceived as being finicky and expensive, this is a risk most just aren’t willing to take. But this introduces some real pain in the workflow. Files need to be transferred in physical space and then analyzed in separate desktop software. In other words, these machines are a long way from point, shoot, then see instantly what you have.

Getting spectral data into a manuscript for journal publication can require many manual steps. The mnova spectral analysis software lets you drag and drop data, such as a peak list, directly into a document from the analyzer itself. The left side of the screen shows a spectrum (with the multiplet analyzer feature toggled on), the right hand side is a printable document view where a user can drag and drop a variety of information about the spectrum as well as other text and graphical objects, such as a structure drawing from Chem Draw.

One way chemists can learn to interpret NMR is by doing exercises. The "Spectral Game" is one such example. Analyze the peaks using a java spectral analyzer, then guess which compound it is from the choices below.

Great Moments in UI: The Bloomberg Terminal

Todd Toler — Mon, 06 Dec 2010 03:27:03 +0000

A screen comparing Credit Default Swap prices on the iconic Bloomberg terminal.

I am fascinated with the Bloomberg terminal and its inscrutable interface. To use it is to be at the center of an elite membership of global financerati. If one of these $1500 a month machines is on your desk, for your exclusive use, it is a sign of your arrival. Everything about its physical presence communicates its primary affordance, exclusivity. The outward appearance, which has changed little since the introduction of the original “Bloomberg Box” in the early 1980s, seems to say you’re probably too stupid to even use me. But if I’m on your desk, then you, my friend, are one serious cat.

Perhaps my personal fascination stems from my six years working at Reuters, who, along with Dow Jones, invented the market for real-time computerized financial data only to watch themselves become marginalized by Bloomberg on one side (the high end of the market) and Thomson on the other (the low end of the market.) In the mid-1990s if you had a Reuters terminal on your desk you were probably a retail equities trader in Omaha, not a swinging dick, master-of-the-universe type in New York or London. This competitive weakness, which led to severe troubles at the company, affected me personally. As I was being laid off in 2003, along with my entire department, I am certain that I muttered Damn you, Bloomberg! more than once.

This Bloomberg terminal is available for public use at La Guardia airport.

I also live in New York City, where the billionaire founder of the company, Michael Bloomberg, went on to become our iconoclastic and effective three term mayor. His long reign has overlapped with practically my entire tenure here, and it’s hard to argue that he has been anything short of a windfall for the world’s most ungovernable city. This second act incarnation as a hyper-competent public reformer only deepens my interest in the factor behind his original success. His fortune, with his Bermuda weekend place and his helicopters and his Upper Eastside townhouse, was built on the back of this clumsy black retro terminal with its arcane devotion to keyboard shortcuts and an MS-DOS era interface.

But really, when I think about it most deeply, I’m obsessed with the insidious aura of the machine itself. It was at the center of every last one of the financial calamities that have marked the past decade. The machine stands as an enduring reminder that some of the best and brightest brains of our generation have squandered their talent in the pursuit of ruinous financial engineering. To think of the sheer number of credit default swaps, sub-prime MBSs, and other troubled asset crapola that traded hands as people were staring at this interface is truly astounding. Sure, that’s like blaming the axe for the bloody killing spree, but think about it. There were many, many players and personalities involved in the “systemic” nature of the financial crisis, but the Bloomberg was always in the room.

It's not difficult to find pictures of devastated looking traders in front of their Bloomberg terminals circa 2008, at the height of the financial crisis. This one is from the NY Times.

I have tried to use a Bloomberg terminal only once. It was set-up in the departure lounge at La Guardia airport for one of the shuttle flights between New York and Boston. I was traveling with Mark Safire, my first mentor in this field, on the way somewhere to conduct a usability study for a client. We started playing with the terminal and, after about a minute, were giggling and cracking jokes about it. Others, whose job it was not to make fun of obscurantism in the design of computer interfaces, probably would not have been amused (intimidated, more likely). Bloomberg apologists would surely be unconcerned by our ridicule. In fact, I can imagine them leaning back in their chairs, ordering another bottle of Vosne Romanee, and toasting the fact that the plebes are still unaware of the true power of the machine.

The only valid reason explaining why the Bloomberg design will not change is the behavior of its users. Users who favor complexity and clutter over efficiency and clarity to sustain a fictive status symbol. – UX Magazine

The last time I was this disoriented in front of a computer was when I was 14 playing the adventure game, Zork, on my Apple IIc. The Zork interface, which was nothing but a command line prompt, required a user to type in text commands and then see what would happen. In Zork, I eventually had to draw my own map on a sheet of notebook paper so I could retain a mental model of the game’s environment somewhere outside of my own short-term memory. With my home-grown navigational aid, I transformed the tacit into the explicit, and I was forced to do this completely outside of the context of the product and its design. The Bloomberg also relies on a lot of external context development for successful use. Some of this context comes in the form of the training workshops, extensive help resources, or the on-screen cheat sheets that the company provides. The proprietary keyboard design, with its custom hard-keys that are a necessary part of most user interactions, is another non-UI technique to put usage queues out there “in the world.” Most knowledge on how to use the Bloomberg is developed, Zork-like, over time, within the mind of the user by sheer trial and error. To learn to master the Bloomberg on a Wall Street trading floor is part of the testosterone-fueled, gamified climate of the place. It is not difficult to find Bloomberg users who use the term “addiction” when talking about how they feel about using it. If it was made any easier to use, say with a cutesy “point and click” interface, graphics, white-space, readable typography, careful use (versus garish use) of contrast, or any other attempt at “user-friendliness,” then the whole point of the thing is at risk. It’s like a scratch golfer who favors a forged iron blade over one of those big cast aluminum blades like Ping first introduced in the 1980s. The sweet spot is the size of a dime on the forged club but the expert golfer considers it to be purpose-built, and therefore superior, to the club that’s designed to be more forgiving for those who never learned to swing the thing in the first place.

Look no further than NASA's Mission Control to see the source of the Bloomberg's screen design cues. It is the look of serious people doing serious business.

A heatmap visualization of oil prices in the U.S. on a Bloomberg Terminal. The look is right out of a spy movie.

The reflective aspects of the Bloomberg’s design success are well understood. When IDEO redesigned the terminal, celebrity make-over style, for the magazine Portfolio in 2007, they acknowledged the fact that customers prided themselves on their ability to navigate the complex machines and went so far as to work in a game-like system where users’ expertise was tracked and displayed publicly to other users. (Note: this design was passed on by Bloomberg L.P. and never saw the light of day.) Jakob Nielsen, interviewed for the same article, praised the terminal for its flexibility in letting users configure their screens into “data dumps” – useful for scanning and pattern recognition – but dismissed other aspects of the design such as its use of black backgrounds and contrasty yellow or orange text and graphic colors. But as you can see if you look at my post on F1 Telemetry interfaces, the black background on terminal-style interfaces is an established idiom in serious “engineering” cultures where real-time, data centric analysis is high-stakes business. This look and feel is clearly cultivated, and If you want to know where it originates, bringing to bear the full emotional and dramatic weight of serious people conducting serious business, look no further than NASA’s mission control. Finance may not be exactly “engineering,” but in our modern world of quantitative trading and complex derivatives, I doubt anybody ever looked over someone’s shoulder who is using a Bloomberg terminal and said “Dude, this isn’t rocket science.” These days, it more or less is.

The IDEO redesign of the Bloomberg Terminal that was done for a feature in Portfolio Magazine in 2007.

Bloomberg’s early advantage in the market data terminal business was in the proprietary analytics built-in to the terminal, particularly for bond traders, not in the real-time “ticker” information. Real-time price data was, and remains, a commodity. It’s the capability of using it for value-added analysis, and perhaps the perception of being purpose-built for analysis, that really makes this thing sing. When Bloomberg users cite reasons for why they love their machine, they define it as the very essence of usability, not complexity. In fact, its weaknesses from a design perspective are often the very elements that the users praise. Its contrasty interface is lauded for the ability to be started at for hours upon hours with minimal eyestrain. The keyboard shortcuts are viewed as some sort of advanced “help” system. Read this blog post, 6 reasons I love my Bloomberg, to see what I mean. The best design choices in the Bloomberg, like the integrated 24/7 real-time help that’s available by pressing a function key, are what most people in my profession would consider anti-design choices. But users are cultish in their devotion to Bloomberg exactly because of these sorts of features. Let’s face it, these people know their audience. The Bloomberg terminal’s branding success was in being able to successfully position itself as something developed by a trader, for traders. The fact that the terminal’s functionality and design reinforces this message down to the last keystroke is why it belongs in the emotional design hall of fame.

The User Experience of Organic Chemistry – Part 1: A Chemical Language

Todd Toler — Thu, 23 Sep 2010 17:02:59 +0000

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.

The User Experience of F1 Telemetry

Todd Toler — Mon, 30 Aug 2010 18:55:37 +0000

Despite the glowing brakes, you can't tell much about an F1 car's performance by just looking at it.

Formula One fans know that competing at auto racing’s highest level is as much an act of technological bravado as it is one of sport, and F1 teams are undoubtedly the sporting world’s must gluttonous consumers of information and statistics. Telemetry refers to the automatic measurement and transmission of data by wire, radio, or other means from a remote source – in this case, an F1 racing car moving at speeds up to 250mph. Massive amounts of data are involved. For example, 150,000 measurements are made by the Williams F1 BMW FW26’s on-board computer from almost 200 separate sensors on the car during a typical test run. All of this is shipped back to the pit lanes via live radio transmission or downloaded from the car’s on-board computer, and is then sent to engineers back home in the UK control room in Woking on dedicated pipes of fiber optics. (There is a good reason F1 teams seek out sponsorships from telecoms companies such as Vodaphone.) During actual races, around 25 key functions are actively monitored, with about 1MB of data per second sent back from the car. Some stats won’t surprise you since you can monitor them on your own vehicle’s dashboard, such as engine revs, water and oil temperatures, ground speed and fuel. However, you are unlikely to have a team of analysts scrutinizing the exact moment of your gear changes, your tire temperature, or your braking efforts. What do the interfaces look like that these engineers are using?

Photo of McLaren's Data Operations Center from a June 24,2010 NYTimes article.

The data from the car’s engine control unit (ECU) and a panoply of other sensors is dense and multivariate. This being sport, those that need to interpret the data need to do so in real-time, as a quick decision may affect the outcome of the race. The display configurations need to be highly flexible and personal, and show powerful relationships through visualizations. McLaren engineers are so good at interpreting data like this in order to understand complex systems that they have been involved in modeling air-traffic and taxi-ways at Heathrow, the world’s busiest airport, as well as streamlining emergency room traffic at a London hospital. What sorts of fancy software do they use? For the most part, the race engineers use MS Excel, which is hooked via ODBC to a special real-time relational database served directly from the pit lanes. (To be exact, they use a special racing-oriented client built on top of Excel, typically one of two variants provided from McLaren Electronic Systems. One is called ATLAS, the other is called System Monitor. Both clients work with a special pair of servers connected to an advanced data acquisition system. All teams use the same basic telemetry rig during the race as part of F1 regulations since 2008, but are free to use what they want during testing.)

ATLAS breaks out the various measures from the data acquisition system into three generic categories:

Engine: Revs per minute, fuel and oil pressure, water, oil, and exhaust temperatures, battery voltage, inlet air temperatures, and throttle position sensor.
Chassis: Wheel speed, steering angle, braking and cornering g-forces, damper movement, brake pressure and temperature, suspension loads, tire pressure and temperature, and various air flow and air pressure measures around key points of the car.
Driver: basically anything controlled by the driver, such as throttle, gear, steering angle, and brake pressure.

The sensors basically measure “anything and everything that moves or gets warm,” according to Sir Frank Williams in a recent NYTimes article on the subject. Movement is measured through instruments such as dynamometers and air flow sensors. Heat is measured with non-contact infra-red imaging (via thermal imaging, or thermography) and direct contact thermometers. The data from each sensor is split off as a separate “channel”, which the engineers can configure in their ATLAS client software. When an engineer is configuring their display, they have a choice of display options for any given data-stream. A single channel or combination of overlaid channels can be chosen for each tile in the monitoring interface. Time-series plots, waveforms, scatterplots, and histograms are popular choices to visualize the datastreams themselves. 3d wireframe maps of the car and 2d maps of the circuit are common display backgrounds to data-map against. Often two or more channels are overlaid – such as the delta time between laps over braking pressure – in order to tell a story with the data. In order to do this, disparate measures must share a common scale – such as % based on pre-programmed thresholds. This leads to a climate where each screen is set up to that users’ preference – not unlike the market data terminals configured for financial traders.

Example of a waveform visualization using a datastream from an F1 car. The software is Atlas, which is based on MS Excel connected to a real-time database via ODBC.

Race engineers are basically focused on two areas: 1) monitoring anything that can cause the car to break down, such as gearbox and various hydraulic temperatures, and 2) looking at areas that can be tuned during the race, such as the car’s differential (which allows the two rear wheels to spin at different rates and is crucial for things like corner entry and exit). This year in F1 the regulations allow telemetry to be only one way -meaning that engineers can no longer radio changes directly to the car – but they use the information coming from the car to communicate strategy to the driver and make any changes they can in the pit lanes. Drivers use the telemetry data to study their own input, such as braking, steering trajectories, and throttle. You will see drivers looking at “traces” in the pit lanes to help monitor and improve their performance.

Example of the telemetry "traces" of driver inputs such as steering, braking, and throttle. source: James Allen on F1

You will see, in any bank of monitors focused on telemetry data, that about half of the screens have a black background and half of them have a white background. The black background displays tend to be time-series plots where the most important information to follow are the wavy lines – which are often high resolution, very subtly distinguished in terms of color, and closely packed to one another. The black background provides excellent contrast against colors with high luminosity, such as yellow, or the alerting colors of green and red. White background displays tend to be used for numeric data that is viewed in grid form, providing a quieter environment of increased scannability and readability. There are no hard and fast rules here, however. Partly the black backgrounds are cultural – a holdover from days when serious looking interfaces were called “terminals” and had a look and feel to match.

Telemetry traces from a single lap at Silverstone, displayed as a time-series plot from logged data. Laps are marked with the thin purple lines (that extend above and below the grid lines.) Note how, as with many time-series data visualizations, the mere passage of time is not a good explanatory variable. Things look very similar from the "10,000 foot view."

Zooming in on turn 1 at Silverstone ("Copse Corner".) The Blue line is the throttle, the white line is the engine RPM, and the yellow line is the road speed. You'll notice that road speed and throttle are tightly correlated. This is because F1 cars have very low inertia (they slow down rapidly when not accelerating).

A real-time car monitoring interface is set up to warn the race engineer about key reliability indicators. Green and red warning lights are used to create awareness of when conditions are within a safety threshold, and supporting data is nearby for troubleshooting. Notice how some of the telemetry channels are grouped in buckets corresponding to the warning lights, but that they are spatially discontiguous. Other channels do not correspond to the warning lights and are themed separately, such as "car status." The telemetry interfaces are, as a rule, highly personalized.

F1 engines are different from road car engines in a few notable ways, one of them being increased TE (thermal efficiency). Of the fuel energy that is initially put into a cylinder, only about 1/3 emerges as horsepower in any engine – but an F1 car optimizes this by at least 30% using minutely controlled ignition timing, fuel flow to the cylinders, air flow, and via advanced materials in the engine’s construction. All of this is accomplished through careful monitoring of the data in accordance with each team’s performance model. F1 engines also rev outrageously high compared to an engine on a road car, or even other racing cars – up to 18K RPMs. This generates an incredible amount of mechanical wear, which is another reason why F1 engines are carefully monitored during their short life spans (about 400km!). Some parts, such as valves, need to be very lightweight to handle such rapid and repetitive movement. This can create complex engine designs where software is needed to deal with the fragility. But while all F1 teams use the same information from the same ECU now, the exact data used to tune the engine varies and is a key part of race engineering strategy.

It's hard to snoop on a real F1 team's telemetry strategy due to the competitive nature of the sport, but enthusiasts can use the rFactor simulation software to supposedly get close to the real thing. Here's a fictional look at various engine temperature parameters and how they respond to subtle changes to factors such as air intake, etc.

Some Formula One teams now provide the telemetry data from the car to the public, and an interesting sub-culture of mash-ups and experimental visualizations has emerged.

A Driver DNA chart for Lewis Hamilton - not based on his biology, of course, but his driving habits such as throttle and braking. This is an example of the sort of experimental visualizations that are now popping up since McLaren has made their telemetry stats public. Source: OUseful.info

10 More Great Interaction Designs – in Cut and Folded Paper

Todd Toler — Thu, 17 Jun 2010 21:19:28 +0000

A take on simple, satisfying interaction designs made out of that most humble of all materials – paper – is my most trafficked blog post ever, so I’ve gone out and found 10 more examples for you. To begin with part one, go here. Otherwise, continue after the jump.

1.Micro-fluidic Diagnostic Sheets , by George Whitesides Lab @ Harvard University

Simple paper sheets that use advanced chemistry to cheaply diagnose a range of diseases. A small drop of liquid, such as blood or urine, wicks in through the corner or back of the paper and passes through channels to special testing zones. Not only are they small, simple, and inexpensive – they are beautiful.

2.Teabag Coasters , by Yuree S Lim and Jleun Yang

These may not help to cure world diseases, but these delightful teabag covers also embrace the science of micro-fluidics. Placing a soaked bag on top of the empty package it came in reveals artwork. I love the way they embrace a common user behavioral “externality” (e.g. resting the wet teabag on the package it came in) and turn it into beautiful, interactive fun.

3. Universal Packing System by Patrick Sung

If Buckminister Fuller worked for a while in the Amazon.com shipping and distribution center, maybe he would have come up with something like this – a single sheet of triangularly scored cardboard that can be folded to fit nearly anything. The material is designed to save wasted space in those UPS trucks, although I’d think that packages wrapped in this stuff would be about as easy to stack as wet cats.

4. “View Source” Business Cards by Spot of Color

This business card peels away to reveal its HTML source code.

5. The Dream Ball Project by Unplug Design

This is packaging for aid relief which is cleverly designed to be re-lifed into a football for poor children. In the world of extemporaneous sporting equipment, this beats a plastic bag full of coconut palm leaves, hands down.

6. Polyhedral “Fractal Pack” by Laurence Gregoire

This proposal for chocolate packaging features a triangular package that unwinds into a string of 10 connected prism-shaped boxes.

7. Obamitas from Neosbrand

Lift up the lid from this cute looking cookie package, and the four walls spill out like the pedals of a flower to reveal messages of hope from President Obama.

8. Wolven Lenticular Book Cover

Some interactive paper technologies that have been around since the 1940’s are those based on 3D holographic and lenticular printing, which display different images depending on which angle the images are viewed. Such covers are making a huge comeback this year in publishing, with Random House’s major new release “The Passage” by Justin Cronin leading the way. I like this one the best – the two images are bold, hi-res, and strikingly differentiated.

9. Brown Tedstrom Holiday Card by EBD

Concertina folds are an interactive paper standby. I love the micro-macro pattern displayed here, as the birds in the opening image are used to punctuate and add lift to the words within the card. Classic and subtle, but satisfying.

10. Miss June 3D Centerfold by Playboy

With the movie Avatar and 3D television all the rage, it’s not surprising that people in the paper-pushing business want to get in on the act. What’s more delightful than the airbrushed, gauzy lensed goodness of playmate Hope Dworacyzk jumping out of the page at you. A cheap gimmick if you wear your interaction designers’ hat, but a brilliant one if you put your marketing one on – and really, what’s the difference?

Other Resources

Box Bottle Bag : the world’s best packaging design

by The Dieline

How to Name Your Website and Write A Tagline like a Pro

Todd Toler — Mon, 24 May 2010 15:00:09 +0000

I am a reluctant brander. Like most User Experience designers, I like to think of myself as a high-minded design thinker – not a marketer. You know the arguments. Designers think about solving real human problems and obsess on the essence of something’s purpose. Marketers define essence as that which gets noticed and remembered. Designers are empathically creative. Marketers are exploitatively creative. Designers seek timeless truths. Marketers are trend-chasers. Designers live in Brooklyn and sell artisanal pickles between freelance gigs. Marketers live in Manhattan and coin phrases like FroYo. Yet it didn’t take me long working in this field to realize that making such distinctions is wrong-headed. If anything, I relate more to the marketer these days. Marketers trend towards the pragmatic. Designers? At their worst: ideologues, aesthetes, navel-gazers. Design and marketing ultimately chase the same goal, “marketplace magic,” so why not think like a good branding brain in order to name and position your digital business? At a minimum you should know a little about the work of Lynn Altman before you set about trying to name your site and write a tagline for it. Her firm, BrandNow, and her book, Brand it Yourself, are excellent starting points for demystifying the creative process behind successful product branding.

The First Key to Success – Counting to One

Like design, branding involves creating an illusion of clarity out of that which is fundamentally indeterminate. Whether you are publishing a blog or building iPhone apps, you are looking for a singular, but simple and strong, idea at the center. Or to put it Altman’s terms, you should learn to count to one. “We don’t buy a shampoo that doubles as a face wash and a hand soap,” she writes. Consumers want to believe, whether it is true or not, that “certain brands and certain products perform best at certain tasks.” Domino’s Pizza built their mega-brand on a single promise – delivery in under 30 minutes. There was no mention of whether the pizza was also delicious. Less successfully, Advil tried to position their product to the marketplace with two core benefits. Fast. Strong. Advil. “Do you remember that campaign?” Altman asks. “Of course you don’t. Neither does anyone else.”

Practicing this sort of reductionism is harder than it sounds. Odds are that your product or website does more than one thing well, or at least that you want it to. For instance, if you think your express passport service is both easy and fast, you will be hard-pressed to give up one of those benefits. You may make the mistake of naming your service ABC Passport Express as a result. “ABC” connotes easiness and guarantees good phone book placement (a valuable business benefit before Google came along in 1997), and “express” sounds fast. Good, right? No, in fact, because you will probably lose out to your more focused competition, RushMyPassport.com, who commits to the single benefit of fast turnaround. Being perceived as having one clear benefit usually wins the battle for the prospect’s mind – which is all that matters.

The name, "ABC Passport Express," simultaneously promises ease and speed of service, not to mention the benefits of being local area specialists as captured in their tagline. The result is generic.

RushMyPassport.com focuses on one core promise, speed of turnaround time, and creates a coordinated impression that this is what they do - get you your passport fast.

The Second Key to Success – Work Fast and Loose (at least at the beginning)

Ok. So now you can count to one, but how do you arrive at the right one? The most sure-fire way is to start with the many. Ideas are cheap, so you should generate lots of them, and you should do it fast. The design firm IDEO, more famous for their brainstorming methods than any other design firm in history, once re-designed that most familiar and time-tested of objects, the supermarket shopping cart, in only 5 days. “Maybe we should acknowledge it’s kind of insane to do an entire project in just a week,” said Peter Skillman of IDEO, as their team proceeded to do exactly that – on national television! The project was done in response to a challenge set forth by the producer’s of ABC’s television news magazine, Nightline, in 1999. One of IDEO’s key premises is to throw lots and lots of ideas out in the early phases – then cull them down to the key ideas later. In The Art of Innovation, Tom Kelley shares the IDEO brainstorming rules which are written on the wall during brainstorming sessions there. Go for Quantity. Encourage Wild Ideas. Be Visual. And always, always – work fast and loose in the early stages, because winning ideas will get refined in the later stages. And, guess what? Winning ideas can come from anywhere, so generate lots of them!

And if we return to the Brandmaker Express method that Altman writes about in her book, we will find an approach for generating names and taglines that is very much in the spirit of IDEO. For each naming challenge, Altman and her team design a set of creative workshop exercises to generate lots and lots of ideas. The workshops are run twice, once with the employees and internal stakeholders at the client company, and once with a team of ‘creative souls’ (an eclectic group of creative professionals who do this as a moonlighting gig.) The workshop games are developed on a custom basis for each product being named, but there are a few favorites which appear over and over. For instance, to generate tagline ideas there is usually an exercise to write an attention-grabbing headline like you might find in a famous publication, but the publication that serves as a setting is varied based on the tone of the product (e.g. NY Daily News for “sensational” headlines, NY Times for straightforward and sophisticated.) Then she might add another exercise to push the creativity further, such as “Now in Three Words,” where the headline has to be compressed to it’s 3-word essence. There are also specific exercises for arriving at names, such as “Word Smash,” which involves taking two English words that fit the concept and shoving them together to make a nonsense word – like Celebrex or MaxiPro. The point with these games is to do lots of them, coming at your naming challenge from several angles. As you are doing the exercises, you should be furiously writing down the things that your brainstormers are saying in response to the challenge.

The Third Key to Success – Synthesize the ideas into a few powerful concepts, then visualize them

My favorite part of working with Altman is when the professional graphic designer she hires comes back with about 20 full-color 10 by 14 print-style ads with names, taglines, and corresponding imagery. This is where the ideas from the brainstorming are synthesized and come to life, and this is also the appropriate time to critique the ideas and vote on them as a group. The book has many insights on how to get to the right 20. For instance, find out the dealbreakers early. Maybe your CEO hates purple so there is no use in developing the purple people eater concept that someone threw out in one of the brainstorming exercises. Concision is essential. You should develop taglines that could tell the story of the site (along with a name and a logo) if everything else on the page was removed. And she provides several known pitfalls that lead to writing bad, consumer alienating taglines. Rampant use of the gerund, e.g. using a verb with no subject and adding “ing” to the end, as in Nokia’s “connecting people,” is a big no-no. Altman calls this kind of tone “self-congratulatory, self-praising, and seriously superior.” She also likes second person taglines, not first person. Telling your customer what you are trying to do in a first person tagline is not the point (e.g. Lucent’s “creating value through true convergence.”) Second person taglines, like “you deserve a break today,” bring the customer into the brand’s narrative.

Lynn Altman uses print-style ads, along the lines of this one for monster.com, to present name and tagline concepts.

So by now, I hope you’re convinced that it’s time to think like a marketer, not a business development person or -god forbid- a designer, when you are naming and positioning websites. Don Norman, in a recent interview in upstart UX magazine, Want, said outright that the distinction between designers and marketers is really very small. They both ask the same question, “How do we make it so that people will enjoy the product?” And if you are wondering who is more creative – marketers of designers? – you should sit in on one of Brand Now’s creatives-only brainstorming sessions and you will realize that we are indeed talking about two sides of the same coin.

Eight Homepage Designs That Would Work as Billboards

Todd Toler — Sun, 09 May 2010 16:48:10 +0000

Think of a homepage as something a user takes in at 65mph. (photo credit: Andrew Canion)

Increasingly users think of the homepage as that place where the search box lives. Web analytics data bears this out. A typical homepage, particularly if there is a large and diverse set of products or information on a site, will see a vast majority of it’s clicks consolidated around the global navigation and search box. If you think of a user flying by your homepage at 65 mph on their way to the search box, then how much information are they likely to take in? How can you make a statement about the value of your site that a user can tune in out of the corner of their eye? The best homepages confront this behavioral reality and offer the same concise, impactful designs as those on highway billboards.

Think Like An Instructional Designer – IA Summit 2010

Todd Toler — Sat, 10 Apr 2010 12:55:52 +0000

I’m in Phoenix this weekend for the IA Summit 2010 – which is organized by the American Society of Information Science & Technology (ASIS&T) and is one of the major national get-togethers for Information Architects and User Experience Designers. I’m not sure if there is a distinction between the two titles anymore, but from what I hear this is the first IA Summit in years not to have a session on what to call ourselves in this profession – so that’s progress I suppose. Did you know that Wiley publishes the journal of ASIS&T? This is my first IA Summit and I was pleased to be a presenter. My talk, “Think Like an Instructional Designer,” was inspired by the fact that e-learning professionals and interaction designers are in silo’d professions. The two fields rarely work together and get a chance to learn each other’s theoretical frameworks. Yet all interaction designers face instructional design challenges everyday, and learning theories can be used to make more persuasive, better converting interactive experiences. Think of e-learning as “everyday” learning.

Toler Presentation Iasummit2010

View more presentations from toddtoler.