Navigation

An Analysis of the Amazon Shopping Experience

Resources, Usability, Web Design | Oct 14, 2009

Designers of e-commerce websites today face a number of challenges in attempting to build a user experience that increases the likelihood of visitors making online purchases.

To battle fierce online competition and overcome the apprehension of skeptical shoppers, designers can take a number of steps to improve the usability of their online stores.

Since 1995, Amazon has established itself as the world’s leader in e-commerce. Its success is not a fluke, nor is it merely the result of being in the right place at the right time.

Amazon’s success is the direct result of a strong user shopping experience.

In this article, we will discuss a number of features of the Amazon shopping experience that will, either in principle or practically, offer a model worthy of imitation by e-commerce developers today.

A Two-Fold Purpose Made Clear

The Amazon shopping experience begins, of course, on the home page, where the user is visually notified of the website’s two-fold purpose:


Product Search and Online Purchasing

Amazon Home Page

When you scan the Amazon home page (screenshot above), what stands out? Amidst the perpetually cluttered layout, a few clean, distinct elements immediately catch the user’s eye: the navigation section in the upper-left, and the search/shopping cart controls near the top.

Below is the same screenshot with those elements emphasized by graying out the rest:

Amazon Home Page with Search and Navigation Emphasized

With these elements highlighted, we see how Amazon’s simple two-fold purpose is achieved:

  • The user is able to quickly find and purchase products
  • The seller is able to quickly process online purchases and make a profit

Because Amazon is so well known, only the rare visitor wouldn’t know that both of those things (i.e. product search and online shopping) are available.

But Amazon’s team of designers and architects have made sure those two elements in the website’s structure are prominent and usable.

Designers, clients, project managers and developers involved in building e-commerce websites could follow this example by clearly emphasizing product search and online purchasing from the very beginning of the user’s experience—whether for first-time users or returning customers.


Content Tailored to the Current User

Once they have established the website’s product search and online shopping capabilities, users will most likely want to take advantage of those features right away—starting with search.

Amazon uses cookies to keep a user logged in, and that user’s shopping habits are tracked and stored server-side.

This is a good enhancement, because it dynamically customizes the user’s experience based on prior searches, page views, wish-list additions, written reviews and, ultimately, purchases.


Related Items Displayed

One example of customized content is seen on the home page, which modifies the main content based on how the user (whether logged in or not) has interacted with the product search feature:

Amazon Content Tailored to the User


Recommended Items Based on Prior Activity

This same type of customized content appears on subsequent visits, as long as browser cookies are kept intact:

Amazon Recommended Content

As Amazon does, a good e-commerce website will track client-side behavior (on the server-side) to ensure that subsequent visits of each user are increasingly tailored to their tastes and habits.

This increases the likelihood that the user will make a purchase, and in some cases it will speed up the purchasing process.

More significantly, it exposes the user to a wider range of products and services that tie in to their areas of interest.


Various “Why Shop With Us” Reminders

The Amazon shopping experience is littered with reminders of why the user should purchase a product from Amazon rather than from some other source (online or otherwise).

A few examples are shown and discussed below.


Prices Compared to Suggested Retail

Amazon Price Comparisons

Each product displayed above has not only the discounted price offered by Amazon, but also the MRSP (manufacturer’s suggested retail price, or “list price”).

This simple feature, which is instantly understood by the user because of the strike-through text, is seen with virtually every product on Amazon.

It says to the user (not in so many words), “Here’s why you should buy this item from us”. This is a simple but strong sales incentive that has no doubt boosted Amazon’s revenue.


User Notified of “Free Shipping” Early On

Amazon Early Shipping Notification

Another good example of the “Why shop with us” reminder is shown in the image above. After the user has added some items to their shopping cart, a large distinct yellow banner appears at the top of the screen, telling the user that they now qualify for free shipping.

The banner also helpfully includes a link to any restrictions that may apply.

Logically, the notice of “free shipping” should come as a step in the “shipping options”, but that process occurs after the user has shown a commitment to the items in their shopping cart.

So, displaying this yellow banner as soon as the user’s cart qualifies for free shipping increases the likelihood that they will follow through on their purchase. Again, the yellow banner in effect states, “Here’s another good reason to buy from us”.


Life-Like Book Previews

One of the reasons a shopper may pass up an opportunity to purchase online is that they cannot assess the quality of a product.

But an up-close preview of a product—one that is comparable to actually holding the item in your hands—can help remove some, if not all, of this hesitation.


The “Look Inside” Feature

Books are one of the most frequently purchased items on Amazon, so it’s no wonder that the Amazon development team has built the feature that it refers to as “Look Inside”.

The “Look Inside” feature lets shoppers view certain sections of books: usually the front cover, table of contents, first pages, index and back cover.

This can be extremely helpful because shoppers will usually be able to tell from a glance at the table of contents or introduction whether a book suits them.

Look Inside Feature

As seen in the screenshot above and some of the images further up, the “Look Inside” feature (which is available for countless books) is accessible from any page that has thumbnails of book covers and from the product pages of individual books.

Hovering over the thumbnail image on the product page opens a menu of the book’s sections.


The “Search Inside” Feature

The preview menu for the “Look Inside” feature also has a small box labeled “Search Inside This Book”, which lets the user search the entire book, not just the sections available for preview.

When the user selects an option from the “Look Inside” menu, a lightbox pops up, giving the user a product preview that is almost as good as holding the book in your hands.

Look Inside Feature

As shown above, the “Search Inside” feature is also included in the lightbox and offers even more functionality. The image below shows an example of what happens when the user performs a search.

Search Inside Feature

The “Search Inside” feature returns results from any page in the book but notifies the user if the page is not available for previewing.

The search engine is even intuitive enough to include the plural forms of singular words, which is best practice. Although I found this feature to be a little buggy, it’s still a good option to have when researching a book.

E-commerce developers today may not have the budget or technical resources to include such a feature on their websites, but you can ensure during the concept phase that products are given as much exposure as possible.


Customizable History and Recommendations

Earlier we discussed how “Recommended Items” appear in certain sections of the Amazon website. Some of those sections, as well as the shopper’s entire product viewing history, can be modified. Take a look at the image below.

Adjust Recommendations

Each product listed on the shopper’s personal Amazon page under “Today’s Recommendations For You” can be edited.

Clicking the “Fix this recommendation” link brings up a window that explains exactly why this item was recommended and that gives the shopper the option to change it.

Usually, an item is recommended based on a prior purchase or tracked shopping habits. The shopper can tell Amazon not to recommend any more items based on that factor.

Another customizable feature is a history of all of the products that the shopper has viewed. This option is not always easy to find but appears at the top of the user’s personal page. An example of a user’s browsing history is shown below.

Delete History

The items are displayed in order of when they were visited, starting with the most recent. And each item has a “Delete this item” option, similar to what you would find on a shopping cart page.

When an item is deleted, the page reloads and the list is updated. This feature would be more effective if it were done with AJAX, but it is still a useful enhancement.

In the right sidebar on the same page, the user sees a list of search terms and categories that they have recently viewed:

Searches and Categories in Sidebar History

Clicking on the “x” beside each item, the user can delete any item in their search or category history. This is a client-side feature, so the results are instantaneous: the user doesn’t have to wait for the whole page to reload when they delete an item.

These customizable (or editable) features ensure that the shopping experience isn’t burdensome to the user. If they receive recommendations that they aren’t happy with, the user can modify them, which will improve future visits.

E-commerce developers can follow this example by allowing any dynamic user-tailored content to be as customizable as possible. This ensures that users do not feel as if content is being forced on them through advertising or promotional incentives.


Well-Placed Navigation Elements

Critical to the success of any online store is the ease with which users can navigate sections. Basic store categories, user pages, shopping cart pages, purchase pages and the like should all be easy to access at almost any point in the shopping experience.

Amazon does a good job of this, as shown by the numbered sections in the screenshot below.

Navigational Elements

Hovering over the “Shop All Departments” button (#1) triggers a drop-down menu that displays all primary store categories, giving shoppers easy access to other products. This navigation element is exactly where the user expects it to be: in the top-left corner of the screen, below the logo.

Beside the logo (#2) are a few less important links, such as ones for logging out, personalized recommendations and the user’s personal Amazon page. This section is not extremely prominent but also appears where it should be: at the top, either above or at eye level with the logo.

The next element (#3) is the section containing the “Cart” and “Wish List”. Shopping cart functionality is almost invariably located in the top-right corner of an e-commerce website’s layout.

And whenever a user views a product page, they are invited to add the product to their shopping cart or wish list (#4). Users naturally look for this functionality exactly where Amazon has placed it: to the right of the product and product details.

Finally, Amazon invites users to view “used & new” versions of the same product in the Amazon Marketplace (#5). Selling products in its marketplace obviously does not increase Amazon’s revenue in the short term, but it likely reaps long-term rewards, because simply knowing that this option is available makes many shoppers choose Amazon as their primary destination—even for used goods.

Amazon does this because it knows enough to put the user’s interests first and recognizes the long-term benefits.

You’ll also notice that the elements that stand out the most among the five we’ve highlighted are the ones that have sharp colors, gradients and subtle 3-D effects.

That is certainly not a coincidence: Amazon wants to draw the user’s attention to where it counts.

The placement of navigation elements is critical to the success of any website. Amazon sets a very good example in this regard, doing what users expect and ensuring that the most important elements are accessible at all times or as needed.


The Shopper Should Always Feels Comfortable

This is important for any e-commerce website and is done well on Amazon.

To increase the likelihood that a user makes a purchase, you have to ensure they are comfortable at every stage of the shopping experience. Amazon accomplishes this beautifully by giving the customer full control at all times.


Easy to Filter and Compare Customer Reviews

Amazon Customer Reviews Easy to Compare

The screenshot above compares two opposing customer ratings and reviews (shown on either side of the “vs.” graphic). The user can also filter customer reviews by rating. Why does this make them feel comfortable? Because the user is about to spend their hard-earned dollars on this product and would feel more comfortable being able to easily access both positive and negative reviews.

Gaining thorough knowledge of a product through customer reviews, both good and bad, gives the shopper peace of mind and helps them make an informed decision.

The user is not pressured into purchasing an item but rather feels that the decision of whether to buy a product is completely under their control.


Extra Shopping Cart Options

Amazon Cart Options

As shown above, a few options are included on the shopping cart page that make the user feel comfortable. First, if a user changes their mind about a particular purchase, they have the option of deleting it from their cart.

But deleting is a rather final act, so they have the alternative of saving it for later, too. You could call this a “soft delete”: it removes the item from the shopping cart but keeps it on the user’s shopping cart page under a list of saved items, where the user can easily add it back to their cart at any time.


Change or Delete Items on Shipping Page

The user’s control continues in subsequent steps of the purchase. Take a look at the next image.

The user sees this when selecting a shipping option, which likely means they are already committed—or nearly committed—to buying the product.

Amazon Shipping Options

When choosing a shipping method, the user is given the option, with a fairly prominent button, to “Change quantities or delete”. Upon seeing the shipping methods, the user could very well need these options, so having the button available now is helpful and reassuring.


Reminder That “Continue” Does Not Mean “Final Decision”

Amazon Cart Prior to Final Purchase

After the user has added a product to their cart and selected a shipping method, they review a summary of their order and click a button to “Continue” with their purchase. That button takes them not to a confirmation of their order but rather to one final page where they actually make their purchase.

To ensure that the user knows this is not the “final” step, a helpful reminder is put directly below the “Continue” button, informing them that the final order will be confirmed after one last summary.

E-commerce developers could learn from the example set by Amazon’s empathetic user experience by understanding the various concerns and apprehensions that a user might have at each stage of the shopping experience.

Developers should add enhancements to the shopping experience that make the user feel comfortable and in control.


Conclusion

In no way could we cover all of the advantages of the Amazon shopping experience in this article.

But the few strong features we have discussed should suffice to help you understand how the architects at Amazon have shaped the online experience.


Lessons Learned from the Amazon Shopping Experience

  • The focus of an e-commerce site should be product search and online buying.
  • Whenever possible, content should be unique for each user.
  • Create sales incentives by giving “Why shop with us” reminders.
  • Give products as much exposure as possible.
  • Don’t make the user feel as some  products/services are being forced on them.
  • Make important sections easily accessible at the appropriate time.
  • Make the shopper feel comfortable and in control at all times.

The Amazon shopping experience is not perfect. It has its flaws, which is the subject of another article. But the good greatly outweighs the bad.

And of course technical and budget limitations will keep some of the enhancements mentioned here out of reach of some e-commerce developers. But by following the underlying principles of these best practices, you will be able to implement various usability enhancements that are within your project’s budget and specifications.

Applying these principles will ensure that your online store delivers a rewarding experience to the buyer and a good bottom line to the seller.


Further Resources on E-Commerce Usability


This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs, where he posts articles and tutorials on web design.

Have you found other usability benefits and e-commerce best practices in the Amazon shopping experience? Share your comments below.



Share this post
Comments (no login required)
  • http://iloveusability.com Kevin Holesh

    I think vast improvements can be made to shopping experiences online by making it more like a real life shopping experience.

    When I pick something off the shelf, I notice what is around it. Whoever arranged the products like that did so knowing that I might be interested in what’s around the product I’m actually buying. In Amazon, it is the “Recommended Products.”

    Amazon Prime is also a step in the right direction. When I go to the store, I’m not paying an extra 7 or 8 bucks just to be able to bring the product home. Giving the user “free” shipping (with a membership fee, like Costco or Sam’s Club) encourages them to shop there more because there is a lower fixed cost for everything you order.

  • http://beetbe.com Beetbe

    It’s too long to read but i assume that your post is remarkable to read

  • http://www.theprittefulpalette.wordpress.com Deanne

    I agree with you points above about Amazon. They make the shopping experience very nice by making things clear and easy. The only part of their site I would change is the final screens of the shopping cart. I sometimes find the flow of information that appears somewhat confusing.

    • http://www.webdevelopersstudio.com Terri

      I agree with this. It usually feels like there are too many steps.

      But in fact, yesterday I when I shipped an order to my daughter at college there was only one step and no place for the Ship To. I thought it odd that the Submit button (whatever it was labeled) didn’t offer the comforting “You’re not done yet” assurance. Sure enough when I clicked it, the order was complete. I needed to update the order to add a ship to address.

      Always in a hurry so didn’t stop to analyze what was different or what I did differently, but it was a weird change in Amazon’s pattern.

  • http://www.skix.pl SkiX

    good tips

  • Chetan

    I have worked on an e-commerce website evaluating it. I totally like Amazons model and especially the continue button is just so good makes me feel a lot better while I am clicking it. At this point I may not know what exactly is the procedure after that but I am sure atleast I am not getting billed!!! I love the checking otu experience of Amazon.

    Good post overall!! :)

  • tyr

    very good article, thanks to share this knowledge

  • http://www.vijayinfo.in web designer

    Thanks Your information….

    its very useful

  • http://www.minilaptopdirect.com/ Mini Laptop china

    The only part of their site I would change is the final screens of the shopping cart.

  • http://neosmart.net/blog/2006/a-comprehensive-look-at-the-new-microsoft-fonts/ s.holstens

    Wow what a damned hell long article. So much Informations.. I love it. A big thanks to you.

  • http://www.nivas.hr Daemon

    Nice post, and some of the elements can be universally applied to people who build webshops.

    However, most of the points in the post require the shop to run for some time (over a year, or more!) in order to become productive/effective.

    It is impossible to build new webshop, and have “Recommended” or “People who bought this also bought this” or “Maybe you would like this”. The data required to display that data accurately takes some serious shop lifetime. It is hard to take Amazon as an example of how shop should be, since they are a hundred (more or less =) years old.

  • http://www.taupo.co.uk Memoryweaver

    Whilst Amazon are, obviously, doing a lot of things right (I must have spent thousands with them, over the years). There are a lot of frustrations with the ‘Amazon Experience’. It’s often difficult, when searching, to tell which results are sold by Amazon, and which are sold by resellers. For certain items, you really only want to risk trusting Amazon themselves, and not someone you’ve never heard of. Also, if you ever look up anything on behalf of someone else, Amazon then spends weeks trying to push odd things to you (it’s currently trying to sell me ladies shoes as I once bought a pair of women’s hiking boots as a present). This can be embarrassing at work, when the front page shows red stiletto slinky shoes!

  • Estrelex

    For me the worst thing in Amazon is the very very very veryyyy long page about the product. For me they have to do something to organize all these texts/pictures. I think this forces the user to look up for the information that he needs for a long time.

  • Adardesign

    Very useful!

    Thanks!

  • http://www.empfehlenswert-wien.at wien

    thanks, verry helpful

  • Dion

    Great stuff as usual. Kudos!

  • RoaldA

    Usefull as hell! Ty! ^^

  • Kevin

    Great post, Louis! However, I would like to call you out on this statement you make:

    “Users naturally look for this functionality exactly where Amazon has placed it: to the right of the product and product details.”

    I feel that this is a fallacy of logic—you’re essentially saying “Because Amazon does it this way, users look here”. In other words: “B. Therefore, A->B”. If we take Amazon out of that sentence, we need to know why users are looking here. Shouldn’t they be looking near the product image?

    Ignoring the high contrast of this module, it otherwise falls outside of the traditional “F” model of how users scan a page. What makes them “naturally look” for this functionality in this area? Any further thoughts on this?

    • http://www.impressivewebs.com Louis

      Kevin:

      In retrospect, maybe I should have made a little more clear what I was trying to say, because technically you might be right.

      In my opinion, if a user is viewing a page dedicated to a single product, with an extensive description of the product, he/she would look either near the product image or to the right of the product. So, you’re probably right, the first place they’d look is near the product image. However, this is specifically dealing with where they would look on a “product page”. In a “list of products” page, they would look near the image, as you say. And they may very well do that in the “product page” view as well. But I certainly don’t think those functions are poorly placed.

      But thanks for the feedback.

  • http://www.afdeling18.dk Soeren Sprogoe

    Nice post.

    However try reviewing the checkout process of Amazon(.co.uk) with critical eyes, you’ll discover that it is so horribly, horribly flawed it’s silly. Let me name a few things:

    – You can’t move backwards in the checkout process, as the browsers back button is disabled and you can’t click on any of the steps at the top.

    – Once you’ve started the checkout, you can’t move back to your basket to add/remove items. You actually have to start over by typing http://www.amazon.co.uk all over again!

    – Both individual- and total prices changes often during the checkout process, it is extremely difficult especially for international customers to get an overview of what the order total is going to be.

    There’s several more, all of which usually is on the Top 10 of Things Not To Do during a checkout.

    Not sure if the US one is better, but .co.uk is so horribly flawed that I recently had to give up making a purchase. And I’m an experienced online customer.

    • http://www.impressivewebs.com Louis

      Soeren,

      I absolutely agree, there are many frustrating things in the Amazon shopping experience, including the things you mentioned. I was considering writing a follow-up that discussed those. We’ll see. :)

  • http://www.theindesign.com TheInDesign

    what a great and very informational article, pictures make it easy to skim through the discussion… Great job!

  • http://joshuasortino.com Joshua Sortino

    Amazon is a testimony as to why pretty graphics and “looking good” aren’t everything in design. Many designers could argue their layout is aesthetically dated. However, Amazon has proven itself as the #1 online store. The moral of the story? Create an easy user experience instead of a pretty one. (Bonus points for creating both!)

  • http://randsco.com stk

    Amazon’s success is the direct result of a strong user shopping experience.

    Really? Wow. That’s amazing. What designers do really is very important! *Feels good about self (whilst wool is firmly placed over my eyes)*

    As an Amazon customer, I know better. While a positive online shopping experience helps, the real success of Amazon has more to do with excellent customer support, consumer loyalty and word-of-mouth advertising, than with web design.

    This self-important, designer-centric statement may give designers warm fuzzies about how crucial their work might be (and depending on the project – it may even be warranted), but it caused me to give a ‘pass’ to the remainder of the article.

    What’s probably “so great” about the Amazon shopping experience is that it’s been through many iterations, since Amazon first started … and has many legs up on ‘just-deployed’ or ‘in-the-works’ ecommerce designs.

    • http://www.impressivewebs.com Louis

      stk, the last part of your comment is right on the money — and that’s why it’s beneficial for designers to examine sites that have been around for awhile and try to discern principles behind the decisions.

  • http://abhijit.shirsath.com/ Abhijit Shirsath

    Amazon is the most successful shopping portals, i had read about the UI also in a usability book. This site is really a inspiration for UI Designer like us.

  • http://www.mlwebco.com ML Web Consulting

    Overly complex system they got there, but hey it’s working. I compare Amazon’s experience to Godaddy, it’s really complex and filled with tons of information, but for some reason, the average user reacts to those features that I consider complex and disordered.

    ~Mike Locke

  • http://www.viadigita.com David S

    Clear, great supporting graphics, specifics translated into general principles…excellent analysis!

    I am interested to know–you said: “The Amazon shopping experience is not perfect. It has its flaws, which is the subject of another article.”

    First: will there actually be another article? Second: I’d be interested to know what flaws you think Amazon has. In my experience, it is virtually unique in that it feels perfect to me. I’ve been buying stuff from them for years, and I’m just totally pleased.

    In addition to their outstanding web design, though, I do think that both their order processing and shipping are second to none…and that is, in equal part, why their entire “experience” is so good for a buyer.

  • http://www.ustiffanyshop.com discount tiffany jewelry

    This site is really a inspiration for UI Designer like us.

  • http://www.chotrul.com/ Chotrul Web Design

    Very interesting and thorough review of the whole Amazon experience, especially with regard to usability.

  • http://www.emlakx.net Emlak

    The only part of their site I would change is the final screens of the shopping cart

  • http://novatvmedia.com Anthony Alexander

    I wish you could organize the items in the shopping cart more easily. I spend ages sending stuff to and from my save later box. They should also include pics of the products and sometimes comparative shopping is really difficult because the products seem to be lumped together based on what previous customers view. Though this is actually great when buying a product that may need additional peripherals that might not be stated. I do see that functionality, but it seems to be used sparsely. Overall, I think Amazon whenever I want to purchase ANYTHING online, mainly because they accept the card I use. :p

  • http://www.newviewit.com Website Design

    Exactly what I was looking for… currently integrating Amazon affiliates into one of my sites and this report gives some great ideas for how to use their API

  • http://www.zco.com/ iPad Developer

    I am sure, I will tweet this to my twitter account. This will help a lot of users.