Transcript

The product page is the centerpiece for purchasing decisions, as nearly all users visited before deciding whether to buy an item. I'm Christian Holst, cofounder of Baymont Institute, and in this video I'll provide you with the current state of ecommerce product page UX and outline 15 best practices applicable to most ecommerce sites. The product page layout is a critical part of the product age experience. However, not all layouts perform equally well. One common issue that holds sites back is the use of horizontal tabs for product page layouts. Of the four main product page layouts in ecommerce, horizontal tabs proved to be the worst performing layout during testing, regardless of industry or product type. For example, while searching for shipping info on a cream's product page, 1 user completely missed the details hidden in the four unselected horizontal tabs. Testing across multiple industries revealed that on product pages with a horizontally tab layout, 27% of users overlook the tabs entirely. In contrast, pages using a vertically collapsed sections layout performed much better, with only 8% of users missing sections. Ecommerce sites should generally avoid horizontal tabs to improve usability. In practice, product images are often the primary way users evaluate a product. Since they can't physically inspect or handle the item, images provide the best opportunity for users to develop a clear visual understanding of the product. Our testing shows that 42% of users rely on product images to gauge size, but without an in scale image, this can be unnecessarily difficult. Since users can't physically assess size online, providing clear size references is critical. It's important to always include in scale images to help users gauge product size. This can be done by showing the product next to a model, a hand, or an object of known size. For example, GoPro uses an image of a camera in a Modell's hands to illustrate its scale. Products meant to be worn like apparel, accessories and cosmetics need the context of a human model to give users a better sense of fit and scale. For example, a user at Maidwell was frustrated by the cut out thumbnails for genes as they didn't show how the genes would look on a person. Human model images provide a clearer view of a products visual qualities, helping users decide if it's right for them. For example, showing a handbag worn by a model instantly answers questions about its size and scale. Today, many users rely on social media for product research, yet 67% of ecommerce sites failed to include images or videos from past buyers. Without enough visual social proof on product pages, users may leave the site to find it, risking discovery of a competitor instead. Including social media images on product pages can boost buyer confidence and reduce the risk of users leaving to find more information elsewhere and potentially not returning. At Burke Decor, 1 user saw social media photo of a child resembling her daughter, helping her vividly imagine how the chair would fit into her own life. The bisection, which includes features and details near the Add to Cart button, is one of the lowest performing areas on product pages yet. This section is critical as users often examine it closely when deciding whether to add a product to their cart. A small group of users value safe or list features to bookmark products they like. For example, a user at Adidas appreciated the save option for a track jacket and explained how it fit into her shopping process. However, she couldn't save the item because tapping the heart icon required her to sign up, something she wasn't willing to do. It's important for sites to let guest users access save, favorite or wish list features without requiring registration. For example, a user at Bonbori appreciated saving items without signing U. This not only makes comparing products easier, but also leaves a positive impression. Not showing a price per unit on product pages makes it harder for users to compare products with different quantities. Without this information, users struggle to judge value and sites may miss opportunities to sell bulk orders, which can boost average order value. To keep users from cutting their comparison process short product pages should display price per unit for products available in multiple sizes or quantities. For example, a user at Vitamin Shop found rice per serving details in the Buy section, making it easier to compare supplements with similar products. Testing showed that users look for shipping costs not just during checkout, but as early as the product page. When the total order cost is missing from the product page, users must add items to their cart to find this information, which is a tedious process. For example, at Ann Taylor, no shipping estimates are shown on the product page. Without this information up front, unexpected shipping costs at checkout can lead to abandonments. Instead, product pages should display the lowest total order cost by default, including the lowest shipping cost or at least an estimate with conditions. At Boohoo, delivery options and costs were clearly shown, helping users calculate the total price and evaluate faster delivery options before adding items to their cart. Not having easy access to the return policy early in the shopping process, especially for items like apparel where sizing can vary widely, creates anxiety for many users. A link to the return policy or a brief summary should be prominently displayed on the product page. The policy should also be written in clear, easy to understand language for the average user. Doing testing, some users started considering gifting options as early as the product page. For example, on Gamestop's product page, users saw options for shipping and coupons but not gifting, forcing them to add the item to their cart before learning about gift options. For sites that ship many orders as gifts, offering gifting details on the product page provides a competitive advantage, especially for users who value thoughtful gift giving. For instance, Etsy allows users to mark a jewelry item as a gift and clearly states that prices won't appear on the packing slip. Users who rely on spec sheets often have strong domain knowledge and look for answers to specific questions. However, testing revealed that issues with spec sheets sometimes caused misinterpretation so severe that uses mistakenly dismissed products that actually met their needs. During testing, even short spec sheets became hard to scan when presented as a wall of specs. For example, laptops often have extensive specifications, but at stables these details weren't organized. Users looking for a specific attribute like D capacity had to sift through dozens of irrelevant specs, wasting time and effort. To make spec sheets easier to scan, medium length sheets, those with 20 or more specs should be grouped into subsections with clear titles. Using background colors, icons and lines can further enhance scalability, helping users quickly find the information they need. Doing testing, many sites lacked consistency across spec sheets for similar products. For example, refrigerators from different brands listing different specs or using mixed units like inches and centimeters. This often happens on sites with multiple vendors that rely on vendor supply data without standardizing it for consistency. To make comparisons easier, specs for similar products should be resented consistently. For example, Home Depot displays specifications and consistent units, allowing users to quickly compare details like product dimensions. During testing, many sites use technical terminology and spec sheets that required domain specific knowledge, making it difficult for general users to understand the specs. To address this issue, include explanatory tool tips for specifications related to dimensions, industry terms, or details that aren't self-explanatory. For example, at Crutchfield, a user confused by the difference between weather resistant and waterproof used a tool tip in the spec sheet to quickly clarify the terms. After product images. Testing showed that user reviews are the second most important content for evaluating a product suitability. However, many sites struggle with effectively implementing reviews on the product page. Asking for too much information in a review form reduces the number of submitted reviews. For example, Verizons review form asks unrelated questions like what do you think about Verizon's network performance and does your plan match your budget and data needs? A review form should focus solely on feedback about this specific product being reviewed. Sites should make it as easy as possible for users to submit reviews quickly. This means keeping review forms focused on highly relevant questions tailored to the product type. For example, Urban Outfitters uses a simplified review form that avoids overwhelming uses, leading to more submissions and a more robust review section. Failing to respond to negative reviews can make users question both the products quality and the customer service they'll receive. In testing. Many users like this one on the Amazon a frequently checked negative reviews. Ignoring them leaves a doubly bad impression on potential buyers. While responding to a negative review may not turn a dissatisfied customer into a Happy 1, testing showed it leaves a positive impression, demonstrating customer care and proactive, accessible support. Users rely on customer images to verify that site photos accurately represent the product. They often view these images, even if lower quality, as more trustworthy and reliable. However, when sites don't make it easy to browse reviewer submitted images, users can become frustrated and may abandon a product that fits their needs. For example, on HP, site users viewing photos from a review can't navigate to images in other reviews, making the process unnecessarily. Time consuming. Sites should always allow users to seamlessly browse images across reviews without disrupting the main reviews feature or making navigation cumbersome. Adhering to the 15 best practices covered in this video is the first step toward improving users product age experience. For more details about the product page implementations, go to bama.com Research.