Richter Scale^® Articles

(This column first appeared in the July/August 1998 issue of Dive Report)

So you’re still trying to figure out what to put on your Web site, right? Do a little market research to help you understand what might be the best design for your site. The beauty of the Internet is that market research is only a few keystrokes away. Start with visiting Web sites which offer services similar to yours. You can find some of these sites by using the various search engines that I discussed in my January/February 1998 column. Another way is to peruse the sales literature of your competitors, and locate their Web addresses, and then check out those Web sites.

As you surf these Web sites, take note of how the site looks and its impact on you. When a site doesn’t appeal to you, you should try to figure out why. Similarly, if you find a site to be attractive and usable, try and understand why that is. However, try to be objective when you do this, and also take into consideration how your average customer might view things - it’s easy to be overly enamored of ones own products and think that everyone else will be too, but that’s rarely the case. Once you take down all these impressions, you should have the foundation of what you might want your Web site to look like. At the same time, however, you’ll also want to make sure that you don’t accidentally make any serious design blunders, which is the purpose of this issue’s column.

My previous column closed off with a list of the top ten fatal Web design mistakes as researched by Dr. Jakob Nielsen of Sun Microsystems (a leading supplier of Web server hardware) a couple of years ago, but which still hold very true today. In this column, I’ll delve into each one of these design mistakes in greater detail to help you understand why they are a problem, and how to avoid them in order to have a top-notch Web site that people will want to look at and explore.

To help prevent you from madly scrambling to locate the May/June ‘98 issue of Dive Report to find the aforementioned list, I’ve included the list again below:

1. Using Frames
2. Gratuitous use of bleeding-edge technology
3. Scrolling text, marquees, and constantly running animations
4. Complex URLs
5. Orphan pages
6. Long, scrolling pages
7. Lack of navigation support
8. Non-standard link colors
9. Outdated information
10. Overly long download times

Let’s take a look at each one of these.

Using Frames
The average Web user views the Web at a resolution of 640 by 480. In layman terms, that means that his entire browser desktop has to fit into a space no larger than 640 pixels (the colored dots on a monitor) by 480 pixels. Even worse, a noticeable part of this space is occupied by the browser controls themselves, meaning that the part of a Web site that’s viewable at any one time to the average Web surfer is only about 620 pixels wide by 300 pixels high. That means your initial impact has to be made on the Web surfer in just that space. Fortunately, because it’s quite acceptable to scroll a Web page vertically, Web pages can be much longer than 300 pixels. However, it is not acceptable to force users to scroll horizontally - that’s very uncomfortable to the average person.

The reason I mention these size limitations is because some Web designers insist on using a Web feature called "frames", which allows the Web browser window to be split into two or more other windows such that each window can be separately scrolled. Frames are normally used to create menu windows or logo windows which don’t move when the main window is scrolled. An example is shown in Figure 1 below, which shows PADI’s Web site, which uses frames to separate its menu from the main content of its pages (note the vertical scroll bar next to the menu in addition to the scroll bar at the far right).

