Core principles for an optimized product page experience

This article serves as an introduction to a series of UX articles where we focus on how to optimize your product pages for the best possible experience. In this article we will explore how to build a foundation of trust that enables your visitors to feel confident when making a purchase decision.

Why product page UX is important

Your product page is probably the most important page on your website. Online shoppers entering your site from organic search will most likely never see the landing page of your webshop. Often times when they first visit they don’t know your company or what exact product they need. Hence your main priority should be to aid them in their search for the right product and build a foundation of trust so they feel comfortable making a purchase on your product page. It’s an extremely difficult task that puts most product pages under a lot of strain. In fact according to Baymard web usability research institute, 82 % of e-commerce websites have poor-to-mediocre Product Page user experience with an average of 26 structural usability issues.

In this article we will go through common UX problems to avoid and how to turn your product pages into landing pages that can provide answers to your visitors questions.

The fundamentals

Before diving into the more specific parts of the article let’s briefly circle around the fundamentals of good website UX. The following list should serve as a checklist to test on your current website before implementing more drastic improvements to the product page. In broad strokes, this is what you should pay attention to:

• Is the design and branding consistent across all parts of the website?
• Is it easy to find information about the company?
• Is the website fast and responsive?
• Is the website easy to navigate?
• Is the mobile experience of the website equally as enjoyable as the desktop version?
• Are all clickable elements easy to identify and do they react when you hover them?

All of these may seem trivial, but it is crucial that your website looks and feels good and secure to use. If the foundation is not solid whatever we try to implement to improve the experience will have little to no effect. So make sure that the website has a solid UX foundation.

Now that we have ironed out the fundamental UX issues, let’s get into some more specific product page improvements.

Consumer questions

Good user experience design is about building enjoyable, trustworthy, and easy to use experiences with your end-user in mind. In this section we will dive into the customer’s perspective by asking questions that will help us build better experiences.

What product am I looking at?

It is a simple question, and the answer is simple too. Basically we want to make sure that from the moment the page is loaded the visitor understands what product they are looking at. Make sure to cover the following in the top of your product page:

• Feature image. Your best bet is a simple product image with a white background and soft shadows. It should be positioned as one of the first elements of your page.
• Title of the product must be clearly visible above the fold.
• Main product category. Either as a tag with link or breadcrumbs. Breadcrumbs are an excellent way to let the visitor know where they are at while also displaying what category the product belongs to.

Pro tip: Try to force a fixed height/length on the text elements so the placement of the elements remain consistent across your website.

What features/specifications does it have?

In other words: describe what the product can do, in high detail. The goal is to make it easy for the visitor to make an informed decision without spending too much time. Make it clear where they can find the specifications and highlight the important features early:

• Short introductory description above the fold that explains the core features of the product. By keeping key information above the fold we ensure that the visitor can make an informed decision about the product without having to spend time looking for it.
• Separate detailed feature specification section below the fold that includes every possible detail about the product. The goal is to answer all the anticipated questions a visitor might have. Include a hyperlink to the section above the fold.

What does it look like?

One of the biggest challenges consumers face when buying furniture online is the fact that they cannot see or feel the product in real life. That’s why good visuals are crucial. You need to make sure that you can provide a sufficient level of visual confirmation for the customer to be able to make a purchase decision. This is what you should be focused on:

• Images with great zoom detail. The images should be zoomed in at a level where you can almost feel the texture of the materials to compensate for the lack of a tactile experience.
• Display the product from multiple angles. Make sure to cover all angles so the visitor feel confident that they know how the entire product looks.
• Display the product in context. While simple product images with white background and soft shadows help keep the product in focus, images of the product in context help sell the story of the product.
• Display the exact variation. Repeating the point from before, with no ability to see the product in real life it is important that the user can see every detail of the selected variation.
• Display videos of the product. Provides an even better understanding of the product.

Pro tip: Cylindo makes it a breeze to cover all of the above use cases and more.

What does it cost?

This should be straight forward, but more often than not consumers get confused by discounted product, additional fees and complicated shipping costs. Make sure that you are displaying the total price for the product.

• Make it clear if the price includes shipping
• Make it clear if the price includes taxes
• Display the total amount that customer should pay, without additional and or hidden fees.

Is the company / product what it claims to be?

How do we convince the customer that the product is worth buying? Why should they trust your company? After all they might not have experienced the product in real life. One of the best ways to help your customers mitigate these concerns is to build trust in your company as well as the product they are looking to purchase. Having strong social proof on your product page is a surefire way to do just that:

• Expose visitors to real experiences from previous customers through reviews and ratings and be transparent with what the average rating consists of. Use internal or external tools like TrustPilot to increase transparency about your company.
• Have community driven Q&A’s. This serves multiple purposes: It drives traffic to your site from search engines, it extends the product information with more depth and unanticipated questions and it helps validate the product claims made by the manufacturer.
• Have reachable online customer support. This not only builds trust, it also helps retain your visitors as it prevents them from seeking information elsewhere.
• Company core values. Embed a section that best explain your company’s core values.
• Have visible trust logos, badges & seals. Especially logos from Visa and PayPal are shown to improve the credibility (source).

What are the alternatives / what other products go with my product?

A common problem we often see is when a product page is trying to answer both questions in one go, often seen as the “other customers also looked at” segment. The problem with this approach is that it is not optimal at answering either of the questions.

As previously mentioned, users might end up on a product page through organic search and might not be entirely sure about what they need or what their options are. To help them we can apply two separate strategies: 1) display alternative products matching the current product in terms of category and style and 2) suggest complementary products.

The reason why we need to use both is because the two strategies serve very different purposes: Suggestions for alternative products help the visitor find the “right” product while suggestions for complementary products can help the visitor understand the breadth of your product offerings as well as enabling easy cross-selling. Apply these strategies:

• Add a section with alternative products, that match the current product in category and style.
• Add a separate section for complimentary products, that compliments the product they are currently looking at.

Pro tip: Be careful to only suggest compatible products. Visitors will expect that your recommendations are tailored the specific product they are looking at.

Conclusion

A good product page experience is all about establishing a foundation of trust between your company, the product you are selling and the visitor. Follow the key principles above and you should be well on your way to happier customers and more sales.

In future articles we go into more details on how to best implement each of the individual elements that make up a good performing product page.