Free Predictive Eye Tracking Tool for UI Design

We've created a free, predictive eye tracking and gaze tool for designers so you can automatically see how where your users will direct their focus, fast. Try it out:

How it works

We've studied what draws focus to an element in a design, and have found there are numerous things which can influence gaze and attention:

1. Contrast
2. Size
3. Positioning
4. Negative space
5. Evolutionary traits (e.g. faces, eyes)

Some of these elements are used in this tool to help highlight which areas have the highest saliency, and therefore will likely attract gaze and focus from a user.

What is saliency?

Saliency refers to the visual prominence or distinctiveness of different regions of a design. It quantifies how much an area stands out compared to its surroundings, which can be used to indicate which parts of a design will be most eye-catching.

Why is saliency important in design?

Guiding attention

‍Using saliency maps, we can predict where a viewer is most likely to look. By understanding which areas are naturally more attention-grabbing, we can ensure that important elements (like calls-to-action or key messages) stand out.

Improving UX

A well-balanced design directs the viewer’s gaze in a controlled manner, making the design more effective and engaging.

Identifying distractions

‍By visualising saliency, we can detect unintended focal points that may distract from the primary message or functionality of the design.

Optimising Layouts

‍Adjusting colours, contrasts, and placements based on saliency analysis can lead to more intuitive and aesthetically pleasing designs.

How to get the best results

In order to get the best out of this tool, we found there are a few things that are important:

1. Use a high-definition screenshot or mockup. The definition of the screenshot you use should be high. Pixelated imagery can lead to inaccurate analysis and visualisations.
2. Refined and minimal UI designs work best for now. Designs which have many overlapping images or contrasting areas are often bunched into one saliency-region. This is not necessarily a short-coming of the tool, as the user would likely be unsure where to focus their attention initially, too.
3. Ensure the sizing and scale you use in your mockup is representative of a real device. This tool can be used for desktop, tablet and mobile designs, but the content inside them should reflect their device shape and screen ratio appropriately.

Try our next-gen version

We're already building out the next version of this tool which uses more advanced computer vision to factor in more difficult approximations of focus, like human faces and eyes.

If you'd like to try that version when it's available, leave your details here and we'll ping you when it's ready: