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 differently 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

We have a quick video on product page design if you’d like to learn about it in that format.

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

Ikea 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

• 10 Tips for Optimizing Web Form Submission Usability
• Karma as a Social Interaction Design Pattern in Websites
• Guide to Website Navigation Design Patterns