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.

]]> http://www.solidstateux.com/visual-design/the-trouble-with-scientific-figures-part-i-a-little-history/feed/ 1 http://www.solidstateux.com/visual-design/anti-pattern-dead-zones/ http://www.solidstateux.com/visual-design/anti-pattern-dead-zones/#comments Thu, 10 Sep 2009 22:09:54 +0000 Todd Toler http://www.solidstateux.com/?p=644

The Independent Film Channel's home page used to be one big "Dead Zone" before they redesigned it.

Ad placements are, by definition, dead zones.   These are specific, predictable sections of a website’s screen real-estate that are subconsciously tuned out by the user as unrelated to the page’s main content and functionality.  But designers unintentionally create dead zones of their own all the time.    A classic and well understood example of a dead zone is “right-rail” blindness.  Content and features below an ad – such as in the right-hand column of a typical two or three column layout – are tuned out as ads on the assumption that everything from an ad down is also an ad.   According to Nick Gould, CEO of the design and research firm Catalyst Group, the evidence of this phenomenon goes well beyond the anecdotal.   “There is no question that right-rail blindness is a phenomenon we’ve observed in both eye-tracking and usability testing.  This is of course mainly due to the ingrained expectation that ads live there.”   And it’s not just a matter of positioning elements in a layout.  The manner in which a page element itself  is designed can greatly amplify or lessen the dead zone effect, in the worse case scenario unintentionally deactivating important content areas and features from the user’s attention.   Often this comes from trying so hard to make an element “pop” visually, that the reverse effect occurs.   “The dead zone effect is obviously exacerbated if elements below ads are ad-like in their design,” Gould says.  ”Furthermore, promotional elements that have standard ad dimensions and contain images are frequently mistaken for ads.”

Eye-tracking data shows that the "right rail" has little visual salience with users.

There is strong evidence now that users have specific expectations about where to find the most relevant information on a web page before having seen the page.  In a recently published eye-tracking study observing  usage of a broad range of web sites for both page recognition and information foraging tasks, the right-rail blindness phenomenon was dramatically confirmed.  (see Bushcer, Cutrell, & Morris 2009) “It is striking that the entire right side above the fold is neglected for both information foraging and page recognition tasks.”    The eye tracking data reveals that users are looking at the right rail, but the “fixation impact value” (a computation that correlates fixation length with the amount of visual information processed) approaches zero.  According to Gould, “This all relates to visual salience – which is more about an unconscious assessment of what’s relevant and what’s not that occurs pre-cognition.  A variety of design, placement, and relative size/shape issues can contribute to items on the page not being deemed salient.”

Netflix consistently avoids "Dead Zones" with careful use of white space and "Functional" looking design cues.

As a predominantly qualitative researcher, these eye-tracking findings do not surprise me.  I’ve frequently observed that small differences in visual design and placement can have a dramatic effect on a user’s perception of whether they should pay attention- not to mention interact- with a page element.  Most of us who work on commercial websites have to balance a colorful, branded look while simultaneously creating a usable interface.   I’ve observed a few tricks over the years.  For instance, promotional elements that have an interactive “call to action”, such as a blank zip-code field in a registration opt-in promo, will outperform a straight image & copy version of the same message.  Netflix.com are masters of working with a heavily branded design full of bold, contrasty elements, yet systematically avoiding the creation of dead zones with careful use of white space and  “functional looking” design cues.

Original page layout (with CramCast ad) on cliffsnotes.com

I find myself conflicted (not to mention confronted by other stakeholders) with a desire to make something “pop” and the counter-intuitive, opposite notion that an integrated look is the key to discoverability.   We recently ran a multi-variate test on www.cliffsnotes.com to test the hypothesis that elements with a more “integrated” versus “ad-like” design perform better in right rail placements.  It was my first dabbling with the free tool Google Website Optimizer (GWO) – which turned out to be one of those “Where have you been all my life?” moments.   In the Cliff’s Notes test, we took an existing internal promo on the site for a podcasting series called “CramCast,” which was designed as a standard 300 by 250 ad, and redesigned it in a style more consistent with the existing functional right-rail modules on the site.   We made no changes to the copy or the photo between variants.  The positioning on the page was exactly the same.  The only difference was the look and feel.  Then we ran both versions in a split-traffic test on the live site.

The integrated look outperformed the original "Ad-Like" look by a narrow margin of 6%.

The integrated version did outperform the ad-like version, but not by a huge margin – only a 6% improvement.  (We got about 30 more clicks per 200,000 visitors with the Integrated look.)  It was not worth our time to redesign the creative material for that campaign, but certainly good counter-evidence the next time someone says something doesn’t pop enough.   What we couldn’t get at with GWO was whether the integrated look, since it replaced the traditional ad placement and cast less of a shadow on the user’s salient zone,  helped to activate the entire right rail.  This is the more interesting question.  After all, the worst dead zone problems are when multiple ad-like elements conspire to deactivate entire regions of a page – such as the old homepage design on IFC.com (pictured above.) In this design,  multiple ad-like features are interpreted sub-consciously by the user as one big ad area, and important content features (such as the programming schedule) are overlooked.  In our  next A/B test here, we’ll have to monitor the clicks outside our variants as well, perhaps with the advice of someone who is an expert with these tools – like Avinash Kaushik or Marko Hurst.    If anyone has done any research on this issue, or can point me towards soemthing else to share here – please comment on this post!

What are Anti-Patterns?

