The other day I had a discussion with one of my colleagues about how important data is for web design. Don’t get me wrong – I love a beautifully-designed website with an aesthetically-pleasing layout or an edgy approach to colour choices. But I also love data.
So how can these two areas work together? This post will give you a general overview of a useful data-driven tool called ‘heat map’ that brings web design and data together.
Evaluating the effectiveness of design
The main difference between graphic design you study in the physical world and a design you admire on your computer screen (or tablet or mobile) is that a virtual design is interactive. People don’t just look at the design, but also interact with it by clicking on different areas of the design interface.
Naturally, a website owner would want to know how visitors are interacting with the web design to understand how effective the website is at fulfilling its objectives. However, it is likely the owner does not have the time to sit next to a sample of their website user base and observe the individual clicks on the website.
Luckily, Google is here to help. If a website already has Google Analytics installed, there’s no need for further tools or technology to get an understanding of the interactions happening on a website – the data is already accessible on Google Analytics. For people who are intimidated by the usual big Google Analytics datasheets, there’s also a more aesthetically-pleasing alternative – the heat map.
Data can be pretty too
To demonstrate how heat maps work in practice, let’s take a look at the hot areas on Yoke’s heat map. Despite it practically displaying all the colours of the rainbow, it is fairly intuitive. Red signifies hot, and blue means cold.
Hot areas are parts of the website that attract the highest number of overall clicks and cold areas indicate the sections with the lowest percentage of clicks. What’s more, if you tick the box saying “show bubbles”, you can see the exact percentage of clicks each area of the website attracted.
So how hot is our website? Or more specifically, where are the ‘hot spots’ of our website? Yoke’s heat map tells us that the ‘About’ and ‘Services’ pages attract the most clicks on our homepage. Digital marketers will surely be eager to point out that this is highly related to the prominent location of these on the homepage. Furthermore, there have been many eye tracking studies that show Western users like to read screens in an F-pattern, which is effectively left to right, and top to bottom.
Are you too lazy to scroll and click?
Another interesting observation is the orange bar at the bottom saying ‘clicks below the fold’, which, in Yoke’s case, constitutes only 9 % of all clicks. ‘The fold’ means the area of a page that is displayed without scrolling down. Generally speaking, people do not like to scroll down, which means that any behaviour below the first view of the screen usually receives less user love than the content displayed below the fold. This is definitely something to keep in mind when designing for web.
I would encourage everyone to check out their hot spots on their heat map. Simply log into your Google Analytics account, navigate to the ‘Behaviour’ section and select the the section that says ‘In-page analytics’. In addition to checking the most clicked on parts on your page, make sure you also check how many clicks happen below the fold – maybe there is an important call-to-action there that should really be above-the-fold?
Make users behave the way you want them to
Knowing your hot spots is nice, but the interesting part comes when you start connecting the heat map data to your business objectives. If a heat map tells you that all visitors click on an area of your website that isn’t all that important for your purposes, maybe it’s time to review your design.
As you cannot exactly coerce your visitors into clicking a particular part of your website, you need to persuade them through design. My recommendation is to show your most important features in prime positions on your website and test to see how your users behave.
In other words, combine design with user behaviour, and check on your future heat maps that the new designs make visitors click where you want them to.
Feeling a bit hot right now?