Mistakes, mistakes, mistakes. The best way to avoid making mistakes in Web user-interface design is to know what those mistakes are before designing that new Web site.

I hate mistakes. I despise making them and dealing with the mistakes of others. I especially abhor focusing on mistakes as a problem-solving technique. I'd much rather concentrate on the positive--what went right rather than what went wrong.

I was less than thrilled to find that many good articles, papers, a essays on Web user-interface design revolve around mistakes. While this research led me to develop my own list of 10 deadly design sins, old habits die hard. As you will see, I've attempted to focus on the positive things you can do to avoid these mistakes.

Thou Shalt Not Welcome

If you wrote a book, would you write, "Welcome to my book!" in the opening paragraph? Of course you wouldn't, and you shouldn't do it on a Web page. Just like any good book, a good Web site has a story to tell and information to impart.

The lead-in to that story and information is critical. It could very well be your one and only chance to grab the attention of your visitors. If your home page looks boring, they'll be pointing and clicking their way to the next site in a heartbeat. So don't waste your chance with boring, trite, and overused filler. Instead think long and hard about who you want to attract to your Web site. Why do you want them to be there? Are you selling yourself or a product? Are you sharing or trying to obtain information? Is the goal of your Web site simply to entertain? Once you are clear on your objectives you will be ready to design your home page. Use your understanding of your goals and those of your visitors as a measure for every design decision.

The first page of a book should compel you to want to read it cover to cover, staying up all night if necessary. Likewise, a great home page should make your target visitor want to view it from first link to last, without taking a break. Assuming you want return visitors, it also should entice them to come back regularly for more.

Thou Shalt Not Overload

Many HTML old-timers actually recommend overloading the page with text. They worry about folks with old-fashioned browsers that don't support the tables and frames commonly used to break up a page visually. Unfortunately, a page packed with text is uninviting. You're likely to lose all but the most devoted readers.

Instead make the words on the page easy to read. A generous left margin of white space will help draw the eye to the next line. Short lines of text, 10 to 15 words per line, will result in a less-tiring read. Tables are a convenient way to provide left-margin white space. Also consider the strategic placement of eye-catching graphics and snippets of sidebar text in the left margin. You can use such graphics and text to direct the reader's eye to the most important information on the page.

Some users will want to print your pages, and they may not be happy about the amount of paper generated as a result of 10-to-15-word lines. Make them happy by offering an alternative page, suitable for printing. If you make sure it doesn't use tables, frames, or any newer HTML constructs, you'll satisfy the HTML old-timers as well.

Thou Shalt Not Over-Art

There are so many ways to go wrong with graphics. The most common problem still seems to be loading the page with one or more large graphics. How large is too large? It came into perspective for me when I learned that a 28.8K modem transfers only about 2K per second. Studies show that users begin to get impatient on the Web, which they expect to be slower than other software, after waiting about 15 seconds for a page to load. Many experts recommend not exceeding 40K in graphics on a single page.

To make sure you don't lose your audience before they have a chance to see what you have to say, I recommend you keep your graphics total down to 20K or less.

Another way to go wrong is to choose loud, distracting, fuzzy, sloppy, mismatched, badly rescaled, or poorly dithered graphics. If you can't create or obtain simple, clean, coordinated, and attractive graphics, you shouldn't be using them at all. Bad graphics shout, "unprofessional!" Surely that's not the image you want to project.

Instead buy professionally created graphics, contract the work with a graphics artist, or plan to invest a good deal of time in becoming an expert in a good graphics program.

Less is definitely more when it comes to graphics. Get rid of horizontal bars. People use them to transition from one section of text to the next, but they're just too distracting. If extra white space seems insufficient, center a tiny ornamental graphic between the sections. It will give a visual clue to the transition without interrupting the flow of words.

Thou Shalt Not Strain Eyes

Also in the less-is-more category is background graphics. Nearly all background graphics make text less readable, and some background graphics make the text practically unreadable. If your goal is to encourage visitors to read what you have to say, consider doing away with the background graphics, no matter how attractive they may be.

To reduce contrast with the text, you may want to set a very pale background color. On a low color-depth monitor, it should wash to white. By the way, I've yet to find one site I wanted to return to that used light text on a dark background. It might make a wonderful artistic statement, but it's definitely not a pleasure to view.

Thou Shalt Not Steal

Never "borrow" graphics from another Web site. That's not borrowing; it's stealing.

Unless a site clearly labels its graphics as free for the taking, all graphics (and text, sound, etc. for that matter) are covered by copyright. They belong to the creator, unless the creator assigns the copyright to another, even when no copyright statement is posted on the page.

Would you stoop so low as to beg content from friends? Please don't. Instead ask if you can add links to good content on their sites. Most folks will be happy to let you do that because it's one of the best ways to grow their site. While you're at it, ask them to link to yours.

Thou Shalt Not Distract

<Blink> Look here! Look! Look! Look here! <Blink> The nightmare began with <Blink>, a Netscape extension to HTML that causes the bracketed text to blink most annoyingly. Now the nightmare continues with animated GIFS, scripted animations, sounds, videos, and the like. Multimedia elements may be geek chic, but they exhibit all the same problems as graphics. Slow to load and distracting, they're often poorly produced or stolen from other sites.

If you're creating a site that exists purely to entertain, then seriously consider incorporating animation, sound, and video. But make sure your choices are truly entertaining, not annoying or offensive.

Otherwise, use these elements only where they truly enhance the experience of your site. You should ruthlessly follow the less-is more rule. Also, make sure that all multimedia elements work in concert with each other and with your text and graphics. Playing a raucous polka on a page designed to teach about Mayan civilization makes no sense.

