The Truth About Images, Copy & Buttons: 3 Product Page Design Myths Busted
All the “core truths” you’ve heard about ecommerce product page design are no longer gospel.
As best practices in web page design continue to change and evolve, so do product page design rules. We’re going to show you the truth behind 3 product page design “best practices” that are no longer necessarily true.
Myth #1: Product Images Should Be Bigger to Convert More
We’re used to hearing “bigger is better,” particularly when it comes to product page elements like product images. It’s the largest and most visually impactful thing on the page that grabs the eye and converts browsers to customers, right?
Size isn’t necessarily the thing that makes your product image POP. It may actually be the amount of white space around it. It’s always a good practice to test and measure the results of switching up your product page design elements, rather than relying on industry trends.
ConversionXL Institute extensively tested this theory, and found that “the experience- or design-driven product (men’s dress shirt) shows a pattern of decreased visual attention with increased image size.”
Sometimes a larger product photo (as with the men’s dress shirt example) actually creates a pattern of lower value perception. The opposite is true for a “search good” (like a hard drive) – larger product photos make people think the item is more valuable.
So what does white space do? It improves the scannability of a product, and helps guide the eye where you want it. This doesn’t just refer to the space around a product photo. It also includes things like margins, letter spacing, and the padding around text columns.
Hunting gear and clothing retailer Kuiu do a good job with white space. The product photo is both large and surrounded by plenty of space. The product title is also large and is separated from the product description, and the price and “add to bag” button both stand out.
Myth #2: Product Copy Should Always Be A Well Thought-Out Paragraph
Not everyone wants to read paragraphs of text while shopping. Though we see brands like Huckberry form tailored, more long-form paragraph descriptions, simple bullet-points could be more effective.
Bullet points are more scannable ,as well as more SEO-friendly. BigCommerce recommends using them for product specs (like dimensions) or short phrases (features).
While it’s true that you might be sacrificing the power of storytelling to create an emotional response in the shopper that makes them want to own the item, you’re also helping them avoid screen fatigue. TLDR (too long didn’t read) has heavy use as an acronym for a reason.
You can also combine the two for a winning formula: [Paragraphs of prose] + [Bulleted List of Specs or Features] = [Engaging Product Description]
Men’s footwear company Paul Evans rightly assumes that reading a long story about each and every pair of shoes they sell would be tiresome. Instead, they rely on one powerfully descriptive line followed by a long bulleted list that covers material, fit, sizing and construction.
Myth #3: Add to Bag Buttons Should Be A Contrasting Color
We mentioned before how making the Add to Bag button orange was all the rage in product page design a couple of years ago.
There are still articles out there claiming that a contrasting color for your CTA button is THE most important thing: “Your button color matters. It matter a lot. In fact, if you’re going to take only one tiny single piece of advice from this post, it should be to give careful consideration to your button colors.”
Yet we know from our Topshop case study that what led to more conversions for them was the SIZE of the button, not the fact that it was orange. Changing it to a larger black button that took up almost the whole screen is what really moved the needle with their mobile shopping conversions.
How To Bust Your Own Product Pages for These Myths
ConversionXL Institute’s study concludes that they busted their own beliefs about product images needing to be larger to increase conversions. Take a look at the product images on your own pages and consider running an A/B test with smaller versions of the images to see how they do, or surround them with more white space.
Think about the type of product as well – try doing the opposite and swapping smaller images for larger for “spec-driven products” such as hard drives. For “experience-driven” items, make the photos larger but keep a balanced use of white space.
Also, take a look at your best-selling products. Are their product descriptions short or long? If they’re paragraphs, consider converting them to one descriptive line followed by a bulleted list of important features or details.
Finally, if you have a small “Add to Bag” button in a contrasting color, consider changing it to something neutral (like black or gray) and just making it larger. Ideally, it would take up most of the space on a mobile screen. Test to see if this converts more visitors to buyers.
Take note of your buyers’ purchasing behaviors after making each one of these changes.
Learn How Small Changes Can Make Big Wins for Your Ecommerce Company
To learn even more conversion tactics, we’ve created a FREE Ecommerce Growth Workshop where you’ll learn the BEST tactics used by the fastest-growing ecommerce brands, and the ONE formula that they use to begin moving into hyper-growth.
Click below to register!