(Definition taken from Looks Good Works Well) Anti-patterns, also called pitfalls, are classes of commonly-reinvented bad solutions to problems. They are studied as a category so they can be avoided in the future, and so instances of them may be recognized when investigating non-working systems. The term originates in computer science, apparently inspired by the Gang of Four’s book Design Patterns, which displayed examples of high-quality programming methods. - Wikipedia Anti-pattern

Rounded Corners Are Cognitively Cheaper, Yet Facebook Drops Them Anyways: Image Source: UI & US

Yesterday Facebook announced that it decided to drop all rounded corners in their latest UI refresh, sacrificing those cheerful corner radii on most of its interface modules for the more severe but coder-friendly squared off look. It’ s almost like they’re declaring the end of web 2.0, once and for all. Keith Lang’s UI & Us has consolidated a terrific history of where this rounded rectangle thing started in the first place… with the original Macintosh apparently. Folklore has it that Steve Jobs pointed out to Bill Gates that the real world is full of rectangles and squarish shapes that have rounded corners -stop signs, coffee tables, beverage coasters – so why not user interfaces? Right angled shapes are computationally efficient to draw, but let’s face it – you can put an eye out with one of those things if you’re not careful. And that’s exactly the kind of human-centric thinking that has Apple rounding the corners on everything from your iPhone to those error message pop-ups that you’re getting in iTunes. Interestingly, Lang makes a cognitive processing argument for the benefits of the roundedness, quoting author Jurg Nanni. “A rectangle with sharp edges takes indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our fovea is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down.”

Linking aesthetics to cognition is not a stretch. We often express a qualitative preference for the look of something that is driven by something more elemental in our biology and our evolutionary need to survive. For instance, we see and process information better when it’s portrayed in color combinations that are found together in nature. I quote a good piece from 2003 by Luke Wroblewski. “[colors] found in nature are often less saturated and more pleasing to the eye than their artificial counterparts. As a result, they allow users to focus on interactions, and not be distracted by overly bright hues.” In fact there is a whole book about this called Evolutionary Aesthetics, which makes the case that our aesthetic preferences are not only driven by evolution, but that there are huge differences in what we visually respond to based on whether we’re male or female and in a precopulatory or postcopulatory state. I’m sensing a whole interesting new category of design research on the horizon here.

Trendy No More - Say Goodbye to Your Rounded Corners in Facebook

So CSS3 is including a property for rounded corners and I’m sure browsers will support this soon. This will relieve the technical “expense” of how they are rendered in browsers now (via the use of image files.) But do we want them? Are they really there to provide a more “organic context” (as argued in this piece four years ago on basement.org), or are they just trendy? I’m sure bell-bottom trousers were more efficient for us in terms of neuronal image processing but that didn’t keep them around any longer, did it? Personally I think there’s something else going on here. We have clearly established a design idiom over the years that elements with rounded corners are things you are supposed to interact with… e.g. rounded corners are a functional cue. Functional cues help us put some space between the kind of design choices we make for an interface versus those we make for print. Think about the kinds of things that consistently don’ t have rounded corners on the web – ads and photographs. Now think about the kinds of things that do – buttons, modules containing links and form elements, navigation menus, and tabs. We don’t want our users tuning out areas of the screen just because it doesn’t look like something that is interactive. For designers, rounded corners have played a tiny role in managing that issue. Plus, they just look so damn cool in that Web 2.0 way, don’t you think?

Everybody Loves Puppies, but The Instructional Potential of This Image is Zero

Careless use of imagery – particularly photographs – is often the difference between a dull “brochure-ware” site and a persuasive information experience.   When we redesigned www.dummies.com, we initially populated our design mock-ups with the type of stock photography that professional designers mostly use… only to find that the otherwise attractive imagery added a level of generic-ness that felt downright off-brand.  Then we created a style guideline only to use imagery that had true instructional value, whenever possible framed and centered on the action that was being discussed in the content.  This applied not only to imagery embedded in the how-to articles, but also the landing page teaser thumbnail photos for the articles and videos.  This is a policy the mega-successful book line has had for years, but it wasn’t immediately obvious to us on the web design side.  Once we made this change the site felt instantly better.  The difference?  We thought like an instructional designer.

Interaction designers, graphic designers, and anybody else involved in the ongoing production of commercial websites should pay a lot more attention to instructional principles – even if the site is not overtly instructional.   What makes material good for learning also makes it good for other conversion goals – such as explaining products, services, and brand building.

Dummies.com Uses Explanatory Imagery Even in Thumbnails

In fact, why not audit your site’s imagery right now for instructional potential?  If you find that most or all of your visuals are falling into the “decorative” category – unless of course it’s fluffy puppies or blondes on the hoods of sports cars (two time-tested exceptions) – then it’s time to make a change.   Fortunately, the educational psychologist Richard Mayer has conveniently classified types of imagery in terms of their instructional benefit and effectiveness for learning.  The good folks behind the Wiley Visualizing series, which is a textbook line that is highly committed to applying cognitive theories of learning to the design of their products, put together the following summary table, which I’ve adapted with examples that might apply to a typical web designer’s challenge…

Types of Visuals Commonly Used in Instruction

Category of Visual	Instructional Potential	Examples
Decorative - visuals used for aesthetic appeal, entertainment, or to stimulate interest.	None	Caption: America's 5 Dog Friendliest Cities
Representational - visuals that portray a single object or piece of information in isolation from related objects or pieces of information.	Minimal to None	Caption: San Francisco: A Dog-Friendly City
Organizational - visuals that display relations, structures or organization among multiple objects or pieces of information.	High	Caption: America's 5 Dog Friendliest Cities
Explanative - visuals that explain how systems, processes, or cause/effect sequences work.	High	Caption: What Makes A City Dog Friendly?