The Ultimate Guide to Product Detail Page Design

The design of any portion of an eCommerce site, usually involves discussions around the topic of trust and friction. The idea being that you want to build as much trust with the visitor as you can while at the same time, reducing as much friction to purchase as possible.

If you think about it, building trust on your site and reducing friction simultaneously can be quite a challenge. Building trust on a page stems from the “signals” on that page. Naturally you start thinking about adding, as many trust building signals as possible. But the counter argument to adding more trust signals is, you are also putting more and more stuff in front of the visitor…thus potentially creating friction. Quite the conundrum isn’t it?

We’ve also put together an ebook to provide an in-depth look at how Product Detail Pages work. In this eBook, you’ll find discussion on the various features that go into the Product Detail Page and its design, as well as strategies implemented by other online merchants and over 70+ Product Detail Page examples. Click on the link below to download your copy now:





Download Guide Here




A Few Notes to Remember

Before we dive in too deep, there are a few key points you should take note of before reading the rest of this guide:

  • Developed for Physical Items: We’re focusing on product detail pages for merchants selling physical items.
  • B2C not B2B: We’re talking mostly about product detail pages for consumer-focused sites (B2C not B2B).
  • None of this is Carved-in-Stone Scripture: Don’t use any of this guide blindly without the proper testing and analytics to back it up. Do proper testing before implementation. You should be testing everything.

Key Takeaways:

We’re going to dig into some nitty-gritty details today, but everything we discuss is going to be framed around 3 major concepts:

  • Design for your customer first
  • Less is more
  • Test everything

Download the ebook or watch the webinar.

What’s the Big Deal about the Product Detail Page?

The product detail page is a pretty important one. It’s usually the place where your visitor decides if they want to become a customer and purchase something. Of course it’s not the last stop on the journey to becoming a customer (meaning, don’t ignore the others), but it is definitely a great place to spend resources on optimizing.

Being in the eCommerce space for more than a decade has definitely given me a lot of exposure to both good and bad product page design. When our own teams set out to design a new product detail template for one of our sites, we know that this page can sometimes be our most difficult on the entire site due to how much information needs to be presented.

Ever notice that some of the larger eCommerce sites in the world seem to have always changing product pages? Probably not! That’s because most of these guys change things ever so slightly as they A/B Test new ideas against real traffic. If you compared what their product detail page looks like today vs. a few years ago, you’ll notice quite a bit of a difference. Making lots and lots of small, incremental changes to your site will measure the results of how most successful merchants are at tackling design. I’m a huge advocate of this approach to design in eCommerce. It’s entirely test-driven.

What is your order of attack?

This is the most popular question I get asked. Here’s what I like to generally follow:

  1. Calls to Action Design
  2. Trust Signals
  3. Friction
  4. Photography (e.g. on model/off model)
  5. Copy

It’s important to layout a bit of a methodology. You should develop a method first before you implement any of these strategies. The first step is measurement, making sure you are using Google Analytics, heat mapping tools or a/b testing suite to help you test, analyze or validate your hypothesis.

Trust Signals

Big or well-known brands have developed trust with their customer over a long period of time. Multi brand merchants like Nike or Cocoa-Cola can build trust through association with the use of logos. Over time they have built so much brand equity that building trust isn’t as much of a concern as it would be for a $5-$10 million business. What should you do if you’re not a big and well-known brand? How do you build trust?

1. Real Boy Signals

Firstly, customers and visitors want to know that you’re a real business. Its what I call “Real Boy” signals. If you have brick and mortar stores, you should state the number of retail spaces you have. This adds credibility and signals to consumers that you are a real merchant.

2. Customer Ratings & Reviews

Next, include customer ratings and reviews. Yes, even the bad ones. We’ve seen both positive and negative reviews, positively impact sales. But be sure to address reviews from unhappy customers.

3. Community

Community is a big one! Showing that you have an active user base comprised of people who either follow you, use your products or just talk about your products /brand is really good to bring to the forefront.

4. Design Cues

First impressions matter, consider design cues and implementing aspects of design like typography and alignment to your site -more on this later in the eBook.

5. Proximity to CTA

Lastly consider the proximity of your policies to your Calls to Action (CTA). Through testing, we’ve noticed customers actually notice these. The closer these two are, the easier it is for customers to know what to expect when they shop on your site

Friction

Friction on a product page is anything that gets in the way of a visitor adding something to their shopping cart. When you really think about it, the more you add to a page, the more a visitor has to look and process therefore taking longer for the visitor to interact with whatever it element it is on the page you would like them to interact with. These elements could be, add to cart, and add to registry or even the social Q&A element.
Friction can compound pretty quickly. Take a look at this example. This site uses different types of trust signals e.g. branding, badges and reviews. The page is a little crowded can be distracting and may be causing some friction.

Bulb America
bulbamerica

Third Party Badges

Security is still important, but not as important as that super expensive (won’t be named) security services want you to think. The Better Business Bureau (BBB) is nice, but is it necessary? I like to have a “100% Satisfaction” badge. Even if it’s your own it’s a bold statement and builds trust.

