Monday, December 5, 2011

How to improve Navigation Usability for an eCommerce Store

navigate through your ecommerce
The user interface of an eCommerce store must be simple, clean, and user-friendly so that the shopper can easily navigate and browse the store.  If your shopper spends more time figuring out how to use your store, instead of browsing the shop looking at all of your great products, then the shopper will get frustrated and leave.
Reduce bounce rate, increase page-views and time on site, and increase conversions by following the 7 steps below to improve navigation usability for an eCommerce store:

1. Categories on Top

The most important element of navigation is the category menu.  This menu should be placed at the top of the site and extended horizontally throughout the header.  It should be visible at all times and contain the most important categories of your store.
Here are examples of great navigation menus:
navigation menu for Zappos

navigation menu for ebgames

2. Utilize Breadcrumbs to tell the shoppers where she is at

Breadcrumbs is the trail the shopper leaves as she navigates the store.  For example, I may start at the home page and end up looking at a Nikon SLR Digital Camera.  The Breadcrumbs allows me to see how I got to the page that I’m at and allow me to easily go back to any previous page.
Breadcrumbs are usually structured in the following order:
  1. Home Page
  2. Category Page
  3. Sub-category Page
  4. Product
Each step of the way narrows my search down to more specific products.  As I browse, I can easily go up one level to review all of the previous products in the category.
Here are examples of breadcrumbs in action:
target breadcrumbs

best buy breadcrumbs

3. Keep the full list of Categories and Sub-Categories visible in the product page

The best policy is to consistently give the shopper access to ALL areas of your store at ALL times.  The shopper should not feel constrained, lost, or unable to find what she is looking for.
Therefore, it is very beneficial to keep your Categories and Sub-categories visible at all times for the shopper.  While tip #1 above covers this in general, there are a few stores that take navigation a step further in the Product Page:
American Eagle Outfitters
american eagle products
Notice how AE clearly lists all categories and sub-categories above the product section.  This allows the shopper to focus on the product, but to always have any section of the site easily accessible to her.  For an apparel store, this is crucial because shoppers are looking to purchase multiple items that fit well together according to their style.
EB Games
ebgames product page
EB Games understands that you’re looking at a Wii game, and dynamically changes the left-sidebar for your easy access to categories and sub-categories for the Wii platform.  By making browsing easy for the shopper, EB Games increases it sales conversions.

4. Search should be above the fold and available at all times

Similar to the Category menu, the Search Bar must be available at all times and above the fold.  Make it clear that it’s a search bar by adding a button that says “search”.
Here are examples of clearly placed search bars: search bar

hair flix search bar

5. Give browsers the ability to sort through items

Sorting is incredibly important to target the three specific types of shoppers:
  1. The price-conscious shopper: looks to sort by price
  2. The quality-conscious shopper: looks to sort by ratings or reviews
  3. The peer-influenced shopper: looks to sort by most popular
Give your shoppers the ability to sort in the Category Page and you will capture all three shoppers at the same time.
Here are examples of sorting used in the right way:
Zappos sorting

Best Buy sorting

6. Allow shoppers to Add to Cart from the Category Pages

When appropriate, allow shoppers to add items straight from the Category Page.  This is useful to the shopper who is in a hurry and knows exactly what she wants to purchase.  Here is an example:
hairflix add categories
Another method of quick-shopping used by many retail store online is the Quick View.  The Quick View allows the shopper to quickly view an item from the Category Page without having to click through to the Product Page.  Here is an example from American Eagle Outfitters:
american eagle quick view
Notice how the Quick View pops into focus while dimming the background.  It allows the shopper to add a product to the shopping bag without having to click through to the actual Product Page.

7. Display special deals at the top of the page that encourage the shopper to purchase

If you have a special offer, such as free shipping if you hit a certain price-point in the shopping cart, then you should clearly show it at the top of the page.  This makes it clearly visible to the shopper and will positively influence their purchase behavior in your store.
Example of a clearly marked special offer:
foot locker special offer
Use the above methods to improve your Navigation Usability and increase sales conversions!

1 comment:

  1. E commerce to increase the web site traffic the web site must be attractive and all kind of facilities must be done.

    Create an Online Store