Wohin sie schauen

Was es ist und warum es zählt

Wer deine Landingpage oder deinen Eintrag im App Store öffnet, entscheidet in wenigen Sekunden, ob er bleibt. Sieht er in diesen Sekunden, was deine App macht, und den Button, um sie auszuprobieren? Meistens erfährst du das erst nach dem Launch, an den Zahlen.

Foveacast zeigt es dir vorher. Es ist eine kostenlose Open-Source-Webseite (MIT-Lizenz, der Code liegt auf GitHub). Du ziehst einen Screenshot deiner Seite hinein und bekommst eine Heatmap zurück, also eine Farbkarte: Wo sie hell ist, gehen die Augen wahrscheinlich hin; wo sie dunkel ist, eher nicht. Und das für drei Momente: die erste Sekunde, die ersten drei, die ersten sieben.

Das Modell hat aus echten Daten gelernt: Die Studie UEyes (Jiang, Leiva und Kollegen, CHI 2023) hat mit einem Eyetracker, einer Kamera, die aufzeichnet, wohin die Pupillen schauen, 62 Menschen vor 1.980 Screenshots von Websites, Programmen, Apps und Plakaten beobachtet. Alles läuft in deinem Browser: kein Konto, und das Bild wird nirgendwohin hochgeladen.

1. Mach einen guten Screenshot

Das Ergebnis ist nur so gut wie der Screenshot, den du ihm gibst. So mache ich es:

1. Öffne deine Seite im Browser am Computer, mit großem Fenster. Schließ das Cookie-Banner und jedes Popup: Wenn sie bleiben, ziehen sie auch in der Vorhersage die Blicke auf sich.
2. Nimm den ersten Bildschirm auf, den Teil, den man ohne Scrollen sieht: Dort entscheidet sich die erste Sekunde. Auf dem Mac drückst du Cmd+Shift+4 und ziehst über den Bereich; unter Windows drückst du Win+Shift+S.
3. Für den Rest der Seite machst du einen Screenshot pro Abschnitt, nicht einen sehr langen. Das Modell arbeitet mit einer kleinen Version des Bildes, 320 mal 240 Pixel: Eine ganze Seite in einem einzigen hohen Bild wird gequetscht, und die Details verschwinden.
4. Speichere ihn als PNG oder JPG, unter 20 MB. Ist er breiter als 2560 Pixel, verkleinert das Tool ihn selbst.

Für den App Store öffnest du den Eintrag deiner App im Browser am Computer und machst dasselbe. So sieht ihn nicht, wer ihn auf dem Handy öffnet, aber du erfährst, ob Icon, Name und die ersten Bilder auffallen.

2. Starte den Test

1. Öffne allaboutken.com/Foveacast am Computer, in Chrome (oder einem anderen Chromium-Browser) oder in Firefox. Halte das Fenster breit: Ist es schmaler als 900 Pixel, hält die Seite dich für ein Handy und zeigt dir einen Hinweis.
2. Beim ersten Mal lädt sie die Modelldateien herunter, etwa 57 MB: Warte, bis das fertig ist. Danach holt sie sie aus dem Browser-Cache und startet sofort.
3. Zieh den Screenshot auf die Seite, füge ihn ein oder lade ihn mit New Image.
4. Warte auf die Analyse: Zuerst kommt die 3-Sekunden-Ansicht, dann die anderen beiden. Klick auf die Heatmap, um zwischen den Ansichten zu wechseln: First glance (1 s), Quick scan (3 s), Full viewing (7 s).

Mit Download PNG speicherst du das Bild: Behalte es, du brauchst es am Ende für den Vergleich.

3. Lies die drei Ansichten und den Bericht

Die Farben reichen von Dunkelviolett, wenig vorhergesagte Aufmerksamkeit, über Orange bis zu hellem Gelb, der höchsten. Zwei Dinge, die du vor dem Hinschauen wissen solltest:

• Die Skala ist relativ zu deinem Bild: Die stärkste Stelle ist immer gelb, auch wenn nichts wirklich heraussticht. Gelb heißt nicht „funktioniert“, sondern „das Stärkste auf dieser Seite“.
• Das Fadenkreuz markiert, wo das Modell den ersten Blick erwartet. Es ist eine Schätzung, keine Messung.

Die drei Ansichten sagen Verschiedenes:

• 1 Sekunde: was ins Auge springt, bevor man überhaupt liest. Es zählen Kontrast, Kanten, Gesichter, große Schrift.
• 3 Sekunden: ein erster Rundgang über die Seite. Überschriften, große Bilder, Menüs und Buttons beginnen zu zählen.
• 7 Sekunden: ein genaueres Lesen. Die Aufmerksamkeit erreicht auch Fließtext, Formulare und Details.

Unter der Heatmap steht der Bericht, Analysis Report. Die Teile, die ich am meisten nutze:

• Attention by image region: die Drittelregel, also die Seite in einem Raster von 3 mal 3, mit dem Anteil der Aufmerksamkeit in jedem Feld.
• Eye movement sequence: die vorhergesagte Reihenfolge, in der der Blick von einem Bereich zum nächsten wandert, mit Zahlen markiert.
• Attention shift: wie sich das Zentrum der Aufmerksamkeit von 1 bis 7 Sekunden verschiebt. Wandert es in der gewünschten Lesereihenfolge nach unten, führt die Seite gut.

