Navigate back to the homepage

Will users notice my critical elements?

Dimitris Raptis
June 25th, 2020 · 1 min read

Visibility is the basic principle that the more visible an element is, the more likely users will know about them and how to use them. Equally important is the opposite: when something is out of sight, it’s difficult to know about and use.

For this example, we’re gonna analyze the landing page of Quip. Quip is a SaaS app that sells electric toothbrushes and other dental health products in a subscription. In our case, we want to test the visibility of their two main call to action elements and the product itself since they are the most important converting element for a SaaS company.

The analysis utilizes the VisualEyes’ Attention maps that forecast user attention in designs. Moreover, it’s important to define our Areas of Interest (AOIs) around the testing critical elements.

Untitled
Untitled  1

AOI Results

Landing page variantAOIMeaning
Navigation Bar's CTA-28%-0.28 times below the average attention
Main Section's CTA 782% 8.82 times above the average attention

By generating the results, it’s pretty obvious which element is more visible. The visual hierarchy of the website is gathered at the center of the page and prompts the user’s eyesight to scroll down and explore the website. Also, the product, itself, enjoys a great amount of attention which is a great selling point.

A side effect is that the call to action button at the navigation bar grabs less attention compared to the main one. This is not a problem in the current case though. The designer’s approach focuses on the full exploration of the website’s content rather than having a converting visitor at the first screenful page (above the fold section).

Concluding, an easy way to determine the visibility of an element is to generate an Attention Map and examine if your element is inside the hot heatmap areas. In many cases, the heatmap visualization prevents you from making a safe conclusion. That’s when it’s a good practice to create Areas of Interest (AOIs) around your elements and quantify the attention.

👇 The VisualEyes’ example project 👇 (or open in a new tab)

More articles from VisualEyes

How to benchmark my website against competitors?

How to benchmark my website against competitors?

June 25th, 2020 · 2 min read

Examples for Clarity Range categories

The Clarity Score can vary according to the design category. For example, Landing pages tend to have higher Clarity Score ratings related to…

June 18th, 2020 · 1 min read
© 2019–2020 VisualEyes
Link to $https://www.visualeyes.design/?ref=blog-footerLink to $https://twitter.com/visualeyeshq?lang=enLink to $https://www.instagram.com/visualeyes_hq/?hl=enLink to $https://dribbble.com/VisualEyesHQ