[Robot Wisdom home page]

The best and worst of web-media design

Jorn Barger 24 February 1999 (updated 12 March)


Recently on comp.human-factors someone asked what might be done to raise the general level of web design. I answered:

I think the big, visible names in web design should sign on to a set of standards, and send violation-notices to the major offenders. Then, if those main sites start setting a better example, the rest will follow...

But then I realised it would never happen that way, so I'd better do it myself.

Good web design is about being considerate.

And being considerate is especially arduous, on the Web, because you can't be sure what all your different readers are seeing. Font sizes and shapes, color shades, window sizes and shapes, browser settings-- all of these and many more may be freely varied. So the basic 'golden rule' approach of creating something that looks good to you just doesn't cut it...

Inconsiderate design strategies:

Headlines too short

Worst headlines: Scientific American, Discover

If you go to the table of contents of Scientific American or Discover you'll see many links to well-written, up-to-date coverage of exciting developments in the world of science. But most of these links are so poorly described that only the most devoted reader will bother to explore any of them.

Real examples: "Oil on Water", "Green is Good", "Rushing the Double-Gate" (SciAm, March 1999); "Temples of Doom", "Postcards from the Edge", "Paradise and Oil" (Discover, March 1999)

The articles themselves offer thousands of words of fascinating text, often with valuable illustrations. So why hide them behind links that give only the tiniest, most ambiguous glimpse of that???

This is the most widespread and frustrating problem of all web design. Every good page deserves a full paragraph of 'link text'. If this turns your tidy hotlist into a long page with a half-dozen screens of text, instead of a one-screen column of short links... I can live with that!

Best descriptions: Obscure Store, Christian Science Monitor

Real examples:

Cops give frat boys a week to explain how student was hazed into hospitalization. These guys are slow, so they need a little more time to concoct a story. (Obscure Store, 20 Feb 1999);

Reinventing the social scene on campus
Not since Dartmouth College admitted women in 1972 has this Ivy League school taken such a significant step. Now, in a move that may change the campus culture just as dramatically, administrators want to reinvent student social life, including making it substantially coeducational. (CSM, 19 Feb 1999)

Obscure Store is not only informative, it's witty! And the Christian Science Monitor, on their daily text-only contents page, offers lead paragraphs that are specifically written to be informative.

Wired News is decent for their own articles (but not for the external story-links at the bottom of that page, which get only a few ambiguous words each). And the Salon archives by date are very good (better than their own front page).

In my own weblog I use pullquotes from the articles, so I'm always on the lookout for short passages that will be especially interesting when pulled out of context.

Another important, related factor is the phrasing of the headline itself, which should be self-explanatory, not cute. Hollywood's Variety is the worst offender here ("HIX NIX STIX FLIX" was way clear for them), but Wired is also bad. NewsLinx is a rare tech-headlines aggregator that considerately re-writes the worst headlines.

Jakob Nielsen calls this the microcontent problem. An interesting experiment (not entirely successful, imho) can be seen at OneWorld where activist headlines are prefaced with the country and category ("INDONESIA/HUMAN RIGHTS").

Wired deserves a special shame because it leaves a default HTML title like "Technology News from Wired News" as the header of each article, instead of the headline itself. When you bookmark such a story, or come across it via a search engine, it might as well be a blank. The headline aggregator NewsHub goes to the extra-considerate effort of using a Perl script to extract the actual headlines for Wired.

(Sometimes minimal descriptions are used as a stylistic device-- eg Need To Know-- but this can easily descend into inconsiderateness-- eg, Scripting News "Michael Ventura: Wired to What?")

In general, you might visualise a website as a set of pages of different colors (ie, different topics), with the most rewarding pages shining the brightest. Every link should convey the color and brightness of the page it links to, and the homepage of a site should include a glimpse of all its brightest pages. But too often their light is hidden under the proverbial bushel...

Too many pages for a single article

Worst: Boardwatch, New York Review of Books, WebMonkey

I'm not sure there's any valid reason for breaking up a single article over multiple web pages. The incredibly destructive human-factors myth has been that people are reluctant to scroll, but on the Web-- where you may have to wait ten seconds for each page to load, and where many surfers have to pay by the minute for connect time-- this just seems absurd.

Boardwatch-- a priceless resource for understanding the Internet's hardware evolution-- is totally obscene in this area, breaking up articles into more than a dozen pages, and even their table of contents over several pages! The NY Review of Books appears to break its online articles at the same points they break in the printed version, for no apparent reason, which often means seven or more pages.

Someday web-browsers may have a "Concatenate multipages" command that automatically fixes this.

And more and more publications-- eg, Wired and the Los Angeles Times-- are offering a one-page version 'for printing' that can be linked directly.

Table-of-contents pages may also grow too long, eg Online Books which tops 100k. A reasonable target is 32k, especially for news-pages that are reloaded frequently.

Hard to track new content

When a website-- large or small-- adds a new page, how is one supposed to find out about it?

Many solutions are possible, but the most sensible is to designate one "What's New" page that tracks all the changes on the site. This will be the bookmarked page, and visitors will recheck it as often as circumstances suggest. (With sites whose purpose is news, it should in fact be the homepage of the website.)

Additions should be made at the top of this page, with older material scrolling down, eventually scrolling off the bottom, usually onto an archive page. And each new item should be allowed a paragraph of description, as explained above.

But almost none of the major media sites use this design!

Almost all break up new material over multiple shorter subtopic pages (International, Tech, Arts, etc). And single pages are often arranged as HTML tables with different topics in different sections, so spotting new material requires re-scanning the whole page (eg Online Journalism Review, Atlantic, CNN, Nerve).

Many have zero-content homepages that link to the latest issue's table of contents (instead of putting that ToC right on the home page. Boardwatch, Lingua Franca, and Fast Company are especially bad for this, while New York Magazine and Village Voice at least offer a few tidbits with the link.

The advantage for the publishers is that the ToC for that issue now has a persistent URL of its own.

But what these sites don't realise is that each extra division of the ToC vastly increases the effort of browsing, and so reduces the likelihood of people bothering.

Salon uses a clever URL-trick with an inconspicuous frame at the bottom of its subtopic pages, allowing you to link directly to the content area (eg, "21st"), while allowing you to extract the persistent URL of the article itself (eg, via your browser's Page-Info menu-item).

Best new-content tracking: Laissez-faire City Times, London Times

The Laissez-Faire City Times offers an unusually good example of this model. The London Times has a somehat-hidden "TODAY'S CONTENTS" page linked from the bottom of the homepage, with headlines (no descriptions) for every new page.

PC Magazine gets honorable mention for their news page, though incomprehensibly it never mentions when a new bi-weekly issue of the magazine goes online! Similarly arbitrary fragmentation is also a problem with the Atlantic, New Scientist, Computer Gaming World, and New York Magazine.

Pages that are mostly but not quite entirely newest-first include Scripting News, Obscure Store, OS News, Wired News, SF Examiner, and NASA Watch .

Sites based on weekly or monthly periodicals most often post an entire issue at once... but almost the only site that plainly announces the date for the next posting is the biweekly NY Review of Books-- usually one is left to one's own devices to discover that an update has arrived. (An email-notification list works reasonably well, but is rarely offered. Newer web-browsers support a handy 'What's New' feature that will detect and flag changes at a given set of URLs. There are also some free web services for doing this tracking.)

A better strategy would probably be to dribble out a few new items every day, because it allows each item greater attention. Forbes does this in a somewhat confusing manner. Fast Company and the Village Voice are examples of content-rich sites I wish were done this way.

In general, I think, news sites should optimise for surfers who visit daily. Less frequent surfers can be accommodated easily by archives...

Archives impossible to browse

Worst: Scientific American, Wired magazine, many others

The worst archives are simply lists of the dates of past issues, linking to the contents-pages of each issue (often with useless images of the covers). Only the most dedicated visitor will bother to explore these links (unless a specific issue date is known from some outside source).

Best archives: Salon

The best approach is to concatenate many tables of contents-- with good descriptions for each item, of course-- into one long archive page, of 100k or more. This allows reasonably efficient browsing of missed issues. Salon archives by date is outstanding here.

Other problems are limited archives-- eg, short-term or for-pay-only. Some sites even change the URL when they archive an issue, making linking extremely inconvenient.

Slow to load

Worst: Online Journalism Review, NewsLinx

Online Journalism Review sets many standards for bad design. With most sites that use frames, you can extract a separate URL for the text-page part, but OJR is set up to defeat this and force upon you a giant, ugly, slow-loading navigation frame. So when you visit the site, you first see a tempting text page with no frame, then, just as you reach to scroll it, it vanishes and the frame appears excruciatingly slowly, and finally the text reappears, squeezed down now into a corner of the window. Total time wasted: a stunning 45 seconds.

NewsLinx has only one problem, but it's a doozy-- its table-based design is so complex that it takes 45 seconds to display, including 15 seconds (on my PowerMac) where the entire machine just freezes.

Ain't It Cool movie news not only loads slowly, but server overload often produces an 'empty document' error.

Forbes and Industry Standard also have notably slow formats.

Hard to read

Worst: Feed

Feed is probably the most popular example of the typical overdesigned webzine.

Even in its lo-fi version, it manages to throw so much graphics gee-whiz at you that reading is uncomfortable. And the standard version, while an improvement over some earlier Feed designs, still provides a laundry-list of design faux-pas:

But I don't understand what it is about Feed's lo-fi article layout that makes this uncomfortable for me as well-- everything is simply indented via BLOCKQUOTE, which should be fine, and notched up just one fontsize (FONT SIZE=+1), which is not ideal but doesn't entirely explain my discomfort...?

(Time and Newsweek also have this effect for me on the Web, as if the page designer never really tried reading the words on the page.)

Best: Irish Times

My choice was the Irish Times, which was a bit paradoxical because it also used multiple columns. But it's been redesigned now, and I no longer like it!

To choose the winner here, I asked myself what sites I most look forward to seeing, and the Irish Times stood out a mile for its attractive page design.

The first rule for readability is: let the user choose the font size and face for the body text. Making it larger or smaller (or bold or italic or underline) is very inconsiderate, because you can't know how these will appear.

Also, there's a wrong way to set the width of an HTML TABLE (I think) that can result in lines of text that are much too wide for some users' windows. I almost always give up on these without reading them at all.

You also have to very careful with 'piebald' text-- too many arbitrarily bolded words, or too many in-line links that make the text go blue for a moment. When you look from a distance, adding a few of these variants may look a lot nicer than the usual dull grey rectangle, but once you start reading the text, dull grey is really where it's at.

As a rule of thumb, probably a bolded phrase or two in the first paragraph will help draw the reader in, but from then on stick with italics.

(And you definitely shouldn't link to Apple's home page just because you mention Apple-- ask yourself whether there's really a page they might want to jump to, and if there is, describe why, don't just make an 'en passant' link.)

Online reading also demands much shorter paragraphs than printed text, with blank lines between paragraphs.

A convention with magazines is to scatter 'pullquotes' thruout an article, to draw in people as they flip by. But imitating this on a webpage makes no sense to me. Once they're on the page, they're unlikely to scroll downward unless they're reading. Interrupting the text with a pullquote that duplicates text above or below it is just silly. You can get the same effect, if you must, by increasing the fontsize inline. See?

No external links

How can you post a news story about a website, and not include a live link to that site???

This is still way too common, especially when the article was written for a (paper) newspaper.

Often the URL will even be included, but in a non-clickable form... either from sheer stupidity, or from a misguided belief that it will keep their readers around longer.

But almost as bad are articles about, eg works of art, where an illustration would be invaluable, but the article offers neither the illustration, nor any link to a webpage with that illustration.

Best: TV Ultra

TV Ultra is a brilliant example of what a little net.research can do. Each day they feature one scheduled TV show, with a lively commentary, but the real added value comes from the handful of related links they've tracked down.

Intermediate between these extremes is the increasing number of sites that offer, at the end of each article, a set of links to recent articles within the same site that offer background on the story.

User loses control of experience

This is the rudest category of all. The little windows that pop up with ads or polls or whatever (aka 'interstitials'), or links that cause new windows to open or that change the size and shape of the current window, or music or other multimedia that starts playing automatically, files that start downloading without warning... all of these effectively hijack the user's computer. (I call them "gotcha" links.)

Maximising the user's sense of control also requires that links explain clearly what they link to. Not just odd file formats, but whether a link is to local material or to a different site, or whether it's on the same page (which should be flagged with a # hashmark).

En-passant links are named after an obscure chess rule that allows a pawn to capture a piece 'in passing'. The test for en-passant linking is whether a reader who didn't see the blue-underlined giveaway would guess there was a link there at all. Sometimes this can be cute, but usually it's just inconsiderate.

And I haven't figured out why yet, but some pages make it difficult or impossible to select and copy a passage of text. I'm always tempted to withhold a link when this happens.

Web-design pages:
main : academia : info-design : adding value : resource-pages : lessons-learned : best-worst : plugging leaks

Special topics:
surfing-skills : url-hacking : open content : semantics : pagelength : linktext : startpages : bookmarklets : weblogging : colors : autobiographical pages : thumbnail-graphics : web-video : timeline of hypertext

Anti-XML/W3C/etc:
structure-myth : page-parsing : firstcut-parser : html-history : semantic web

Design prototypes:
topical portal : dense-content faq : annotated lit : random-access lit-summary : poetry sampler : gossipy history : author-resources : hyperlinked-timeline : horizontal-timeslice : web-dossier

Website-resource pages:
RobotWisdom.com : Altavista.com : 1911encyclopedia.com : Google.com : IMDb.com : Perseus.org : Salon.com : Yahoo.com

Older stuff:
design-lab : design-checklist : HyperTerrorist : design-theory : design cog-sci


Search this site Search full Web
Before you leave this site: Be sure you've checked out Jorn's weblog which offers daily updates on the best of the Web-- news etc, plus new pages on this site. See also the overview of the hundreds of pages of original content offered here, and the offer for a printed version of the site.

Hosting provided by instinct.org. Content may be copied under Open Web Content License.