One of the big blessings of heat-mapping is that this tool gives you a clear indication – via eye-tracking — of what elements users are most looking at on a webpage within a 5-second time span.
A lot of ostensibly great webpage designs reveal core `defects’ once it has been heat mapped to track user eyeballs. Let’s look at some of them:<!–more–>
<strong>BOLD BUT FUNCTIONLESS VISUALS CAN STEAL TOO MUCH ATTENTION</strong>
Big, bright, bold visuals that have no CTA value, often grab a disproportionate amount of attention because of its sheer weight on the page.
See the heat-mapping results (below) of a trucking company’s homepage that was heat mapped by <a href=”https://www.techwyse.com/blog/website-conversion/using-heat-maps-for-improved-landing-page-conversion/”>TechWyse</a>.
<a href=”http://www.tonicmediagroup.com/wp-content/uploads/2017/01/Heat-mapping-image-1.jpg”><img class=”alignnone size-full wp-image-4477″ src=”http://www.tonicmediagroup.com/wp-content/uploads/2017/01/Heat-mapping-image-1.jpg” alt=”Heat-mapping-image-1″ width=”1057″ height=”1006″ /></a>
As you can see in the top image, the original layout of the homepage had a large, red, non-clickable starburst graphic with the words “No Fees”. This element was <em>not</em> supposed to be the focal point of attention as the CTAs (like the phone number) are located in other parts of the page. However, after heat-mapping, it was clear that this starburst was actually dragging the eyes to itself because of its sheer weight and proportion. (The red heat patches indicate the greatest concentration of gazing, the yellow patches indicate secondary interest, and the green patches come in third.)
So the designers went back to the drawing board and created a new homepage. This time, there were no useless deadweights hogging all the attention. Look at the image below to see what a difference this change made.
<a href=”http://www.tonicmediagroup.com/wp-content/uploads/2017/01/Heat-mapping-results-image-2.jpg”><img class=”alignnone size-full wp-image-4480″ src=”http://www.tonicmediagroup.com/wp-content/uploads/2017/01/Heat-mapping-results-image-2.jpg” alt=”Heat-mapping-results-image-2″ width=”1057″ height=”1006″ /></a>
Deadweight, pointless graphics like the starburst are now gone. Instead, the yellow “Call Now And Let Us Help” button, which is the most important CTA element on the page, has been emphasized. The second image shows the heat-mapping results, and sure enough, the red heat patch is now focused on the button. So people are actually focusing where the trucking company would like them to.
<strong>WITH DIRECTIONAL CUES, YOU CAN PREDICT WHERE PEOPLE WILL LOOK</strong>
Human beings are wired to follow directional cues with their eyes. For example, when we see someone looking in a particular direction, we will instinctively follow their gaze.
Look at the image below of a page advertising a baby skincare product. Heat-mapping shows that users are looking mostly at the baby’s face. The CTA, which is the text on the right, is getting minimal attention, and therefore the design is failing to make users take the desired action.
<a href=”http://www.tonicmediagroup.com/wp-content/uploads/2017/01/Heat-mapping-directional-cue-1.jpg”><img class=”alignnone size-full wp-image-4482″ src=”http://www.tonicmediagroup.com/wp-content/uploads/2017/01/Heat-mapping-directional-cue-1.jpg” alt=”Heat-mapping-directional-cue-1″ width=”1057″ height=”754″ /></a>
Now see how a new design has changed the gaze distribution immediately.
<a href=”http://www.tonicmediagroup.com/wp-content/uploads/2017/01/Heat-mapping-Directional-cue-2.jpg”><img class=”alignnone size-full wp-image-4484″ src=”http://www.tonicmediagroup.com/wp-content/uploads/2017/01/Heat-mapping-Directional-cue-2.jpg” alt=”Heat-mapping-Directional-cue-2″ width=”1057″ height=”754″ /></a>
In the new layout, the baby is not staring full face at people and taking up all their attention. Instead, the baby is <em>looking</em> <em>away</em>, at the headline and text on the right that contain the CTA – and users are instinctively following that gaze and reading that content!
<strong>WEB CONTENT IS SCANNED IN AN `F’ PATTERN</strong>
Heat-mapping has proved over and over again that people tend to scan web pages in an `F’ pattern. 2 horizontal linear directions and 1 left vertical. These areas of a webpage, therefore, are prime real estate, where the most important information should be laid out strategically, to make sure they are not missed when people are scanning the page content. The image below clearly displays this `F’ pattern.
<a href=”http://www.tonicmediagroup.com/wp-content/uploads/2017/01/F-shaped-reading-pattern.jpg”><img class=”alignnone size-full wp-image-4486″ src=”http://www.tonicmediagroup.com/wp-content/uploads/2017/01/F-shaped-reading-pattern.jpg” alt=”F-shaped-reading-pattern” width=”1057″ height=”471″ /></a>
<strong>OTHER IMPORTANT HEAT-MAP FINDINGS</strong>
<strong>• </strong>Top left corner of a webpage gets the first – and most – attention.
<strong>• </strong>Fancy fonts interrupt scanning, and readers tend to just pass over them without making the effort to pause and understand what the words are saying.
<strong>• </strong>Big images leave an impact. Thumbnails hardly get any attention as the effort to understand them also interrupts the smooth scanning flow.
<strong>• </strong>If the introductory paragraph of a piece of content (like an article, product description or blog) is in a larger font size than the rest of the text, people will instinctively read it.
<strong>• </strong>If a Google search result page has some videos near the top, they will garner the most attention – even though they may not be the first item in the search result. (Image below)
<a href=”http://www.tonicmediagroup.com/wp-content/uploads/2017/01/Videos-attract-eyeballs.jpg”><img class=”alignnone size-full wp-image-4488″ src=”http://www.tonicmediagroup.com/wp-content/uploads/2017/01/Videos-attract-eyeballs.jpg” alt=”Videos-attract-eyeballs” width=”1057″ height=”899″ /></a>
<strong>• </strong>“Above-the-fold” is a leftover concept from the newspaper era. Editors wanted to keep the best stories of the day in the top half of the page, so that they are clearly visible when the newspaper was folded and displayed at a newspaper kiosk. Web pages don’t work that way. People are trained to scroll (more so than ever with increased mobile usage) and they will look at content that lies `below the fold’ too.
