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.
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.
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:
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%.
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:
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.
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).
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
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).
Want to know more? Check out guide to Facial Action Coding System (FACS)
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.
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.
Thanks to analyzing eye-tracking heatmaps we can spot a couple of things that allow optimizing website.
From what we’ve learned:
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:
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.
.png)
.png)
