In the article you’ll find:

• What a standard product page should look like
• The main pillars that form a good product page
• The product description as the basis of the website
• Why and how colour psychology will help you
• The basis of conversions = CTA
• A list of the most important elements of a quality product page

A product page describes a specific product or service on the web. On the product page, customers usually learn all the necessary information about a specific product that will influence their purchase decision. A correctly set up product page can even increase the conversion rate¹ of the web page.

What does a standard product page look like?

Many product pages are constructed based on the same pattern – for example, product photos are on the left and product information and buttons are on the right.

Thanks to these common layouts and mechanisms, users can more easily orient themselves on a product’s details. This doesn’t mean, however, that all product pages should look the same. We recommend sticking to a generic interface that you can liven up with various creative elements.

Basic pillars of a quality product page

Offer customers a realistic idea of ​​the products

Our brain transfers visual information faster when compared to text. Product photos are an ideal way for e-shops to enable customers to better understand the product.

OpiTip: Images, together with correctly filled ALT texts, are a supporting effect for SEO.

Absence of “In Scale” photography

A stumbling block is often a lack of “In Scale” photos, which enable users to determine the size of the products they are viewing online. This issue affects up to 81%² of e-shops. High-quality images and videos from different angles help customers better imagine what the products are for.

In the case of an e-shop with clothing, use photos with models wearing the given product. For larger products, such as large appliances, provide photos of the appliance in a space.

Focus on a valuable product description

The product description is the foundation. Words like discount, free shipping or a feature, which differentiate the product from the competition deserve to be visible right from the start.

Stick to the concept of scanning, however. People don’t read content; they scan it. Add the main benefits of the product in the first three words and don’t forget to maintain the F-pattern³.

What about abstract information?

For so-called abstract information, such as weight or smell, textual descriptions are ideal. Some  52%³ of e-shops have a problem with abstract product information.

This foreign website has abstract elements well described and visually represented.

Don’t just rely on text descriptions, however. By combining images and descriptive texts, you are guaranteed success with users. Make sure that photos and text are compatible with all interfaces (desktop, mobile…). For graphically modified photos, we recommend checking whether the text in the graphic is sufficiently legible before publication.

OpiTip: Also think about SEO as part of the optimisation of the product page. Focus on topics associated with products that are searched for. Before you focus on volume, it is important to consider relevance, namely what really contributes to successful conversions.

Do not underestimate the psychology of colours

In general, the 60-30-10 rule recommends using 60% dominant colour, 30% secondary colour and 10% accent colour on your website.

Of interest is the fact that up to 42%⁴ of customers evaluate a store based solely on design, while 52% do not return to a site because of its overall aesthetics.

Colours should have sufficient contrast, so it’s a good idea when creating a page to use colour blindness testing tools. The sooner you remove this obstacle, the better. The following tools can also help you, thanks to which you can ensure the accessibility of the website for all visitors:

• Blindness simulator,
• Contrast ratio checkers,
• Colour contrast checker.

Also think about visually impaired users, who number some 2 billion⁵ people. Such forms of disability can include not only total blindness, but also various forms of visual impairment that affect their ability to perceive and interact with digital content. You may therefore encounter with a customer:

• Blindness
• Loss of central vision: the ability to see only peripherally
• Blurred vision
• Colour blindness: the inability to distinguish colours
• Contrast sensitivity: the inability to distinguish objects from their background
• Impaired visual acuity
• Weak lighting: poor perception in low light conditions
• Retinitis pigmentosa: the ability to see only a narrow area in front of you, i.e. “tunnel vision”

When creating a web design, it is important to implement approaches that allow people with visual impairments to use your website effectively. This includes optimising colours, contrasts, text and graphics to make them accessible to all users.

CTA buttons as the basis of conversions

We can define a CTA as a graphic element that prompts users to perform a specific action. Typical buttons are, for example, “Buy” or “Learn more”.

CTA buttons are key for increasing the conversion, in our case the final purchase. This is why they must be visible and distinctive. A poorly designed button can lead to high bounce rates.

OpiTip: Do not neglect the correct choice of CTA button colour. Don’t combine a large number of button colour combinations across the site. Colours should resonate with your brand identity and evoke the desired emotion or incite the desired action. In addition, it is important to have sufficient contrast between the CTA button and the surrounding design to make the button easily visible and usable for users.

Present product prices clearly

Customers will have a negative perception of the entire website due to the poor visibility of a product price. Poor transparency of prices is also influenced by these factors:

