How to Improve Conversions Using Heatmaps [543]

Somebody asked me the other day how they could improve the conversion rates on their site. It?s a relatively big e-commerce site reaching out to most of Europe.

This is rather complicated since something as small as a change in color, or font could improve conversions. But where do we start?

Well, I believe it starts by researching our customers and potential customer?s behavior during their visit to our storefront.

Let?s take a retailer as an example; obviously, a customer?s behavior differs significantly from browsing a web store to a physical store. Customers tend to spend less time on the web store compared to the physical store, and visiting a physical store means being able to ask a staff member for help or advice. Browsing alone on the web can be frustrating if an error occurs and there isn?t anyone to help them. This is where web analytics tool come in handy!

With a web analytics tool, you can pretty much track anything visitors do on your websitesite. Although you might not be able to help them in real time (providing you don’t have a live chat), you will be able to improve your site for coming visitors. We?ll use Ptengine to show you how this can be done.

Sources and Keywords. Check whether the visitors are coming from, Search engine, Social Network Site, Ads ending up on the right landing page. Does the landing page provide an answer for the ad you put up on Facebook?? Does the keyword ?baby clothes? bring the visitors straight to the baby cloth section, or do the visitors have to browse through menus and click links to get there? Knowing what brought the visitors to the site may help you tailor the site just for their wants and needs.

Bounce rate. Check for pages with high bounce rate. Bounce rate represent the visitors that enter a page and then leave without viewing any other page within the same site, ?bouncing.? A high bounce rate can be caused by many reasons, such as design flaws or that the visitors aren?t finding what they expected to find. To solveve high bounce rate, use the filter function and try to get as detailed information about the visitors that bounce that very page. Interesting details could be returning/new visitors coming from a certain source or campaign. Filtering for devices, OS and browser may give the user a hint if there is any design flaws on the page for a certain device or browser.

Sales funnel. Sales funnel tracks the visitor?s route from the landing page to the last page in the sales process. It may help the web developerer to understand if potential customers are dropping out of the sales process, where they are dropping out and where they go. By improving pages with high exit rates may help you significantly to improve your conversion rate. But the question is what and how to optimize a page, is there anything wrong with the contents on that page?

Sometimes numbers are just not enough information to make the right changes to a websitesite. They might tell you there are something just not right with that page, but they probably won?t tell you just exactly what it is. Sometimes we tend to make a lot of assumptions, and not all of them might turn out well. For example, a Web Designerer developss a websitesite to what he assumes or his client assumes would be the best for their business. But the best websitesite is a websitesite that benefits the end user/customer the most.

So how do we tailor a websitesite for its visitors? wants and needs?

Building such a websitesite from scratch might be a hard nut to crack, but what we can do is to improve and change the current websitesite to fit the visitors? wants and needs. This, we do by utilizing heat maps!

Heatmaps. With the help of Heatmaps, we can see what areas or elements the visitors are paying attention to, and perhaps, it is something completely different to what we thought it would be.

I will explain this in two examples below. Let me just describe the various Heatmap used in the case below.

Ptengine features four responsive Heatmaps – Click map, Scroll map, Attention map, and Page analysis.

Click map records clicks on a web page and displays them in colors from blue representing few clicks (cold), and red representing many clicks (hot).

Scroll map lets you see how far visitors scroll on the page.

Attention map records where on the page visitors spends most time, and Page analysis records statistics of clicks on interactive and non-interactive elements in numbers and percentage of clicks.

I?ll use an e-commerce site as an example. I started out scanning for pages with high bounce rates and many pages views (PV). Number 7 in the list (footwear), caught my eyes. While the average seems to be ranging from 35 -45% bounce rates, this one has almost the twice the bounce rate. Why?

src="http://wwwcrazyleafdesigncom/blog/wp-content/uploads/2014/11/11png?ce0830".com/blog/wp-content/uploads/2014/11/11.png?ce0830" alt="heatmaps" width="650" height="330" />

I use the filter to see if there is this high bounce rate is related to any specific device or browser, but the results are very similar. This tells me that this is probably not the reason for the high bounce rate. Instead, I move on to Heatmaps to get an idea of what visitors are doing on that page. 

src="http://wwwcrazyleafdesigncom/blog/wp-content/uploads/2014/11/2png?ce0830".com/blog/wp-content/uploads/2014/11/2.png?ce0830" alt="filter" width="241" height="539" /> src="http://wwwcrazyleafdesigncom/blog/wp-content/uploads/2014/11/3png?ce0830".com/blog/wp-content/uploads/2014/11/3.png?ce0830" alt="filter" width="243" height="543" />

The page has over 70 different running shoes for display, making this page quite long, and only nine of them are above the fold. There could be many reasons to the high bounce rate and to reallyly understand, we could go deep and look for search terms, sources and ads but that would make for a very long article.

Something that comes to my mind when seeing webpagespages with a lot of content is; do the visitors reallyly find what he or she is looking for?

When scrolling down the page, I can see several shoes that stand out from the rest. This makes me wonder, how were these shoes filtered in the first place. Were there any thought behind the placement of each and every shoe and if so how is it decided?

If it was up to me to sort each and every shoe, then I would like to have the most popular on top, and the least popular at the bottom. Simply because more people view the top of the page than the bottom, this is what the scroll map tells us.

When I scroll down the page of footwears, I find a lot of shoes that seems to be popular although they are in area of the page not many visitors care to view. Here is one shoe that seems to have caught the visitor?s attention more than the surrounding footwear. This is displayed both in the click map and the Attention map. Attention map records where on the page visitors spend the most time. In this case, the warmer color represent a longer time (scrolling slowing down), a thin line of orange hint that those visitors have almost stopped scrolling for a slight moment. This gives us the information that something within a screens? range is ?hot.? In this example, Click map let us easily see that GEL-PULSE 6 G-TX is getting a lot of attention. However, it did not have to be that obvious. For example, there could have several items within the same screen width receiving a slight higher amount of clicks than the others. In that case it would have been easier to spot those items by first looking at the Attention map.

src="http://wwwcrazyleafdesigncom/blog/wp-content/uploads/2014/11/4png?ce0830".com/blog/wp-content/uploads/2014/11/4.png?ce0830" alt="4" width="650" height="250" />

Changing to Page analysis, we can see that GEL-PULSE 6 G-TX receives 1.69% of total amount of clicks on that page, making it the 2th most clicked footwear on the entire page; even though Scroll map tells us only 37% percent of the visitors ever scroll that far down.

By replacing a low converting item in the top section of the page with GEL-PULSE 6 G-TX, where it will receive more attention, is one step in the right direction of improving your conversion

src="http://wwwcrazyleafdesigncom/blog/wp-content/uploads/2014/11/5png?ce0830".com/blog/wp-content/uploads/2014/11/5.png?ce0830" alt="conversion" width="650" height="240" />

This are the basics and one may also filter the Heatmap for certain conditions to find out different behavior of certain visitors. Some ideas for further research could be: