The study of Heatmaps teaches us many things about how we use, experience, and react to content. Whether delivered through the interface of an application, a printed document, or website, the study of Heatmaps have revealed powerful truths analysts and designers must work into their products.
1. Prioritize content according to your visitor’s goals
“Give the people what the want”…. as the Kinks would say. Align your content with your visitor’s goals by prioritizing the information ordinally from most to least relevant to maximize utility, engagement and success. In other words, put the most important stuff first.
If you have a long article, it’s best to present it as one scrolling canvas than to split it across multiple page views. Scrolling beats paging because it’s easier for users to simply keep going down the page than it is to decide whether or not to click through for the next page of a fragmented article.
But no, the fact that users scroll doesn’t free you from prioritizing and making sure that anything important remains above the fold.
Information Foraging theory says that people decide whether to continue along a path (including scrolling path down a page) based on the current content’s information scent. In other words, users will scroll below the fold only if the information above it makes them believe the rest of the page will be valuable.
2. What you see is more important than what you want
What sticks out gets chosen. You are drawn to what you see. If you can’t see it, you won’t buy it. If you can’t see it, you won’t do it. UI design needs to visually prioritize the content with the desired action of the visitor.
A recent Caltech study finds that consumers are more likely to choose the product with the most visual impact over their actual personal preference when distracted or in a rush, and when confronted with a similar range of choices.
3. Users spend the most time looking at the left side of the page.
At first this may seem like an epiphany, until we realize the simple truth that we read from left to right…. so it makes sense that we would spend most of our time looking at the left side of the page. This also illustrates how quickly we remove our attention when we don’t get exactly what we are looking for. Engage me or I’m gone.
4. Users read content in an ‘F’ shaped pattern
Jacob Neilsen conducted an eye-tracking study which recorded how 232 users looked at thousands of web pages. Users’ reading behavior was fairly consistent across many different sites and tasks. The reading pattern that emerged looks like an F and has the following 3 components:
- Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
- Users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
- Users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.
5. Users ignore advertising
We call this ‘banner-blindness’. We are bombarded daily by thousands of ads, so we have subconsciously learned to ignore advertising on websites. This also means that any block of text or images that may look like advertising will be ignored. Visitors almost never look at anything that looks like an advertisement.
Studies conducted on Heatmaps consistently show that there is no visual engagement of anything that could look like an advertisement. This has profound implications for how content is constructed, designed, and delivered.
6. You follow the direction of a model’s eyes
Just look at this cool image from Human Tracking. Clearly the eyes glanced to the left will guide the viewers eyes to the left.
Guiding potential users to your call-to-action using page elements or images is common practice in conversion optimization.
7. Emotion is more important than information
In this test, an image of a woman was placed on a landing page; the rest of the page was kept exactly the same for the sake of control and test validity. To be statistical significant, the test was conducted with over 150,000 unique visitors, and 95%+ confidence levels on the versions that hit over 4% difference.
10 different images were tested using the same model, wearing the same colour, posing with different emotions, and looking or pointing in different directions. Eye tracking and creating a well designed eye-path is GREAT, but too often that’s all designers focus on. While the images of the woman looking and pointing at the call-to-action on the page gave a slight conversion increase, they were not the highest converting images.
It turns out that the model’s emotions were a larger factor in the conversion increase than where she was guiding the eyes of the user. The model’s emotion elicits a similar emotion in the user and in doing so, helps the user into the emotional state that best fits the service or product and, in turn, makes the user more likely to make take a directed action.
8. Layout drives success
A cluttered interface makes an application or website difficult to use. A cluttered interface reduces accessibility to information, causes confusion, frustration and user failure.
When your target audience are elderly people, make sure to focus on making your website as easy to use and clutter-free as possible. When testing 257 correspondents in a remote user test, the failure rate for tasks was 1.9 times greater for the over-55-s than it was for under-25-s. Almost twice as many older people failed or abandoned the given task, as compared to younger people.
People’s eyes fixate first on the upper left of the page, then hover to the right, and only after some time do users start exploring further down the page.
Users see dominant headlines first; particularly when placed at the upper left.
Smaller type focuses user reading behaviour. A study found that larger type resulted in more scanning of the page because people looked around for words or phrases that captured their attention. Smaller type resulted in people focusing more on the content.
Headline is everything. If the first words of a headline do not capture your users attention, they will read on. Studies show have less than a second to get their attention.
9. Contrast (see C.R.A.P.) draws attention
After testing a landing page with heatmaps to find out user behaviour, the guys at techwyse found out just how important color contrast is in guiding the visitor. A non-clickable, informational element about pricing on the frontpage gathered the most attention because of its color contrast with the surrounding area – Diverting away attention from the rest of the page. After a slight design – focused makeover on the frontpage, the scanning patterns of visitors became aligned with what the company needed.
10. Photos of people are powerful
People are visual. Sites have been using well-selected images to boost conversion rates since the dawn of internet, and with good reason.
Your brain can process images 60,000 times faster than it can process words. In an instant, an image can convey an idea or an emotion which will stick with you much longer than the words on a page. It is critically important that your UX (User Experience Design) adopt a Visual Content Strategy.
Use photos of real people
People respond well to images of real people. In this study, the test subjects spent 10% more time viewing just the photos of employees than reading the content which was on most of the webpage. In contrast, visitors completely ignore stock photos of “real people”. Somehow we have learned to recognize “photobank people” from photos of actual people. This blog post is a perfect example of what may happen when using stock photography. This also holds true for actual photos that may look like stock photos – so pay attention not to over-edit your photos.