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 🎉
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.
Uber's Old Landing Page
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.
Areas highlighted in red therefore are contributing to clutter, whereas areas highlighted in green are having a positive contribution to the clarity score.
<aside> 💡 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.
</aside>