Heat Mapping: The Most Valuable UX Tool in Ecommerce

Heat Mapping: The Most Valuable UX Tool in Ecommerce

Learn how you can track exactly how customers are using your site to gain valuable insights.

Written by Jason Stokes

6 min read

The one thing that will drive customers away from your site, your products, and will divert their cash from your bank account is bad UX.

User experience (UX) is the journey a customer takes through your website. A good customer journey - a great user experience - is the key to customers converting. You want your website to be easy and intuitive for your visitors to navigate. Streamlining a seamless shopping experience means that the customer won’t hit any speed bumps on the way through your site and won’t find any reasons to leave.

As soon as a customer finds a reason to leave your website, they will - it’s much easier to choose the path of least resistance than it is to muddle through a badly designed website.

Be the path of least resistance.

Our specialist UX designers have built hundreds of optimised ecommerce stores. If you think your store could benefit from a redesign - Get in Touch!

What is a Heatmap?

Heatmapping shows you where the ‘hot’ parts of your webpages are - those being the areas on individual pages that your customers are spending the most time looking at. It shows where visitors move their mouse cursor, where they scroll, hover and click. As well as highlighting positive actions, it can show you areas of inactivity, for example calls to action or links that aren’t being clicked on.

You can track exactly how customers are using your site. It can’t be overstated how valuable this insight is.

What is session tracking?

Being able to capture the on page activity of your customers is the closest you will ever get to seeing through their eyes. This is the kind of insight that a bricks-and-mortar stores have been developing for years.

In a physical store, retailers can watch how customers interact with their products and how they move around the store. This is exactly how businesses assess how their store’s customer journey works and it informs exactly how they lay things out. This is why stores will often place lower priced ‘impulse’ purchases near the check out, because customers have more chance of picking them up at the end of their journey. It is the same reason big ticket items and new lines will be placed in the window and on the entrance to the store.

Upselling is one of the quickest and easiest ways for stores to increase their average sale value - or average order value online. We created an app to let you do that, Cart Convert.

We've already written a blog about the importance of upselling, so take a look.

How important is user experience?

User experience is one of Google’s most significant ranking factors. Not just because Google says it is, but because a bad user experience can drive people away from your site and potentially stop them from becoming customers.

You need to have a comprehensive understanding of what your customers want and how they browse ecommerce sites.

Eastside Co. has created an app that records 1.5 billion page interactions a day for our app customers. Imagine being able to identify areas where multiple customers are leaving your site…

Wouldn’t you immediately change that to keep them browsing and buying?

How to improve UX

This is where a heatmap or session tracking becomes useful, allowing you to see exactly where customers are looking on your pages. Hindsight records around 300,000 sessions a month, and seeing just a handful of recordings on a page will give you an insight into what is causing potential customers to leave.

These will also help you decide where to place important pieces of information, conversion triggers and links to navigate the site.

Increasing your page speed

Customers are used to web pages loading instantly. If the website doesn’t load quickly, they can easily find another store where they can get the same thing.

Load speed is vital to improving your conversion rate. According to Conversion Voodoo, for every extra second it takes for your page to load, you lose 7% of conversions, 11% of your page traffic, and 16% in customer satisfaction.

According to Radware, which tested over 2000 ecommerce sites, the average page speed for an online shop is five seconds. If your page is slower than this, there are a few things you can do to speed it up.

First, do a test. There’s a great, free tool out there called Pingdom, that will give you a breakdown of how quickly your page loads, and a selection of things you can do to speed it up. Google’s Page speed insights does the same thing and gives you a detailed breakdown of what to fix.

Here is a pagespeed report for Amazon from Pingdom

Amazon pagespeed report

