Question #3: Is the Template We Use for Our Product Pages Working as Best as it Could?

Jack Maden  |  May 17, 2017

Jack Maden  |  May 17, 2017


This is the third post in a series that aims to put your website on trial. In order to truly understand customer behavior, you have to ask questions that acknowledge your users as peoplerather than as mere numbers in a report. This series asks five such questions, and shows you how to answer them by being clever with website heatmaps.

The first article in the series focused on revealing which content is most valuable to your users, while the second looked at how to measure if personalized content actually drives on-page engagement. This post asks the following of your website: "is the template we use for our product pages working as best as it could?"


Ah, the product page. 

The lightning rod for enraged debates among digital teams everywhere. The spark plug for a twenty-ton combine harvester of team disruption. The catalyst for designers, optimizers, and developers to furiously claw at each other's faces in utter radioactive chemical meltdown. 

Maybe that's going a little far. But how best to lay out product or landing pages can be a controversial topic for digital teams across the world wide web.

"We should move the button here - I read a blog post..."

"No, I saw that too it's a load of rubbish —"

"Let's offer free shipping right here!"

"Shut up Dave."

There’s a multitude of product and landing page best practice out there – and some great tests have been run and publicized, presenting some serious uplifts in conversion.

But best practice guides can only get you so far. Websites are highly contextual, and what works for one will not necessarily work for another.

The path to better conversions doesn't simply involve changing the color of your call to action, or using a hero image that subtley points to the submit or purchase button - though these tactics may help.

The real trick? Measure on-page user behavior to see what works for your customers. Don’t optimize according to the industry standard, but according to the behavior of your users.

"Don’t optimize according to the industry standard, but according to the behavior of your users."

Often, your product or landing pages will use the same design layout templates. Take ecommerce sites, for example. Users know what to expect when clicking on a product from a listing: a more detailed page with further imagery, reviews, and stock information.

p8 River Island agg heatmap.jpg

A click dot heatmap on a product detail page on River Island.

Considering the layout of the product pages stays the same – and that it’s only the individual product information that changes – it makes sense to analyze them all at once.

For a site that sells 600 different types of t-shirt, for example, reviewing engagement for each and every product page is an impractical use of time. Aggregating the data to review it all at once is much more efficient.

Decibel Insight’s Aggregate Heatmaps enable you to combine the heatmap data from pages that use the same design template layout.

Be it a content page, product detail page, product listing page, or landing page – seeing aggregated heatmap data for different templates can be enormously valuable.

Is the call to action in an optimal place? Are images too distracting? Are people scrolling far enough?

You’re in a much better position to answer these questions when you can see user interactions and behavior for all related pages at once.

p9 river island product list.jpg

An aggregated hover dot heatmap on a product listing page on River Island.

Once you've got the aggregated view, use Decibel Insight's Boundary Mode to dive straight in to session replays from heatmaps to investigate anything interesting in microscopic detail. 

Getting a slight lift in conversions on your product or landing pages can really make a difference to the bottom line of your business. Knowing exactly how users respond to different design templates across your website makes that desired lift not just achievable, but inevitable.


Using aggregate heatmaps to pool data from across landing and product pages that use the same template saves time and bolsters the data upon which you're basing important decisions. 

Next time, we'll ask the following question of your website: 'What's the first thing users see when landing on my web pages across devices and screen resolutions? And how far down do they scroll?'

Stay tuned - or, if you can't wait til then, get the full, detailed ebook that accompanies this series - complete with exclusive material and bonus tips - by hitting the banner below now.

New Call-to-action

Jack Maden

Written on May 17, 2017 by:

Jack Maden

Jack is Digital Manager at Decibel, the best digital experience intelligence platform around! He also runs philosophy break.


Stay up to date with all the latest in online customer experience with Decibel's newsletter