A thousand words?
Sometimes I come across a book or a film I haven’t read or seen in twenty years, and it brings me face to face with the changes in technology during just my lifetime. Suddenly being reminded that a Super 8 projector was something to lust for, or that the first fridge or ’phone was a big deal — it’s looking into a different world.
Nothing shows the advance of technology so sharply as the development of computers. Look at a film from the 60s, or a TV serial such as A for Andromeda (I believe the serial no longer exists, but there was a book by Fred Hoyle and John Elliott based upon their teleplay), and computers (or sometimes “computors”) are universally enormous things, filling at least one room and tended by white-coated technicians — specialists in the arcane methods of communicating with these vast machines.
There’s a good example of those methods at the beginning of Our Man Flint. A computer is used to find the best-qualified individual to tackle the menace threatening the world. It’s Flint, of course — and the answer is spat out on punch cards.
In all the pre-80s SF I read and watched, hardly any came close to predicting anything remotely like the computer as we know it today. Or even like the computers we used fifteen years or so ago.
When dinosaurs ruled the earth
The first personal computers were text based. It wasn’t until the arrival of the Mac that a GUI made its appearance on a computer you could actually buy, although you needed a significant wad to afford it. Those who couldn’t afford it, or disdained something so easy to use, could have one of the many IBM-compatible clones running MS-DOS.
Strange to think that if we had been picked up by a Tardis in 1965 and wheeched forward twenty years, we’d have thought an IBM-compatible running DOS 3 with a Hercules monitor completely astounding….
MacOS being so impressively usable, it was followed by other GUIs on other machines — especially, of course, Windows. As user-friendly GUIs, none of the others have ever really matched MacOS, although some platforms had other benefits to offer.
With Windows, that benefit was an enormous installed user base of Intel-based machines and extensive software support. Once Microsoft had some of the basic problems sorted out, and once the hardware had the power to cope with the demands Windows makes in terms of processor speed and memory, the writing was on the wall for DOS.
It was a pity in some ways since DOS worked (not that I’m saying Windows doesn’t, I’m very impressed at that nice blue screen it displays so well — and so frequently) and there were some pretty damn good applications for it. In fact, if you look at word processors there is very little functionality in modern word processors that wasn’t there in DOS wordpros fifteen years ago.
Monkey see…
But GUIs suit the way we work. From childhood, if we want something we reach out and grab it. In GUIs, we can do that with the mouse; we don’t need to remember scores of commands to type in: we point, we click. In a well-designed GUI, you also get a good idea of where files are — all through the use of pretty pictures, or icons.
Icons are everywhere. There are icons for disks and directories and files; icons for programs; icons within programs to access the software’s functions. I’m trying to think of software I use which doesn’t incorporate any sort of toolbar, and the only ones I can come up with which don’t use icons at all are a very basic (yet powerful) text editor designed for programming and a newsgroup reader.
The problem is, a lot of the time I have no idea what those little images on the toolbars mean.
The trouble with icons
Once I get away from the obvious ones (I, B, U, etc.) and the others I have learned because I use them regularly, I tend to find myself staring at a little doodle wondering what the hell it means — or what some American designer might have intended it to mean. The fact is, despite what a lot of people would have you believe, a picture only paints a thousand word if you know what the picture is and what it signifies.
This problem with images and symbols is not confined to the world of computers. If I go out for a walk and I come to a part of a street with black and white stripes painted on the road I know that I have come to a zebra crossing, even without looking for the Belisha beacons. If I start crossing the road there, cars are supposed to stop to allow me to do so.
There are other countries in Europe which use white stripes on the road quite similar to zebra crossings; I have no idea what they do mean, but I am quite certain they are not anything similar to the zebra crossing, and it would be foolhardy for me to step out in the expectation of traffic giving way.
Iconifying the Web
What does all this have to do with web design? Well, in many respects the development of the Net is mirroring the development of the PC. It is not so long ago that the Net was wholly a text-based world. Even after the invention of the Web, it remained a text experience until browsers developed the ability to handle graphics.
The limited text formatting options encouraged a lot of people to use graphics, as soon as this was possible, to construct their sites’ navigation systems — often simply using images of text.This was the only way to get text looking precisely the way you wanted it. At least this worked, if the images were well-designed.
The big problem is with images used as links which don’t incorporate text. It is not easy to think up clear icons which tell the user what is going to be at the other end of the link — even, sometimes, that the image is a link at all. Take this example — what do you expect to be on the other side of these links?
![[Image: A lime, an apple, cherries and a gem ]](../images/examples/fruit.png)
On the web site where I found this, there is no confusion over whether or not these are links (because there is nothing else which could be). There is little to give any hint of what might be on the other end of the links, and the images themselves have nothing to do with the destination pages.
Still, this is a site designed for amusement, and in fact the links rather fit with the lighthearted nature of the site — so in this particular case the links could be defended, to some extent anyway. Unfortunately, there are a lot of sites with equally obscure navigation which can’t make the same justifications.
What’s the concept here?
The point is, GUI designers had years of working on interfaces to get it right — and still there are icons which only make sense once you know what they are. Some icons undoubtedly work, of course: the icons for disks, text files and the like are pretty good at indicating what they represent. So do some of the common images used in web site navigation, most of the time anyway. Why do they work — and why are others so problematic?
Let’s take one common example. The first time I encountered some web sites with a little picture of a house I had no idea why that was there. After a little bit more surfing, I figured out little house meant home, and so the icon was meant to represent the “home” page.
The thing is, a little house like that doesn’t say “home” to me at all — the image I would associate with that, if anything, would be a red sandstone tenement.
Now, the little house icon actually works fairly well. I didn’t identify it immediately, and I am not the only one who has found it slightly puzzling, but the very ubiquity of the idea of a “home page” means that the penny does drop. On the other hand, if only a tiny percentage of sites used the term it would take a lot longer to link “little house” with “home page”.
Why are some images immediately effective and others less so? The reason is simple: the ones which work well (disk icons, etc.) tend to be images of concrete objects or extremely well-defined concepts. The little house image, though, is a good example of an icon for a much less well-defined concept.
Fundamentally, there is no image which immediately says to everyone “home”. The concept of home is quite vague, and the word will conjure quite different thoughts in different people’s minds. An image of mother, perhaps; or the smell of cooking; the image of a warm fire on a cold night; the thought of a comfortable bed — it is not by any means certain that the image of any sort of building will be involved.
Still, that image works, because it occurs so frequently that Net users quickly learn the association. The problem with web sites built using wholly graphical navigation is that most, possibly all, of the images are going to be unique to the site, or at least very different from those used on other sites. Users can’t take what they have learned about one site’s navigation and apply it to another, because the sites use different graphics for their navigation.
Every site using only images for its navigation is trying to reinvent the wheel; but even if you avoid that and stick to imagery which is pretty well grasped by everyone you can run into trouble.
Not as obvious as you might think
Take arrows. It is pretty well immediately understood that an arrow to the right suggests “continue”, at least to anyone using a European language; a left-pointing arrow suggests “go back” (although precisely what that means in the context of the Web can be problematic). But what does an arrow pointing up mean?
Do you think that’s obvious? Not sure what I’m getting at?
Consider this site. It has a logical structure. The topmost level is the home page, of course, which can be accessed from any other page by clicking the logo. The next level is the major divisions of the site, the sections such as “web design” and “book reviews”. The top level of each section is a list of all the articles in that section, the articles themselves are the next level. If you look at the top of the page, you will see that hierarchy represented there like so: “[logo]:web design/a thousand words?” This shows the position of this page in the logical structure of the site.
Now suppose at the bottom of the page you find an up arrow. What does it mean?
If you’re like me, you’ll probably assume it means “go to the top of the page”, and a lot of sites would use it like that. But a lot would not, and on those sites the up arrow might mean “go up a level“ — i.e. go, in the case of this site, to the list of web design articles.
If you expect a link to take you to the top of the page and it takes you to a different page, that is quite irritating and disorientating, particularly if there is very little else in the site suggestive of a logical hierarchy. Nothing seems simpler or clearer than an arrow, but even that can confuse.
What sort of meat is that?
The ambiguous, or downright confusing, use of graphics as links is so frequent that Web Pages That Suck devotes a lot of space to looking at this; they call it ‘Mystery Meat Navigation’. If you want to see how obscure it can be, here is one of the sites they featured a while back. Without moving your mouse, can you tell which link will tell you how Spiral Productions worked with an audience research company? Now run your mouse over the spirals and look at the images — can you answer the question now?
Since this was first written, Spiral Productions have redesigned their site. The original design featured a 4×4 grid of images of a spiral; moving the mouse cursor over them would reveal another image; most of these mouseover images were just as unhelpful as the initial spiral. If I recall correctly, the audience research one was a graphic of a shirt with some pens in the breast pocket. The new design uses Flash and, as might be expected, the navigation remains obscure.
No, I’m not saying never use graphics for links. What I am saying is: make sure that users can understand how to navigate the site. If you want to provide stylish, obscure graphics for links, OK — but why not also provide some text links, say at the bottom of the page? Of course, text links can also be confusing if badly implemented, but that is a subject for another article.
Don’t get too obsessed with concepts
A final thought about the use of images as icons. It is possible to be over-obsessed with tying in the image with the concept. Take, for example, Jerry Pournelle’s site.
Some time back, Web Pages That Suck pointed out that it was, er… dire. And it was. (It still has some faults, but it has improved a lot since then.) However, one of the points WPTS made about the site was, I think, a bit wide of the mark.
Pournelle provides a mailto: link using an animated dirigible for the link. WPTS made the point, which is generally true, that an image should have something to do with what it represents. What does a dirigible have to do with e-mail?
However, in this case the dirigible has E-Mail written on its side: there’s no mistaking what the image represents. That’s the crucial thing. It's also a fun little image and for an animation unusually benign.
What matters with a web site is getting the user’s interest and keeping it — and you keep it by making sure the user doesn’t have difficulty finding out how to do things. It strikes me, looking at Pournelle’s site again, that while there is a lot that could be improved, there is never any doubt where you are in the site or how to get to where you want to be — or which link to use to send him an e-mail. Anyone interested in what he has to say will probably not be put off by the fact that some of the design is plain ugly.
I wouldn’t ever say that you should take design tips from Jerry Pournelle, but there is certainly a lesson worth paying attention to in there.
© DC 2000 – 2002. All rights reserved.
