Mary Beth is an independent distributor with Flint River Ranch, a company that sells all-natural dog and cat foods. She sent me a plea for help: her site, Pets Love Flint River, is only generating a sale every few months.

PLFR-homepage.jpgShe had some concern that her difficulty stems from having to compete against other distributors in the search engines. But when I did a quick search on the brand name, which gets a significant number of monthly searches, I found that she's ranking in the top 10 in Google for "Flint River Ranch." I knew immediately that her problem isn't really generating traffic, it's keeping it on the site and driving it to a conversion.

There are a few principles of web design and usability that are universally used on effective e-commerce sites. If Mary Beth can make her site more user friendly, her sales are likely going to go through the roof.

Ensure That Your Site Is Easy To Navigate
plfr-navigation.jpgThe primary issue with PetsLoveFlintRiver.com is that it is very difficult to navigate. 16 navigation links are in the left column and are all centered. Some are on more than one line. Some are informational, some are shopping, some are housekeeping. With so many links to so many types of information in poor formatting, the navigation is very difficult to read and even more difficult to scan. If people can't immediately see that you are selling this product, their perception will be that you aren't and they'll leave. With the current layout, it's not immediately obvious that this site is primary an e-commerce site.

The links need to be organized into a few different categories and formatted accordingly. There are three different kinds of links:
  1. Informational (photo gallery, distributor information, cost comparisons, animal breeders and shelters)
  2. Product pages
  3. Housekeeping (home, shopping cart)
The image below is a quick drawing of a recommend layout and navigation scheme for PetsLoveFlintRiver.com.
 
PLFR navigation layout.jpg
(click to enlarge)

These three link categories need to be separated visually, even broken out into separate navigation bars, a horizontal and a vertical. Any text in the left hand column always, always needs to be left-aligned for easy reading. All links should be grouped in sets of 3-5, no more.

In addition, the content area of the homepage should primarily be used to feature products and drive visitors to deep content (another type of navigation!). Incorporate a few-sentence overview of the website/company, and move the rest of the information to a separate page. Use the remaining space to feature products or product lines, complete with pictures, a brief description, and a link to the product page. This will help visitors to see that this is a shopping site and drive them to purchasing areas of the website.

Utilize a right-hand column

Studies have shown that a three column format is the most effective layout for e-commerce websites.

Left Column: navigation. (Links that are organized, easy to scan, and left aligned!)

Center: Content. All of your product information goes here.

Right Column: Call to action items and other features.

The right column is a great place to put buttons/links for "view cart" and "checkout." These are most effective when they are bold, designed to look like buttons, and incorporate traditional icons like a shopping cart. These should be a contrasting color that stands out from the rest of the design. Underneath the shopping cart buttons, you could incorporate secondary and tertiary calls to action such as "request a free sample" or " become a distributor." You could also use this space to incorporate testimonies.

Unless it's a requirement of the company, I'd move the distributor notice that is currently to the right of the header, and incorporate it as an actual page under the link "distributor info." Or, it could be incorporated in the footer. While this is important information, it is getting too much attention and could potentially be driving visitors away.

Make the Checkout Process Smooth
One major issue with the checkout process on PetsLoveFlintRiver.com is that there is no navigation. If you start checking out, but want to add a different product, there is no way to get back to the shopping pages. There's no link to home, to shipping information, or to contact. Visitors need to be able to return to other pages without having to click the back button. All global navigation links should still be a part of the checkout pages.

On a positive note, the checkout process on PetsLoveFlintRiver.com is as simple as possible. The less you ask for, the more likely visitors are to give it to you. Another well-done piece is the error page; if a visitor skips a required field and tries to submit the information, they are given an error page that says exactly what information is missing. They are then sent back to fix it. On the other hand, poorly handled errors are a quick way to lose a customer.

I would also suggest making the action buttons ("continue" "add to cart" etc) a color other than green. There is so much green in the design already that a contrasting color like blue or yellow would stand out better. On another site I recently reviewed, the color of the "add to cart" button blended in and I recommended changing it to red or something else bold. All the site owner did was change to color and add a shopping cart icon and his purchasing immediately went up around 200%. Sometimes the smallest changes make the biggest difference.

It's Not Always Just About SEO

The basic optimization done on the PetsLoveFlintRiver.com is causing the site to rank well for some branded terms that are relatively competitive. But getting visitors to come to your website doesn't do any good if they are unable to find their way around. Cleaning up the navigation and making it obvious that this is an e-commerce site should go a long way to boosting online sales.




June 6, 2008





Jackie Baker is an internet marketing analyst with SiteLogic Marketing (http://www.sitelogicmarketing.com) where she focuses on auditing websites as well as SEO, social media, usability, and information architecture consulting. She comes to the industry from a marketing/PR and website development background. Jackie maintains an active presence online through her blog RegardingHorses.com (http://www.regardinghorses.com) where she shares her love all things equine, particularly therapeutic riding.






Comments(1)

Great advice Jackie! The basic points you have outlined are crucial for success in eCommerce, especially if your competing directly with several distributors selling the same thing, larger brands or authoritative sites, etc. I thought that perhaps readers interested in the basics from this article may also enjoy the article we published on eCommerce and shopping cart usability/best practices. There's 21 practical examples and ideas that can be used to improve any eCommerce enabled site, big or small. Some of the ideas may not be possible for everyone to implement, but they are proven factors that have helped many of the top 100 merchants like Zappos, Nike, Cabelas, etc.

Here's our article, hope you all enjoy it...

http://www.ecommerceoptimization.com/articles/ecommerce-shopping-cart-usability-21-best-practices/

Comments closed after 30 days to combat spam.


Search Engine Guide > Jackie Baker > Site Clinic: Basic Principles Of E-Commerce Design