Anatomy of an Effective Product Page Design

Feb 24 2011 by Kean Richmond | 21 Comments

Anatomy of an Effective Product Page Design

The goal of any new e-commerce website appears to be to challenge (and be better than) Amazon.com. The well informed among us would say this is an impossible task and anyone suggesting different is overly ambitious or crazy. Yet with all this ambition, the websites of many online businesses simply don’t make the effort to create a site that could even challenge the Internet behemoth that is Amazon — let alone topple it.

So What’s the Problem?

The main problem lies in the product page of many e-commerce websites. Product pages are inherently complex and can contain so many different elements that such a page can easily become a juggling act to design.

Although other pages in an e-commerce site can affect conversion rates, the product page is the strong link in any conversion. It is this page that must convince a person to buy a particular product.

Yet many websites show only the most basic amount of information required to get a sale, and they think this is good enough. It isn’t.

In a world where your nearest competitor is only a click away, you need to make sure you convince your customers that buying from you is the right choice.

In this guide, we’ll discuss some of the elements you would expect to see in a product page, what the best practices and common design patterns are, and present some examples of e-commerce websites that get it right.

Required Elements of a Product Page

In order to sell any product online, there are some things that simply cannot be omitted when designing your e-store’s product page. The lack of any of these three elements would most certainly mean no sales, and if you do happen to get a sale without one of these, consider yourself lucky.

These are all commonsense things to include, but the trick is not to simply have them present in your product pages, but also to present them well.

Product Name

Quite obviously, the user must know what they’re looking at. Ensuring your product names are descriptive, short and optimized for search engines and your users, is important.

So for example, the product name "Gold Ring" would be more suitable as "18ct Gold Wedding Ring". The latter product name is more descriptive but still concise.

The ideal situation is for each product name to be unique so that when a customer is looking through a list of products, they can clearly identify the differences between each product.

Price

PriceIkea

Unless you happen to be a billionaire, you’re unlikely to ever purchase a product without some clear indication of its price. Sure, a page could be full of information that lead you to believe the product should only cost $1, but without any definitive confirmation, you can never be too sure you won’t be charged $1 million.

So the price has to be in the product page, and it should prominent, but also, the price should be located near the Buy button so that when the user views the page initially, their eye gaze flows naturally through the product name, towards the price, and then Buy button.

Buy Button

CDNow

You’ve got the product name and its price, but how will the e-shopper buy it?

The decision-making in regards to the Buy button rests largely in size, color and text. These will change depending on the individual site, and sometimes geographic location too, as certain colors and elements mean different things in various cultures.

For example, in the UK, having an Add to Basket button would be more appropriate to the American version of Add to Cart. See the difference in wording between Amazon.co.uk and Amazon.com:

Amazon.com versus Amazon.co.uk Buy buttons.

Ideally, once these decisions are made, your Buy button should be placed high on the page, preferably above the fold. Sure, the fold doesn’t exist on websites, but there’s no point making your customers work hard to buy your products by hiding this down the page.

There’s an exception to having the Buy button on product pages, and that is when a product is out of stock. In these cases, it’s always more user-friendly to display an out of stock message on the page, and to hide or disable the Buy button to reduce confusion and annoyance.

For design inspiration, check out these examples of Add to Cart buttons.

Important Elements of a Product Page

Unlike the required elements above, a person can still easily purchase a product when the following are absent, yet this does not necessarily mean they will.

For the great majority of customers, these elements are expected to be present as they are important to helping them decide whether the product is what they want to purchase.

Images

Burton

When viewing a product page, a customer will first want to verify that the product on the page is what they are looking for. No matter how descriptive the product name is, most customers will use product images to verify that the product is what they’re actually wanting to purchase.

Here are some tips for displaying product images.

Images should be properly sized. Providing an image that is a suitable size is pretty basic stuff; if a customer cannot clearly identify what the product is, then there is no reason in showing the image.

However, there’s only so much space available in the average monitor, so at times, it’s helpful to use something extra to give a customer an even closer look. Use modal windows (frequently referred to as lightboxes) to enlarge thumbnails, zoom features. Check out this list of jQuery plugins for working with images.

Newegg displays properly sized images.

Provide multiple images. Consider displaying a gallery of images instead of relying on one image to make a sale. With a gallery, you can show a number of images of the product from various angles as well as the possibility to show the product in use. Some products are so intricate that a user may be looking for the smallest detail on a product (for example, in consumer electronics, where and what the device controls are); you want to make sure these are available for viewing.

