Where they look

What it is and why it matters

Whoever opens your landing page or your App Store listing decides in a few seconds whether to stay. In those seconds, do they see what your app does and the button to try it? Usually you only find out after launch, from the numbers.

Foveacast shows you before. It's a free, open-source web page (MIT licence, the code is on GitHub). You drop in a screenshot of your page and it gives you back a heatmap, a colour map: where it's bright, eyes are likely to go; where it's dark, probably not. And it shows it for three moments: the first second, the first three, the first seven.

The model learned from real data: the UEyes study (Jiang, Leiva and colleagues, CHI 2023) used an eye tracker, a camera that records where the pupils point, on 62 people looking at 1,980 screenshots of websites, desktop programs, apps and posters. Everything runs in your browser: no account, and the image isn't uploaded anywhere.

1. Take a good screenshot

The result is only as good as the screenshot you give it. This is how I do it:

1. Open your page in your computer's browser, with a large window. Close the cookie banner and every popup: if they stay, they grab the eyes in the prediction too.
2. Capture the first screen, the part you see without scrolling: that's where the first second is decided. On a Mac press Cmd+Shift+4 and drag over the area; on Windows press Win+Shift+S.
3. For the rest of the page, take one screenshot per section, not one very long one. The model works on a small version of the image, 320 by 240 pixels: a whole page in a single tall image gets squashed and the details disappear.
4. Save it as PNG or JPG, under 20 MB. If it's wider than 2560 pixels, the tool shrinks it on its own.

For the App Store, open your app's listing in your computer's browser and do the same. It's not how people see it when they open it on their phone, but it tells you whether the icon, the name and the first images get noticed.

2. Run the test

1. Open allaboutken.com/Foveacast on your computer, in Chrome (or another Chromium-based browser) or in Firefox. Keep the window wide: if it's under 900 pixels, the page thinks you're on a phone and shows you a warning.
2. The first time, it downloads the model files, about 57 MB: wait for it to finish. From then on it loads them from the browser's cache and starts right away.
3. Drag the screenshot onto the page, or paste it, or load it with New Image.
4. Wait for the analysis: the 3-second view arrives first, then the other two. Click the heatmap to switch from one view to the next: First glance (1 s), Quick scan (3 s), Full viewing (7 s).

Download PNG saves the image: keep it, you'll need it for the comparison at the end.

3. Read the three views and the report

The colours run from dark violet, little predicted attention, through orange, up to bright yellow, the highest. Two things to know before you look:

• The scale is relative to your image: the strongest spot is always yellow, even if nothing really stands out. Yellow doesn't mean "it works", it means "it's the strongest thing on this page".
• The crosshair marks where the model thinks the first look will land. It's an estimate, not a measurement.

The three views tell you different things:

• 1 second: what jumps out before anyone even reads. Contrast, edges, faces and large text are what count.
• 3 seconds: a first pass over the page. Headings, large images, menus and buttons start to count.
• 7 seconds: a closer read. Attention also reaches body text, forms and details.

Below the heatmap there's the report, Analysis Report. The parts I use most:

• Attention by image region: the rule of thirds, meaning the page split into a 3-by-3 grid, with the share of attention in each cell.
• Eye movement sequence: the predicted order in which the gaze moves from one area to the next, marked with numbers.
• Attention shift: how the centre of attention moves from 1 to 7 seconds. If it moves down in the order you want people to read, the page guides well.

4. The two questions of the first second

Out of the whole report, I care about two questions. I check them in the 1-second view:

1. Can you see the promise? The promise is the sentence that says what your app does and who it's for. It should be bright in all three views. If it only lights up at 3 or 7 seconds, it's probably too small or has too little contrast with what's around it.
2. Can you see the main button? It's the one that gets people to download or sign up. If it stays dark at 1 second, probably nobody notices it before leaving.

Then look at what's stealing attention: a logo, a photo that's just decoration, two bright spots side by side competing with each other. Decide what should win.

Write down in two lines what you saw: that's what you'll give Claude Code.

5. Fix the page with Claude Code

Open Claude Code in your site's folder and give it the images: drag them into the window, paste them with Ctrl+V or write the file path. One change at a time, or you won't know what worked.

I'm attaching a screenshot of my landing page and the predicted attention heatmap at 1 second. The main button "[button text]" stays almost dark: probably nobody notices it.
Make it stand out: more contrast with the background, more empty space around it and, if needed, bigger or higher up.
Don't touch the copy, the brand colours or the rest of the page.
Before changing anything, tell me in three lines what you plan to do.

The headline "[your sentence]" only lights up in the 7-second view. I want it to be seen in the first second.
Work only on the headline's size, weight and contrast, and on the space around it. Don't change the words.
When you're done, list the values you changed, before and after.

In the 1-second heatmap, [the element] is the brightest area and takes attention away from the headline and the button.
Make it less strong, with less contrast or smaller, without removing it.
Leave everything else as it is.

Before you rerun the test, open the page and check that everything still works, on your phone too.

6. Rerun the test, then ask real people

1. Retake the screenshot with the same window and the same spot on the page, run it through Foveacast and save the PNG. If you change the framing, the comparison doesn't count.
2. Put the two 1-second heatmaps side by side, before and after. There's one question: are the button and the promise brighter now, compared with the rest of the page?
3. Check the 3- and 7-second views too: you've moved attention around, make sure you haven't taken it away from something that matters.
4. If it's worse, undo it. If it's better, keep the change and move on to the next one.

And then don't trust it too much. It's a prediction about an average person looking at the page without looking for anything; your users arrive with a goal, and someone searching for something looks differently. It gets more wrong on dense text, tables and maps. There are paid services with eye tracking measured on real people, but for a check before launch this is enough: use it to find the obvious problems, then show the page to a few real people and ask them what this app does and where they would click.

Common mistakes

• Feeding the whole page in as one very long image. It gets squashed: take one screenshot per section.
• Reading yellow as "it works". It's just the strongest spot in your image.
• Looking only at the 7-second view. The promise and the button are won or lost in the first.
• Asking Claude Code for five changes at once and then not knowing which one helped.
• Treating the heatmap as your real users. It's an average, not your people.

Checklist

• Screenshot taken on a computer, with no banners or popups
• One screenshot for the first screen and one for each important section
• The promise is bright in all three views
• The main button isn't dark at 1 second
• I asked Claude Code for one change at a time
• I reran the test with the same framing and compared the two PNGs
• I showed the page to a few real people

Frequently asked questions