E-Commerce Design: How to Set Up Web Site Navigation

Our Web shop design doyenne Helen Bradley explains how you can ensure your site's navigation system gets shoppers to the right place every time.

Possibly the single most important factor that impacts your e-commerce site's success is its navigation system. For most of your visitors the distance between them successfully completing a purchase at your Web shop and giving up and going elsewhere is a few mouse clicks.

Editor's Picks
» Web Shop Design: Plugging into Photoshop

» Web Shop Design: Tips on Using Color

» Prepping Product Shots for Web Shops

» Time is Money: Batch Edit Photos, Boost Bottom Line

» Web Shop Design: Font Fantastic

» Five Photoshop Shortcuts for Quick Image Editing

» Web Shop Design: Putting Color into Action

» Web Shop Design: Using Text with Images in Photoshop

If you can improve your site navigation and deliver to your users what they are looking for quickly and efficiently you have a much better chance of selling to them. In short, poor navigation systems cost you sales.

Designing an effective navigation system isn't difficult but it does require some understanding of what makes a good navigation system in general and what will appeal to your customers in particular.

There are two important factors in designing a Web navigation system, one is adhering to the basic rules that apply to navigation and the second is to give your visitors what they, in particular, need.


The Basics of a Navigation System

As much as some of us like to be individual there are benefits to be gained on the Web in being just like everyone else. If you design your navigation system like nearly every other site's navigation system then your customers will find your site easy to use because they'll be used to that method of moving around, even if they haven't visited your site before.

The basic rules pertaining to a Web navigation system are:

  1.  The navigation system should appear on every page of your site.
  2. The navigation system should appear in the same position on every page.
  3. You should use the same navigation system on every page and not change its design.

Lucky for you, this simplifies some of the work in designing your Web site because you only have to design the navigation system once and it will work for the entire site.

Navigation systems should be made up of two basic types of links. The main navigation system should contain links to the main areas of your site such as your products, buying information, FAQs, shopping cart, "about us" and "contact us" pages.

If you have a lot of products, for example, include a secondary navigation system that contains links to those product groupings and appears when the customer is in the product area of the site. What is in this secondary navigation system may change from one area to another of your site but it should coexist with the main navigation system because it is an addition to it, not a replacement for it.

The second type of navigation links aren't part of the main system but are ancillary navigation tools such as links to a sitemap and your site's search feature. These links aren't there to replace the main navigation system — they are there to help out those visitors who can't find what they are looking for using the main system in what they think is a reasonable time or those who simply prefer to use search tools and site maps.

Site Navigation Basics
Funky Leisure has a great sitemap that will help you find what you're looking for if the main navigation system lets you down.
(Click for larger image.)

A sitemap is typically a page of text links to all the pages on your Web site arranged in some sensible order so it is easy to read. A search tool is best included on every page of your site and it lets your visitors type some text and search your site to find where pages containing that search term are located.


Setting Up Site Navigation: Where am I?

Not all customers enter your site via the home page so they'll want to know where they are when they arrive. Others might become confused after browsing for some time as to just where they are on your site.

Site Navigation Basics
On the Dovetail collection site you can locate your current place on the site by the highlighted options in the navigation system.
(Click for larger image.)

So-called "breadcrumb navigation" can help these visitors. This type of navigation includes the name of the current page as well as the clickable links to the pages further up your site's hierarchy that lead to this page. This works well for a very complex site. A simpler solution for a small site is to highlight the current location in the navigation hierarchy so you make it clear where your customer is in the system.


Keep It Simple

When designing navigation links make sure to use names that are descriptive of what your customer can expect to find if they click that link. Pages named About, FAQ, Contact Us, Products and so on are easily understood. Avoid using obscure wording, smart phrases and puns and, instead, err on the side of simple words that can't be misunderstood.


What Your Customers Want

The second part of designing a Web site navigation system is to understand what your shoppers want in the navigation system. In some e-commerce situations, customers shop by product rather than by brand and in other cases they are more concerned about brand and prefer to shop their favorite brands. If you understand how your customers are most likely to want to search your shop you can organize your navigation system so it meets their needs.

Site Navigation Basics
The owner of Blackberry Paper knows most of her customers like to shop by brand so search by product line is a key feature of the shop's navigation system.
(Click for larger image.)

So, for example, most customers shopping for scrap-booking supplies are concerned about brand names, so smart online store owners offer shopping by brand name in addition to shopping by product line. This ensures that all scrap-booking customers' shopping preferences are being met. In other stores it will be your experience that customers are more concerned about buying a blue shirt or black pants than the brand name of the clothing so your navigation system will group shirts into one category and trousers into another.

Every type of store will have different customers with different needs. It's your job to understand your customers and how they shop so you can provide them with a navigation system that delivers products to them the way they expect to find them.


Resources and Tips for Web Site Usability

If Steve Krug's book "Don't Make Me Think" isn't in your personal library and falling apart from excessive use then it should be. This book on Web site usability is an easy read and it takes a common-sense approach to the task of making your Web site accessible to the folks you made it for — your customers. It's a must have book for any online shop owner.

Finally, remember that a site's navigation system is a major factor in terms of how well customers receive your site. When you're developing your Web site or a makeover of it, put fancy Flash animations, drop down menus and bells and whistles on the back-burner and focus on the fundamentals of developing a good, effective navigation system for your customers. If you can nail that part of your design, you're well on your way to turning browsers into buyers.

Helen Bradley is a respected international journalist writing regularly for small business and computer publications in the USA, Canada, South Africa, UK and Australia. You can learn more about her at her Web site, HelenBradley.com.


Do you have a comment or question about this article or other e-commerce topics in general? Speak out in the SmallBusinessComputing.com E-Commerce Forum. Join the discussion today!

Comment and Contribute
* Required Field
Your email address will not be published

Note: No advertising, no spam, no keyword in name/nickname field. Thank you!

Free Resources

Subscribe To Our Daily Newsletter