Zappos.com has been a leader in the world of eCommerce for as long as I can remember. They are constantly updating their site and I have often visited Zappos.com for inspiration. They seem to really get it right and that is why they are at the forefront of quality user experience.
Recently, I was poking around their site and noticed a significant change: they had completely revamped their product page. Not only did they update their product page, but they changed it in a way that challenges most eCommerce sites around the web by not using standard best-practice product page UX.
Up until now, most product pages included a left justified image with content on the right, further information and upsell/cross-sell products below. Here are a few of the changes worth noting that Zappos.com has made to the standard product page.
The default view for the product page includes a beautiful large main image that is centred on the page. To view the different colour options of the product you can either click the thumbnails below the image or select a different colour in the cart dropdown menu to the right.
Their product zoom has also been updated. The old way would create a box when you hover and then show a zoomed mirror image beside it. We’ve never been a fan of this setup. Now, you can click on the product and move your cursor around a zoomed image and click to zoom out. This seems more user friendly.
Tabbed Product Information
Instead of having all of the product information listed to the right of the product with tabbed information below, Zappos.com has created a streamlined, left justified tab system that includes important information to a customer’s purchase decision making.
– The Item Information tab is clearly laid out
– The Social Buzz tab shows any recent Tweets or adds to Facebook or Pinterest
– I am a huge fan of this placement and arrangement of Similar Items
– I also really like that they provide information on the brand
– This tabbed section remains constant as the content changes in the centre of the page.
Add to Cart
Zappos.com has also set the add to cart section up as a floating block that remains constant while the content is being reviewed. This means you can check out the colour and images, read the information then decide to add the product to your cart without having to scroll up and down the page. Having the cart information laid out clearly to the right allows for easy purchasing. They’ve also left this all-important function in the standard right justified area – which makes perfect sense.
Because they have reduced the amount of space required for product information, the product reviews section gets bumped up. For many products online, reviews are an important aspect of the sale. I like that this information is now closer to the product image and easy to find.
What I’m Not Sure About
– The share buttons are in the top left and are not the typical buttons we are used to seeing
– With the layout being different from what we are used to seeing across most eCommerce sites, were their conversion rates affected?
I was expecting to have a longer list of things I was unsure about, but in all honesty, I am really liking this new layout. It did take me a few seconds to familiarize myself with their placement of key information but in the end, I found the new layout to be clean, easy, and effective. What I’d love to know is how this product page change has affected their sales.