Product Copy

Your Copy Should Be Insanely Good!

You should invest in writing insanely good product copy. You should have copy that quickly describes the item to a customer. If possible, short, sweet and well written. Don’t write long-form copy unless it’s absolutely necessary to fully describe a product. Fluff and space filler is bad, even if you want to try and justify it with the “it’s good for SEO” argument. I’d worry about the users experience first…that’s what really matters.

Write Using The Language of Your Customer

Your copy should be tailored to your audience. If you don’t know whom you are selling to, stop reading this guide and go figure that out first. If you do know your audience, try writing product descriptions that speak directly to them. Basically, you want to write using the language of your ideal customer. If you own bricks and mortars stores, this should be a relatively easy thing to figure out. Go out and talk to a bunch of your customers and just listen to them. They’ll tell you what they are looking for in the store. They will ask you questions about products. You can use this information to give direction to your product copy.

Create Personality and Use Humour

The vast majority of your visitors are like most other humans, they like a good laugh. It’s shocking how few sites actually incorporate some humour into their product copy. Most are incredibly cut and dry with no personality. They read like a machine threw up a list of product specifications into paragraph format.

Crazy Idea: Be Honest!

The best example of product copy I’ve always pointed to was Woot.com. They would write the most brutally honest descriptions about an item: what was good and what was bad. Crazy concept right? It worked for their audience. In fact I think most consumers want really honest descriptions of a product. If they didn’t, they wouldn’t solicit input and reviews of the same item or a potential purchase from friends, family or complete strangers. Why not write the brutally honest description yourself?

There is more to the product detail page copy than your typical product description too. Here are just a couple examples of the types of copy you may want to pay attention to:

  • Labels (e.g. Weight, Brand)
  • Section Titles (e.g. Product Specifications, Tech Specs, Customer Reviews)

Typography

Talk to any designer worth their salt and they will preach the tremendous value of typography. I used to be someone who just didn’t get it. What was the big deal? As long as the text was readable I was happy. I’m now officially a believer in the power of smart typography.

We like to follow some basic rules when designing a product page:

  • Size should be readable: Don’t make the mistake of using smaller text because you want to “fit more” on the page or…worse…”above the fold”.
  • Scrutinize Font Type: Do certain fonts work better than others? I haven’t read anything that backs this up, but if you have test data that shows proof of font type effecting conversion please share!

Tricks

Use a full size iPad and a Macbook (1400px resolution) as your guide for seeing how things look. If it looks good on these you’re probably fine. Also it would be helpful to determine the tools that your target customer frequently browses on (e.g. iPad, Macbook, PC desktop or laptop, Android phone, Android Tablet etc.)

Purchase Influence Messages

Which on-page messages are most important to influencing a customer’s decision to purchase?

  • Free Shipping Message
  • Free Returns Message
  • Sales or discounts available
  • What kind of language should you use? (ie. “Was X, Now Y”, or “You Save X”)
  • Loyalty Messages (ie. Do you get points for buying? Extra points promotions?)
  • Time sensitive purchase? (ie. Some kind of countdown?)
  • Only X left in stock. (Creates urgency)
  • Available for in-store pickup (2-fold benefit: customers see you have physical stores [trust!] and it’s convenient)
  • Buy More Save More
  • Quantity based discounts can be difficult to display, especially on smaller screen devices.

Photography

Product Images

Photography is one of the hardest elements of a product page to get right. Display as many product viewpoints and angles as possible and ensure your using high quality images. The logic is, the more detail a customer can see, the better.

Bakers Shoes
bakersfootwear

Burton
Burton

Placement on the left seems to be most effective across a wide variety of verticals. Consistent sizing across your site will make it easier on the eyes. It’s difficult to make random sizes look well, so the only great way to do this that I’ve seen is the layout used by Pinterest when you are browsing pins.

 

Q: How big should the image be? What is the ideal size and DPI?

A: Consider increasing screen resolutions (think…retina displays).

 

We’re living in a world where mobile is the thing that we talk about a lot, because the adoption rates are huge, but at the same time, the screen real estate to desktop is also getting larger. So if you taking another look at your photography, consider the larger formats using as much real estate as possible.

If you have square images use them. Odd shapes (e.g. tall or wide images) are harder to design around. Our go-to size is 350×350 pixels unless the product is incredibly visual. Fashion is a good example of when you should use larger images on a product page.

Call to Action

Add to Cart Buttons

I think the language used, colour and size of your add to cart button is important, but far less important than differentiating this key call to action (CTA) from the others on your product detail page. We’ve also found that the position, mainly the proximity of the button to pricing and availability elements to be very important.

In any case, there are some low hanging tests you should look to run on your primary call to action:

  • Color
  • Size & Shape
  • Language (Add to Cart, Add to Basket, or something else)
  • Placement & Position
  • Adding an image or icon to the button

