CSS, Flash, jQuery, and an arsenal of other powerful web techniques and technologies have unbound website design, creating the opportunity to develop either exceptional user interfaces or really frustrating ones.

Furthermore, the growth of "cookie-cutter" ecommerce templates (i.e., “insert your logo here”) has quelled site concepts with great potential and made some ecommerce pages as bland and tasteless as a papier-mâché popsicle.

To avoid the pitfalls of a site design that is too confusing, too ugly, or too experimental to be effective, the ecommerce site owner must strike a balance between leading-edge techniques and technologies, effectiveness, and aesthetics. So, in this edition of "Web Design Tips," I'll outline the laws for ecommerce site navigation design to help any ecommerce business.

A Video Tour of Site Navigation

Law No. 1: Make Navigation Easy to Understand and Use

Shoppers browsing to an ecommerce store don't want to be baffled by navigation. As I implied above, there are a lot of amazing things that you can do with site navigation that you shouldn't.

As a specific example, the agency Publicis & Hal Riney has developed site navigation that responds to gestures captured via web cam. The effect is stunning, and is an excellent way to demonstrate development talent. But as navigation, it is really frustrating. And if an ecommerce site deployed anything like it, I'd bet that they would never make a sale again.

Make your site navigation easy to understand and use. Provide clear labels that explain what a user will find when he or she clicks. If you sell shoes, try labels like "Men's Shoes" or "Women's Shoes" or "Nike." And put navigation in a predictable place, top, left, right, or front and center.

Here are some examples of sites obeying law number 1:

• Skooba Design features labels like "Laptop Bags" and "Apple 4G iPod Nano Cases"
• Bonobos, which sells nothing but men's trousers and shorts, has a homepage with a less than perfect middle navigation, but the sites store obeys this law perfectly
• Gateway obeys this law with a very nice top navigation that provides images (easy to understand) for many products
• Dripping in Fat features a front and center navigation that works because of the limited number of products on the site
• Crucial uses three forms of navigation—each clear—to make it easy for customer to find the computer memory or Flash cards they seek

Law No. 2: Make Navigation Accessible

Making your ecommerce site easy for customers with disabilities is good for business and the right thing to do. Some of your customers are going to have disabilities that require them to surf the web using screen readers, refreshable Braille displays, magnifiers, or other helpful devices. Develop navigation that these devices easily understand. Take a look at the World Wide Web Consortium's How People with Disabilities Use the Web for an idea of how these customers use websites.

One technique to try is to place text-based navigation and skip links (often hidden from most site visitors via CSS) at the very top of the page.

Here are some examples of sites obeying law number 2:

• Productive Alternatives is a very accessible site with a range of products
• Zahradka Art & Illustration is accessible and provides some visual interest
• Crawleys Furniture uses a simple text-based navigation at the top of the page
• Scruffs Hardwear is easy for devices like screen readers

Law No. 3: Tell Me Where I Am

Before customers can make a good choice about where they want to go on your site, they should know where they are. Because so many online shoppers use search engines to locate online stores, your customers can enter your site just about anywhere. So there is no guarantee that they are starting on the home page.

Use visual and text clues (i.e., breadcrumbs) to show the customer where he or she is on your site.

Here are some examples of sites obeying law number 3:

• Eagle Coffee Company uses CSS to change the look and feel of the active page in its left navigation and uses a clear breadcrumb to show the user just where she is
• Tokidoki uses pink font to highlight the current page in the navigation and has a good breadcrumb trail
• PEZ Factory Store has an easy-to-read orange breadcrumb and puts the current page in all capital letters in the left-hand navigation
• Cabela's actually includes the phrase "You are here" in its breadcrumb
• Newegg changes the background and font color of the current page and includes an accessibility-friendly breadcrumb

Law No. 4: Use Layers and Facets on Big Sites

If your ecommerce site has more than a few product categories, more than a handful of brands, or more than a dozen products, add navigation layers and facets.

As a customer, I want to be able to browse by brand, price, age-appropriateness, color, or just about any other relevant product attribute. Your navigation should let me do that right in place.

Here are some examples of sites obeying law number 4:

• PetsRight provides understandable layered navigation
• Ramco Worldwide offers a price facet -MiniRepublic lets customers navigate by just about any product attribute
• Wlanmall includes attributes like frequency, series, and radio frequency connector

Law No. 5: Let There Be Search

Every ecommerce site should allow shoppers to just search for products. Not a lot of explanation needed. Add a search box (yes it is a form of navigation) to every page on your site.

Here are some examples of sites obeying law number 5:

• Amie Street allows you to find music from any page on the site
• Knife Center has search right up top
• Art.com puts search to the left (ahead) of its text navigation

Related Articles

• Web Design Tips: Adding A Featured Section to Your Site Using jQuery and jFlow
• Web Design Tips: Basic CSS for Headers
• Web Design Tips: Configuring Templates, Adding a Product Grid in Magento

This article is filed under Design & Development and has the following keyword tags: web design, development, site navigation, CSS.

4 Comments