WEBSITE DESIGN GUIDE - PROVIDING CLEAR AND USEFUL PRODUCT INFORMATION

Support the visitor in learning more about the product by prominently displaying its most impactful information, by writing benefit-led descriptions and by providing final reassurance through reviews, trust seals and returns information.

CONTENTS

 

1. INTRODUCTION

 

Return to contents

Once a visitor has found a product they like the look of, they can select it to move on to the product detail page.

Getting a visitor to this stage in the purchase journey is good progress, but your job is by no means complete. The visitor will now be at the stage where they are looking for all the information they need to properly evaluate the product, and where the majority of their buy/no-buy decision will be made. As such, this page needs to give the visitor as good an experience as possible to encourage them to make a purchase and, hopefully, encourage them to revisit the site in the future.

In this guide we are going to work (roughly) top to bottom through the product detail page and explore:

  • Use of media (imagery and video).

  • The key information that visitors expect for all products (for example price, delivery information).

  • User inputs (for example add to basket and size or variant select).

  • The product description.

  • Providing added reassurance (through use of reviews, FAQs etc).

As in the previous guide, there is a lot to cover here but potentially more that you can action and implement. Changes to core store functionality and page layout may remain infeasible, but many improvements can be made by carefully considering the needs of the visitor and writing and structuring information effectively.

 

2. THE USE OF MEDIA

Return to contents

Up to this point, visitors have likely had to base their initial interest on relatively small thumbnail images of your products. Although this has allowed visitors to evaluate your products to a degree, they now need a much better view of them to ensure that what they have selected is suitable for their needs.

Imagery plays an incredibly important role in many purchase decisions. Whilst we can write nice things about our products in the product description, a good proportion of your visitors are never going to get that far down the product detail page, and will reject the product based on its looks alone. Most of the time, that’ll be because they don't believe the product will meet their needs - our job is to eliminate the occasions where a product is rejected because it is poorly represented or doesn't give the visitor a good enough view to make an accurate assessment.

In order to avoid that problem, there are a number of things you need to get right on your product detail pages:

  • Image size. The product imagery should take up a large proportion of the screen (around a third) on big screen devices (desktops, laptops, tablets) and all of the screen on mobile, allowing the product detail to be fully seen and appreciated.

  • Zoom functionality. To further help visitors assess the finer detail of the product, they need to be able to zoom into the images. This can be done in a few ways - automatically zooming when the cursor is hovered over the image, requiring a click to zoom or providing zoom buttons and controls. What’s most important is that it's obvious to the visitor that zoom is available to them, and that they can quickly see how to go about using it.

  • Image quality. As we’re allowing the visitor to zoom, we need to have images of high enough resolution that, when zoomed into, remain crisp and sharp.

  • Enough images. The visitor needs to be given a wide enough variety of images to be able to assess the product’s suitability. This means different angles, technical images and shots of the product being used (or otherwise in situ). All of these images need to add something to the visitor’s understanding, by focussing on a different bit of detail or by showing the product in a different light. There is a temptation to provide as many images as possible, but don't - carefully select the 4-7 that provide the greatest value so as to not overwhelm the visitor or bury your best ones.

  • 360 degree functionality. If at all possible, giving visitors a 360 degree view of the product is often valuable, allowing them full control as to how the product can be viewed. The reality, of course, is that this isn’t always an option as taking these photos requires technical know-how, time and money. If this function is available to you, consider where it will add the greatest value and where your investment will be most beneficial.

Once you achieve these things, you’ll be well on the way to creating an effective product detail page that meets the needs of the majority of your visitors. However, providing a video of your product can often set a great product detail page apart from a good one. Static images can help the visitor up to a certain point, but video often gives them a whole new level of understanding. This video could be relatively basic (for example providing a 360 view as above, or showing clips of the product being used), a piece of marketing collateral (for example communicating all of its benefits) or discussion about the product (for example, a review or tutorial).

I’m not going to dwell on how to film effective video because there are lots of great resources available online (and I'm no expert in that field). If you’re going to upload videos, then have a good read through these resources to ensure what you’re providing actually adds value.

 

3. KEY INFORMATION

Return to contents

With imagery in place, it's time to consider what information needs to be shown directly alongside it.

To quickly cover off a few essentials, all products should have:

  • A full product name, in easy-to-digest, visitor-friendly language. 

  • The price, alongside any markdown, deals and offers.

  • An indication of product availability - making out-of-stock products immediately clear. We’ll properly cover how to handle out-of-stock products in a second.

  • An average customer rating if available. Again, more on this later.

This is the minimum information that a visitor will expect, but there are a few more things that are great to include if you can. The first is more helpful information on out-of-stocks. When are the products expected back in stock? Are there any other variants, sizes or colours that are in stock? Is there a way the visitor can be notified when something arrives back in stock?

The second is delivery information. Amazon is great at this because it indicates when the product will arrive if ordered now, how long there is left to order to guarantee delivery by a certain date, and all available delivery options, timings and prices. This is important because delivery has become a battleground for online retailers and can often sway the purchase decision in favour of one provider over another. If your visitors can't even see your delivery proposition then it's going to be very hard to compete on occasions when this is important.

Thirdly, returns information is often sought before deciding to make a purchase. How does it work, what are the available options and how much does it cost? This is increasingly expected, particularly in categories where return rates are high (such as fashion).

Fourthly, if you are selling a big-ticket item (for example high-end technology, furniture and so on), what payment terms are available? This doesn't mean what cards are accepted (most visitors will presume you accept their credit or debit card), but is a credit or finance facility available? If so, how much does it cost, how long is the credit period and where can more information about it be found? Remember; this page is all about giving the visitor everything they need to make a decision, and the product’s affordability also falls into this.

Fifthly, be careful when attempting to cross-sell using ‘visitors also viewed these products’ functionality. This is one common way to try and boost average basket size, but it shouldn’t distract the visitor from their current mission (assessing that specific product). Of course, this functionality can actually improve the visitor experience by providing information on use-cases or complimentary products, but it’s all too often applied with little other intention than to sell more.

 

Finally, it's important to keep everything clutter-free and easy to digest. Although there is a lot of information to provide, the rules we’ve already discussed around content, navigation and design all still apply here. Make sure to hold yourself to high standards as we don't want to give the visitor any reason to drop off this page.

One potentially conspicuous omission from all of the above is a product description. That is because not all sites agree where on the page this should be displayed. Some have no description above the fold (and much more detail below it), some have detailed information above the fold and nothing below it, and others adopt a hybrid approach. Ultimately it's down to your preferences on how you want this page to look. My advice would be that if your products aren't easily understandable from the image alone (for example some technology, experience-based products or food and drink) then you need to have your core description higher up on the page. What's ultimately important is having a good description somewhere. We’ll cover how to write an effective description later on.

 

4. USER INPUTS

Return to contents

The most important user input to consider is the ‘add to cart’ button - which should be available and visible at all times. Luckily, this is relatively straightforward to achieve:

  • Make sure the button is large enough. Small buttons don’t stand out and are hard to click/tap on smaller devices.

  • To further boost visibility, use a button colour which is distinct and contrasts with the background and the rest of the page.

  • Keep the language on the button simple. This isn’t the time to try and communicate something about your brand by being quirky or different. Stick to the highly recognisable ‘add to cart’, ‘add to basket’ or ‘buy now’.

  • Position it on the right-hand side of the image, below any variant/size select options. Always, always make sure it is above the fold (or on mobile as high up as possible).

Beyond this, there are a few other common types of user input on product detail pages.

  • Style/size/variant selection. The most important thing here is to make different variants visible. To do this you should display all options on the page, rather than within drop-down menus, for the visitor to clearly see. Marks and Spencer (a UK-based retailer) offers a good example of how to concisely show which sizes are available for purchase, and allow the visitor to select the one that’s right for them:

  • Social sharing. Most visitors aren’t coming to your site to share your products with their friends so consider this when deciding if, and how, to implement this feature. It might seem a harmless addition, but it should never come at the expense of the overall experience, for example by taking up too much space or taking up the most important space

  • Product comparison. If you sell products that typically get compared directly against others, try and provide a comparison function. It is possible to do this ‘manually’ by displaying static comparison tables within the product description, but the best solution is a dynamic, visitor-controlled product comparison functionality.

 

5. PRODUCT DESCRIPTIONS

Return to contents

We’ll now cover the product description; the written element of the product detail page that tells the visitor exactly what they need to know about that product.

If your site is selling products made by other manufacturers, they might well supply you with a product description you can use. This is certainly a good start, but it should be just that; a start. That description was written for their average buyer and will benefit from you tailoring it for your brand and your visitors. Some of the time only small refinements will be needed, other times larger ones will be.

In either case, let's look at what information you need to provide. Firstly, you should begin with a simple and factual description of what that product is, for example a blue and white striped shirt or a 42” high-definition TV. This opening sentence should tell the visitor at least 80% of what they need to know about the product and will quickly confirm to them if they are in the right place or not. To that end, it should be kept as concise as possible without leaving out key aspects of what makes that product that product. For example, in describing the shirt you might also want to include the material and who it is for. For the television, you might include the brand and whether it supports 3D or not.

Secondly, the visitor needs to see a list of benefits to buying that particular product. Visitors aren't interested in your suff, only in what that stuff can do for them. It is easy to just write a list of product features and call it a day, but you really need to raise this a level higher and think about the actual customer benefit. For example, the shirt might be non-iron but its benefits are less time wasted ironing and always being able to wear it straight out of the wash. The high-definition TV might have an incredibly high pixel resolution, and many buyers in the category will still want to know this, but the broader benefit is having a crisp picture that delivers an immersive, cinema-like experience.

Of course, it can be hard to turn every feature into a highly compelling benefit. If that is the case, then that is a good indication that it might not need to be front and centre in the product description. Instead, it can potentially be included in a separate round-up of any technical information or other specifications. For example, visitors might want to know what temperature the shirt should be washed at, or how heavy the television is. This information is still important to include, but should come below the key benefits.

That broadly summarises the content that needs covering, but before we move on there are a few guidelines about how it should be delivered. Some of these will be familiar to you by now:

  • Think about ordering - with the biggest or most commonly-sought benefits at the top of the list.

  • Make it concise, and avoid using large blocks of text. Visitors are looking for information but they are still human (and typically lazy) so want to avoid expending effort wherever possible.

  • Use imagery to break up your text or better explain key benefits (if this imagery adds value).

  • Use visitor-friendly language that is pitched at a suitable technical level for your visitors. Avoid jargon and terms that only a minority will understand, or bundle this information into the technical specification if it is likely to be sought. 

  • If relevant, guide the visitor as to what they actually need from a product of this type. For example, a computer might contain a high-end processor and graphics card, but who is the typical person that might need those things and what do they deliver above lower-spec versions?

  • Write in a tone of voice that is consistent with your brand and the rest of the content on your site.

  • Use tables to structure your information where relevant.

  • If appropriate, offer comparisons to other products in that product’s close competitive set. This is typically done in table form with this and other products running across the page in columns, and different dimensions (eg price, benefits and technical criteria) making up the rows.

 

6. PROVIDING ADDED REASSURANCE

Return to contents

Finally, once the visitor has seen all of your images and videos, the product’s description, its benefits and your delivery and returns policy, they might still require a bit more reassurance before making a purchase.

We've already stated how an average product rating, if available, should be shown at the very top of the page alongside key information. Further down the page is typically where the detail that underpins the product’s average rating is shown. 

 

Building an effective review system is hard, and many brands (even large ones with lots of resources) struggle to achieve it. It requires a real commitment to building a critical mass of reviews as quickly as possible, as review systems with low visitor participation might actually be damaging to the experience. This is because products with only a few ratings might be considered to be unpopular (hence the low number of ratings). There is also a danger of having an unstable product rating until it has reached a higher number of reviews.

Achieving this critical mass is definitely the hard part, but once this is done there are still a number of things that go into creating an effective and trustworthy review system:

  • Impartiality. Both good and bad reviews should be given the same prominence, and bad reviews should never be hidden.

  • Moderation. Reviews should be vetted for quality, profanity and manufacturer manipulation (easier said than done).

  • Search. Reviews should be searchable by rating or keyword.

  • Multi-attribute. With some product categories, for example holidays, it is appropriate to provide product ratings across a number of dimensions - for example hotel facilities, value for money and friendliness of staff.

  • Reviewer demographics (for example age, gender, region). This helps the visitor get a sense of how suited the product might be to someone like them. The best review systems will allow visitors to filter reviews based on these demographics - for example, only showing reviews written by people with children. 

 

If you can't include a customer review system, it is still beneficial to display other pieces of information that could give the visitor some added reassurance before their purchase. These could be seals of approval (known as ‘trust seals’), links to product reviews on third-party websites, or industry accreditation. They could even be things that are more functional about the website, for example the site’s security compliance. These can have a massive impact, so if you have any then get them up.

Finally, visitors need to have easy access to help and FAQ content. Relevant content could be linked to, or even shown on the product detail page itself. Some sites have customer-submitted FAQs and answers, but this isn’t always done for visitor experience related reasons. Amazon, for example, likely use this because its product range is so large that it would be far too costly to write its own content for its entire range. However, if you have a small enough range then you can manually compile this information based on what you know about the product and about your own visitors.

 

7. PUTTING IT ALL TOGETHER

Return to contents

So there you have it. The image below showcases one way this might look when it comes together on large-screen devices.

The above layout should, of course, be treated as a guide - there are many other valid ways of doing this. What is important is that the content is there, in a sensible order, and it educates and benefits, rather than overwhelms, the visitor.

 

8. CHECKLIST

Return to contents

  1. If employing specific tactics to boost conversion, consider how they might negatively impact on the visitor experience.

  2. As with all parts of the site, give specific consideration to how this page looks and behaves on mobile.

  3. Display images prominently - ideally taking up about a third of the screen on large-screened devices.

  4. Provide a sufficient number of alternative images of the product and, ideally, 360 degree image functionality.

  5. Ensure imagery is high resolution and is accompanied by zoom functionality.

  6. Strongly consider the use of video to better allow the visitor to assess the product.

  7. Prominently display the product name, price, availability, average rating and any user-required inputs.

  8. Help visitors cope with out-of-stock products by advising when they are due back in, showcasing in-stock variants and providing ‘notify me’ functionality.

  9. Highlight delivery, returns and payment information high up the page.

  10. Take care that any ‘also viewed’ functionality improves the visitor experience rather than just being there to to cross-sell.

  11. Make user inputs large and visible and titled using simple language.

  12. Take care that any social sharing functionality does not get in the way of more important information.

  13. Implement either dynamic comparison functionality, or static comparison information in the product description.

  14. Start your products’ descriptions with a short sentence that explains the majority of what the visitor needs to know about them.

  15. Ensure product descriptions are benefit-led rather than a simple list of features, with the most compelling or commonly-sought benefits at the top.

  16. Provide a summary of technical information to showcase things that visitors want to know but aren’t necessarily key benefits.

  17. Write product descriptions in simple, visitor-friendly language that is consistent with your brand’s tone of voice.

  18. Avoid large blocks of text in the product description - leveraging images and tables to break up or more effectively communicate key information.

  19. If using a review system, take all steps to ensure it builds to a credible mass of reviews, and is showcased in a fair and impartial way.

  20. If using a review system, allow visitors to search or filter the reviews.

  21. Display trust seals, or other pieces of appropriate information, to provide visitors with further re-assurance.

  22. Link to the help page from the product detail page, and display visitor’s FAQs.

Found this content valuable?

Want to get in touch?

Contact us by email or Twitter.