Unlocking E-commerce Success: A Deep Dive into Product Page UX

Previous
Next

Welcome to another entry in our series about ecommerce usability and boosting the performance of your WooCommerce online store.

Improving your online store UX can be a monumental strategic advantage, an investment that yields tremendous dividends in all times, good or bad.

We’ve also explored how themes such as On-site Search, Homepage & Navigation, and Product List & Filtering can play crucial roles in product discovery for both High and Low Intent visitors.

Today, we’re stepping into the realm of the Product Page UX theme, the pivotal junction where your customers, having found precisely what they want, decide whether to proceed with their purchase.

There’s a common misunderstanding about what makes an exceptional product page or even ecommerce usability in general, but worry not, we’re here to dispel the myths and set you on the path to success.

Product Page UX Guidelines

UX Guideline 1. Centralize All Product Images

Issue: Customers often miss out on images displayed in various places on the product page. This can prevent comprehensive product understanding and affect purchasing decisions.

Advice: Centralize all images in the primary image gallery, irrespective of their presence elsewhere on the product page.

Example: Take Lowe’s, for instance. All product images are available in a single, user-friendly gallery, whether displayed on the product page or via an overlay. It ensures maximum image visibility and facilitates easy product exploration.

A good example of Centralize All Product Images
A bad example of Centralize All Product Images

UX Guideline 2. Provide Ample Product Images

Issue: Insufficient product images can hamper customers’ product evaluation process, affecting their purchasing decisions.

Advice: Always provide a minimum of 3-5 images for all products, prioritizing popular and best-selling items for sites with large product catalogs.

Example: Nordstrom excels in this aspect by providing high-quality, multiple images of a North Face backpack, enhancing product understanding and attracting customer interest.

A good example of Provide Ample Product Images
A bad example of Provide Ample Product Images

UX Guideline 3. Showcase Products from Multiple Angles

Issue: Customers need a comprehensive visual representation of a product to make informed purchases. Straight-on product shots often fall short of fulfilling this requirement.

Advice: Ensure the availability of 3-5 images of products, captured from varied angles.

Example: Nordstrom effectively employs this strategy. One of its customers discovered a unique product feature via an angle image showcasing the back of a bag, adding to the product’s appeal.

A good example of Showcase Products from Multiple Angles
A bad example of Showcase Products from Multiple Angles

UX Guideline 4. Employ Thumbnails for Additional Product Images

Issue: Customers often miss out on extra images and lack information when images are signified by indicators or text.

Advice: Always use thumbnails to represent extra product images.

Example: 100% of desktop benchmark sites, like most desktop-friendly ecommerce sites, use thumbnails to indicate additional product images, providing customers with a better understanding of the product.

A good example of Employ Thumbnails for Additional Product Images
A bad example of Employ Thumbnails for Additional Product Images

UX Guideline 5. Utilize Video for Product Display

Issue: Certain essential product features are difficult to communicate using static images alone.

Advice: Incorporate product videos for at least the top-selling items.

Example: Product videos can inspire customers, showcasing the potential uses of the product. These videos can make up for the information gap between online and physical shopping experiences, providing additional visual details that static images can’t capture, thereby enhancing product understanding and appeal.

A good example of Utilize Video for Product Display
A bad example of Utilize Video for Product Display

UX Guideline 6. Be Cautious with Thumbnail Truncation

Issue: Thumbnails truncation often leads users to overlook additional images, limiting their product understanding.

Advice: Display all product thumbnails directly on the product page without truncation or ensure that clicking any thumbnail reveals all images.

Example: Home Depot has implemented a “Truncation Thumbnail” approach to hint at the existence of more thumbnails, but remember, it must be done carefully to avoid user confusion and missed opportunities.

A good example of Be Cautious with Thumbnail Truncation
A bad example of Be Cautious with Thumbnail Truncation

UX Guideline 7. Enhance Spec Sheet Scannability

Issue: Disorganized and densely packed spec sheets make it challenging for users to locate specific information.

Advice: Structure spec sheets into sections of related information, use clear subheadings, prioritize vital specifications, employ row styling and visual cues for improved readability, and limit the use of multiple columns.

Example: REI uses both vertical and horizontal shading to guide users seamlessly from scanning specification labels to locating their associated values, making information retrieval swift and straightforward.

A good example of Enhance Spec Sheet Scannability
A bad example of Enhance Spec Sheet Scannability

UX Guideline 8. Repeat Core Product Info

Issue: Customers look for vital product information in both product descriptions and specification sheets. Keeping information exclusive to one area may lead to missed details.

Advice: Include core product features for specification-driven products in both the product description and specification sheet.

Example: B&H effectively communicates critical details, such as lens mount and compatibility format, in both the description and the specifications, making key information easily accessible, irrespective of the users’ preferred location.

A good example of Repeat Core Product Info
A bad example of Repeat Core Product Info

UX Guideline 9. Use Bullet Lists and Text Blocks for Product Descriptions

Issue: User preferences vary for information retrieval based on their purchasing stage and product familiarity, requiring product descriptions to be both scannable and readable.

Advice: Use a combination of text blocks (for product overview, potential use cases, and detailed feature explanations) and bullet lists (for product features and specs) in product descriptions. Place them close to each other and ensure core product information is present in both formats.

Example: Lowes provides product descriptions in both bullet and text formats, catering to diverse information-gathering styles, ensuring product understanding is universally accessible.

A good example of Use Bullet Lists and Text Blocks for Product Descriptions
A bad example of Use Bullet Lists and Text Blocks for Product Descriptions

UX Guideline 10. Reproduce Core Content Across Product Variations

Issue: Users struggle to gather comprehensive information when core product content varies across different product variations.

Advice: Make sure product content like reviews, Q&A, images, videos, manuals, etc. are available across all variations of the same product. If some content applies only to a specific variation, explicitly notify users.

Example: Sephora maintains consistency in reviews and star ratings across all lip gloss variations, indicating proper crosslinking or reproduction, which enhances the user’s product understanding and buying decision.

A good example of Reproduce Core Content Across Product Variations
A bad example of Reproduce Core Content Across Product Variations

UX Guideline 11. Standardize Vendor-Supplied Specs

Issue: Inconsistent product information hinders users from directly comparing products in spec sheets.

Advice: Standardize supplier data to ensure specifications are consistently available with uniform labeling, units of measure, measurement resolution, and display sequence.

Example: Home Depot displays product specifications with consistent units, facilitating easy comparison of attributes like product dimensions.

See 4 Research-Backed Tips for Crafting High-Converting Product Descriptions for more information on writing the perfect product description.

A good example of Standardize Vendor-Supplied Specs
A bad example of Standardize Vendor-Supplied Specs

UX Guideline 12. Show “Price Per Unit” for Varying Quantity Products

Issue: Products sold in multi-quantity or varying sizes complicate direct price comparison, leading to misinterpretation of relative value.

Advice: Display “Price Per Unit” next to the total product price for products sold in varying quantities. Consider “Price Per Serving” for similar products with different dosage suggestions.

Example: Amazon simplifies the comparison of bulk nut prices by indicating the price per pound for the featured product and similar ones from different sellers.

A good example of Show “Price Per Unit” for Varying Quantity Products
A bad example of Show “Price Per Unit” for Varying Quantity Products

UX Guideline 13. Make the Primary “Add to Cart” Button Distinctive

Issue: Competing call-to-action buttons distract users and complicate the process of adding a product to the cart.

Advice: Give the “Add to Cart” button a unique styling that distinguishes it as the primary page button. Avoid using full-width for sticky “Add to Cart” buttons and surround them with sufficient white space.

Example: JBL’s sticky “Add to Cart” button is consistently visible, making it easy for users to add products to their cart.

A good example of Make the Primary “Add to Cart” Button Distinctive
A bad example of Make the Primary “Add to Cart” Button Distinctive

UX Guideline 14. Implement ‘Save’ Features Efficiently

Issue: Users relying on ‘Save’ and ‘Wishlist’ features struggle to save products if the feature requires an account or is hard to access.

Advice: Allow users to save items as “guest users” in ‘Save’ features. Provide clear instructions on how the ‘Save’ feature works and ensure its design and placement are subtle and unobtrusive.

Example: The Urban Outfitters app enables users to save favourites by tapping a small “heart” icon without needing to sign in, streamlining the process of saving items for future review.

