Documents  
Avoid Bad Web Design   
Find out the right way to use text, images, animations, and other elements on your Web site.
@Copyright 2004, TechSoup, a project of CompuMentor

Hold on a minute! I know you're all excited about that new Web site you're creating, and you can't wait to publish it so that I and all the other humans on the planet can discover your library on the World Wide Web. Here are a few tips on mistakes you can avoid -- mistakes that have been known to drive visitors away and discourage their return.

  1. Words, words, words

  2. Unreadable text

  3. Huge pictures and graphics

  4. Long pages

  5. Blinking, twinkling, twirling images in garish colors

1. Words, words, words On a Web page, less is more. Usability studies show that, on average, people can read about 25 percent as much text on a monitor as they can read on a printed page. Choose your words carefully. Make your most important point first. If you have lots to say on a topic, give your visitor a synopsis, then link to your full article on a separate page. Break up big blocks of text with white space.

2. Unreadable text. Reading text on a monitor is hard enough. Don't make it harder by using a tiny font size, or by selecting a color for your text that is close to, or clashes with, the background color.

Can you read this?

How about this?

Ouch!

Nope.

3. Huge pictures and graphics

Why avoid the large? Download time, that's why. While visitors love graphics and color, they won't stick around for a slow-loading page (unless it's their Mom or best friend). Use a graphic program to compress and optimize your graphics and photos. The best bet is to use the smallest dimension of image that suits your design, and then use a graphic optimizing program to compress it and transform it into a Web-based file format such as .gif. .jpeg, or .png. Adobe Photoshop, Adobe Photoshop Elements, Macromedia Fireworks, and many others are available for Web image optimization and compression.

4. Long pages

Usability studies demonstrate greater comprehension and memory in readers presented with one or two screens of material on a page. Organize your longer articles into screen-sized blocks, then use "next" and "previous" links to guide your visitor through the pages. Sometimes, though, you may have a collection of relatively small chunks of information that are loosely related, like a glossary or a FAQ. It does make sense to put these all in one page, regardless of the length, if you provide some basic navigation elements. At the top of the page, list each topic in your glossary with a hyperlink to the full item. At the end of each item, provide a "back to top" link. This will enable your visitors to find what they are looking for easily.

5. Blinking, twinkling, twirling images in garish colors

Exercise some restraint with animated images. Animations can be really fun for some people, and hideously annoying to others. Know your audience. Remember that images are information, and movement is information too. Ask yourself if the movement works with the image to convey your idea.


Contribute to this topic
Do you have an article, presentation, or other content to share on this topic?
You can post it on this topic page. Find out more about submitting documents in the Member Center.
Ratings You must be signed in to rate this item
Average (2 Votes)
Comments