Home Articles We've Written Web Commandments
Web Commandments: Ten Deadly Sins and How to Overcome Them
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
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
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.
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.
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
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.
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.
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.
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.
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
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.
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.
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.
Shalt Not Frighten
attention or even create major distractions. The prescription for avoiding these
mistakes with graphics and multimedia should apply equally well to programmed
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
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
Setting security issues and download times aside, the ability to create
effective programmed content is now at our fingertips. An effective use of
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