Scroll your website.
See what stands out.
The Chrome extension lays a predicted attention map over the page you’re on and updates it as you scroll.
Chrome on desktop. Free scans to start, then email verification. Screenshots are processed on the server.
- Attention
- 9/100
- Focus
- 68/100
- Hierarchy
- 50/100
Strongest zoneCentre left
Computed on the map in view as the page scrolls. Metric definitions
- Model
- UNISAL, published at ECCV 2020
- Weights
- Fine-tuned on MIT1003 eye-tracking data
- Long pages
- Read in overlapping windows, not squeezed
- Your site
- No tracking script to install
An image to test? Start here.
No extension needed for a first look. Drop a landing page, an ad or a thumbnail and read its predicted attention.
- An overlay you can slide
- Drag across the image to compare the original with its predicted attention.
- A score out of 100
- Attention, hierarchy and focus combined, the same score Championship ranks by. A summary of the map, not a click forecast.
- A PNG to share
- Download the overlay for a design review or a ticket.
- A ranking for several files
- Drop two or more images and Championship compares them with the same model.
Demonstration on a fictional page. Heatmap calculated with UNISAL.
Several variants to compare? Drop them all at once, the Championship ranks them.
From a first impression to your next revision.
One fictional thumbnail, run through the model twice. The maps and numbers are real UNISAL output, not illustrations.
1Bring the image people will see
Export the final composition, text and background included. Then write down what should stand out.
2Read the map against that goal
Here the headline takes most of the predicted attention and the room stays cold. A warm area only helps if it is the part you meant.
3Change one thing, then run it again
A smaller headline did not bring the room forward. That is useful too: the next revision should try something else.
A better score, the same problem.
Hierarchy rises from 23 to 66 and the score from 32 to 42, because one element now dominates more clearly. That element is still the headline, and the room still gets almost nothing.
Read the map first. The number summarises it, it does not judge your intent.
Fictional designs. Inputs, maps and metrics are published with their hashes. View the provenance
| Metric | Step 2 | Step 3 |
|---|---|---|
| Score | 32/100 | 42/100 |
| Attention | 5 | 3 |
| Focus | 56 | 49 |
| Hierarchy | 23 | 66 |
| Coverage | 6% | 4% |
| Strongest zone | Centre left | Top left |
Different formats. One question: what gets noticed?
Give each design a clear job. Then check whether its visual hierarchy supports it. Every example below is a real prediction on a fictional design.
Your headline or your decoration?
A beautiful page can still send attention to the wrong place. Check whether your promise and main action stand out from everything around them.
Before you publish, look for…
Start with a screenshot of the first screen, then examine the rest of the page.
Test this on my imageRead the difference, not just the rank.
Version B shrinks the headline and moves the product name and action up. Championship runs both through the same model and ranks them.
Here, A ranks first. Yet B puts the action inside a warm region, which was the point of the change. The score summarises the whole map. Your goal decides which version goes in front of people.
| Metric | A | B |
|---|---|---|
| Score | 56/100 | 49/100 |
| Attention | 5 | 4 |
| Focus | 61 | 55 |
| Hierarchy | 87 | 78 |
| Coverage | 6% | 5% |
| Strongest zone | Top left | Top left |
What 93 public websites look like to the model.
We ran the same model on 93 captures of public websites and published the aggregate data. Most scores sit between 20 and 59, and none reaches 80.
- website captures analysed
- 93
- median score out of 100
- 41
- highest score in the set
- 78
- strongest zone outside the top third
- 75/93
A prediction you can question.
Heatpoints uses UNISAL, a visual saliency model published at ECCV 2020. It gives you an estimate of attention, not a recording of an individual’s gaze.
What the model returnsWhat you seeUseful for
Spotting visual competition and discussing hierarchy before publishing.
Not a measure of
Comprehension, purchase intent, actual clicks or the order of eye fixations.
Trained on
Eye-tracking and attention datasets. The version used here is fine-tuned on MIT1003, where participants freely viewed natural images.
Next step
Validate important decisions with people, in the real context of your page.
Start with the image you’re working on.
No sales call. See a prediction, decide what to adjust, and go back to creating.
The image tool
Free to try
Upload an image, explore its attention map and download the result. Usage limits apply.
Analyse my imageCompare several imagesFor the next stage
More tools for creative teams are in preparation. Features and prices will be announced when they are available.
No paid plan is on sale today.
Good questions. Straight answers.
Know what the map tells you. And what it doesn’t.
Read about the modelIs this real eye tracking?
No. Heatpoints predicts visual attention from an image using UNISAL. It does not record a person’s eyes. Use it to form design hypotheses, then validate important decisions with real people.
Can I try it without an account?
You can start with the free image tool. Usage limits apply. The Chrome extension asks for email verification after its initial free scans. The tool shows you when your allowance is reached.
What does the Chrome extension capture?
The visible part of the tab you choose, and only once you activate it. The overlay follows scroll and resize, and it works on pages behind a login. Captures are sent to the server to calculate the map.
Are my images processed on my device?
No. Uploaded images and Chrome captures are sent to the server to calculate the attention map. Check the privacy policy before analyzing confidential material.
Can I compare several designs?
Yes. Championship compares multiple images using the same analysis. Open it directly or choose several files in the image tool. Keep the format and purpose comparable to make the results useful.
Will a warmer heatmap mean more sales?
Not necessarily. Attention does not measure comprehension, preference or intent to purchase. A decorative element may attract attention without helping your message. What matters is where attention goes relative to your goal.
Is the Figma plugin available?
Not yet. For now, export your frame as an image and analyze it on the website. The Chrome extension is available for browser pages.
You’ve looked at it a hundred times. Look at it differently.
Add to ChromeYour next revision starts with a different perspective.