Design score

Clarity Score

Shows how clean and clear the design looks for the users. Clarity is the opposite of complexity or clutter.

A high score means that the design is clean, simple and clear.

A low score means highly confusing, complex and cluttered design.

How it’s measured? The value ranges from 0 to 100.

Below 25 25-50 50-75 Above 75
bad and clutter Average Good Excellent

How to improve your design’s clarity with Dhiti's predicitve eye tracking software?

A cluttered design increases cognitive load. Your goal should be to make a clear design removing unnecessary information with less content. A clear design is easy to process for a mind with reduction in cognitive load and ensures that the consumers will see what is expected by designer.

To improve clarity, you need to reduce clutter:

  • Reduce unnecessary text, number of tasks user has to perform and amount of information user has to keep in mind.
  • Use more images, increase whitespace or padding around content.
  • Organize the design into easily distinguishable content blocks.


Excitingness Score

Shows how exciting and stimulating the design looks for the users

A high score means that the design is exciting, colourful and interesting

A low score means calm, less exciting and dull design.

Please note that less exciting score need not be a bad score. It depends on the design context and the goal behind the design. Exciting is more related to colors how rich the visual is. Calm with low exactingness score can be a successful ad and website design. This score is to check your assumptions about exactingness and whether its matching your expectations or not.

Exactingness value for website above 25 and for advertisement 50 are considered high exactingness scores.

*Clarity and exactingness should be treated independently and they do not affect each other’s value. While too exactingness score above 85 may affect the clarity score.

Perception Map

Shows what your viewers will see during the first few seconds of visual inspection. It focuses on which areas of the design are being perceived and which are being ignored. See whether your important information and call to action are instantly visible to viewers or not. The report uses a transparency gradient and the most transparent areas are those that attract more attention.


Attention Heat map

Shows the most attractive elements of the image for viewers and capture most attention. The Attention heat map highlights areas likely to receive attention within the first few seconds. Red areas are most likely to attract attention, followed by yellow areas (medium attention), and green areas (low attention). Areas that have no color overlay are unlikely to attract visual attention and will be overlooked.


Shows a % of attention marked areas receive. It’s a score of the predicted probability that a viewer will look and is likely to get attention at the selected area as compared to other design elements. 0% means no attention at all, and 100% means this area will be mostly noticeable

The scores are calculated based on the heat map values within the defined AOI. The scores or number for defined AOI determines the % of visibility of that area. Each region has a numeric score, predicting the probability a person will look somewhere within the region when they first glance at the image. You can A/B testing with various layouts, design versions and do a competitive benchmarking too.

Auto AOI shows the top attention grabbing areas of your design.


How to interpret –

If the AOI score is low, not visible enough, and you wish to increase the score and make the object more prominent, the visual features gives you cue about how to achieve that.

Inspect which visual feature of this AOI is low and change its design to make it higher.

Intensity features (I) - The percentage of intensity features. (Change dark/light contrast)

Edges features (O) - The percentage of edges and orientation features. (By adding or reducing edges)

Red/Green contrast (RG) - The % of red–green colour contrast. (By changing colour contrast)

Blue/Yellow contrast (BY) - The % of blue–yellow color contrast. (By changing colour contrast)

Design change can be done by changing colour contrast (red/green or blue/yellow), intensity (dark/light), orientation (change angle of the object), adding or reducing edges, adding or removing face.