by Jim Raptis, Co-Founder of VisualEyes

For many websites, especially e-commerce and landing pages, call to action elements are a key to sales, traffic, and success.

The call to action is a key element on a webpage, acting as a signpost that lets the user know what to do next. Without a clear CTA, the user may not know the next steps to take to purchase a product or sign up for a newsletter and is likely to leave the site without accomplishing their task.

In the following example, we used two variants of the new and old landing page of Uber for drivers. The team of Uber did a structural re-design that boosted their lead generation process and helped the communication of their brand.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bb75f565-5108-4b42-80f2-d0f62097a03a/Untitled.png

The first step in our design analysis is to create two different predictions for the two landing pages. Below you can have a look at the generated Attention Maps and Areas of Interest (AOI) in the example Prediction pages.

๐Ÿ”—Uber - Old Landing page

๐Ÿ”—Uber - New Landing page

<aside> ๐Ÿ’ก Attention Maps visualize the visual hierarchy and pinpoint the focal areas in your design. Along with AOI, they can forecast which element grabs more user attention in each variant.

</aside>

Attention Map of the old landing page

Attention Map of the old landing page

Attention Map of the new landing page

Attention Map of the new landing page

By applying a basic design principle about faces, the new Uber landing page manages to guide the visitorโ€™s line of sight straight into their Call to Action section. People are curious by nature and if other people look at something, they want to know what it is they are looking at. Thus, by re-arranging the sight of the model to the Call to Action section, they accomplish to focus the visual hierarchy there.