We’ve assembled 70+ screenshots of add to cart buttons from mid-sized eCommerce sites, most of which are on the Internet Retailer Second 500 but some of which are just great sites to pull inspiration from. If you’re interested in checking them out, hit the download button below to download our Ultimate Guide to Product Detail Page Design.





Download Guide Here




Multiple CTA’s on A Single Page

 

Q: What happens when you have multiple CTA’s? How do you balance more than one CTA?

 

We know that secondary actions like social shares (e.g. tell a friend, Facebook, Tweet, PinIt, add to wish list etc.) are also quite important. For example, most sites that have strong gift registries can expect to see healthy conversion rates for items on registries being purchased. So it would only be natural to think that getting people to add items to their registry would be great for business! The difficulty is in the balancing act.

      1. Try different colours, shapes and sizes or display them as links instead of buttons.

 

      2. How much prominence do you give to these other CTA’s? What are the trade-offs?

 

      3. What about a wish list and other non-cart calls to action?

 

    4. How many do you really need, are those social share buttons even being use?

French Toast
frenchtoast

Analytics: what to measure?

What do you measure when you embark on product detail page designs? You really don’t want to start making any changes to any pages without first understanding what your visitors are doing on your current product pages.

Some of the key tools you can use include:

  • Heat Mapping Tools
  • In-Page Navigation in Google Analytics (GA)
  • Popular “Next Pages” in click path

Most important is to track events on-page:

  • Clicks on Add to Cart
  • Clicks on secondary CTA’s
  • Clicks on product informational tabs (Do people even look at your product specifications tab?)
  • Customer Reviews (Are they being seen? Interaction levels?)

Multi-Device Implications

The world of responsive web design is complicated enough for simple pages, but once you start introducing complex pages like product detail pages and things become very difficult very quickly. There is one major guiding rule that we follow when designing a product detail page for multiple screen sizes. You don’t need all of the same stuff on every screen! A lot of the time it doesn’t make sense to have feature parity from your desktop page to small-format pages.

Complex Products (Bundles, Groups, Configurations)

These represent some of the hardest types of product detail pages to design. Mostly because of the many user interactions before a customer can purchase.

      1. Bundles

 

      2. Grouped products

 

      3. Configurable

 

    4. “Super” Configurable (combinations of the above)

These are some of the hardest user experiences to get right. There can be dozens and dozens of user interactions you need to worry about.

Example: Daddies Board Shop

Daddies Board Shop

Configurable Products (e.g. Sizes & Colors)

Size and/or color is actually one of the more simple kinds of configurable product. Most clothing falls into this category of configuration with the exception of some apparel product having a third dimension (e.g. jeans can have waist size and length)

What’s the best way to present the configuration to a customer?

 

You can use drop-downs, radio buttons, swatches, or custom clickable boxes. There are quite a few ways to approach these types of products. There are some good practices you should follow. Screenshots should help illustrate the different approaches.

Examples: Drop Downs

Ardene
Ardene Drop Down

eLUXE

eluxe_Dropdown
Bench

Bench Drop Down Menu
A special note on configurable products: consumers typically order multiple variations of them. Make it easy for your customers to order them!

Creative Bag
Creative Bag

Showing complete outfits or giving the customer an idea of what something might look like is a great strategy for more “personal” or “style” type purchases. The Tie Bar and CWDKids.com do a great job of selling entire outfits and collections. They have interesting approaches to the product detail page.

Tie Bar
thetiebar

CWD Kids
CWDkids

Product Reviews

 

Q: Do they really work?

A: Yes, they work – most of the time

 

Videos

If you don’t have video now because it’s too expensive start with a handful of your best selling products to create some videos that review and display your product. You can even pull a Zappos and record a product video with your iPhone and a fellow employee showing the item off. Talking about it casually.

Videos are great because they add another dimension that photographs can’t. It gives the viewer perspective when they can see someone else holding, using or wearing an item.

I think it’s worth everyone’s time to at least test video on a handful of key products and measure the impact on add to carts and conversion rate for those items.

Up-Sells, Related Products, Cross-Sells

With all of the other stuff that you need to display on a product detail page, how do you even think about putting other products on the same page?

If you have an existing site I’d start by seeing how often someone clicks on one of your related items and/or up-sell items from a product detail page. This will help you gauge its importance to your users.

Note: Watch for false positives in testing this. If your page is particularly bad, your visitors may not even notice the up-sells.

There are a couple of different approaches you can implement:

  • Tabs
  • Right side
  • Under the other important stuff

But remember to ask yourself:

  1. How do you choose which products to display?
  2. What products are cross-sells or up-sells and what are related products?
  3. Does it even matter how you use them?

70+ Examples of Product Detail Page Design

We’ve collected 70+ screenshot examples of product detail page designs of mid-sized retailers from Internet Retailer’s Second 500 list. We’ve also included examples of great sites from which we pull inspiration from. If you’d like to check them out, click the button below to download our free guide on Product Detail Page Design.





Download Guide Here