INTERNATIONAL: Evolution of E-Commerce Navigation and the User Experience
"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 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.
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 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:
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.
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 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.
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: