Have a design hunch to increase CTR and want to confirm that your instinct is in the right place? Using Google Chrome and EyeQuant’s Browser Extension you can test small iterations on a live web page and validate your suspicions on the spot.  

For example, the Spotify Homepage above (Original) uses a purple CTA button “Learn More”. EyeQuant’s Attention heat map indicates that the main CTA is not visible to visitors when they first land on the page. If we could increase the visibility of that button, it might actually increase the CTR. What would it take to increase the visibility? A quick solution is to simply increase the contrast of the button and button text.

Using Chrome Developer Tools, you can actually “inspect” and modify specific elements (size, color, font, etc.) directly within the HTML of the page. On the Spotify Homepage, we simply adjusted the button color to have a super high contrast compared to the purple background, and increased the contrast between the button text and button color.  Then, it’s as simple as clicking the EyeQuant Extension button and analyzing the new iteration.  The result (above, “Iteration”) indicates that the button is now much more visible.  With practice, this rapid iteration and validation can be done in minutes!

Follow these simple steps to try it for yourself:

Want to dig a litter deeper?  You can actually quantify and compare the visibility of the change using EyeQuant’s Regions of Interest.  In the example below, you can see that the new iteration makes the CTA  3x more visible than the original!

The most important content should be seen first, so the huge increase in visibility could go a long way towards increasing CTR for this particular element.  Not bad for a few minutes worth of work!

Learn more about adjusting elements using Chrome Inspector