( science )
16 July 08
in science

Science journal web design, done right

Finally, a major science journal gets their online website design right. The new redesign of PNAS hits all the right notes. No wonder, one of the consultants of the redesign is usability expert Jakob Nielson. Consider the simplicity of their front page. There is actually enough whitespace so that the eyes don’t go epileptic. Clean and elegant: there are only simple headlines links that entice you to click.

Gone is the potpourri of links that seem to plague every other science journals’ front-page.

There are all sorts of neat little touches like the pop-up abstracts in the table of contents and search:

However, I was most impressed by the layout of the article page itself. For starters, the most prominent graphic element is not the journal name, nor the navigation bar, but the name of the article. Who would have thought of that? Ummm… not any other science website designer in the world.

One interesting choice is the use of fixed width column in the PNAS article page. For years, I was a faithful adherent of the scalable width, no doubt influenced by some of the missives of Jakob Nielson. But recently, I have swayed towards the fixed width. Why? Fixed columns allow a generous left margin, easy on the eyes. And the text is maintained at a readable width. However, most journals use scalable widths in the display of article text. The biggest problem with scalable widths is that today, most of us use huge monitors. With large monitors, it’s easy to accidentally expand browser window so that the text column is expanded to a ridiculously unreadable width. Better to fix the column width.

The most impressive element of the layout is the intuitive use of the 3-column display where the layout follows the simple hierarchy of left column = article text, middle column = article navigation, and right column = issue navigation and journal navigation. The title of the journal is placed over the right hand column, which is semantically matched by the content of the right column. The logo is emphasized but does not dominate the page as if it were placed on the left. This should be the exemplar of online science article layout for years to come. It is simple, rational and, one might even say, scientific.

iayork on 07/17 said:

I am still on the fence about the new design, and the feature that I like least is the fixed width. Or rather, the width they chose to fix it at. I find it too narrow, so that there’s only a paragraph or so visible at a time. I agree that it’s attractive but I’m not convinced it’s functional. (I think a better option would be flexible width with an upper and lower limit — which is actually the setup I have on my blog’s theme. )

I’m also not quite sure about all the material in the sidebars. It may be a question of getting used to it, but I think they’ve overemphasized the sidebars. Again, it makes for an attractive layout, but the whole point of the page is the article text, and so the article text should dominate. It doesn’t. There are a bunch of options in the sidebars that, cumulatively, have equal emphasis, even though most readers will use those elements 1/100 as much as the article text. It seems unnecessary to have the logo and issue navigation on every page, taking up article space. It seems like something that was designed based on theory rather than tested by user actions. But again, these are new things and I’m not used to them yet, perhaps I’ll find them more useful as I see them more. And having a larger (flexible) article would remove that objection too.

96well on 07/23 said:

Let a internet page is a chromatographic column, and its visitors are molecules running out. I guess PNAS it evolving toward affinity chromatography, that let you strongly trap interested readers. Pout-pourri sites didn’t trap anyone, they are only slowing visitor surfing with lot of noise. They are “primitive” chromatography.

Bosco on 07/24 said:

@96well, haha, great metaphor! Website interface as chromatography.

@iayrok, the question of optimal column width is one that has plagued website designers for a very long time. I can’t exactly remember the source, but a character width of 80-100 characters has been found to be optimal. I’ve found this to be the case with my reading, and I am a fast reader. This seems to be the width of the PNAS website.

One other thing I noticed, in most other science journals, article navigation (including not only jumping within the article but also pdf links, abstract links, citation links etc) are littered within the article, or placed in different sidebars. As well, all articles must show detailed bilbliographic information somewhere on the page. All this adds noise to the actual text of the article.

What I like about the PNAS design is that in the main text column, it’s simply title and authors. All detailed technical information & navigation has been collected in the middle column, which 1) gets it out of the way of the article and 2) puts everything in one easy to find place.