Some websites have gone a step further: they allow previous customers to upload photos they have taken of the product. This can save you time and money, but also customers are likely to fill in important gaps that you have yet to identify. It’s also social proof; that is, users are more prone to trusting their neutral peers.

A user-submitted photo of an Amazon.com product.

Show photos of the actual product. I’ve come across this a few times, and I’m sure you have too; you land on a product page and the image doesn’t show the product that the name and description describe. Either the image shows multiple products or is incomplete and doesn’t show everything in a collection of products. This could be in the instance where the product is in various models (such as shoes that come in multiple colors). Making sure the image reflects the product you’ll be shipping to the buyer is a good practice.

Product Description

Amazon.co.uk

In most cases, the product description is important. It provides a short, succinct description of what the product is, can be written well to persuade the customer into buying the product, and can enhance the SEO of the product page.

Many e-commerce sites fail in creating their own content for each product on their website as it is such a big task to undertake. Many sites will simply copy content from the manufacturer, which, though not perfect, is better than nothing. However, investing time and resources in writing your own product descriptions gives your site a leg up from the vast sea of online stores.

Quantity Option

Designing Obama

If the customer wants to order 10 items of the same product without the ability to select a quantity then they must click the Buy button 9 times. The frustration of doing this would be even greater if, after each click, the customer is navigated away from the product page to their basket. Always give the ability to modify the quantity.

To omit something that takes such a small amount of screen real estate and that can lead to a bigger purchase is a great addition to the product page. A common design pattern is to place the quantity box near the Buy button as a text input or select box.

Another design pattern is to place a quantity box at the checkout summary page that lists the buyer’s items contained in their shopping basket. However, it seems like the latter option is similar to modifying the amount of canned soup you want to purchase when you’re already in the checkout line in the grocery store. Whereas having the quantity box in the product page ensures you let the buyer set the quantity they want while they’re still in the store shelf where the canned soups are.

Useful Elements of a Product Page

Once you’ve run through the required and important elements of your product page, you come to those that are just useful to have. The existence of these may not apply to all products, but in many cases these might just be the most important pieces of information that will help you make a sale.

Manufacturer Name

Zappos

Apple makes the best MP3 players, and Canon the best Digital SLR Cameras — or at least that’s what I believe.

A lot of customers have similar thoughts about the products they buy. Having become more brand-conscious and brand-loyal, many will look first to the brand they know for a particular product.

So with the manufacturer or make of a product so heavily on a customer’s mind, a product page should provide visual clues to confirm the product they are looking at is manufactured by a particular company.

The two most popular methods to provide these visual clues are through the existence of the manufacturer logo or by including the manufacturer name within the product name (as shown in the Zappos photo above).

Product Options

DesignByHumans

In some cases, the specification of a product can differ enough to warrant providing options/variations of a product. For example, things like t-shirts or shoes, which may come in various colors, styles and sizes, can benefit from having the ability to modify their options and attributes.

With multiple options of products available, you have to then decide how best to integrate them into the design. Depending on what the option is, you could be using a select menu or radio inputs.

Multiple options can lead to complications when some options are mutually exclusive, but it’s a necessary challenge to overcome.

The primary benefit of showing products in such a way is to reduce the number of overall product pages in your website, thus making searching through long lists of products much simpler. For example, if you were selling a model of shoes with 20 different colors, then instead of 20 product pages, you can cut it down to just one.

Having options also reduces the frustration felt by a customer when clicking through to products that happen to be the same, but a different size or color that they want, for example.

Sizes and Dimensions

hmv.com

As mentioned above, some useful things are dependent on the type of product. Though dimensions may not be very relevant to things like food (coffee beans, for example), dimensions are important — if not required — for things such as furniture or paintings.

Dimensions aren’t just physical. Consider the running time of a movie or the track listing of a CD too; these are "dimensions" in a sense. This information gives an indication of size to a customer by which they can determine value for money. Imagine buying a CD album at the normal price, but later find it has only a single track; most customer’s would be disappointed to discover this after the sale.

Available Stock

Winestore

Displaying the amount you have left of a product is all about creating a sense of urgency, which can play on a buyer’s impulse. However, a customer may also be thankful for being able to make a decision knowing the possibility of a product going out of stock later on (and then unable to make the purchase).

In terms of design, it only really becomes important to communicate the urgency of low stock. If the stock levels are high, this information is less of a concern to the customer. With only a couple of products left, or when a product is out of stock, this information becomes much more relevant to the customer and needs to be designed and positioned so that the customer can easily see the notice.

Optional/Extra Elements of a Product Page

The below elements are increasingly being found in a greater number of product pages in order to increase conversion rates or the spend per order. They give additional information about a specific product, and in some cases, their inclusion can very well be the catalyst for high growth in a website’s profits.