1. Prices and discounts merge with other elements of the site.
2. Discounts are not placed on the product price.
3. Multiple display of actions on a product page.
4. Insignificant sale percentages or discount amounts.

With products sold in multiple quantities, provide information on the unit price. Up to 88%⁶ of e-shops do not display this information. The absence of a unit price can make it difficult for users to assess the actual price. In the B2B sector, this complicates the sale of bulk orders, which increase the average order value.

Reviews – the holy grail for customers

We can label reviews as one of the most important elements of a product page’s content. Most customers⁷ read reviews from other buyers first when looking at products. Try to respond particularly to negative reviews. You’ll show that you are really interested in the customers and especially those who have not yet made a purchase will see it.

However, the majority of e-shops require too much information for reviews, which is a burden for customers. Make it easy for customers to process a review. If you only require answers to relevant questions about the product, customers will be happy to leave you a review for free.

If, however, you’re having trouble getting reviews quickly, try these supporting activities:

• a post-purchase email campaign, where you offer customers a discount on their next purchase in exchange for their review can significantly increase your number of reviews;
• offer customers advantages for sending photos using your product, which not only stimulates the customer to engage, but you can also use these photos effectively in other marketing activities.

First and foremost, think about authenticity. Focus on reviews from real customers.

Communicate product delivery and returns transparently

Approximately 64%⁸ of users search for the shipping price, and 18% do not complete the purchase because they did not see the total price of the order in advance.

E-shops in general solve problems with the provision of information about delivery or return of goods. Let e-shop visitors know clearly the total amount, including shipping, already in the product detail. Suitable placement for this information can be right next to the “Buy” or “Add to cart” button.

Also, don’t forget to include additional costs for delivery – for example, the amount for oversized orders, or express delivery.

Display a link to a brief summary of the general return policy prominently on the product page (as well as in the footer).

Parametric tables

Users who look over technical specifications are usually well-versed in the field. Many of them are seeking answers to very specific questions. Several e-shops have problems with comprehensible display of technical parameters and don’t provide sufficient additional information on the attributes of technical specifications.

The solution is therefore to provide a list of parameters that are clearly separated and ordered. For an extensive list of parameters, set an adequate length – for example, group anything over 20 specifications into subsections. And don’t forget to distinguish with the use of bold or italics.

List of important elements for a product page from a UX point of view:

Product images:

• Actual sizes of the products in the picture – photograph clothing on models, appliances in real space
• Adding descriptive text or graphics – this helps customers better understand a product’s functions and features, for example water resistance.

Shopping section (“Add to cart” button)

• Visible product price – highlight the price either in colour or with larger numbers
• Simplification of the “Save” button – allow products to be saved, for example, without registration
• Displaying of the “unit price” – allow customers to compare price per piece for different quantities

Shipping and returns

• Total order price – provide customers with an estimate of the total price, including shipping
• Information on returns – make it easy for customers to find information on product returns
• Correct placement of information on “free shipping” – place free shipping right next to the buy button
• Expected date of delivery – if possible, inform about the expected date of delivery of the goods

Product specifications

• Extensive parameter tables – provide extensive and organised product parameters for a better understanding of the specifics
• Unification of specifications from suppliers – ensure uniformity of parameters, for example units of length
• Improve specification of parameter tables – use parameter terminology that customers understand

Product reviews

• Do not ask for personal information – ask the customer only basic information to leave a review 
• Negative reviews – not responding to negative reviews leaves a doubly bad impression
• Visual elements in reviews – convert reviews into stars and display them with the product price
• Video Reviews – video reviews provide greater authenticity, which your customers may appreciate
• Product recommendations – recommend product tips based on previous interactions on the e-shop

¹https://www.webfx.com/blog/marketing/case-studies-cro/

²https://baymard.com/blog/current-state-ecommerce-product-page-ux

³https://uxplanet.org/people-dont-read-online-they-scan-this-is-how-to-write-for-them-80a75069c14e

⁴https://www.ecommerce-nation.com/color-psychology-for-ecommerce/#rb-attract-online-shoppers-with-color-marketing

⁵https://www.who.int/en/news-room/fact-sheets/detail/blindness-and-visual-impairment

⁶https://baymard.com/blog/current-state-ecommerce-product-page-ux

⁷https://baymard.com/blog/current-state-ecommerce-product-page-ux

⁸https://baymard.com/blog/current-state-ecommerce-product-page-ux