A good example of Implement ‘Save’ Features Efficiently
A bad example of Implement ‘Save’ Features Efficiently

UX Guideline 15. Highlight “Free Shipping” Near the “Buy” Section

Issue: Users find “Free Shipping” information valuable but must locate it on the product page to benefit.

Advice: Place “Free Shipping” details in or near the “Buy” section, even if the information is also displayed elsewhere on the site.

Example: Lowe’s strategically places the “Free Delivery” offer near the “Buy” section, ensuring it’s easily spotted when users first land on the product page.

A good example of Highlight “Free Shipping” Near the “Buy” Section
A bad example of Highlight “Free Shipping” Near the “Buy” Section

Issue: Users need to spend extra time locating the return policy when considering products they are unsure about.

Advice: Make the return policy readily available in the main content of the product page, either through a link or as a product page section.

Example: The Walmart app displays a clear summary of the return policy along with a link to more details, providing comfort to users.

A good example of Show or Link the Return Policy from the Main Product Page
A bad example of Show or Link the Return Policy from the Main Product Page

UX Guideline 17. Use “Vertically Collapsed Sections” for All Content Sections

Issue: Long, non-collapsed sections can prevent users from getting an overview of the product page due to each section pushing the next one out of view.

Advice: Implement ‘Vertically Collapsed Sections’ for all content sections on a product page. They should have clear section titles and work as full- or partial-width page sections.

Example: Collapsible sections have been observed to make extensive product page content more digestible for users.

A good example of Use “Vertically Collapsed Sections” for All Content Sections
A bad example of Use “Vertically Collapsed Sections” for All Content Sections

UX Guideline 18. Offer a Ratings Distribution Chart at the Review Section Top

Issue: Reviews presented without overall context can lead users to misinterpret the product’s actual ratings distribution.

Advice: Always display a visible ratings distribution chart at the top of the “Reviews” section. However, hide it for products with few reviews (e.g., less than five).

Example: Sephora provides an overall average rating and a ratings distribution chart, offering necessary context for users to understand the product rating better.

A good example of Offer a Ratings Distribution Chart at the Review Section Top
A bad example of Offer a Ratings Distribution Chart at the Review Section Top

UX Guideline 19. Avoid Account Wall for Submitting Product Reviews

Issue: Too few reviews will restrict users’ ability to find relevant information, identify patterns, and may lead users to question the reviews’ authenticity.

Advice: Avoid requiring an account for submitting product reviews. Simplify the review submission process by only asking for necessary personal information, optimizing form fields, and encouraging or incentivizing users to leave reviews.

Example: World Market does not require an account, only an optional email address for review submission, thereby reducing the friction in the review process.

A good example of Avoid Account Wall for Submitting Product Reviews
A bad example of Avoid Account Wall for Submitting Product Reviews

UX Guideline 20. Use ‘Relevance’ as the Default Review Sorting

Issue: Users who read the first few reviews can be discouraged from purchasing the product if the reviews seem artificially positive, overly negative, or unhelpful.

Advice: The default sorting of reviews should be based on diversity and relevance. Consider factors like both positive and critical reviews, the review’s helpfulness, length, date, user-uploaded images, and verified purchases.

Example: Joann’s default reviews sort is “Most Relevant,” defined using a tooltip that considers helpfulness votes, recency, pictures, and other traits.

A good example of Use ‘Relevance’ as the Default Review Sorting
A bad example of Use ‘Relevance’ as the Default Review Sorting

UX Guideline 21. Present a Clickable Ratings Average at the Product Page Top

Issue: Reviews, which are critical to users, are often located far down the product page.

Advice: Place a clickable ratings average at the top of the product page, linking to the reviews section.

Example: Crutchfield’s design allows users to immediately locate review information without much effort.

A good example of Present a Clickable Ratings Average at the Product Page Top
A bad example of Present a Clickable Ratings Average at the Product Page Top

UX Guideline 22. Request Only Highly Relevant Personal Info in Review Submission Forms

Issue: Reviewers are often hesitant to share personal information, and some users find it hard to relate reviews to their needs.

Advice: Ask reviewers for basic, contextually relevant info based on the product being reviewed. Avoid asking for irrelevant surveys or marketing information. If personal information is required, consider making it optional and provide an explanation of its usage.