Customer Reviews

Sony Style USA

Customer reviews give other customers a less bias take of a product by giving previous buyers the ability to provide a testimonial of a product they purchased.

The problem, however, is this section is left to stagnate in many smaller websites with very few customers bothering to add reviews. The ideal situation is to follow the eBay model of buyer/seller feedback. When you receive an email asking for feedback, many see it as a required process of the purchasing process. Simply emailing a reminder asking a customer to provide their thoughts about their recent purchase can be all that is needed to fill out your review section.

But what information should you ask for? Ideally, you ask for the least amount of information possible to respect the reviewer’s time. I’d recommend asking for simply a name, a short review, their rating and a title of their review.

The review title can be left out, but many bigger sites require this so that readers can more easily find the customer review they want to read.

One last feature to add when displaying a review is to ask if the review was helpful; it may seem like a small addition, but when using this to sort your reviews, you ensure only the most helpful rise to the top, and those that aren’t drop to the bottom.

Add to Wish List

Blik Wall Decals

Some customers are decisive, while others will take their time thinking about buying something, possibly over many hours or days. In this time, they can simply forget the product they were looking at or eventually go elsewhere to purchase it. But including the ability for them to add a product to a wish list, we provide the best way of increasing the chances that they will return and buy.

By having an area that they can later return to, they can easily buy the products they saved.

A link or button positioned somewhere near the top of the page can be placed in the product page. It’s the second most important actionable element for a buyer, so it should be visible but never should it be designed in such a way that it distracts the customer from the primary actionable element, which is the Buy button.

Cost Savings

ties.com

Like the high street, many e-commerce websites will hold sales periodically throughout the year, or instead, might offer products at a reduced rate all year round. Some sites keep things simple by showing just a price, whilst others also include a recommended retail price juxtaposed against actual price.

Somewhere on your product pages, you should include the saving the customer will be making, both as a monetary value and as a percentage. If the saving a customer is making is worth shouting about, then shout about it you must.

The reason why we add a percentage as well as a monetary value is that many people simply respond more favorably to a percentage saving. Have you or a friend ever returned from a sale having paid more than normal for an item, yet bought it simply because it said 75% off? Rather than looking at what you are paying, you might focus more on the saving you have made. Showing this difference in price as a percentage is the most effective way to communicate this.

Delivery Details

Godiva

For many websites, this is the hidden cost of buying online. So many e-commerce websites will only tell you what you will be charged for delivery upon checkout, with the exception of when a site proudly announces it has Free Delivery. Now those in the know are acutely aware that Free Delivery usually means "we’ve hidden it in the cost of the product," but what this does is that it removes that element of the unknown.

So what can be done? Displaying the delivery cost in the product page is the first thing. If you have a flat delivery fee (no matter the cost or destination) then display that; if it’s per product, then show that instead.

If things get a little complicated with maximum and minimum prices and locations, then why not show the average delivery cost and link off to a page with a better description of the charges. Essentially, you need to give people as much information about the expected cost of delivery before they click to buy.

Delivery time is also important to many people. Is next day delivery possible on your website? If you sell products with a longer delivery time, what might that be? One of the unfortunate things about some e-commerce websites is that you can buy a product with no information of delivery time and, as much as you’re prepared to wait, you still sit eagerly waiting for it to arrive, everyday, until it finally does.

If a customer needs something in a rush, they will want to know they can get it in time. If your website cannot do this, then they will go elsewhere — losing a customer by being upfront and honest with your capabilities can be better than getting a disappointed or angry customer.

Other Products

nectar

At face value, it seems odd to place other products on the same page as the product you wish to sell. Surely, it will distract the customer from buying the product that they want, right? But this doesn’t have to be the case.

Instead, consider this the "Do you want fries with that?" element of an e-commerce website. Rather than actually dissuade a customer from purchasing a product, you have them buying more that they originally intended.

Extra products can actually come in several forms.

  • Required items: These products might be required to ensure the main product functions correctly; think of screws for hardware, or batteries for electronics.
  • Related items: Related items aren’t necessarily required but form part of a set; maybe a matching style of cupboard to a chest of drawers.
  • "People also bought…": This is essentially crowdsourced product recommendations, showing customer products that others have bought when buying the product on show in the hope the current customer may find something extra that they may like.

As much as you may wish to show these high in the page in order to generate extra revenue they have to appear much like the customer reviews; below any other product information.

Additional items can be important, so possibly a link higher on the page to this would be beneficial. Other than this, you have a blank canvas to do what you will here, but keeping a consistent style with other product lists would help users quickly identify what these sections are.

