Adam Cellary, Founder of RealEye
8 min read
Every website has a purpose – to advertise, introduce or encourage people to purchase a product or service. To achieve these goals a website has to be eye-catching and clear to visitors.
But how a web designer can be sure, that design is catchy and clear to everyone?
The answer to this question can be an eye-tracking. UBER has significantly improved its website in the last year.
Let’s see what we can learn from it.
First of all, eye-tracking is an eye movement measuring method. It used to be expensive and requiring experience, but using RealEye.io this analysis can be done by anyone in less than a day and for the friction of costs.
All you need is a computer with a webcam and a little bit of curiosity.
Let’s compare the results:
In both cases, there is a similar number of panelists (55 and 58 panelists) and the same view options set by default.
Try to draw some conclusions by yourself and then compare them with this article.
But first things first, let’s start with some keywords.
If you are familiar with them, you can skip this paragraph.
Eye-tracking heatmap: As a result of an eye-tracking test, a heatmap is given. Heatmap is a data visualization of where a person was looking at and for how long. In other words, it’s a graphical representation of the density of gaze points, showing the most popular (hot) spots on the page.
Eye & Mouse Recording: Video which shows how a person was interacting with the design showing gaze point and mouse cursor.
Area Of Interest: RealEye.io heatmap allows defining an Area Of Interest (AOI). This is an analytical tool that allows calculating quantitative eye movement measures. Simply click and draw a boundary (rectangle) to receive the following metrics:
- total time spent by viewers at this area (summed up time shown as a percentage of a whole viewing item time),
- average time viewers spent looking at this area per view,
- average time until the first view (how much it took viewers on average to look at this area for the first time),
- gaze counter (average quantity of gazes at this area, so how many times, on average, a viewer looked at this area),
- viewers counter (how many of all the viewers saw this area).
Website headline twice as effective?
A headline is the most important sentence of the whole page. It indicates the nature and content of the whole page,
Let’s analyze AOI’s drawn over both of them.
It’s easy to deduce that the “new” version performs a lot better. The headline was seen by all panelists when the “old” one by 90% of them. That means that 10% of people have not focused their gaze on the headline, not even for a moment. What’s more, the “new” version of a headline was seen on average after a second, while the “old” one after almost 1.5 sec. It’s a huge difference.
What’s more, the “new” version of a headline was seen on average after a second, while the “old” one after almost 1.5 sec. It’s a huge difference.
People were looking at new slogan more often, looking two times longer per view and spend about 8% of all their time on this page on the headline, while in the “old” versions it was only 3%.
How to achieve it?
By checking eye-tracking results we can tell that UBER has achieved a big improvement regarding their main page headline with a few simple tweaks:
- They’ve got the slogan more centered and the content of it more actual – it immediately explains what is the purpose of this page.
- They haven’t split it from the “Sign up” button, and the registration form is available after clicking it, not like previous – at first, distracting user attention.
- But the most important – they’ve changed the picture.
Let’s compare the AOI’s data taken from both faces.
A small difference in where did the characters from pictures look, made a huge difference in users attention. Face “looking at” viewers made them look back, while a man looking at text redirected all attitude to this slogan. In the “old” version people spent more time looking at the face than at the headline (7% vs 3% total time, while in the new version this ratio header to face is 8% to 3% ), noticing the face faster, looking more often and longer.
How about the logo and menu?
UBER logo has never been a priority to show, so they’ve made it smaller and a little less visible (19% of viewers have seen it in the old version and 16% in the new one, but they saw the new one faster on average).
In addition UBER changed a “burger” menu to a simple menu, adding options along with an increasing number of its services. This gained a lot of attention to the menu (2% vs 6% now).
Force people to SEE the CTA buttons!
Now, one of the most, if not the most important thing on every page – CTA (Call to Action) buttons, especially the first CTA right under the headline saying “Sign up”.
Although the “old” first CTA was much bigger and in a brighter color, it was less visible and, on average, over a second later noticeable.
What’s more, in the “old” version there were four “sign up” buttons, and 5 other CTA buttons, while the new version has only 4 -all to sign up.
But summing up total time all CTA buttons were seen in both cases. It is quite a surprise to find out, that in the “old” website version this total time took about 2% of the whole time visitors spent looking at the page and only half of it was assigned to “sign up”. While in the new version it took about 3%.
So, the new website design provided 3 times more attention to “sign up” buttons
How much attention draw human faces?
In the “old” version, there were about 9 faces displaying at the same time, while the “new” version contains only 2 (the second one from a video, which was changing, but there always was only 1 face per video, one video displaying at a time).
Time people spent on looking at faces took 13% of total time in the “old” version and 8% in the “new” one. Again, the level of distraction has been decreased.
Additional eye-tracking insights – USP and footer
It may seem, that we should put images from left to right in the order of their importance, but as you can see, the most focused item is the middle one, then the one on the left, and the least noticeable is the one on the right.
The second thing worth noticing is how far did people scroll on the page and how many of them have actually seen the footer.
You can easily read from an Area Of Interest that the “old” version footer was seen by only 17% of viewers, and the new one by almost 70% of them. Also, people had spent less time looking at it in the “old” version.
Why it is so?
Generally, the new UBER page is much shorter (~4500 px versus ~6500 px). In the “old” version people seemed to “get bored” before reaching the end. This is bad if CTA buttons are there (like in the “old” landing page).
Furthermore, the old version of the footer is bigger – more options to choose, more scattered.
So what we have learned?
Thanks to analyzing eye-tracking heatmaps we can spot a couple of things that allow optimizing website.
From what we’ve learned:
- To make a headline more “catchy” you need to get it centered and a content actual. Even a good headline can be missed due to bad design.
- Human faces are eye-catching. This can distract people or redirect the attention of viewers onto something.
- Reduce the number of CTA buttons and put them in the right places.
- Images located in the center are the most visible ones.
- Don’t mage the page too long. Otherwise, people can get bored and miss some important elements.
All those things may cause a major difference in your website success but obviously, it all depends on each page design.
Eye-tracking surely has a value in the UX and CRO context. It helps you:
- validate your designs,
- knowing what to change,
- show your clients real data feedback and prove your point,
- increase the conversion rate.
What’s even more important, the RealEye.io provides gaze point and mouse cursor recording (including clicks). This feature may help you understand user subconscious behavior independently and discover UX issues.