Notice how Amazon’s load time is 654ms, much less than a second. Their page loads almost instantly. Amazon has reported that, when it increases load time by a tenth of a second, it sees a conversion increase of 1%.

  • Compress your images before you upload them. Large image files are the #1 cause of slow webpages.
  • You can also allow browser caching. This means that if the customer is visiting a second time, their device will remember certain elements on the page and will load them quicker.
  • Get rid of unnecessary code. Audit the code on your page, and if you’ve got anything that doesn’t need to be there, remove it. If it does need to be there, see if you can move it to the bottom of the page.
  • If you have multiple CSS stylesheets for a page, combine them into one.
  • Prioritise content that you want customers to see instantly over content that sits ‘below the fold’. Customers won’t notice if ‘below the fold’ content doesn’t load as quickly. This is content that they would have to scroll to see.
  • Cut down on redirects, especially on the page where most people enter your site. Each time a URL is redirected, it will add some time to the page load speed.

Be mobile responsive

Over 50% of all ecommerce traffic is through mobile and over the last two years, Google has heavily focused on favouring websites that are mobile friendly. Not only do you have to think about how your website functions on a desktop, you have to think about how it functions on a variety of mobile phones and tablets.

  • It is worth having one or two different devices around to test your site.
  • Check how the menu looks on each device and whether the navigation is intuitive.
  • Does your journey around the page feel natural?
  • Avoid blocks of text that are more than six lines long; this will keep your desktop website looking clean, and it puts users off when they’re faced with a lot of content on a mobile device.
  • Make sure your buttons and links are sized to be clicked by a thumb or finger

Avoid UX Rabbit Holes

A user experience Rabbit Hole is where a user comes into your website, and goes on a user journey that they have no natural way to get out of. For example, a customer enters your online shop from your homepage, moves on to a collection page and then a product page.

Naturally you will want them to progress to the checkout, but they might not be ready to buy at that point. If you don’t give them the option to go somewhere else, maybe with suggested products, a breadcrumb, or a related blog post, then that customer is stuck in the Rabbit Hole.

related products tab

This is all part of good user experience web design. Take a look at some of the big ecommerce websites like Amazon and Ebay. They all have suggested related items to continue the user journey, and to upsell.

Capturing data with good UX

Not everyone who visits your site is going to purchase something the first, second, or even the third time. 98 out of every 100 customers that browse your site are going to drop off somewhere in their journey. You can’t entice these customers with a hard sell, because they will just go somewhere else.

But you can capture a small piece of information.

Simply getting an email address will make sure you stay in this potential customer’s consciousness.

Use heatmapping and session tracking to find out on which pages your customers are leaving the site. Then add an intent based pop up with a data capture field.

A great way to entice customers to leave an email address is by offering a discount code there and then. This doesn’t necessarily improve user experience from a navigation point of view, but your customers will feel like they are getting something for free, whilst you gain valuable email addresses.

User experience and data capture

This popup appears when a user's cursor leaves the webpage. It gives the user an oportunity to win something, in exchange for an email address

This way, you can target the user with possible promotions or other products that can convert them into customers.

The best UX

Creating a great user journey is key to guaranteeing customer loyalty and conversions. It is the best way to optimise the experience that your customers are having in your store.

Rather than spending thousands of dollars on advertising and wondering why customers just aren’t buying, create a strong foundation and an intuitive user journey. This solid, well researched and optimised UX will ensure that your customers have no reasons to leave your site, then you can make the most out of your marketing efforts and see greater conversions.

If you think heatmapping and session recording could benefit your ecommerce store, try the Hindsight free trial for 14 days.

Who we are

We are one of the world’s most trusted and experienced Shopify Plus Partners. A full-service, fully in-house digital agency of over 50 talented people, we’ve helped hundreds of ambitious brands exceed their goals.

About Eastside Co

What we do

Eastside Co leads the way in UX-focused Shopify web design, results-driven marketing strategies, and best-in-class Shopify applications and software. We help online businesses escape the ordinary and achieve ecommerce success.

Discover Services
Over 500 Shopify builds.

Let's work together to build your store.

Get In Touch