Why Choose Us

Famous 4th Street Cookie Company

This is something I’ve only recently come across and it works well for lesser-known sites. Sometimes customers are happy with the product and the price, but unsure about the website itself. When we come across websites we have not used before, there is an automatic lack of trust of it. Many web users fear divulging their private and financial information to unknown websites.

The "why choose us" panel is a useful way of defining why a site is trustworthy and why it’s the best option for buying this product.

Normally, you may have this kind of information dotted around the rest of the website in places such as an About page, but the percentage of customers that will see these pages is minimal. Reinforcing ideas such as your excellent delivery service, prices, guarantees or returns policy at such a critical point in the selling process could be just the ticket to getting that sale.

Social Media Integration

Threadless

Social media is big and there are many benefits to be had if you integrate things like social media buttons on your product pages.

Initially e-commerce websites had an email a friend feature on the product page so that a customer could quickly inform a friend about an awesome product they’ve found. With the explosion of Twitter and Facebook, many sites now give you the opportunity to Tweet or Like a given product.

If you do include such social media aspects to your product pages, then it has to be as part of a wider social strategy whereby you truly engage and attempt to build an online community.

The Challenge: Addressing Information Overload

The challenge I and all other designers find is this: How do you cram so much information into a single web page?

We must ensure our product pages don’t look overcrowded and we must display the information in a suitable hierarchy so that the important information is at the top and all other information flows naturally down the page.

There are no quick answers to laying out a product page — you can use gallery views or tabbed content to fit more information in less space, or you spend more time at the wireframing stage to get things perfect before jumping into the design.

Sometimes these things help, sometimes they just aren’t suitable. This is the challenge of working on different sites, in different markets with different clients and customers.

One tip I do have is to design for the extremes. When we design such pages, we have this tendency to only consider the perfect scenario: all content present and within a manageable size.

Instead, think about how the page may work with elements missing or with more content (or less content) than you expected in certain areas. Doing this will ensure you get a well-designed page no matter how it may be populated by the client.

Design for Delight

Once the product page is laid out correctly and designed with the required, important, useful, and optional/extra product page elements that you need, add some delight to your pages. If people visit your website and find themselves smiling at some small part of the site that they never expected to exist, then they will be more inclined to buy as well as return time and time again.

Be creative, be bold, be unique, share your story, develop your site’s persona.

Overcoming the Most Basic Problem

The major issue with online shopping has always been that we have taken out one of the fundamental elements of buying offline — and that is, the ability to either touch or try a product. This is a strong desire with many products and many customers and there isn’t a technology available right now that can mimic this tactile and immersive experience.

To overcome this we have to be better — so much better — than our brick-and-mortar equivalents. We have to ensure that we give the customer as much information as we can before purchasing, that the prices are very competitive, and that we’re providing a flawless user experience.

Related Content

About the Author

Kean Richmond is a full-time web designer and developer based in Yorkshire, UK. Working as a generalist in most areas of web design and development he currently works at Bronco, tweets as @keanrichmond and rants on his personal blog.

21 Comments

TimMH

February 24th, 2011

Good article Kean…. As I sit very much in the E-ccom industry many of your points are well made and extremely useful.

PS. Don’t make me think is an Excellent Book :o)

Michael

February 24th, 2011

I was surprised at how truly insightful this article was. Great analysis of the way products are being sold online!

Jacob Gube

February 24th, 2011

I concur with @Michael‘s statement (and I think I emailed Kean something along those lines prior to publishing this post). Not surprised by Kean’s ability to break down things like web forms or product pages, but rather, on making me think about these different elements as individual pieces all deserving attention.

Elias

February 25th, 2011

Hey Ken, really a piece of art, great work! I guess a good guide for every one interested in venturing into e-commerce.

Elias

Simonk

February 25th, 2011

great article and a good summary for what is important on a product page. I also like the ranking of the must-have-items and the nice to have stuff

Sanjay Zalke

February 25th, 2011

Wow, one stop shop for information. Good work, keep it up.
Being in similar field I definitely second most of your findings.

Amazon being leader in this business and “A INNOVATOR” it is always right to copy good bits, but you need major resources to comply/fulfil the demands of your customers. Like if you are allowing rating/comments for product then moderating those comments and ratings and explaining the issues to future customer is a tricky and timely part.
There are various small bits which are really important and one of them is communication. Try to keep you rating / comment as clean as possible
So Kean you might add some thoughts on the platform/framework used for e-Com site.

Sanjay Zalke

Laurent

February 25th, 2011

Kean, what about product vidéos ?

Ed

February 25th, 2011

Most of these suggestions seem like no brainers except when you start looking at websites that have not been updated since 1998 or they’ve hired a person who does webdesign on the side and doesn’t understand conversion.

Are you going to do a part two on effective checkout pages? This is another step where customers will bounce if you don’t look like a legitimate company. Things like credit card logos, a security seal, bbb seal etc… help build trust so you can get them to pull out their credit card and click the place order button.

Sarah

February 26th, 2011

I enjoyed and learned something new on every single point you mentioned! This article was most helpful for my current project making me re-think and go back to the product’s layout which was good to do before finalizing the design.

Thank you so much!

P.S I very much appreciated that you cross-linked to other relevant articles on sixrevisions too – very helpful on bits that I wanted to read more on!

Kean

February 26th, 2011

Thanks for the nice comments about the article.

@Laurent You’re correct video as well as audio can be a great addition to a product page. When selling music the addition of an audio preview are a highly sought after feature of a product page. Whilst a video can show not only additional detail and scale but also allow you to demonstrate how the product is used.

pimeo

February 26th, 2011

great article. It was so exhaustive.

Kean

February 27th, 2011

@Ed You’re right in that some of these points will appear pretty basic to those that have been in the business a while. But too often these types of posts forget there are still a lot of new designers and developers who need to be given the the opportunity to learn at all levels. We can’t simply ignore teaching these people in favour of only those for whom the basics no longer apply.

Gerwin van der Feijst

February 27th, 2011

Thanks for creating this article in such detail. We just released our own shop and sell shoes for ladies only. Our challange is that it is a affiliate shop promoting and selling shoes from a dozen e-tailers in the netherlands and most don’t supply all the info we would like.

For now we have the pricing, overview of the page, multiple images and a great zoom checked.

Next week i will take some time to re-read your article and discuss it with the team responsible for the shop. All points that can be improved will be .. if there are any noticable results i will let you know!

Marcell Purham

February 27th, 2011

Very informative article. You broke everything down little by little. :)

Matthew Simmons

February 28th, 2011

Great article – thanks for sharing.
M

Pixeno

March 1st, 2011

I like product pages that are minimalistic. Think they work best.

Gerwin van der Feijst

March 24th, 2011

Last week we launched an alternative to damesschoenen.nl. Instead of the orange look and feel we decided to go with blue. The next few weeks we will try to see if it has any impact on the impact on sales.

Ravi Pathak

April 5th, 2011

Hi Kean,

Nice article, however , I’d think few more customer centric dimensions can be incorporated while designing product pages !

For e.g. consider what type of product a shop is selling. Say if you are selling impulsive products, you’d want to focus more on aesthetic part of the product page vs. text part of the product page. You will have to play a trade off in such cases by giving away lot of text !

However, if you are selling home security systems, you need lot of text, & fine prints , information to convince the customers to buy from your ecommerce shop.

Therefore, a top up to this great detailed article could be, for which type of product different elements work well ,although, I am sure there are no right answers to it though !

Thanks again for great article !

Kristin Currier

July 14th, 2011

A note on product photography – invest in a pro photographer and Photoshop retoucher, especially if you have models or are working with quality life-style products. Large images work best. I’m a huge fan of the jQuery rollover zoom that requires no extra user clicking, and wish we could employ that on the site I currently work for.

Hiren Modi

November 7th, 2011

@Kean Richmond
Does it really matter to follow each and every factors for product page design? I am not opposing to this blog post but, I have different experience with my product page design. Right now, I am going to re-design my product page which may help me to improve conversion rate as well as user experience. But, I am still not getting that much benefits after implements all tips. What you think about it? Why does it happen? Can you give me few more idea about it?

Kean

November 11th, 2011

@Hiren Unfortunately I don’t think there’s a one size fits all solution. The tips above should act as a starting point that apply to a wide range of products and markets, but sometimes customers aren’t always so predictable.

Depending on the starting point I’d expect the inclusion of some of the above to have a positive effect on conversion rate. Yet this page cannot make up for big issues that may exist elsewhere in the website.

Sometimes the above may not be enough and it’s necessary to look into testing the page. Conversion rate optimisation, split testing and user/usability testing are all great ways to not only identify the weaknesses of your website but also learn invaluable information about your customers.

Once you have finished your redesign I’d recommend some user/usability testing as your next best move. It will help idenitify any issues possible customers may be having with your website. Sometimes we work on our sites too much that we can’t see it’s flaws anymore.

Leave a Comment

Subscribe to the comments on this article.