Example: Users appreciate seeing relevant information about the reviewer, such as age, height, and size, as it helps them find reviewers similar to them.

A good example of Request Only Highly Relevant Personal Info in Review Submission Forms
A bad example of Request Only Highly Relevant Personal Info in Review Submission Forms

UX Guideline 23. Do Not Use Non-User-Initiated Feedback Requests

Issue: Feedback requests interrupt the product-browsing experience and can impact users’ overall site perception.

Advice: Avoid site-initiated requests for feedback. If necessary, display static feedback requests in less noticeable areas of the site. Also, encourage feedback, auto-remove feedback requests after a response goal is met, and consider using them only on desktop sites.

Example: Adidas requests surveys only after users have completed their order, on the confirmation page.

A good example of Do Not Use Non-User-Initiated Feedback Requests
A bad example of Do Not Use Non-User-Initiated Feedback Requests

UX Guideline 24. Respond to Negative User Reviews

Issue: Negative reviews can negatively impact users’ opinion of both the product and the entire site.

Advice: Respond to negative user reviews, directly addressing the issues raised. Ensure responses reiterate the issue, detail feedback usage, and provide contact information. The responses should be visually distinct from the user reviews.

Example: Responding to negative reviews can boost site trust, keeping users on the site even if they decide to look for alternative products.

A good example of Respond to Negative User Reviews
A bad example of Respond to Negative User Reviews

UX Guideline 25. Position Full-Width Cross-Sell Sections Last on the Product Page

Issue: Full-width cross-sell sections can make users stop scrolling, thinking they have reached the end of the product details page, and potentially miss important content.

Advice: Place full-width cross-sell sections as the last section on the product details page.

Example: On Staples’ site, a user viewed the “Customers Also Viewed” carousel of cross-sells at the bottom of a product details page after discarding a current product. Placing cross-sells at the
bottom allows users to focus on the current product without distractions.

A good example of Position Full-Width Cross-Sell Sections Last on the Product Page
A bad example of Position Full-Width Cross-Sell Sections Last on the Product Page

UX Guideline 26. Provide a Cross-Sell Section Solely For Supplementary Products

Issue: Users often find it hard to locate supplementary products for the item they’re viewing.

Advice: Create at least one separate cross-sell section specifically recommending supplementary products.

Example: Pottery Barn has a supplementary products section titled “You May Also Need” and also offers an instructional video on “How to Hang a Drape”. This aids users in ensuring they have all the necessary items when their drapes are delivered.

A good example of Provide a Cross-Sell Section Solely For Supplementary Products
A bad example of Provide a Cross-Sell Section Solely For Supplementary Products

UX Guideline 27. Suggest Alternatives for Discontinued Products

Issue: If a desired product is unavailable, users may leave the site if they can’t easily find an appropriate alternative.

Advice: When a product is permanently unavailable, clearly state it using “Discontinued” terminology and aggressively promote alternative products.

Example: On Nordstrom’s site, when a backpack was unavailable, alternative products were prominently displayed above the unavailable product, focusing users’ attention on examining the alternatives first.

A good example of Suggest Alternatives for Discontinued Products
A bad example of Suggest Alternatives for Discontinued Products

Outperform 99% of Online Stores with Product Page UX

We’ve journeyed through the essence of your product page UX, highlighting the immense importance it carries in the conversion process.

With the guidelines we’ve outlined, your product page can now outperform 99% of the online stores out there.

The changes you implement based on these guidelines could lead to an exciting rise in ‘Sessions with Add to Cart’, a key indicator of the impact of your UX changes.

We’ve armed you with the knowledge to turn your product page into a world-class platform, ensuring all customer questions are answered satisfactorily, instilling trust, and ultimately leading them to complete their purchase eagerly.

Don’t forget the impact of UX enhancements should be continuously monitored for progress.

So, embrace the Product Page UX theme and set your WooCommerce store on the path to unprecedented success.

Unleash the Full Potential of Your WooCommerce Store in 2024

Get the top trends, threats, and growth opportunities based on hundreds of hours of research and data and 14 years working exclusively in ecommerce.

Click The Button Below To Schedule A Demo