INTERNATIONAL: Evolution of E-Commerce Navigation and the User Experience

by Bruce Clay India, February 21, 2012

Estimated reading time: 4 minutes Audience: E-commerce entrepreneurs and Web designers  Top takeaways: • Navigation is an important part of conversion rate optimization. • E-commerce sites like Amazon, eBay and the India-based Flipkart offer lessons in navigation.  • Complete navigation above the fold, clear separation of categories and less clutter all seem to be important elements in navigation success.

"People won’t use your Web site if they can’t find their way around it." 

– Steve Krug, usability specialist and author of, “Don’t Make Me Think, A Common Sense Approach to Web Usability”

Navigation isn’t a popular topic, but having seen its evolution and its effect on CRO, we decided to do some research, specifically around e-commerce navigation. Special thanks to the folks at the Wayback Machine who created the digital capsule that allowed us to take screenshots of navigation from a time long forgotten — 1998 and beyond!

Navigation plays a vital role in making sure a Web surfer will stay on a website rather than bounce out. If users can’t find what they are looking for, they are likely to bounce off the website. In an e-commerce website where a sale or a bounce is just one click away, navigation becomes even more critical. A clear, organized and consistent navigation will help users find products in the minimum number of clicks.

For the purposes of research, we analyzed two international sites and one Indian e-commerce site to map out their evolution.

India has an Internet population of more than 100 million (as of December 2011), which has grown rapidly in the past couple of years. People living in metros have a busy lifestyle and prefer to shop via the Web as it saves them time. 

Similarly people in tier-two cities have also taken up the shopping trend as they do not get the same opportunities to purchase products from their local retail outlets because the selection is very limited. Both these trends have contributed to the e-commerce boom in India.

So if you are an entrepreneur who has just taken the plunge and jumped on the e-commerce bandwagon, or a Web designer working on e-commerce project, this article will help you understand how websites like Amazon, Ebay and Flipkart managed to simplify their user navigation.

Please note we are not saying that these websites have been a success because of their navigation, rather we are just researching one aspect of their Web design strategy.

Amazon

Amazon is one of the first websites to give user experience the importance it deserves. Considering the scale and complexity of the Amazon website, it is a constant challenge to maintain simplicity and clarity in its navigation and design. Amazon was the also one of the first websites to use tabs in Web design. Here is a screenshot of Amazon’s first navigation:

Screenshot of Amazon’s famous tabbed navigation from year 2003.

As you can infer from the screenshot, Amazon was able to differentiate the selected tabs on the basis of colour. This tabbed design was used by Amazon for the next few years. However once Amazon expanded its product portfolio, it could no longer fit more product categories in the current menu layout. There was a feeble attempt at a double-lined tab menu, but it was more of a temporary solution rather than a long-term solution.

Amazon Now

At the end of 2007, Amazon launched its second major change in navigation style, which has been followed until now. This time, the categories were grouped in a sidebar. Upon hovering over a major category, a menu containing subcategories pops out.

The menu and the drop-down submenu are all visible in the first fold of the website. Thus, any user can browse the categories without having to scroll the page up and down to see all the categories.

On the inner pages of the website, this menu collapses and only “Shop all departments” text is visible over the orange background. Upon hovering over it, the complete menu becomes visible. Thus the consistency of the menu is maintained throughout the website.

The categories are also well divided, and have clear visual separation making it easier for the user to find anything.

eBay

eBay was one of the first platforms that allowed people to sell stuff online without having to create an online e-commerce website (which is a very resource-intensive and time-consuming job). So, eBay had two kinds of people visiting the website:

1. Those who are interested in buying things.
2. Those who are interested in selling goods.

So, keeping the intent of the visitor in mind, eBay’s initial design had a very clear navigation separation on the top, defining sections for buyers and sellers:

In the first few designs of eBay, there were sections and categories listed on home page for the users to navigate the website easily and find what they are looking for:

eBay introduced a search box that allowed the consumer to search particular categories within eBay. For navigation purposes, a long list of categories were posted on the left sidebar of the website. As the company grew to multiple countries, eBay added a country selector drop-down menu below the categories. So, if in case a user is not in his or her country’s eBay website, they can easily change that from the drop-down menu.

eBay Now

Just like Amazon, eBay also felt the need to improve its navigation as the category list had grown very long, and a method to keep it restricted to the first scroll was needed. eBay took a similar stance as that of Amazon, and also came up with vertical navigation on the left side with a drop-down menu of subcategories:

Flipkart.com

Flipkart is one of the largest e-commerce websites in India and it was started by two ex-Amazon employees. Established in 2007, Flipkart has gained a lot of traction in a very short time. The website follows a similar design pattern as that of Amazon, but has still managed to keep the concept original.

Similar to Amazon, Flipkart first started its journey as an online book store and remained in its niche for a long time. But then just like Amazon it started adding other categories to the website.

Flipkart for some time added the categories in tabs on the top and improved the search box of the website to provide a better user experience. In 2011, Flipkart overhauled its website and added many more categories to the website. Though they still kept the tabbed design and search on the top, but the colour scheme of the website was changed to build more trust.

Flipkart Now

With the course of time, as Flipkart kept adding more categories, it also felt the growing demand of having an improved navigation system, and  also followed the path laid down by Amazon and eBay. They went ahead and integrated a vertical drop-down menu with categories grouped on the top left side, above the first scroll.

Why Are Some of the Top E-commerce Websites Like Amazon, eBay & Flipkart Following a Similar Menu Trend?

Here are some possible reasons that support this transformation:

1. Visibility of complete navigation “above the fold”: The average Internet user is impatient and tends to leave the website if they can’t find what they are looking for above the fold. Keeping the categories restricted to “above the fold” definitely helps in keeping consumers on the website, as they can figure out quickly where to find the information.
2. More character limits per line for each category name: In a tabbed menu system, any lengthy category name was split in two lines; whereas in this case, all categories are in a single line.
3. Clear separation of categories: All categories are visually separated with decent line height between the two categories, making them more readable.
4. Less clutter: As the navigation is divided in a defined manner, and the subcategories are visible upon hovering, there is much less clutter of categories within the navigation. In addition, it makes it easy for the user to focus and find the desired category.