PADI’s Web site (http://www.padi.com) uses frames for menu access

There are a number of problems with frames, not the least of which is that they tie up precious screen real-estate, which is already very limited as I pointed out above. Next, frames make navigation via the browsers’ heavily used "Back" button (to go to a previous page) a challenge, because the browser doesn’t know which frame you want to go back in, and almost always has an undesired result. The same applies to printing a page with frames - it’s quite easy to end up with the wrong information printed. And, if you’re trying to make your Web site easily locatable via the numerous search engines, frames screw up that process because search engines don’t support frames. As if that weren’t enough, frame-based Web sites also take a little longer to load because the browser has to load multiple documents (never mind that frame based sites are difficult to design and manage, and some older browsers don’t support them).

Finally, if you take a look at the most popular sites on the Web, such as Netscape’s, Microsoft’s, CNN, Yahoo, Excite, etc., you won’t find a single one that uses frames. That’s pretty telling, isn’t it?

Gratuitous Use of Bleeding-Edge Technology
Unless you’re a real techie, this item shouldn’t be a problem for you, although if you use an outside Web designer, it may apply. In any case, bleeding-edge technology is whatever happens to be the Web technology of the moment. Last year it was Java and Shockwave, this year it’s something called DHTML and XML. Whatever these acronyms or names mean is actually unimportant. Why? Because bleeding edge technology means that only computer users with bleeding edge browsers and systems can take advantage of them, and that is a very small percentage of world-wide Web surfers. Why do something exotic if only a tiny fraction of the millions of people using the Web can enjoy it?

The best way to ensure that you’re not using bleeding edge technology is to make sure that your Web site views well and correctly in both Netscape Navigator 3.0 and Microsoft Internet Explorer 3.0 (the latter is impossible to use if you have Internet Explorer 4.0 thanks to Microsoft’s design). The 3.0 versions of those respective browsers account for over 90% of the installed browsers world-wide.

Scrolling Text, Marquees, and Constantly Running Animations
While neat looking, any sort of motion on a Web page tends to be distracting, and usually can add significant time to the loading of the Web page in a user’s browser. One not uncommon example of this is offered by the web site designed by interKnowledge for Bonaire (see http://www.bonaire.org), which has a beautiful rippled water animation of the word "Bonaire", but which is a whopping 160,000 bytes in size! (That’s four to five times larger than the average Web page size, and that’s only for one graphic element).

Another problem with animations is that with users running anything from an old PC or Macintosh computer to today’s powerhouses, the playback speed of the animations varies greatly, resulting in some rather unpleasant visual effects if run on a machine other than the type they were designed on.

Complex URLs
I went into this item some months ago, but to reiterate, it’s a lot easier to get to a Web page or Web site if the address (the URL or Uniform Resource Locator) is easy to remember and type. That a strong argument for your own domain name and a well designed site.

Orphan pages
As the name might imply, an orphan page is one without any related pages attached to it. It also refers to pages that don’t exist anymore.

All too often I see pages that have no links to anything and just strand the viewer, who then has to resort to the "Back" button on the browser (hoping he isn’t on a frame-based Web site). This is a result of poor Web site and navigation design (a sin of its own).

I also frequently click on links that result in a "404" error, meaning that the page the link pointed to has just disappeared, and the Web site maintainer neglected to update or remove his links.

Both of these are signs of a poorly managed and designed Web site. I will point out that the latter can be detected quite easily using a variety of tools. My current personal favorite is Adobe’s PageMill 3.0 ($99, see http://www.adobe.com), which is a Web page design program which includes a site management tool to help detect bad links. The site management software makes it very easy to fix incorrect links as well as track down links to non-existent pages.

Long, Scrolling Pages
While I mentioned earlier that vertical scrolling of a Web page is acceptable, it shouldn’t be overdone. In most cases, you’ll want to keep each Web page on your Web site to 2-3 "page downs" of scrollable material. More than that and you’ll turn off viewers because such pages take much longer to download and make it much harder to find specific information. It’s better to figure out how to delineate your material across several separate Web pages. The only exception to such a requirement is if the material is an article or paper, and therefore doesn’t make sense to split into multiple Web pages.

Lack of Navigation Support
One of the most frustrating things I find on some Web sites is poor or missing navigation support, i.e. standard links to other pages on the site. What this means is that I get to a page, and find I can’t get to another page in the site from there, or when I can, it’s a page that makes no sense to go to. Just as bad are sites that are inconsistent in their navigation. On such sites, some pages do a beautiful job of linking you to everything else on the site, usually via a nicely structured navigation menu (text or graphics), while others pages on the same site give you one or no options to get to other pages.

The trick to good navigation is to always provide at least one (if not two) sets of navigation controls on your Web site. One set of navigation controls should always be at the bottom of a Web page, since most people read top to bottom. If a second set is used, it should be at the top or side of the page. See Figures 2 for an example of this on the Sunbelt Realty site - note the navigation menu in the upper right of the Web page, as well as the one at the end of the main text. For consistency, this same navigation mechanism is used throughout the site on every page. Additionally, the navigation menu shows the current page in a different (non-link) color to help the user figure out where he or she is.

Sunbelt Realty’s Web site (http://www.sunbelt.an) offers navigation menus
at the top of the page as well as after the main text.

Another poor navigation decision is to use large graphics with "imagemaps". Imagemaps are hot-spots on a graphical image that allow people to click there to get to different Web pages. The original DEMA Web site (http://www.dema.org) design relied on such a graphic as the only means to get around the site, but they have fortunately changed that. This becomes a real problem when you realize that 30% of Web surfers turn off graphics in their Web browsers in order to make pages load much more quickly.

In order to avoid the graphical navigation problem, turn off graphics in your Web browser and then go look at your pages. If you can’t easily figure out how to get to any part of your Web site, you’re too dependent on graphics and need to change your design.

To turn off the loading of graphics in your Web browser use these directions. For Netscape Navigator 3.0, simply go to the "Options" pull-down menu and click on the "Auto-Load Images" menu item. With Microsoft Internet Explorer 3.0, use the "View" menu to select the "Options…" dialog box. Under the "General" tab, un-check the box that says "Show pictures" and click "OK". To undo these changes, just repeat the steps - in both cases these options are toggles.

Note that you may still see some graphics even after you disable the graphics viewing per the above instructions. That’s because Web browsers cache (store) copies of images you’ve recently viewed on your hard disk to retrieve them more quickly. If this is happening to you, use your browser’s help system to find out how to clear, reset, or empty your cache.

In any event, don’t rely solely on graphics for your navigation.

The final aspect of navigation problems to cover is that of not making contact information readily available on your Web site. In my mind, this is as bad as printing a great brochure about your business and not including your phone number or address. Make sure that each page on your Web site offers a way to let visitors contact you in case they have a questions (see the very end of the Web page in Figure 2 for an example - it lists an address and offers a link to an e-mail address (as well as listing out the e-mail address). This footer exists on every page of the Web site. For those wanting even more contact information, such as that of individual employees or representatives of a company, the Sunbelt site offers an "About Sunbelt Realty" page. The net result is that at any time, on any page of the site, a visitor can get in touch with someone at the company via e-mail, or at least get the information they need in order to do so via more conventional means, such as phone, fax, or regular mail.

Non-standard link colors
There is quite a bit of flexibility in the colors a Web designer can use to design a Web site. Unfortunately, this means that some people desire to make significant changes in the color layout of a Web site, including changing the color of navigation links. You may notice in Figure 2 that all recently unvisited links are blue (look at the navigation menus) while recently visited links are purple. Those are the standard link colors. Now imagine what happens if a Web designer reverses those… Chaos. Users will think they’ve visited pages they haven’t and vice versa, and the site will become impossible to navigate. Almost similar is the result when the link colors are changed into something completely different, usually done because an unusual background color or graphic has been selected, and the standard link colors don’t show well against it. The basic concept here is that if you change something that people are used to into something they are not, then people will have problems adjusting. And, if visitors to your Web site can’t figure out how to get around because you’ve done something "creative", your site won’t be very useful to them or to you.

Outdated information
Most people get very excited about their Web sites initially, and then as the newness of the whole experience wears off and people realize that keeping a Web site up to date can actually be rather time consuming, they slack off, and the result is a Web site that has cobwebs because it hasn’t been updated in a long time. Common signs of outdated information are announcements about an event that happened months ago, or prices valid only for a year gone by.

The only cure for this is to make updating and freshening of your Web site a scheduled event on your calendar, and then being disciplined enough to adhere to the schedule. Keep in mind that updating a Web site on a regular basis is also made easier by having a simple Web site design (i.e. no frames, no graphic navigation imagemaps, etc.)

Overly long download times
Perhaps the biggest Web site sin of them all is one I started to go into in my previous column, namely Web pages that seem to take forever to download. A typical Web surfer’s attention span is about 30 seconds for a Web page. A typical Web surfer’s connection to the Internet runs at about 1500-2000 bytes per second. The math is simple - if your Web page is larger than 45,000 bytes in size, including all the graphics, you’re going lose the attention of many visitors. I’ve had clients explain to me that their site is different, and that customers visiting their site won’t mind waiting a minute or two to download each page. No amount of discussion, Web statistics, or anything else will convince them otherwise. But, don’t fall into this self-delusional trap - most commercial Web pages are not worth waiting minutes for.

Yahoo! (http://www.yahoo.com), for example, keeps its pages at under 10,000 bytes a piece for the most part, to provide incredibly quick viewing times. In order to accomplish this, Yahoo! Uses minimal graphics, and relies instead on crisp, clean text and font formatting.

Now, I’m not encouraging you to follow Yahoo’s example completely, but moderation in use of graphics is certainly recommended if you want to keep Web surfers on your site, possibly converting them to customers. After all, it wouldn’t do to have them go to your competitor’s site because your site was too slow, right?

Conclusion
If you follow the above advice in designing your Web site, and combine it with a good, clean layout and design, your potential and existing customers will be able to benefit from your Web site, and in turn you’ll benefit too. A good, positive image on the Web implies you know what you’re doing, and that builds confidence in your products and services. And confidence is easier to turn into sales than mistrust or annoyance.

In my next column, I’ll show you how to better promote your Web site to attract visitors and business.