January 11, 2005
By Design
in Design
And How To Cure Them
Information is the ultimate reason for your web site’s existence. Your Web site should transparently communicate its content. Anything that interferes with the immediate and intuitive transfer of information between you and your web site visitor undermines your web site’s success.
All too often, however, design interferes with communication. The following are my Top Eleven Web site design frustrations along with suggestions showing how you can cure them. Use these as a guide to improving your Web site.
1. Long lines of text
Long lines of text create boring, hard to read Web sites. Visual boredom results when type extends in an unbroken line from the left to the right margin of the screen. Long lines are tiring because your Web site reader’s eyes have to make numerous left-to-right shifts. It’s also easy to get lost making the transition from the last word of one line to the first word of the next.
Short liner lines of type, like used in this web site, also creates white space to the left and right of each paragraph. This white spaces frames your message and also provides space to place secondary text or visual information (like my book covers, for example!)
If you are using Microsoft Publisher™ 2000, you can use columns to control the placement of text. With programs, like Microsoft® FrontPage™ 97 you can use tables to reduce line length and build visual contrast into every page. With Net Objects Fusions, you can create guides to control text placement.
If you are creating your Web site using HTML, use the Block Quote tag to indent text from the left and right edges of the screen.
2. Large, meaningless graphics
Large graphics take longer to download than small graphics. Long downloading times are justified if the result is meaningful information. All too often, however, your reward for waiting for a graphic to download is only a large logo or an overly-complicated image map.
Respect your Web site visitor’s time! Restrict large graphics to occasions where they communicate valuable information.
Equally important, when including photographs, use thumbnails—or reduced sized images—which visitors can click on to load larger versions.
3. Lack of contrast
Foreground/background contrast is necessary for your visitors to easily read your message. To succeed, words have to be clearly separated from the background.
To ensure maximum legibility, avoid text on top of gray or screened backgrounds, i.e. blue text on a light blue backgrounds. Avoid placing text over patterned backgrounds.
If you want to add color, or visual interest, to your page, place the backgrounds to the left or right of the text, rather than behind the text.
4. Bright backgrounds
Bright colors have their place on the Web, but usually not as background colors. Large amounts of bright reds, oranges, yellows or lime green backgrounds are visually tiring and certain to reduce the time visitors spend at your site.
Instead, choose subdued background colors. Restrict bright colors to a few high-impact words, illustrations or graphic accents.
5. Dead ends and broken promises
Strive for consistency. Anything that looks different is likely to be interpreted as a link. Many Web sites, for example, use subheads set in a different color than the text they introduce. These can be easily confused with links.
Always check, and double-check, links to make sure they lead to the information they promise. Avoid links to pages that do not contain the promised information. Avoid links to "work in progress" locations.
6. Lack of consistency
Consistent colors, layouts and type enhance your firm’s image and project credibility and professionalism. Your firm’s image is undermined, however, when different colors and layouts are used on different pages of your site.
You’ll frequently encounter well-designed Home Pages where the text is neatly indented from the edges of the screen, but when you get deeper into the site, you encounter different background colors and long lines of text. Change undermines credibility and, at worse, can cause visitors to wonder if they’ve visiting a different site.
Take advantage of your software program’s text styles feature to maintain consistency. Styles also make it easy to redesign your site with minimum effort.
7. Pages that cannot be printed
Whenever I encounter a Web page I might want to refer back to later, I print it out using my color printer. This works well, unless the text was set in a light color-like white or yellow against a black or blue background. When your print from your browser, the Web page’s background color is not printed. This means you print white or yellow ink on white paper. . . hardly readable!
Avoid light text colors if there is any chance at all your Web site visitors may want to print your pages.
8. Centered text
Centered text appears everywhere on the Web, in headlines, titles, even extended text passages. It is is harder to read than text set flush-left/ragged-right. Centered text forces readers to search for the beginning of each line.
Centered text also doesn’t look as good as flush-left text because the space surrounding the text is divided between the left and right sides of each line, instead of being concentrated to the right of the text.
9. Unnecessary graphic accents
Graphic accents, like horizontal rules dividing topics, can easily clutter-up a page and project an amateurish "My First Web Site!" image. Instead of using horizontal rules to break-up a long articles, insert subheads which preview the text that follows.
To reinforce the impact of the subheads, set them bold and surround them with white space above and below them.
10. Oversize pages
Many Web sites force visitors to scroll sideways, in order to see the endings of words along the right-hand margin. This is unsightly and frustrating. It is often caused by long words placed in table columns too narrow to accommodate them. It can also occur when you create your Web site on a computer with a monitor set at a higher resolution than your typical Web site visitor’s.
When using tables to organize text placement, check every page of your Web site before posting it. Build in a margin for error by searching for short words to replace long words. Most important, design for the lowest common denominator monitor setting, typically a 640 by 480.
11. Accidental spacing
The appearance of many Web pages is undermined by unnecessary spaces between words or extremely short lines. This are usually caused by the Web site creator inserting Paragraph Break commands that looked good on their particular browser and screen resolution, using their Web site browser’s typeface and type size. But, viewed using a different screen resolution or typeface, these Paragraphs breaks often appear in the middle of a line.
Instead of using HTML Paragraph Break tag to break lines, use tables or columns. Column widths will remain the same, regardless of the default typeface or type size used in your Web site visitor’s browser.
