Exit tutorial


HTML Tutorial
Web Design - Good and Bad Practice
Part Six
Use Colour Wisely 

Use colour to convey information or to draw attention to where it's really needed.

The standard web interface uses this principle by displaying the hypertext links to other pages in colours that stand out from the rest of the text. In addition, different colours are used to show which links have been visited and which haven't.

So strong are these clues, that you can look at a web page and tell a lot about it without reading the text.

It's also a good reason for leaving the text and links in their default colours Your visitors will have seen hundreds of pages with the text and links in their default colours and will take advantage of this conditioning by being able to navigate a new site without having to constantly relearn the interface.

It's obvious that if you change the colour of the links on your site, or use an image map, much of the possible information will be lost to the visitor and your site will be more difficult to navigate.

Here's another example. If you have a form on one of your pages, there will probably be certain items which are required, and some which are optional. Try putting a red asterisk next to each item that the user must set. This will be a great help in filling out the form since you can instantly tell if it's been completed to the point where it won't produce an error message. 

Remember, also, that some of your visitors are colour blind. At its worst, colours are varying shades of gray. Coloured text against a coloured background could show up as a gray smudge. Take this into account when you design your pages.

Other visitors, with less-than-perfect vision, may have trouble viewing images and text with strongly contrasting colours (like red text on a blue background). Don't make your page so that it can only be viewed by teenagers.


Image Maps 

Avoid putting image maps on your pages unless you have a really good reason for using them. Fancy image maps can be far more confusing than a well-formatted text list or a simple set of buttons.

In many cases, it's hard to tell just where to click. This is especially true if the map contains both images and words. And since the words are not underlined, it's hard to tell if they're links.

Image maps take up a lot of bandwidth and, in most cases, add nothing to your page.

If you use a large image map, your visitors may have to wait for well over a minute before they can begin to navigate your site.

Unlike regular text links, which change colour after being clicked on, image maps give no clue about what's been seen and what hasn't. This makes it more difficult for the user to navigate your site.

Image maps limit you to a very simple site. It's difficult to include more than a few items in the map, especially if you are including both icons and text in the map.

The time and effort it takes to modify both the image and the map make the use of image maps a real maintenance headache. It will take far longer to update or change your site if it means modifying the image maps as well. This is especially true if you have used image maps on many of your pages.

If you use an image map, make sure that you include a text list with identical items for those who are confused by your map or are using a browser where images are not being loaded. Locate this alternative list as close to the image map as possible to avoid confusion. Make sure that the list contains all the items on the map, and that they are in the same order.

If your image map is a figure that depicts something real, like a map of the United States, don't assume that your visitors will be able to identify things (Which one is Nevada?) solely by their shape or location.

Also, make sure that your image map gives some sort of a warning if the visitor clicks in an area that doesn't relate to anything or isn't defined in the map's table. (What happens if the visitor clicks in the ocean, next to California?)
[Back to the Stage 5 Index]