February 22, 2023
•
What does best-in-class look like? We’ve gathered expertise from our Product Owners, UX and UI Designers and more, and distilled it into this handy guide. So, grab a coffee and learn how to create a great user experience, what impacts e-com brands’ websites and business performance and how the little things can make a big difference.
First up, we’re focusing our attention on the product page layout, arguably one of the most important aspects of a ‘best-in-class’ product page. Depending on your product, branding and level of detail needed, the product page can make all the difference in creating an excellent user experience and converting browsing into a sale.
There are typically four product page layouts that are used regularly and that you’ll recognize. Each of the four predominant product detail page (PDP) layouts has its own pros and cons, which we’ll explore below.
This layout is perfect for products that have a lot of information, as the tabs can be used to reduce the length of the page. Rather than scrolling, customers can click on the relevant tab to find the information they need.
However, using any more than three tabs means things can be missed when viewed on a mobile, as the user would have to scroll to find them. What’s more, the character count limit may restrict the usefulness or quality of the information and copywriting style. Finally, this layout can look a little old-fashioned.
This desktop-focused design allows website users to easily jump to, or between, sections on the page through the use of a ‘sticky’ table of contents. However, the TOC’s placement can make or break the success of this layout.
When placed low down on the product page, sticky TOCs are prone to being overlooked. To combat this, ensure the TOC is placed high up, ideally within the browser fold and integrated with the ‘reviews shortcut’. This way, users are able to see the in-page navigation from the moment that they land on the page, and the TOC becomes ‘sticky’ from early on.
If you choose to place the TOC below the middle of the page, it’s worth noting that most users spend considerable time on the initial inspection of the product images. This means that it can take several minutes before users scroll down far enough to even see the table of contents, so a high-contrast design that isn’t too tall will also go a long way in bringing users to the TOC faster and ensuring it catches their attention when they reach it.
Another thing to take into account is that visitors should be scrolled smoothly to the different sections, to ensure a positive user experience. Nobody likes a jumpy webpage! The ‘sticky TOC’ design has to mitigate the issue that users may not understand the concept of being ‘jumped around the page’ at all, so including a clear copy line such as ‘Jump to X section’ within the table will help.
Finally, section titles also need to be clear and concise to avoid being needlessly misinterpreted.
This is the most popular layout right now, and our personal favorite.
Firstly, it combines the brand’s knowledge of their customers with any information from market research to determine what they’re looking for. By asking customers why they shop there, what makes them purchase and what makes them come back, all the information can be considered to create collapsed sections that cater for different user journeys. In turn, this allows the user to quickly find and self-select what they’re looking for, as long as the sections are clearly labeled.
Secondly, this layout does the best job of accommodating ‘tricky bits’ on desktop and mobile, meaning that miscellaneous but handy information (such as product specifications) has a place to live.
However, in cases where the collapsed section is simply a drop-down to one word or sentence, or if it's a simple product that doesn’t require a collapsed section, then one long page is better.
This is the original (but not necessarily the best) product page. It’s suitable for non-’frilly’ brands with simple product(s) that don’t require lots of copy. In fact, one long page could be one short page, depending on the brand.
However, you may want to place more emphasis on the ‘Add to cart’ button to ensure it doesn’t get lost on a long page. Consider repeating the button in multiple places, making it ‘sticky’ on mobile or implementing an eye-catching design.
Next up, we’re taking a deep dive into product images. Product images take up so much of the visual space that they set the tone for the PDP, making them integral to the customer experience. The different product image types that users need are largely dependent on the brand and its products. However, there are a few aspects that apply to everyone.
It’s important to maintain a consistent photography style, as changing it can alter the whole feel of the site. Consistency across product ranges also helps shoppers to easily compare the products, too. For example, if a t-shirt was pictured as a flat product shot and another was pictured worn by a model, it would be difficult for a customer to know whether visual differences were due to the photography style or the products themselves.
It goes without saying that the product images should be representative of the product. Of course, the product should be displayed and photographed in the most visually appealing way possible, but it still needs to be true to life. Detail shots are always helpful, so customers can get a good feel for the material, details and any unusual features.
Videos are useful for this too and perform well because they give the customer a more ‘real’ sense of the product. This is especially true for things like clothing (so viewers can see how it moves) and cosmetics (so viewers can get a feel for texture and how the products interact with the skin). If you’re selling hard goods, show movement through hands to give customers a sense of size and scale, and to help them understand how to use it.
We’d recommend at least 3 images per product, especially when it comes to clothing. You could even take it a step further and allow users to select their size (e.g. 8/10/12) and then only show them product images of models wearing that size, as shown in this brilliant example by Commonry. This gives shoppers a better understanding of how different products look across different bodies.
The user interface refers to the aesthetic elements, such as buttons, icons and tabs, by which users interact with the product. So what features should be included in an image gallery UI?
Best practice and best in class can differ with this, sometimes depending on how much content there is. But, it’s generally agreed that the top three must-haves are:
There are plenty of other ways to enhance an image gallery UI, too. You may want to consider the type of product and age of users to determine how best to display the images. For example, an older, less tech-savvy audience browsing on desktop may appreciate thumbnails to represent additional product images. These can be placed next to or below the large product image, so the user can clearly see that there’s more to look at.
All site-provided product images should be included in the main gallery and a carousel navigation is helpful to move through them.
Obviously, all the images should be of a sufficient resolution, and the default product image should be enticing and visually rich. Consider using a hover-based zoom rather than a click-based one, as this is easier for users to notice and control.
Once the image gallery UI is sorted and populated with high-quality images, product videos and 360 views will enhance the PDP even further. For a seamless customer experience, it’s best to incorporate them into the image gallery and implement features that allow customers to control the content.
Videos should be ‘click to play’ rather than autoplay, for a few reasons. Firstly, you don’t want users to exceed their data plan (which may be too limited to accommodate videos). Secondly, you don’t want to slow the site down (especially on mobile). Lastly, users may prefer to view or read static information rather than watch videos. It’s for this reason that you should avoid adding music, too - having your phone suddenly blaring out at you while you’re on the bus can be jarring.
Something else to think about is how the user can navigate around the 360 views. On mobile, allowing the user to drag around the image with their finger is super easy and intuitive, while on desktop, a click-and-follow mouse function will do the trick.
As the name might suggest, this essential section includes elements that enable shoppers to buy products they’ve been eyeing up. This includes (but isn’t limited to) ‘Add to cart’, prices, discounts, quantity field, out-of-stock items and save features. It’s important that these elements are displayed together as they’re often dependent on each other. For example, if users select a color for the product and that color is out of stock, they need to be able to see this clearly.
Best-in-class pages indicate which items are pre-order and which have longer shipping times and clearly show when an item is out of stock, with a ‘Notify me’ feature so that customers can be notified when the item comes back in. Whilst the ideal PDP would use swatches to display aspects such as sizes, drop-downs can be used in instances where there are excessive variants to avoid displaying overwhelming blocks of information.
A client that does this well is Pangaia. They specify whether the item is in or out of stock next to every size in each color option, and offer a ‘Notify me’ service for those items which are out. This helps to mitigate the disappointment of finding your dream product and being unable to purchase it there and then. You could even go one step further and immediately follow this up with relevant alternatives to capture a potential lost sale.
With shipping, returns and gifting policies often determining whether shoppers commit to purchase, this info should sit by the ‘Add to cart’ button so it’s easy to find, avoiding any customer frustration. Be sure to include links to additional information where needed, too. Lovers nest their FAQs in the cart, so that shoppers can get answers without having to navigate away from the page.
Offering third-party payment options such as Paypal and Klarna can be decision-making factors too, so having this clearly displayed before shoppers part with their hard-earned money is sure to up those conversion rates. Take a look at how Klarna’s simpler buying process leads to more loyal customers and fewer abandoned baskets.
As mentioned in the image gallery UI section above, users should ideally see different images depending on which product size they select. Being able to choose product colors is a must, too, with them displayed as a swatch gallery.
Of course, accurate stock information is integral to avoiding customer disappointment. Shopify helps clients keep an up-to-date stock list so that the website can display which items are selling fast or low in stock.
By switching out the ‘Add to bag’ button for ‘Notify me when available’, Skinnydip London mitigates the negative ‘Out of stock’ messaging and helps to build anticipation of the product amongst their shoppers. Those who clicked the ‘Notify me’ button will receive an email via Klaviyo when the product comes back in stock.
Product descriptions are a really valuable bit of real estate when it comes to selling your products. When done properly, they can sell the product to your customers in a way that isn’t achievable with images alone.
You’ll need a concise overview of the product, with a bullet point list of key features. This ensures that straight away, shoppers are seeing the most important information rather than having to scroll or scan lots of copy for it. Longer info can be added further down the page, once the reader has been enticed.
Depending on the brand, you may want to explain where the product or materials to make it came from, and how it’s made. This gives the customer a sense of the quality and craftsmanship behind the products, making them more likely to part with their money. A brand that does this well is This Works, who pull out key ingredients from their ingredients list and pair them with delicate illustrations to bring them to shoppers’ attention. It also helps to break up an otherwise dense block of copy and make it more digestible.
This technique of breaking copy up with visual assets would be helpful for any info-heavy products.
Whether to include a specifications sheet depends on the product. Most shoppers are more likely to look for details in the product description itself, but if the materials, weight or qualities of the product are of particular importance, then a spec sheet should be included. For example, watch or jewelry brands such as A Collected Man and Paul Valentine are likely to include a spec sheet for each product.
It’s wise to include spec sheets if your customer base is made up of ‘collectors’ or those who are making a ‘big’ purchase, as they’re likely to want to know the ins and outs before committing to an expensive product. Pure Electric displays spec sheets on product category pages so that shoppers can easily compare products and decide which is the right one for them.
When it comes to how much information to include, anything that’s going to help customers make a decision (that they can’t get from images alone) is worth putting in. Spec sheets are really useful for technical products which allow customers to compare how they’ll use them, or for brands which have lots of similar products, such as Lululemon.
Reviews and other forms of social proof are absolutely integral to getting those all-important conversions. In the words of Baymard, “User reviews aren’t merely “important” — they are critical to users’ confidence in the suitability of a product and their ability to arrive at an informed purchase decision.”
In fact, Prospect Genius found that having one negative review is better than having no reviews at all, because it at least proves that you’re a real business with real products, rather than a scam. It also reassures Google of your authenticity (which helps to increase your local ranking) and shows that the product has been tested… nobody likes to be the guinea pig!
What’s more, for products where there are lots of positive reviews and no negative ones at all, shoppers can become suspicious that the reviews aren’t genuine or that negative ones are being omitted. So try not to worry too much about a couple of negative comments - what’s important is that the reviews are there.
What you have to consider next, is how best to display them. Baymard found that “During a large-scale usability testing, 95% of users relied on reviews to evaluate the product or to learn more about the product.”, so they need to be clearly visible on the PDP and easy to navigate. Beauty Pie allows users to filter the reviews by the reviewer’s age and skin type, as well as the rating they gave, so shoppers can find reviews which will be most relevant to their concerns. They can also sort the reviews, for example by ‘Most Recent’ or ‘Most Relevant’.
The design can depend on the review platform itself. Some review apps such as Trustpilot don’t let brands customize, so as not to detract from the independent, unbiased aspect of the platform. However, many review apps can be styled up to match the brand guidelines. ASOS has taken the latter approach, with reviews that match their overall aesthetic, plus simple iconography and handy slide bars to allow customers to gauge quality and fit at a glance.
ASOS could improve their reviews further by allowing shoppers to filter based on specific sizes or colors, to give them a feel for whether the products are true to size and if the product images show the color accurately.
On the hunt for a review/social proof solution for your brand? There are three platforms that we hold in particularly good stead. One is Yotpo, which does a fantastic job at collecting reviews (e.g. with automated review request emails following a customer purchase) and then leveraging them across the site, from homepage all the way through to checkout, to turn customer content into sales.
The second is Okendo, which showcases UGC beautifully, with stunning media galleries of customer photos and videos. Being able to push reviews straight to Google and Facebook is another very handy Okendo feature.
The third is Nosto, which has a neat visual UGC solution that combines the power of UGC with personalization. They enable merchants to curate UGC from a number of social networks (over 25, to be precise!) and then display it as shoppable images across key e-commerce pages. With Nosto’s strength being e-commerce personalization, their on-site UGC galleries can be customizable to each customer, with the content adjusted to shoppers’ buying preferences—then A/B-tested to find the optimal mix.
With Forbes stating that 81% of purchase decisions are peer-influenced, Visual UGC is a great way to lend the product page authenticity and credibility for better engagement and conversion at lower costs compared to brand-generated content.
On PDPs, auxiliary content refers to any sections below the main product information and may include a video, the brand’s Instagram feed (which serves as social proof) or related blog posts. This content sits below the main product information because if a customer is still scrolling down the page, chances are they haven’t been fully convinced to buy the product and need more information or persuasion.
For a best-in-class product page, auxiliary content captures customers that may otherwise leave the site and pushes them somewhere else within the site that may still result in a conversion. A good example of this is Selfless by Hyram, a skincare brand dedicated to creating social change in the world. Through linking to relevant aspects of their brand story on the PDPs, Selfless by Hyram encourages shoppers to purchase their products by showing how their sales have a positive impact.
To strike a good balance between providing enough information without overwhelming the customer, we’d recommend that, where relevant, auxiliary content should include:
This should be displayed in a mixture of product content and brand content, to let the reader know not only about the product, but why they should buy from your brand in particular.
It’s no secret that cross-selling and cross-navigation are great for increasing customers’ average order value. The challenge is how best to present this in order to get their attention without the use of irritating pop-ups or otherwise frustrating the user. Let’s explore some ways to get around it.
Ask yourself what you’d want if you were the customer, and pre-empt that. Being greeted with other suggested products after just completing a purchase can be frustrating because customers won’t want to go through the checkout process again or pay for shipping twice. Instead, consider which products go hand-in-hand and flag this up on the PDP. For example, This Works encourages shoppers to ‘complete the routine’ by suggesting other products which help tackle a similar concern to the product they’re currently looking at.
This messaging also works well within an Ajax Cart (or similar) - a pop-up mini cart which allows users to continue shopping or check out, without navigating away from the product page. Pangaia does this really well, by prompting shoppers to ‘Mix & Match’ with other items that would work well with the one they’ve added to their cart.
Girlfriend Collective are another brand who has taken this approach, by nesting related products under the ‘Add to cart’ button.
In short, cross-selling and cross-navigation are the e-commerce equivalent of a sales assistant recommending a related product to you in a brick-and-mortar store. By adding the “You may also like” or “Recently viewed” sections towards the bottom of the PDP, you’re giving customers a relevant alternative, which will reduce bounce rates and increase conversion rates.
Best-in-class product pages enable customers to quickly find what they’re looking for, and navigate around the information with ease. This is achieved with carefully considered page layouts, clear copy and user-friendly navigations such as carousel media galleries.
Allowing customers to refine content based on what’s relevant to them is essential too, whether it’s product images in their particular size and preferred colors or being able to filter reviews to learn about the particular products they’re eyeing up.
Imagery that accurately represents the product and gives the customer as much detail as possible shouldn’t be forgotten and is best showcased with 360 views and videos. The overall aesthetic should be consistent across the site and ideally, that aesthetic will apply to reviews too. Don’t forget to check out platforms such as Yotpo, Okendo and Nosto to style reviews up to match the rest of your website design.
And finally, let’s not forget about auxiliary content, cross-selling and cross-navigation, which keep the customer browsing your store until they find something they love, ultimately resulting in those all-important sales.
If you think your product detail pages could do with a little TLC, we’d love to help.
