Web Design Small Cover

Buy the PDF of
Web Design:
A Complete Introduction

See the book at amazon.co.uk or amazon.com

Related Site

Web Security Topics

Related Books

Secure Communication Cover

Securing A Server Cover

Tips on Usability and Visual Communication

Clutter

Clutter should be avoided. Clutter works against usability, and also has accessibility implications as it creates problems for certain groups of people, including those with Asperger Syndrome (and there are many working in IT) and people with other cognitive disorders, who become “overloaded” and confused by too much information presented all at once. Unfortunately, there has recently been a trend to fit more and more content into Web pages of all kinds. This content often includes a mixture of body text, images, links and advertisements. (For example, if you have used amazon for a while, compare a typical amazon page now with how it looked a couple of years ago.) This problem has been exacerbated by the use of fluid layouts to fill wide screens with even more content, often in multiple columns. Even users without cognitive difficulties are quite likely to fail to identify important elements on a screen that is completely filled with content. And it is tiring and annoying trying to sift through it all, in the same way that it is tiring to try to spot one useful link in a page that is nothing but a long list of links (and yet you still see this quite often on certain types of site). Any site that causes any kind of problems or annoyance creates a negative impression in the visitor, who may therefore go elsewhere next time. So keep it as simple and as clear as possible. And if you do need to fit a lot of content onto a page, make sure that it is clearly visually differentiated and well-spaced.

Reinventing the Wheel

It has been remarked before that Web usability advisors quite often struggle to define or correct a problem which has long been familiar to graphic designers and other visual communicators. So don’t make the mistake of trying to reinvent the wheel. If you are involved in the visual design of a Web page or site, make sure that you are familiar with the body of knowledge that already exists in Graphic Design (see the References section of this site for some suggested reading). There is a wealth of experience and advice available both in print and on the Web. Make good use of it; that’s what it is there for.

Symbols

Don’t use iconic symbols unnecessarily on a Web page, even though you are aware that your visitors come from many countries of the world and may not understand your own language. For a symbol to be universally recognized it has to be a part of an internationally agreed system of signification. Some such systems exist (for example for signs in airports), but they are not applicable to Web design. Designers have quite often invented their own symbols, such as the house symbol to stand for “Home”, and some have enjoyed a short vogue in Web design. However, except where your site is being designed explicitly to be challenging or amusing, such symbols should be avoided as they have no agreed meaning. Remember that it is easier for someone to learn to recognize one or two foreign terms, such as “Search”, than to guess what you meant by a clumsy drawing of a magnifying glass (some visitors may never have seen a magnifying glass...). If an important link is given as a word, even a visitor with no knowledge of your language recognizes at least that it is language, and can look that word up in a bi-lingual dictionary if necessary. The signification of the word is known and can be found out; the signification of most symbols seen on Web sites is not. It follows that you should also avoid using unusual words for common links or tasks (for example, don’t try to be clever and substitute something like “Hunt” for “Search”).

Visual Hierarchies

Some kind of visual hierarchy is always in operation whenever you can look at a page and find that some elements attract your attention more than others. Web design differs from design for non-interactive media in that it is vital that whoever looks at the page can quickly and easily see both how to use that page, and how to use the site it belongs to. When designing a page you should therefore ask yourself what elements it is essential that the (sighted) visitor sees; these will necessarily include all functional elements, as well as important parts of the content. Anything of importance will need to be highlighted by the use of some kind of visual hierarchy, because that is what will make it stand out from the rest. You might use a simple and obvious device such as size or a boldface font, but it is often possible to achieve visual prominence with more subtle means. Simply putting an element on a different coloured background will make it stand out, for example, and this is often the device used for navbars. If you are not familiar with Graphic Design it can be very helpful to look at published examples (some are given in References).