4. Die zwei Fragen der ersten Sekunde

Vom ganzen Bericht interessieren mich zwei Fragen. Ich prüfe sie in der 1-Sekunden-Ansicht:

1. Sieht man das Versprechen? Das Versprechen ist der Satz, der sagt, was deine App macht und für wen. Er sollte in allen drei Ansichten hell sein. Leuchtet er erst nach 3 oder 7 Sekunden auf, ist er wahrscheinlich zu klein oder hebt sich zu wenig von seiner Umgebung ab.
2. Sieht man den Haupt-Button? Das ist der, über den man herunterlädt oder sich anmeldet. Bleibt er nach 1 Sekunde dunkel, bemerkt ihn wahrscheinlich niemand, bevor er geht.

Dann schau, was die Aufmerksamkeit stiehlt: ein Logo, ein Foto, das nur Deko ist, zwei helle Stellen nebeneinander, die sich Konkurrenz machen. Entscheide, was gewinnen soll.

Schreib in zwei Zeilen auf, was du gesehen hast: Das gibst du Claude Code.

5. Verbessere die Seite mit Claude Code

Öffne Claude Code im Ordner deiner Website und gib ihm die Bilder: Zieh sie ins Fenster, füge sie mit Ctrl+V ein oder schreib den Dateipfad. Eine Änderung nach der anderen, sonst weißt du nicht, was gewirkt hat.

Im Anhang ein Screenshot meiner Landingpage und die Heatmap der vorhergesagten Aufmerksamkeit nach 1 Sekunde. Der Haupt-Button „[Button-Text]“ bleibt fast dunkel: Wahrscheinlich bemerkt ihn niemand.
Lass ihn hervorstechen: mehr Kontrast zum Hintergrund, mehr Freiraum drumherum und, wenn nötig, größer oder weiter oben.
Rühr die Texte, die Markenfarben und den Rest der Seite nicht an.
Bevor du etwas änderst, sag mir in drei Zeilen, was du vorhast.

Die Überschrift „[dein Satz]“ leuchtet erst in der 7-Sekunden-Ansicht auf. Ich will, dass man sie in der ersten Sekunde sieht.
Arbeite nur an Größe, Stärke und Kontrast der Überschrift und am Raum drumherum. Ändere die Wörter nicht.
Liste mir am Ende die Werte auf, die du geändert hast, vorher und nachher.

In der 1-Sekunden-Heatmap ist [das Element] der hellste Bereich und nimmt der Überschrift und dem Button Aufmerksamkeit weg.
Mach es schwächer, mit weniger Kontrast oder kleiner, ohne es zu entfernen.
Lass alles andere, wie es ist.

Bevor du den Test wiederholst, öffne die Seite und prüf, ob noch alles funktioniert, auch auf dem Handy.

6. Wiederhole den Test, dann frag echte Menschen

1. Mach den Screenshot neu, mit demselben Fenster und derselben Stelle der Seite, gib ihn in Foveacast und speichere das PNG. Wenn du den Ausschnitt änderst, zählt der Vergleich nicht.
2. Leg die beiden 1-Sekunden-Heatmaps nebeneinander, vorher und nachher. Es gibt nur eine Frage: Sind Button und Versprechen jetzt heller, verglichen mit dem Rest der Seite?
3. Schau dir auch die 3- und 7-Sekunden-Ansicht an: Du hast Aufmerksamkeit verschoben, prüf, dass du sie nicht etwas Wichtigem weggenommen hast.
4. Ist es schlechter, mach es rückgängig. Ist es besser, behalte die Änderung und geh zur nächsten.

Und dann vertrau ihm nicht zu sehr. Es ist eine Vorhersage über einen Durchschnittsmenschen, der die Seite anschaut, ohne etwas zu suchen; deine Nutzer kommen mit einem Ziel, und wer etwas sucht, schaut anders. Bei dichtem Text, Tabellen und Karten liegt es öfter daneben. Es gibt kostenpflichtige Dienste mit Eyetracking, das an echten Menschen gemessen wird, aber für einen Check vor dem Launch reicht das hier: Nutz es, um die offensichtlichen Probleme zu finden, zeig die Seite dann ein paar echten Menschen und frag sie, was diese App macht und wo sie klicken würden.

Häufige Fehler

• Die ganze Seite als ein einziges, sehr langes Bild hineingeben. Es wird gequetscht: Mach einen Screenshot pro Abschnitt.
• Gelb als „funktioniert“ lesen. Es ist nur die stärkste Stelle in deinem Bild.
• Nur die 7-Sekunden-Ansicht anschauen. Versprechen und Button entscheiden sich in der ersten.
• Claude Code um fünf Änderungen auf einmal bitten und dann nicht wissen, welche geholfen hat.
• Die Heatmap für deine echten Nutzer halten. Sie ist ein Durchschnitt, nicht deine Leute.

Checkliste

• Screenshot am Computer, ohne Banner und Popups
• Ein Screenshot für den ersten Bildschirm und einer für jeden wichtigen Abschnitt
• Das Versprechen ist in allen drei Ansichten hell
• Der Haupt-Button ist nach 1 Sekunde nicht dunkel
• Ich habe Claude Code um eine Änderung nach der anderen gebeten
• Ich habe den Test mit demselben Ausschnitt wiederholt und die beiden PNGs verglichen
• Ich habe die Seite ein paar echten Menschen gezeigt

Häufige Fragen