Good Webpages are Distinct

There are two golden principles of good webpage design:

  1. Keep it simple
  2. Make it distinct

Unfortunately, these two principles are often at odds with one another. Simplicity means putting the information at the top and taking out administrative debris such as endless navigation bars. Distinctness means not only putting clutter back in, but putting in different clutter on each page.

In other words, making a page distinct means putting in some cue that distinguishes this page from all others. This principle is much more often ignored than simplicity. The most obvious way to achieve it is to put a whacking great image at the top, like on Wikipedia. Compare these two Wikipedia articles:

[John Marston on Wikipedia]      [Richard I on Wikipedia]

On the left is the page for the writer John Marston, and on the right the page for King Richard I. When you're going through a lot of articles, something vivid on the page helps you to remember what you've read. If you see a fact on the Richard I page, you're more likely to associate it with the page in general because the page is distinct and memorable, and so you're more likely to be able to find the fact again.

Challenges and Structure

The problem with using a large image as a distinct cue is that not every page has an obvious image associated with it. Finding good images, and especially ones with licences that allow reuse, is getting easier thanks to the Wikimedia Commons and Flickr and so on, but still hard for the average individual.

One possible solution when you don't have an image to hand is to make use of the structural elements within HTML itself. If you just put paragraph after paragraph of plain text, then there isn't much to distinguish this structurally. Things like lists, headings, emphasized text, links, and varied paragraph sizes can help to create a page whose “structural signature” is distinct.

Consider, for example, Robert Wesley Angelo's site about Wittgenstein's Logic of Language:

[Wittgenstein p.1]    [Wittgenstein p.2]

Or the world's very first wiki, the Portland Pattern Repository:

[PPR p.1]    [PPR p.2]

Which of these sites is better?

Though these two sites are both very good at simplicity, but at first glance they both appear to do badly in terms of distinctness. But consider the cues carefully: you actually get a wildly different feel when browsing them. The Wittgenstein site does not really provide any contextual clues because there are simply page after page of very similar looking paragraphs. On the Portland Pattern Repository, however, on the most well manicured pages there are lots of lists and emphasized cues and different densities of links. You get to know some of the pages quite well, and yet you wouldn't think that structure of this nature would be a factor.

Design Myths

There are two unfortunate design myths which play against distinctness:

On the 1st myth, that images should be avoided, is something that beset the WAI GL Working Group, that produced the Web Content Accessibility Guidelines, WCAG 1.0. When it came to produce the section version of the guidelines, WCAG 2.0, there was a prevailing feeling on the mailing lists that images in general had a negative accessibility vibe to them. Because of this, there was the recommendation that all images should have text equivalents; but there was nothing to say that images should be used liberally especially in contexts where people with learning disabilities need to be supported.

This was counteracted in part through the efforts of people like Anne Pemberton and Jonathan Chetwynd. Anne and Jonathan have experience in teaching people who find it difficult to learn without extra cues, cues which were starting to be prejudiced against. Unfortunately, though the group learned relatively quickly, there still seems to be a general lingering prejudice amongst the otherwise erudite web designers at large.

On the 2nd myth, it is of course true that one should try to make pages on a site consistent, to make a whole site distinct. But it's not true that as a result the distinctness of each individual page has to suffer. Finding a good balance between the two is as difficult, or perhaps even more difficult, than finding a good balance between simplicity and distinctness, but you can see how various sites achieve this: Wikipedia for example using the same stylesheet across the site, and the same logo and reasonably spartan navigation controls on each page.

Conclusions

Making pages distinct is as important as making them simple, and of equal importance to making a whole site distinct. Unfortunately, balancing all of these considerations is a considerable chore, and there are no really well accepted conventions yet for making even the basics any easier. The web is still a very young medium, though, so hopefully techniques will evolve. At the very least, one can start to think about using images and page structure itself as a means of giving each page a character of its own.

Taken even as a whole, the points that this page tries to make are very simple ones; but the aim is to redress a severe imbalance in web design as it stands. The error of assuming that simplicity is more important than distinctness is perpetuated by the fact that simplicity is, though difficult, still much easier than making a page distinct. And this is compounded by the promulgations of the myths of inaccessible imagery and the idea that sites need to be entirely, rather than partially, consistent.


Sean B. Palmer