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.
|Landing page variant||AOI||Meaning|
|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)