When it comes to eCommerce design there are plenty of Do’s & Don’ts, a ton of “best practices” and even more people claiming they have the keys to successful eCommerce design.
Is there a magical recipe that will convert that browsing customer to a paying one? Perhaps the key is a magical button, so magnificent that the user has no choice but to click. Or maybe it is the number of licks it takes to get to the center of a tootsie roll tootsie pop?
In this series of posts over the next several weeks we’ll look at some of the top internet retailers, and see what they’re doing to achieve their success. I think you will be surprised at what we find.
The Product Detail page or PD page is where most online shoppers will spend their time. Whether it’s reading reviews, product information, or looking at alternative (alt) images, the PD page is the heart an soul of the online eCommerce experience.
For the purposes of this part of the series we will take a look at two of the Top 100 eCommerce websites of 2009, straight from the Internet Retailers Top 100 list. Well look at 1 well designed page and 1 not so well designed, and talk about the good and the bad of both.
Anthropologie
Creatively speaking this entire site is gorgeous. Anthropologie certainly has their brand down, and it’s reflected from page to page. The PD page is no exception.
WHAT THEY DID RIGHT
Simple, concise information. The customer can get all the information about the product within a glance. This works well for sites like Anthropologie who’s clientele may be more concerned with what the label says, than what it’s actually made of. But that’s ok. Some of us do the same thing with Apple products. :)
From the on mouseover zoom to the tooltip message on the “Add To Bag” button when you don’t select a color or size. It’s those little touches that improve user experience and make the sites usability effortless.
Nice use of whitespace, and typography as well as the consistent product photography, and great use of a left nav, especially the strong call out to where you are as well as breadcrumbs, this site makes my top list for the design alone.
WHAT THEY COULD DO BETTER
Just as I mentioned typography as a strong point I’d also like to point out the inconsistencies. I’m not going to make a big deal about it because it is more than likely part of the quirkiness of the brand and if this is true then who am I to tell them differently.
Next I have to point out that the placement of some features seem odd to me. Grouping “add to wish list” with “send to a friend” and social network sharing feels a little off.
On to the “Add To Bag” button itself. It is the same color as the left nav and even though the page is clean and uncluttered it could benefit from standing out a bit more. I’m not saying they need a BOB (Big Orange Button) but perhaps just a simple color change would make a stronger call to action.
Overall, Anthropologie is definitely one of the better designed eCommerce sites. Easy to navigate, consistent user interface and branding. They have carved their niche, and provide their customers with a great shopping experience. They are able to achieve this great experience because they don’t try to be all things to all people. which is a perfect transition to our next site.
Amazon
Amazon.com is the #1 eCommerce website. It’s the first place I go when I want to compare pricing. They will typically be the best price on the net and often have free shipping. Their product catalog is larger than Han Solo’s ego, and they outperform most, if not all of the competition by billions (with a “B”) in annual revenue year after year.
WHAT THEY DID RIGHT
As cluttered and confusing as Amazon may look there is actually some method to the madness so to speak. Scrolling down a PD page on Amazon is like long checkout lines at the world’s largest flea market on Christmas Eve. If you want it, it’s there and probably cheaper than anyone else. But we’re here to talk about the UI and overall design.
Amazon has clearly defined each section as you move down the page, and even though there are a million things that could distract you, Amazon does a nice job at grouping it’s content so that each section is easily distinguished.
Another thing they did right was putting the “Add To Cart” button in the same place on each PD page. With all the variable content, can you image what it would be like if the button was under, oh lets say the “Product Description”? On some products you would have to scroll 4 screens down to get to it. So, as much of a no-brainer this was, they did it right.
They also put the basic info right at the top and left a plethora of statistical info for further reading if you so choose. I think Amazon knows they are not a browsing site per se. I don’t know anyone who goes there to see what’s new, or to watch videos about a product specifically. You go there when you already have something in mind.
WHAT THEY COULD DO BETTER
Well, firstly you might be thinking who am I to tell the #1 online retailer they could do better. Well, I buy stuff from Amazon all the time. I’m a customer. The customer is always right! :)
I have a lot of issues with Amazon.com. As a designer, I wouldn’t know where to begin with attempting a redesign but lets start with the PD page. Amazon could really benefit from a tabbed structure to clean up some of the clutter. I realize this would put some things an extra click away, but from a user experience standpoint, choice suppresses conversion. I’ve said this before in a different context, but the principle is the same.
…people, confronted with a large pool of options will be less satisfied with a decision. The more options there are, the higher their expectation. So even if they have made the best possible choice, their satisfaction level has by default, dropped.
Amazon could also stand to drop so many of the up-sells or at the least moving some of the less relevant ones to a click away. Things like “Customers Who Bought Also Bought” is fine, but “What Do Customers Ultimately Buy After Viewing This Item”? Seriously? I’m sure these are extremely valuable metrics for their business, but I could care less if 2% of the people viewing this product bought some other product. The only thing this does is make me second guess my decision, potentially abandoning my cart for fear of making the wrong choice.
These aren’t just business decisions. As interaction designers, we need to take on some accountability. We’re supposed to be improving the customers experience through well thought out UI and persuading them to convert. Amazon somehow manages the conversion part very well, but leaves user experience at the door quicker than Luke left Dagobah to save Leia.
I could write pages on how we could improve Amazon’s Product Detail page, but the truth of the matter is, they’re #1 and probably will be for the foreseeable future so the point really is moot.
Summary
We’ve taken a look at 2 of the top100 eComemrce sites PD pages and talked about their good points and bad points. To recap:
ANTHROPOLOGIE
The Good
- Great design
- Clean layout
- Nice use of whitespace and typography
- Good usability
- Strong brand definition
The Bad
- Strange link grouping (wish list with sharing)
- Need stronger call out for “Add To Bag” button
AMAZON
The Good
- Clearly defined sections
- Great Add To Cart/Wishlist placement
- Important description info at the top
- Plenty of product images
The Bad
- Clutter
- Too many up-sells
- Poor layout
- Too much useless information
What say you? We would love to hear your thoughts.