How to use a live heatmap Chrome extension
Review predicted attention as you scroll a website. A practical guide to the Heatpoints extension, its captures, email gate and limitations.
A better way to read your design.
Workflows, examples and research to help you interpret a predicted heatmap and decide what to test next.
Practical guides
How to create a heatmap from a Figma design
The Heatpoints Figma plugin is not available yet. Here is the working export-and-upload workflow for checking attention on your frames today.
How to analyse an attention heatmap
Read the original image, the predicted map and the design objective together. Learn what warm regions, coverage and a score can actually tell you.
AI heatmaps vs eye tracking: which question can each answer?
AI predicts visual saliency from pixels. Eye tracking measures gaze from participants. Choose between them by the decision you need to make, not by the colour of the map.
How to review visual hierarchy before publishing
Check whether the headline, product and main action have a clear relationship. A practical review using a screenshot, an attention prediction and a controlled revision.
Where should you place a call to action?
Place the action where its purpose is clear and the reader has enough information to decide. Use an attention map to review visibility, then test the actual task.
Above the fold: what belongs on the first screen?
The fold is the visible edge of a viewport, not a universal pixel height. Design the first screen to explain the page and make the next step discoverable.
F-pattern vs Z-pattern: useful ideas, not gaze predictions
Reading patterns can inform a layout review, but they cannot prescribe the path every visitor follows. Learn what a static heatmap can and cannot show.
How to review the scroll journey of a landing page
A useful long page answers the reader's next question as they move down. Review its sequence, visual transitions and actions without inventing a visitor path.
Can you create a heatmap without a tracking script?
Yes, if you want a prediction from a screenshot. Measuring visitor clicks and scrolls is a different task and requires behavioural data.
What determines the cost of an eye-tracking study?
Recruitment, study design, equipment and analysis shape the budget. Compare those deliverables with an AI heatmap without treating the two methods as interchangeable.
How to choose an AI attention heatmap tool
Compare image review, browser capture, design integration and team workflows. A practical shortlist with official sources, without an invented accuracy league table.
Guides en français
Heatmap IA : analyser l’attention visuelle avant publication
Une heatmap IA prédit la saillance d’une image. Voici comment l’utiliser sur une maquette, une publicité ou une page web, sans la confondre avec des clics mesurés.
Ligne de flottaison : que montrer sur le premier écran ?
La ligne de flottaison dépend de la fenêtre, de l’appareil et du contenu. Construis un premier écran clair, puis donne une raison utile de poursuivre la lecture.
Où placer un CTA pour rendre la prochaine étape claire ?
Le bon emplacement dépend de la décision demandée. Examine le contexte, la visibilité et le libellé du bouton avant de tester son effet sur les conversions.