(This column first appeared in the May/June 1998 issue of Dive Report)
As you’ve hopefully been learning via my columns, the Internet and the World Wide Web provide an excellent opportunity to get in touch with potential and existing customers. The Web is a great way to present information about your company and its services and products to the world. However, as with any marketing medium, it’s very easy to give people a negative impression if you don’t know what you’re doing. In this column, I’ll explain basic Web site design philosophy so that you can avoid creating a negative impression immediately, and instead build a positive one from the moment a visitor enters your Web site.
To understand how to create marketing material of any sort, you need to understand your audience. One thing all audiences share in common is that they are creatures of convenience. Something that’s convenient will always be more attractive and interesting than an equivalent that’s less convenient. So, how do we define convenience?
Well, convenience has to do with ease of access and the immediacy of response and gratification. If the marketing material itself conveys convenience, then it will give the impression that the services or products described in the marketing material will also be convenient. Therefore, the information being presented has to be easy to read and peruse, as well as answer all the questions a person might have. Therein lies the key to good marketing materials in general, and good Web design in particular.
However, the Web adds another component to the convenience equation. While traditional print media, such as brochures or print advertisements, puts the information you’re looking for right in your hand, there’s a small but measurable delay in getting information from the Web. This delay is the result of the fact that all Web information has to be transmitted from one location to another, with the slowest link usually being the modem in the user’s computer. To make matters worse, the information trickles into the user’s computer, meaning that there is a direct proportion between the amount of information being viewed and the amount of time it takes for it to be transmitted.
The net result is that if you want to make your Web site convenient for your audience, you need to put lots of effort into making your information compact, while ensuring it stays easy to use. If you don’t put this effort in, it’s likely that potential customers will avoid your Web site in favor of that of a competitor who has made the effort to have a responsive and usable Web site.
Pictures and Words
Web pages, for the most part, are composed of two basic types of elements: text and graphics. Text is what you’re reading now. It can appear in a variety of sizes, be bold or italic, and even be in different typefaces.
Graphics covers any visual element that isn’t text. While you can design a text only Web site, which is certainly the fastest to view, text Web sites are generally only suited for archival documents and other boring applications. Graphics are what add zest and personality to a Web site and make it interesting for visitors.
Of course, zest comes at a price, and that is that graphics images can easily get very large in terms of their actual digital size. You can think of the byte size of a graphic as the amount of space it requires to store the graphic in a file on your computer. While each letter in a text entry on a Web site only requires one byte of storage (and therefore is one byte of transmission), a graphic element is much more dense. In fact, each colored dot of a graphic can be one or more bytes of data. In a worst case situation, a small 200×200 graphic element could require 160,000 bytes of data. That’s like 40 pages of double spaced text from a typewriter. That’s a lot of bytes. In fact, a typical Web surfer, connected to the Internet via a standard 28.8 Kbps modem, would need about a minute to download that graphic element if his modem connection were running at top speed. Try staring a blank screen for a full minute to see how much fun that is. Fortunately, there are all sorts of ways to make graphics more compact, including a variety of special digital compression techniques inherent in standard graphics file formats. There are two types of standard graphics file formats in use on the Web, GIF (pronounced “Jiff” ) and JPG (“Jay-peg” ). GIF graphics are limited to a maximum of 256 different color, and are well suited for images that have been created on the computer. JPG graphics files are true-color, meaning they can contain images with a virtually unlimited assortment of colors, and are therefore ideal for photographs. All modern paint and image editing software, such as Adobe’s PhotoDeluxe, JASC’s PaintShopPro, and MGI’s PhotoSuite, can generate GIF and JPG files.
It’s the proper combination of text and graphics, in an attractive layout, that make a Web site inviting and convenient. However, if you have more than one page on your Web site, you need to make it very easy for visitors to move around the Web site, and this is done with links. Just as a link on a Web site can point to another Web site, links can also point to other pages on the same Web site. Such navigation links can exist both within the body of the text on a Web page, as well as in clearly distinguished parts of a page designed to aid in navigation. These navigation areas, sometimes called navigation bars, can be text, graphics, or a combination of the two.
Navigation bars should be easily accessible, which means that they should appear near the top of a Web page and probably on the bottom as well. The navigation links should be self explanatory and concise as well. For example, if you have a page about your latest Frabistam offering, your link should be something like “New Frabistams” (assuming your visitors know what a Frabistam is). You should not have sentence long links, like “Click here to find out as much as you ever wanted to know about our new line of Frabistams”. A key part of coming up with good navigation for your Web site is to look at the Web site as a whole. You need to figure out what information you want to present on the Web site, and then categorize the information into a handful of key topics. If a particular topics has a lot of information in it compared to other topics, you can have a number of pages which cover that topic, accessible through the topics main page – kind of a Web site within a Web site. The best way to map out these relationships is to understand that a Web site is like an inverted tree. You start with the root (the home page of the Web site), and build downward from there. The figure below shows a sample Web site layout (courtesy of the Web layout tool in NetObject’s Fusion software) I prepared for a dive shop. Note that the figure shows the top level as being the Home page. Below that are topic pages labeled About, Training, Dive Gear, Service, Travel, and Dive Local. The Training and Dive Gear pages have additional descriptive pages below them.
By flowcharting a site, and mapping it out in this fashion, you can quickly figure out what makes sense where. In our dive shop example, making BCDs and Regs pages that have the same importance as the Training and Travel pages doesn’t really make sense, so we created the Dive Gear page to act as a topic page which does have the same sort of importance as the other pages at that level. It’s important to keep in mind, however, that the layout of your site does not prevent you from linking from any page to any other if you so desire. For example, the dive shop Web site above could mention that all training classes use AquaPro BCDs and then include a link to the BCD page in that text. That’s the beauty of the Web – you can link as much or as little as you like. Unfortunately, many people overdo it.
With that note, I’ll leave you with a list of the top ten fatal Web site design mistakes according to researcher Jakob Nielsen, Ph.D., of Sun Microsystem, and in my next column I’ll delve into these mistakes in greater detail.
The Top 10 mistakes in Web design
- Using Frames
- Gratuitous use of bleeding-edge technology
- Scrolling text, marquees, and constantly running animations
- Complex URLs
- Orphan pages
- Long, scrolling pages
- Lack of navigation support
- Non-standard link colors
- Outdated information
- Overly long download times