How to Use Attention Insight Google Chrome Extension

Having a website is great. But having it constantly hitting KPIs is even better, right? 

Test your website’s design with Attention Insight Google Chrome extension and make sure it’s well arranged, attractive for the visitor’s eye, clear, and is easy to navigate for your customers!  

Optimize your website for better performance, get relevant test results in just a few easy steps: 

1. Go to https://chrome.google.com -> Extensions -> Attention Insight.

2. Select Add to Chrome.

Attention Insight extension

3. Now you can use it for testing websites. Select Attention Insight icon in the top right corner, login, and choose from two analysis types from the pop-up window.

Attention Insight Google Chrome extension on the Wix website
Attention Insight Google Chrome extension on the Wix website

a) If you press Scan Current View, the view of the page on the screen will be scanned.

Attention Insight Google Chrome extension on the Wix website showing heatmaps

b) If you press Scan Full Screen, the whole length of the page of a website will be scanned.

Attention Insight Google Chrome extension on the Wix website showing heatmaps
Attention Insight Google Chrome extension on the Wix website showing heatmaps

4. Now you can see the Clarity Score in the Analysis results window, and the heatmaps on the objects.

a) Clarity Score shows how clear the design is for a new user, whether it is overloaded with elements and conflicting colors, or it is clean and clear.

An algorithm takes into account various aspects of your design – the amount of text, text size, and text contrast, colorfulness, number of images, and their size. The higher the score, the more clean-looking the design is. On the other hand, a low score indicates that your design is cluttered and important elements are not easily visible.

The Clarity Score ranges from 1 to 100. Ultimately, the Clarity Score is divided into four categories:

  • Severe Difficulty (0-29)
  • Moderate Difficulty (30-59)
  • Optimal Clarity (60-94)
  • Too Simple (95-100)

Clarity benchmark allows you to benchmark your design clarity to your industry standard; it shows where your design ranks regarding clarity compared with the most popular websites in the world in a certain category. To get the most popular websites with the most traffic, we used Alexa Sites Rank. Clarity Benchmark takes 170 top-ranked websites on Alexa Sites Rank: you will be able to find out whether it has a better clarity score than the most top-ranked Alexa Rank websites or it trails somewhere on the tail-end of those 170 websites.

To get more detailed results about the page, press Get more insights. You can also download the results.

b) AI Heatmaps are a visual representation of data that helps you determine whether users view and observe certain elements.

The algorithm uses warm-to-cold colors to display which areas get more attention. For example, areas attracting the most attention receive warmer colors like red and yellow.

For further examples visit Attention Insight channel on Youtube:

About Author

Complete Guide to DATA-DRIVEN DESIGN

Get ebook for free. Just leave your email below.

You will be subscribed to our mailing list.