Web design basics

These insights from a Web designer will help you make ordering and navigation easy while personalizing the buyer's experience

By Cindy Robinson, Contributing Editor -- Industrial Distribution, 1/1/2001

The biggest difference between designing catalogs and other promotional pages for Web as opposed to print is the flexible end result of a Web page. The factors that contribute to this flexible medium are the layout space, typography, graphics and color, and the ability to incorporate sound and animation.

A flexible medium

In a magazine or catalog you have the entire space of a one- or two-page spread. You know the exact size and everyone's version will look basically the same. In Web design your end result can look different for everyone. The viewable area depends on the person's monitor size and resolution settings. The quality of color is determined by the individual's capacity for color and exactness of calibration of the monitor. Browsers also play into the mix.

A layout viewed in Internet Explorer will frequently look different in Netscape Navigator in the way that colors are displayed and in the positioning of graphics and text. Text viewed as 12 points (text size measurement) in one browser may look like 10 points in the other. The amount of space between lines of text (the leading) also varies, depending upon the browser. The size and leading variations determine the length of the page and how much the viewer may or may not have to scroll.

The bottom line is that when designing a page, you have to understand how pages are flexible and how to accommodate this. In the end it is necessary to view the Web site in as many environments as possible, which means testing it on different brands of computers with different browsers. Frequently, designers will design for the latest versions only of Netscape Navigator and Internet Explorer.

Design decisions about art

One fun aspect the Web medium offers that the printed page does not is the ability for movement-animations and flashing items. Viewers often like this movement and excitement as long as it does not slow down the page or inhibit their search for information or products. Saving movement to highlight important features of the site may prove to be the most effective approach.

Some companies force viewers to watch animated introductory screens. This can be exciting or interesting the first time, but repeat visitors may not want to see this every time they come to the site. Your design can take steps to avoid this type of frustration.

A Web site should give the viewer the same look and feel present in other messages. One way to achieve that is by using elements that may already exist in brochures and advertisements, for example. Even though these elements are not likely to transfer identically, an experienced Web designer can offer helpful suggestions to connect the mediums with a consistent look and feel.

Don't overload the page

When it comes to content, there are various schools of thought as to how much stuff to put on a page. Some prefer long pages where scrolling is required. Others prefer to break content so that there are more screens with less text and graphics on each screen. Neither is wrong or right.

The choice needs to be made on a case by case basis. One constant is that people do not like to wait to view a page. For this reason, it is wise to relinquish the notion that the Web site is going to imitate a print catalog verbatim. Print catalogs often display 20 or more products complete with large photography. An exact translation of that to the Web would likely result in a very slow page. Slow pages result in frustrated customers-not an outcome you want after investing considerable time and money. Most successful Web catalogs allow a user to begin with a broad category and drill down to their specific item, and then view only that item, complete with a description, etc.

Navigation: take a "less is more" approach

Opinions differ here, too, but many readers and designers prefer the less is more approach to Web navigation. Less banners, less flashing objects, fewer main menu items, less content per screen (both graphics and text), fewer clicks to get to where you want to go ... you get the picture.

The main goal is to simplify. Companies are bound to have important areas that they want to highlight. This is not a problem. It's best to determine one or two main areas that need extra emphasis and avoid trying to make everything leap off the screen. Sites that jam-pack too many choices on a page risk overwhelming the viewer.

One way to avoid information overload on the homepage is by making your main categories general. This keeps the number of categories smaller in most cases. Second, creating a logical outline (which becomes the navigational structure) with the intent to minimize the quantity of content per page keeps each page focused. Cross references to other pages can be implemented if necessary.

Tips for quick navigation

Users commonly like a "one click" range. This plays into the need for speed. For example, at any point in the buying experience, the customer can "check out" or "check account status" or click to any other main category of the site including the homepage.

• For business-to-business Web sites, it is often necessary to place user name and password fields directly on the homepage so that people can get to where they need to be quickly

• Including "search" capabilities is a must. Being able to search by product, product number, and category, for instance, allows for quick retrieval of information for the customer

• An "express order" feature allows the customer to call up past orders and reorder, rather than having to fill out new order screens on items they order frequently

• Offer information about the site's security methods so that the buyer can feel confident in purchasing online at your site.

Try to personalize the experience as much as possible. It is possible to greet customers with their name when they use a login. If your system is keeping track of users and what they have purchased in the past, you can offer related products to them through e-mail or in targeted areas of the Web site. Finesse in this approach is needed so that the viewer sees this as helpful as opposed to annoying.

Test your "shopping sequence" on people who have not had a great deal of Web experience. Let all ranges of users try the site with no instructions.

Keeping the customer satisfied

As the Internet evolves and competition for position intensifies, the bottom line for success will be in how well the customer is served. Who are your customers or groups of customers and what do they want from you? How many people will you employ to listen to their requests, answer their questions, solve their problems, and retrieve information for them?

This may appear at first not to fall into the Web design arena. However, a good designer is going to listen to all of your needs and make sure that visual emphasis gets placed appropriately with the goals for the site.

A primary intention to serve customers better than your competition is an important factor that needs to be considered when establishing your Web structure and aesthetic. Once you have determined your targeted groups, your navigation may hinge on messages and graphics that lead specific groups to specific areas of your site; often times referred to as communities. At these places, relevant information is shared between customers and your Web customer relations employees. When you are serving your customers well with your internal Web business structure, your site should also reflect that success.

Cindy Robinson is a Web designer.