Your brand building efforts are starting to show results – people are flocking from social media or google search straight to your website. You’ve captured their attention. But once you finally get them to your playground, the outcome is rarely what you desired. The visits rarely end up in the shopping cart and you’re confused. You have a great product, a perfectly designed website, and impeccable customer service. So what’s the problem?
Let’s rewind and go back to that perfectly designed website. Now ask yourself – is your website aesthetically pleasing? If it is, is it also simple and practical to use? While looks and functionality go hand in hand when it comes to user experience, they don’t necessarily mean the same thing. So let’s look into some possible reasons for your visitor drop-out – and then we’ll show you a one-size-fits-all solution in the form of latest software Hotjar.
What is the most important thing you’re trying to tell your customers? What is the information they need? What is the action that is most likely to take them to the shopping cart? These are all questions you need to ask yourself when you’re designing a website.
If essential chunks of information are positioned far from the header, or even worse, below the fold (the part of the page visible without scrolling), you’ve found your problem. True, people do scroll, but as they scroll down, their interest and attention start dissipating.
According to a study conducted by Nielsen Norman group, users spend about 57% of their page-viewing time above the fold, while 74% of the viewing time is spent in the first two screenfuls, up to 2160px.
However, the same study found that viewing time increased at the bottom of the webpage, implying that visitor’s attention restored at that point – so this is another place where you may be missing a chance to leave an impression.
Even if your high-priority content is safely settled in the fold, near the top of the page, the most important elements still need extra design tweaks. Are the most important sources of information and calls-to-action standing out? If they are blended with other content, this could be a source of problems for your website.
If you’re counting on the visitor’s slow and well-thought-out decision process, consider the results of a study conducted at the California Institute of Technology.
Hungry participants were asked to choose from images of the snacks they had previously categorized in terms of personal preference. Their choices were tested in several scenarios – and once the participants were in a hurry, multitasking or forced to choose from the limited number of options, they went for the snacks that visually stood out, despite their preferences.
This leads us to another possible problem – too much choice. A number of studies showed that increasing the number of options can lead to paralysis and poor choice and decrease satisfaction with the choice. Therefore, visual saliency of an element can override consumer preferences, and if you offer people too much choice and homogenous content, that usually leads your customers to no decision – and no purchase.
On the other side, what happens when you take that visual saliency a notch too high? An HD video may be a great addition to the National Geographic website, where people come to enjoy the wonders of nature. On a retail website, it is a needless disruption and offers nothing of substance.
Similarly, conveying high-priority content through intricate animations, accordion menus, sliders and carousel images showed terrible results in repeated studies. Yes, they look great. However, remember the last time you tried to click on ‘bouncy’ element only to have the accordion menu disappear or annoyingly flash while you’re trying to get some valuable information.
On top of that, automatic carousels and sliders often don’t give people enough time to read the information, or don’t garner enough attention.
People are adaptive creatures, especially when it comes to defending themselves from annoying, disruptive advertising. One of the victims of this 21st-century man’s adaptation were banners, as people gradually developed “banner blindness” or the ability to completely ignore the advertising elements featured in website header or side column.
So double-check – do visuals, chunks of content or calls-to-action on your website resemble advertisement banners?
Rule of thumb – 60 percent to 80 percent of the first impression design (read: homepage) should include a visual. But what kind of visual? Not the stock photo, that’s for sure.
Everyone knows a stock photo when they see one.
Everyone loves a stock photo when it turns into a famous meme.
But other than that, stock photos are highly unlikely to impress your customers and make them buy your product.
While it takes some time and work to take good photos of your products and actual people using them, anything less than that is unlikely to send the item to the shopping cart.
You may have heard that the average length of top ranking articles on Google surpasses 2000 words, but the truth is, the length of your copy or blog posts should not be dictated by this statistic. Many of these articles are written precisely for the purpose of going viral – and your website has a different purpose – sales.
Fluff or endless, needlessly detailed articles can exhaust a potential customer’s attention before they take any meaningful action. Even if blog posts are a high-priority content, blasting people with 3000 words of text on homepage is never a good idea – articles and a copy should be presented as summarized, visualized chunks.
It is known – people tend to scan online textual content in famous F pattern. However, Nielsen Norman group, which first published these findings in the early 2000s, recently revisited these results. They found that the pattern is evolving and that it may not be the most beneficial design solution for everyone. And this most likely means you.
The F-shaped scanning pattern is bad for users and businesses, the NN group concluded and added that is is possible to reduce the impact of F scanning. Some of the tips were:
Ultimately, your website may be perfect – but not for your target audience. For example, a Miratech study has shown that older people are significantly slower online, make more mistakes and abandon the tasks at an almost 2x greater rate. Bouncy, intuitive, sleek design thus may work perfect for millennials who grew up with smartphones in their hands – but for older people, a simple, practical and informative homepage is the way to go.
Similarly, people focus on different actions based on the nature of your business and industry. For example, this study found that the ‘contact us’ and ‘about us’ feature on the website was more relevant for the accommodation & food services industry and manufacturing businesses.
The visuals received a lot of attention on all the websites, although visuals were more prominently scanned in accommodation & food services industry, retail trade, and arts, entertainment & recreation. The social media tabs were never viewed on the website (and here you’ll find advice on why you should drop those from your blog).
If you’ve recognized your website in some of these situations, or still cannot figure out what’s causing the high visitor dropout, it’s time to turn to some digital tools for solutions. There is plenty of software that can help you pinpoint the weaknesses on your website or optimize it for maximum results. We’ve already written about the ways to use heatmaps for a 300% increase in your traffic, or the ways to get the most out of tracking software like Crazy Egg.
This time, we will guide you through the latest addition to this software, and judging by the user reviews, total gamechanger – Hotjar.
There are several methods Hotjar employs to record your website visitors’ behavior. One of them are heatmaps, which are based on tracking eye movement.
To find the information or make a purchase decision, your visitor must successfully complete two stages of visual search – distribution of attention and information processing. To be able to conclude whether this happens when somebody searches your website, Hotjar put together 8 heatmap tests.
Different types of heatmaps record visitor’s clicks and taps, mouse movement, and scrolling to conclude which areas of your page are ‘hot’ and ‘cold’ based on the amount of engagement they receive. Each of these tests can address the problems we’ve been talking about.
This test will help you figure out whether people click on elements that are not links, and show you where you should be adding them.
This test will pinpoint the irrelevant elements that distract visitors from a meaningful action and provide you with insights into the areas that can drive engagement.
If people spend a lot of time clicking around a certain area, spinning in circles, it is likely there is some type of information they need and it’s missing. The results of these tests will help you utilize the area that draws a lot of attention and address the current lack of information.
TV and computer screens keep getting bigger, and on the other hand, all of their features can conveniently be available in one’s palm. So how do you make sure that your website looks equally mint in all sizes? Responsive design – and the first step to it are heatmaps.
This test will show you how much users scroll beyond the fold and for how long they are ready to engage with content that is not readily available. This will help you decide what kind of information should be prioritized.
This test can help you understand why visitors are not engaging with high priority content.
This test differs from the fold test – it will help you explore the way users interact with the first elements they see on your page and show you whether you should move down some content to spark interest and engagement.
This test will enable you to see whether visitors are engaging with navigation in your header because they are not easily finding what they need on the page.
Click Recordings are another feature Hotjar offers. It records HTML changes that happen while your visitor uses your pages, mouse movements, mouse clicks, scroll movements, keystrokes and browser viewport size changes. It then replays all of these events giving you an incredibly detailed picture of the way the users interact with your website.
While heatmaps are helpful when it comes to analyzing a page in its entirety, click recordings give you even more detailed insight into the way the visitors engage with your page. It will tell you how many times they clicked on a certain element, whether they found what they needed, where they headed next, and at which point they gave up on the purchase.
In case the visitors are sharing sensitive data on your website, you have an option to whitelist these input fields and Hotjar will not record them.
Furthermore, Hotjar will help you understand the reasons behind the visitors’ behavior by enabling you to create instant feedback pop-up windows and mini pop-up surveys. You can use them to ask your customers what they are looking for, what they’d like to see improved, etc. if you want to dig deeper, you can also build a survey using Hotjar’s editor and distribute them on social networks or via email.
It seems so. Hotjar holds an admirable 4.7/5 rating based on 80 reviews on GetApp. One of the greatest pros of Hotjar is definitely its all on one tool that provides a user with detailed insights for a fraction of price you’d pay using several different specialized tools. It is simple, easy to integrate with and reliable. Hotjar’s customer service was also scored highly. Although the cons definitely do not outweigh the pros, some users complained that collected data could be grouped better because it becomes overwhelming over time.
Hotjar offers plans for personal use, businesses and agencies. Personal plans come for free and for $29 a month – they are reserved for enthusiasts or small startups with low traffic. The price of business plans depends on the number of page views you want to record on a monthly basis – the smallest records behavior of 20000 users for $89 a month.