Thou Shalt Not Frame

Frames are a tempting choice for organizing information on a Web page. Unfortunately, they seem to provide unlimited ways to disorganize information. We read English from left to right and top to bottom, so the place for a table of contents frame is toward the top and left. It feels strange and awkward to use one from any other location on a Web page. Two frames, split nearly down the center, add visual confusion to the page because the visitor isn't sure where to look first. I've seen a few pages that displayed content in five to seven frames, all with borders, many of them scrolling. That results in utter confusion. The visitor doesn't have a clue where to focus when so many frames are presented.

Consider the more comfortable arrangement of table of contents on the left and detailed content on the right. Even this can be a problem at a 640-by-480 resolution. Sacrificing all those pixels to the TOC just doesn't leave enough room for easy viewing of the detailed content. You may be tempted to add a third frame across the top for navigation to important pages like the site map, guest register, and search page. That may improve the organization of the site, but at 640-by480 the size of the detailed content frame may be hopelessly inadequate.

Another drawback is that frames are difficult to author in a way that produces expected results when saving a page as a Bookmark or Favorite page. Older versions of browsers have trouble printing framed pages, especially when scroll bars are involved, and Search engines have difficulty resolving what to index in framed pages.

Newer versions of browsers work well with frames. Unfortunately, some browsers either don't work at all or they don't work well with frames. If you do choose to use frames, make sure you provide a non-framed alternative for each page. That's not an issue if you're building an intranet Web site and you know everyone will have a browser you can count on.

Thou Shalt Not Irritate

Links are the lifeblood of Web sites. The web of links, relating page to page, site to site, around the world, is what gives it the name World Wide Web. Too bad there are so many ways to go wrong. Broken links, orphaned links, slow links, meaningless links, every-other-word links, and links to pages under construction all conspire to irritate. Let's look at each of these more closely.

Broken links happen for a variety of reasons. Pages are deleted, Web sites are renamed, and URLs in links are sometimes mistyped when they're authored. if you don't want to annoy the visitors at your Web site, you'll need to retest your links frequently and repair broken links as soon as you find them.

Orphaned links are kissing cousins to broken links. They happen when you create a page but forget to link to it, mistype the link, or replace the link with another. The orphaned page is on your site, but no other page on your site links to it. Granted, an orphaned link won't bother the visitor to your site they'll never know it's there. Nevertheless, you certainly would be irritated to learn these pages are going unviewed. I use Microsoft FrontPage to find orphaned pages because it provides an "Unlinked files" report that shows me all unlinked files (pages, graphics, etc.).

It can be slow to link to very busy and low-bandwidth sites. Think twice about whether you need to include slow links on your Web site. Links also are slow when they lead to huge pages. Please do your visitors a favor and mark these links. You can easily show the size next to the link, which your visitors surely will appreciate.

Meaningless links are another form of irritation. "Click here to link" tells the visitor nothing. Make sure the link comprises text that clarifies the linked page's content.

Have you ever seen a page where every other word is a link to another page? It's simply overwhelming. You don't know where to look or what to focus on. Unless your intent is to confuse, don't do it.

Also, linking to pages under construction is a timewaster. You may plan to add more content or redesign a page later, but whatever you do, don't mark it "under construction." The metaphor is silly and overused.

Thou Shalt Not Mislead

Go-away links take the visitor away from your site and to another one. It's very common to provide references to other pages. If your references are to other good sites and (this is important!) not to sites that link to sites that link to sites, your visitors may return frequently to make use of your organized links to other sites.

But don't make the mistake of scattering these links throughout your own Web site unless your goal is to send them away. Instead organize them well, on a single page or set of pages, and design your site so these pages are viewed last, when the visitor has seen everything else on your site.

Thou Shalt Not Frighten

You can use ActiveX, Java applets, VBScript, and JavaScript to grab undue attention or even create major distractions. The prescription for avoiding these mistakes with graphics and multimedia should apply equally well to programmed Web content.

Programmed content also has the capacity to scare. Yes, the download times can be frighteningly long, but that's not what really frightens people. Consider these two news items Microsoft once showed on their home page:

"Java Security Breach Does Not Affect Internet Explorer for Windows Users-The security flaw in Sun's Java technology can allow a hostile applet to take catastrophic actions. The flaw is in Sun's and Netscape's implementation of Java and in Internet Explorer for the Macintosh which uses Sun's technology.

"Fix for Internet Explorer Security Problem Now Available-Microsoft worked around the clock to find a fix to a security problem discovered this week in Internet Explorer. Microsoft strongly recommends customers download this fix now."

After reading a number of news items like these on vendor Web pages and in trade journals, how relaxed do you feel about allowing unknown code from an unknown Web site to download to your PC? The warning messages Internet Explorer gives about the security of digitally signed (or unsigned for that matter) ActiveX controls can be quite intimidating too.

Now do you still think you want to incorporate programmed content into your Web site?

Setting security issues and download times aside, the ability to create effective programmed content is now at our fingertips. An effective use of JavaScript, for example, is to create a popup window when text is clicked. You can use such a script to provide glossary definitions for unfamiliar terms used on your Web site. Click on a marked glossary word and instead of a distracting jump to a separate page with the definition, the definition appears in a popup window. Click again, anywhere, and it's gone. It works just like a popup window in a help file and is very effective for this type of material.

Been There, Done That

The Web is a powerful communications medium. But with power comes responsibility. Let's learn from the mistakes the Web pioneers-and those in the older communications media-have made.

Home Articles We've Written Web Commandments