Aufmerksamkeits-Heatmap — wohin der Blick zuerst fällt

Was macht das Tool?

Das Tool erzeugt aus einem einzelnen Bild eine Aufmerksamkeits-Heatmap — ein farbiges Overlay, das vorhersagt, wohin der Blick in den ersten Sekunden fällt. Warme Bereiche (rot, gelb) bedeuten „zieht viel Aufmerksamkeit”, kalte (blau) bedeuten „wird eher übersehen”. Die Berechnung läuft vollständig in deinem Browser per WebAssembly oder WebGPU und einem spezialisierten neuronalen Netz, das genau auf die Vorhersage visueller Salienz trainiert wurde.

Zusätzlich kannst du ein Rechteck über ein wichtiges Element ziehen — etwa einen Button, ein Logo oder ein Gesicht — und erhältst dessen Fokus-Score: den Anteil der vorhergesagten Gesamt-Aufmerksamkeit, der auf diesen Bereich entfällt. Drei Exporte stehen bereit: das Overlay-Bild als PNG, die reine Heatmap als transparente PNG zum Weiterverarbeiten im eigenen Editor und eine JSON-Datei mit Score und den stärksten Hotspots.

Wie sagt die KI Aufmerksamkeit voraus?

Wohin ein Mensch zuerst schaut, ist zu großen Teilen vorhersehbar. Die Wahrnehmungsforschung unterscheidet zwischen unwillkürlicher (bottom-up) und willkürlicher (top-down) Aufmerksamkeit. Die unwillkürliche wird von Bildmerkmalen getrieben: starke Kontraste, helle Flächen, Kanten, Farben und besonders menschliche Gesichter ziehen den Blick automatisch an, bevor das Gehirn bewusst entscheidet.

Genau dieses bottom-up-Verhalten hat das neuronale Netz aus vielen tausend echten Blickaufzeichnungen gelernt. Es bekommt dein Bild als Eingabe und schätzt für jeden Bildbereich, wie wahrscheinlich er in den ersten Sekunden fixiert wird. Das Ergebnis ist eine Wahrscheinlichkeitskarte, die das Tool einfärbt und über dein Bild legt. Es ist eine Vorhersage aus gelernten Mustern — keine Aufzeichnung einer realen Person.

Wann sind die Ergebnisse verlässlich — und wann nicht?

Die Heatmap trifft den ersten, reflexhaften Blick auf statische Bilder gut: Sie zeigt zuverlässig, welche Elemente herausstechen und welche untergehen. Für Thumbnails, Anzeigen und einzelne Layouts ist das ein schneller, kostenloser Frühindikator, der sonst teure Vorab-Tests erfordert.

Es gibt aber klare Grenzen, die du kennen solltest. Das Modell sagt nur die unwillkürliche Aufmerksamkeit im ersten Moment voraus. Es weiß nicht, was Betrachter bewusst suchen, was sie lesen, welche Marke sie bevorzugen oder welche Reihenfolge ihr Blick nimmt. Es unterscheidet auch nicht nach Zielgruppe, Alter oder Vorwissen. Deshalb gilt: Die Heatmap ist eine Vorhersage des ersten Blicks, kein echtes Eye-Tracking und kein Ersatz für Tests mit echten Nutzern. Wegen der EU-KI-Verordnung (Art. 50) zeigt das Tool diesen Hinweis dauerhaft unter jedem Ergebnis — nutze die Heatmap als Indikator, nicht als Beweis.

Wofür nutze ich eine Aufmerksamkeits-Heatmap?

Der häufigste Einsatz ist die Gestaltung von Inhalten, bei denen der erste Eindruck zählt. Bei einem YouTube-Thumbnail prüfst du, ob Gesicht und Titel die Hotspots sind oder ob ein unwichtiges Detail den Blick stiehlt. Bei einer Werbeanzeige oder einem Social-Media-Post kontrollierst du, ob das Produkt und der Call-to-Action Aufmerksamkeit bekommen. Bei einem Landingpage-Header ziehst du ein Rechteck über den Button und siehst per Fokus-Score, ob er auffällt oder im kalten Bereich liegt.

Auch für Logos, Verpackungen und Plakate ist die Heatmap praktisch: Sie zeigt, ob die Marke im Zentrum der Aufmerksamkeit steht. Der JSON-Export macht die Ergebnisse zudem für Weiterverarbeitung nutzbar — etwa um mehrere Entwürfe zu dokumentieren oder die Hotspot-Daten an einen weiteren Arbeitsschritt zu übergeben.