glueglue™ | How to increase conversions with 5 heat map tips

I love using click tracking heat maps because you can create them with an almost zero effort. It takes some experience to read them in the right way, but once you learn that, it becomes a great way to improve the usability of a website and help you push the conversions in a way you want!

Wait a second, what is a heat map?

Heat maps are visual representations of the interactions that a user makes with an interface. The color shows you where the “warmer” and the “colder” spots are, accordingly to how many interactions have been made in a certain area.

1. One photo can make the difference

This kind of heat map was made by tracking the movement of the user’s eye gaze across the screen.
In this first picture a photo was tested where the baby was looking towards the viewer. A lot of views on the baby, many happy users… but sadly there where few conversions.

When the marketers turned around the photo and let the baby look towards the text, the conversion rates improved drastically.

Positioning the point of gaze on the text or on your “call to action”, will help you bringing the attention towards your content.

What we’ve learned is that by publishing an image of a person, the user’s eyes will follow the image’s eye line. You can use this little trick to help you improve the conversion rates! Generally speaking, we can say that images of people should always face the text instead of the viewer.

2.Webpage heatmap: we live in a western world

People generally look more at the left side of the screen. Why? Certainly it depends on how the text is being aligned on the page. But I think the main reason is that people in the western world read from left to right, top to bottom.

This doesn’t mean we should put our “call to action” on the left side of the screen, but since people start reading websites from left to right, top to bottom, the top left content will get their attention first. Thanks to this info, we can create the content that drives the users’ attention as soon as possible to your action area.

3. Heat maps and bug fixing: a love story

In this example we can see a mouse click detection heat map on a travel websites we needed to improve the conversion rates. We saw that everybody was clicking on the date picker, but we could not explain why.
After a recording some browser sessions with Hotjar we found out that the date picker on some Android browsers was hidden underneath the search button. A big percentage of users couldn’t choose a date! After this change, the conversions on the site improved by 18%. Heat maps can be a great way to spot bugs on your website!

4. Keep the juice “above the fold”

The “average fold” of your website is the magical line you shall not pass (cit.). Just kidding, of course you will need to use that area too. We know that by scrolling down just a few pixels you will loose a big, big percentage of viewers. All your important “action areas” should be above the fold.

This example has been created by tracking the vertical scrolling movement of 2000 users on a webpage.

What we can learn is that only people who need more time to understand your products and services are going to scroll under the fold, because they want to get more info. This means that we should get rid of all the distractions and put the juice on top!

5. A/B testing is the key

Almost all the previous points could never have been done without it. Conversion rate improvements most likely come along with A/B testing. You think something could be improved? try to create an alternative or two. Start testing it and try to include a heat map next time. This combination might reveal something you would not expect!

These are my top 5 heat map services to get you started

1. Hotjar is a really precious tool, considering that can easily create a few heat maps at the time, download them and create more… for free!
2. Sadly Crazy Egg is not a free service anymore, but you can get a free 60-day trial!
3. Mockingfish will help you combine A/B testing and heat maps, great service, free for one year.
4. ptengine is not as good as the ones we’ve seen before, but, hey it’s free.
5. We have met one of the founders of EyeQuant and he explained to us that it is not a common tracking service. Artificial Intelligence predicts which parts of your design are most and least eye-catching, so you can make sure that your most important content is visible right away. Is it free? No, but it provides a great alternative to eye-tracking services.

Our replies
to your questions

Why choose glueglue?

We are a digital product agency with more than 10 years of experience and highly specialized skills in both design and development.
Over time, we have consolidated an agile and effective method to work best with all types of clients: from the start-up that needs some kind of support to the multinational corporation that wants to integrate a team with design and executive agility, our most appreciated peculiarity.
We are positioned in a medium-high market segment and are able to offer excellent value for money. Direct supervision by glueglue's founding partners of each project ensures the highest quality of service and finished product. We are on the top list of the best User Experience and digital product agencies on Clutch, the most widely used database of digital consulting agencies in the world.

How does glueglue work and what are the areas of expertise?

We always start with a careful analysis of the customer's needs considering not only the product needs but also the medium and long-term business objectives.
As a first step, we often deal with the visual identity, evaluating the positioning by analyzing the competitor and identifying areas for improvement in terms of branding and image.
Then, we move on to the UX/UI area: we study the user experience of your product or service through a UX Review with 3 dedicated professionals to identify the points which it is necessary to act to improve the usability of the site or app examined.
In the following phase, we design the User Journey Map, i.e. the map of all the paths that the user follows, interacting with the product and the brand . Identifying all the contact points is of strategic importance in order to immerse ourselves in situations of real use and understand where value can really be created for the end user and therefore for the product.
We will then move on to the phase of creating the wireframes, with the sharing of an interactive prototype that will define the functionality and structure of each single page and interaction of the product.
Once the wireframes have been consolidated, we will move on to the design phase of the graphic interface, with attention paid to the smallest details in so as to ensure a positive and truly satisfying user experience.
At this point, our developers come into play for the implementation part. We use the most current technologies such as React, Flutter, Gatsby JS, Symfony, Node.JS and others to create products with high standards of quality and stability, working and pixel perfect.

What distinguishes glueglue from other top design or product agencies?

To offer maximum value, the glueglue team works on a limited number of projects. In this way, our professionals can dedicate an uninterrupted focus to always obtain excellent results.
Each project is managed on the basis of precise deadlines and intermediate meetings with the client. We take care of the unique needs and potential of each product and consequently, each solution created is exclusive and highly customized.
Thanks to the experience of 10+ years in the digital sector, we have developed a successful method to achieve the highest goals in the areas that matter: strategy, design and development.

Can you do web design?

We work on all types of digital products, from iOS and Android apps to webapps and complex platforms.
Furthermore, part of the team specializes in creating marketing websites, i.e. websites totally focused on promoting the product or services.

Do you also do branding or should I look for another agency?

Being a full-service agency, we also offer branding services such as naming and logo design. Among the products we create for our customers, the brand guidelines stand out, i.e. the detailed guidelines document for the corporate image. We are totally comfortable working on existing guidelines or in collaboration with a branding agency.

How much does it cost to entrust you with a digital project?

We like to always be as transparent as possible and we believe that talking openly about the budget is important to understand how to get added value from the partnership for both parties. Given this, since each customer has its own peculiarities and presents different challenges, we do not use a price list, but we invest time to understand the customer's reality well and provide a specific approach and an appropriate price.
Indicatively, the price of user experience and graphical interface design projects can vary in a range between €10,000 and €30,000, depending on various factors such as the client's needs and the complexity of the project.
The cost of the projects in area Branding is positioned between €5,000 and €15,000, always taking into account any possible peculiarities.
As regards the more technical part, the cost for the development of iOS and Android web and mobile apps ranges from €20,000 upwards .
Website development starts from a minimum of €10,000. Our average hourly rate for single consultations is €60 per hour.
If you want to get to know us better, you can schedule 30 minutes free by appointment.

Do you also work with early stage startups, therefore with limited resources?

Of course, we love startups! Over time we have met many enlightened and highly talented entrepreneurs.
We have invested in some startups, preferring work for equity. Our experience has always been positive, contributing to the achievement of various rounds of investments for a total value of over 30 million Euros.

How to increase conversions with 5 heat map tips