Dynamic Navigation for E-Commerce Websites

By DoItYourself.com Staff

There is no point in re-inventing the wheel every time. The e-commerce market giants like Amazon.com lead the way with some time tested stratagies for escalating the customers' browsing experience, using the dynamic effects of navigation.

As you surf the Web today, you find sites implementing a huge array of navigation feedback effects. These can range from simple effects, such as changing the color of a text link when the mouse moves over it, to complex Java based effects, such as adding a "halo" to a graphical button when the mouse moves over it or playing a sound when the user clicks the button.

The primary advantage of consistently using feedback effects throughout your site is that your customers become accustomed to them, and the effects help your customers identify navigation elements, making your site easier to use. If moving your mouse over a link changes the link's appearance in some way, you get an inconspicuous invitation to click the link. Feedback effects are an intuitive way of calling attention to a navigation element that may otherwise just appear to be another piece of text on the page.

Some sites make extensive use of DHTML, changing the entire contents of the page whenever the user points at a particular navigation element. Although the initial download of the page takes longer, the page reacts instantly to the user's actions by displaying information. Using DHTML to change page content is kind of an extension to the pop-up menu idea.

Some other sites will be making extensive use of text links. For that they will use CSS effects to make those links change the color or other properties when customers point at them. This offers a simple, no-programming way of providing navigation feedback, and the technique is common enough on Internet retail sites that customers are likely to immediately recognize the effect as a navigational cue.

If you are catering to an audience that is not familiar with the Web, you should go to great lengths to help them use your website. Pop-up tips, changing colors and wailing sirens may be in order. If you are catering to an experienced audience of technical professionals, they may not appreciate glitzy gimmicks and the right answer for you may be simple understated effects such as moderate color changes on text lines.

Incorporating Human Factor in Navigation Design

One of the nicest things about computers is that you can reliably predict what they will do in any given situation. After all, computers are machines, taught to "think" in specific, logical ways. Unfortunately, the main users of e-commerce sites are people, who are much less predictable and much more fickle.

Because of this fact, millions of dollars have been spent studying exactly how people respond to the material presented on a website. The benefit of these studies is that today's web designers have a better idea than ever before about how their audience will react to their design, so they can utilize certain design practices to achieve the reaction that they want or need.

Human Visual Techniques

Most people approach a web site the same way they approach the page of a book. In English speaking countries, this means that you start at the upper left corner and gradually work way down toward the lower right corner. Ever notice that most web sites place their menu bars along the left side of the screen? That's because people naturally gravitate toward content on the left, so placing navigation elements on the left helps to draw attention to those elements.

Take a look at just about any major commercial site. Whether the designers knew what they were doing or whether they were copying from some one else, most web sites have a startling number of features in common for good reason. Check out the following items:

• Navigation Menus. These are usually along the top or left of the screen, or both, but rarely the right and almost never the bottom.
• Navigation Elements. Most navigation elements automatically appear on the screen, you don't have to scroll down or to the right. This is known as placing the information "before the crease" and ensures that customers can immediately spot the important information. Note that this requires you to design your page for a specific minimum screen resolution. Current industry standards focus on 800 x 600 as the minimum size, and if you're catering to a technical crowd, you can safely design for 1024 x 768.
• Advertising. The advertisements often pay for the site, so they are usually located on the top of the page, and are often one of the first things displayed.

As with any other medium, certain techniques are guaranteed to catch attention:

• Larger font sizes
• Contrasting colors, especially bright, primary colors like red, green and yellow
• Flashing or otherwise dynamic displays, which explains the overwhelming popularity of animated GIF graphics for advertising banners
• Frequently repeated elements
• Elements that are surrounded by empty space, also referred to as "white space"

Using this information, you should begin to see your website's overall design coming together. Important navigation information should appear on the left, near the top of the space. Your logo should appear at the very top left if you’re interested in calling attention to your brand identity. Advertising should be in bright contrasting colors, and should preferably include an animated display of some kind.

After designing your site, show the designs to members of your target audience. Ask them what their eyes are drawn to, and see if these elements are the ones that you intended to catch their attention.

The reputation, profit and progress of any e-commerce site or Internet store depend on the browsing experience of its hard earned visitors. Using some ingenious initiatives and simple, tactful reengineering explained above, the owner of any e-commerce site can multiply the dynamic effects of navigation.

© Doityourself.com 2006