Navigate back to the homepage

How to interpret Clarity Score and Maps

Costa Alexoglou
November 29th, 2019 · 2 min read

Hey there fellow designer 🎨

In this article, we will try to interpret a few Clarity Scores and Clarity Maps and understand the insights we can extract to iterate and design better.

You can download the design files, including some of the following examples to try them yourself and get familiar with VisualEyes.

Let’s start testing 🎉




First Example

Below we can see an example of Uber’s old and new website. The two sites have a Clarity score of 68 and 77. A higher score means that your design is cleaner and aesthetically more pleasant as our studies have shown.

Untitled 6 1024x671
Uber’s Old Landing Page
Untitled 1 2 1024x671
Uber’s New Landing Page

Let’s break down the scoring badge. The score is expressing as mentioned above, how clean and aesthetically pleasant your design is perceived by users. The desktop icon means that your design was evaluated with our desktop designing algorithms. If the icon is a mobile device, then we evaluated your design with our mobile/tablet algorithms.

The gradient map placed below the blue box is helping you understand how to interpret the results of the Clarity Maps.

Untitled 2 1 1024x216 Untitled 3 1 1024x237

Areas highlighted in red therefore are contributing to clutter, whereas areas highlighted in green are having a positive contribution to the clarity score.

💡 If you want to improve clarity score on a specific design, this map will help you pinpoint which pixels could be removed or modified to generate some quick wins.




Second Example

Now let’s get our hands dirty and iterate on a design to make it more clean and pleasant for our users.

Let’s try testing a dashboard design from Pierluigi Giglio.

We can see that it’s Clarity Score is equal to 62, a high score for a dashboard with so much information. Let’s try to fix the red areas of our design to achieve an even higher score.

Untitled 4 1 1024x728
Dashboard original template
Untitled 5 1 1024x728
Dashboard original template Clarity Score/Map

By removing the Remove text next to the red circular button, we managed to raise by 1 point our score.

Untitled 6 1 1024x728
Dashboard modified template
Untitled 7 1024x728
Dashboard modified template Clarity Score/Map

Not Bad


If we do not want to sacrifice the usability of our page, we could implement a tooltip in that button.

Now we can continue to test and try to fix the most significant red area that is lowering down our score! I leave it up to you.




Third Example

We will test now a landing page template from a fellow designer, Sebastian Mantel. Below you can see the original Landing page of the template, with a predicted Clarity Score of 81.

Untitled 8 1024x583
Original Landing Page template
Untitled 9 1024x583
Original Landing Page template Clarity score/Map

We can see clearly that the subtitle, below the Lorem Ipsum headline, is red enough to warn us and take action. Also the Lorem Ipsum subtitles below the stats are lowering down the score because the map is transparent that tends to be red. My effort will be to make the texts a little bit bolder and whiter to increase the contrast with the background.

Untitled 10 1024x583
Improved Landing Page template
Untitled 11 1024x583
Improved Landing Page template Clarity Score/Map

Now the score increased from 81 to a jaw-dropping 87 🎉 Just by modifying the contrast and the weights of the subtitles.

💡 We cannot eliminate every red area of our designs when we have to deliver some insights to our users and convey a message to them. You need to find a fine line between the score you want to achieve and the context you include in your designs.

More articles from VisualEyes

How VisualEyes can lead the design evolution

VisualEyes  is a next-gen design tool that combines leading neuroscience research with AI to accurately predict how people will react to…

November 28th, 2019 · 1 min read

ASOS Case Study: How can product images impact conversion rates?

Product images can play a critical role for every e-commerce company that seeks to increase its conversion rates and engagement. ASOS  is…

November 28th, 2019 · 5 min read
© 2019–2020 VisualEyes
Link to $https://www.visualeyes.design/Link to $https://twitter.com/visualeyeshq?lang=enLink to $https://www.instagram.com/visualeyes_hq/?hl=enLink to $https://dribbble.com/VisualEyesHQ