contact@realeye.io +48 601 321 876 Sign Up Sign In English

How UBER optimized their home page design for conversion - eye-tracking insights

Adam Cellary
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).
realeye heatmap

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.

realeye heatmap

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.

David HotJar
HotJar logo
David Darmanin
CEO, hotjar.com

"I'm really impressed with what Adam has created with RealEye. It's astounding how easy and fast it is to track and report on eye movement for a page or design."

Lewis UX Designer
Lewis UX Designer
Firebox logo
Lewis Healey
UX Designer, firebox.com

"With RealEye, we found users weren't noticing key parts of our value proposition, that we couldn't have discovered with screen recordings or heatmaps. This service is invaluable and even better.....affordable."

Lukasz Koldrys
Lukasz Koldrys
WaveMaker logo
Lucas Koldys
Analytics & Insights Deputy Director, WaveMaker Poland

"RealEye has created a tool that allows us to quickly and easily choose the most effective display or OOH formats."

Trusted by freelancers, small to big companies, students, and universities.

CNBC
DELL
HotJar Xawards
University
UnStock
Yelp

Frequently Asked Questions

RealEye studies are proven to be around 100px (~1.5 cm) accurate with an average error on the visual angle of 4.17 deg. This allows analyzing users interaction on a website with precision reaching the size of a single button.
We predict the gaze point with frequency up to 60 Hz.

Check how to get accurate results.

For in-depth analysis of webcam eye-tracking accuracy check the following articles:

Either your own participants or RealEye testers. You can invite your users or panel and share the study with them using a participation link. All they need to have is a laptop/PC with a webcam.

We also have a network of panelists from all around the world - mainly from the UK and the US. Randomly picked users can be assigned to your task. They are called RealEye testers. We will not show them your stimuli before the test starts, so their interaction will be natural.

RealEye is tested and works with the following hardware and software setup:
  • Google Chrome or Edge (10) web browser,
  • PC/Laptop with Microsoft Windows 10 or Mac (Macbook, iMac) with MacOS,
  • a laptop integrated webcam or USB webcam,
  • RealEye DOES NOT allow running eye-tracking test on a mobile device (smartphone),
  • required screen resolution is 1024x968 pixels or more. Only horizontal screen orientations are supported.
Read more:
  • how to make a webcam to work (https://support.realeye.io/how-to-make-a-webcam-to-work/)
  • how to obtain a 60Hz sampling rate (https://support.realeye.io/webcam-eye-tracking-at-60-hz/)
  • how to obtain the most accurate data (https://support.realeye.io/how-to-get-accurate-results/)
There are only monthly payments, so there’s no possibility to pay per study. But keep in mind, that you can cancel your subscription any time (even in the same month) - you’ll keep the account access until the end of the billing period.
You can easily integrate the RealEye tool with external tools (eg. surveys), but also compare the results obtained from other tools using our CSV file (i.e. by the timestamp).

Start Today!