Gutenberg-Diagramm.

Das Gutenberg-Diagramm geht auf den Typografen und Lese-Forscher Edmund Arnold zurück und beschreibt, wie das Auge in westlichen Lese-Kulturen eine symmetrisch gestaltete Seite abtastet: Es beginnt in der Primary Optical Area oben links, bewegt sich entlang einer diagonalen Leseroute zur Terminal Area unten rechts und ignoriert dabei die beiden Brachen-Ecken oben rechts und unten links.

Für das Webdesign ist das kein Gesetz, aber ein nützliches Modell. Es erklärt, warum:

• Der wichtigste Inhalt (Headline, Nutzenversprechen) oben links beginnt
• Der CTA häufig in der unten-rechten Ecke besser performt als mittig
• Visuelle Stopps (Bilder, Icons) den Blick umleiten können — absichtlich oder unabsichtlich

Grenzen des Modells

Das Gutenberg-Diagramm ist vereinfachend — es ignoriert Eye-Tracking-Erkenntnisse zu Z-Pattern und F-Pattern, mobilen Reading Flows und nicht-westlichen Lese-Kulturen. Aber als Ausgangspunkt für Layout-Entscheidungen ist es wertvoll, weil es einen Rahmen bietet, über Blickführung überhaupt bewusst nachzudenken.

In unseren Projekten nutzen wir es als Startheuristik — und gleichen dann mit echten Heatmap-Daten ab, ob die Annahme auch in der Realität stimmt. Denn jedes Modell ist falsch, aber manche sind nützlich.

Die vier Felder im Detail

Arnold teilt die Seite durch eine waagerechte und eine senkrechte Achse in vier Quadranten. Jeder hat im Modell eine eigene Rolle:

• Primary Optical Area (oben links). Der Einstiegspunkt. Hier gehört hin, was den Nutzer halten muss: die Aussage, worum es geht und für wen. Logos beanspruchen diesen Platz häufig, ohne ihn zu verdienen.
• Strong Fallow Area (oben rechts). Eine Brache — der Blick streift sie, ohne zu verweilen. Trotzdem landen hier oft Telefonnummern und Navigationselemente. Das ist nicht falsch, solange nichts Entscheidendes allein dort steht.
• Weak Fallow Area (unten links). Das am wenigsten beachtete Feld. Was hier steht, wird im Zweifel nicht gelesen — ein guter Ort für Rechtliches, ein schlechter für Argumente.
• Terminal Area (unten rechts). Der Endpunkt der Leseroute und damit die natürliche Position für den nächsten Schritt: den Call to Action.

Die Bewegung von oben links nach unten rechts nennt Arnold den Reading Gravity Path. Alles, was quer dazu liegt, kostet Aufmerksamkeit — jeder Blicksprung gegen die Leserichtung ist Arbeit für den Nutzer.

Gutenberg, Z-Pattern und F-Pattern — was wann gilt

Die drei Modelle widersprechen sich nicht, sie beschreiben unterschiedliche Seitentypen:

• Gutenberg-Diagramm: gleichmäßig verteilter Inhalt ohne starke visuelle Hierarchie — etwa lange Fließtexte oder schlichte Textseiten.
• Z-Pattern: Seiten mit wenig Text und klaren visuellen Ankern, typisch für Landingpages mit Headline, Bild und einem Button.
• F-Pattern: textlastige Seiten, die überflogen werden — Suchergebnisse, Blogartikel, Produktlisten. Der Blick liest die ersten Zeilen, dann nur noch Zeilenanfänge.

Die praktische Regel: Je stärker die visuelle Hierarchie einer Seite, desto weniger gilt Gutenberg — denn dann führt nicht die Leserichtung den Blick, sondern Kontrast, Größe und Bewegung. Ein leuchtender Button mittig auf der Seite schlägt jede Diagonale.

Was das Modell fürs Layout bedeutet

• Eine Botschaft pro Blickachse. Wer Nutzenversprechen, Vertrauenssignal und Button quer über die Fläche verteilt, zwingt den Blick zu Sprüngen, die Aufmerksamkeit kosten.
• Blickrichtung von Personen nutzen. Schaut eine abgebildete Person zum Formular, folgt der Blick des Betrachters — das ist der Gaze-Cueing-Effekt und einer der wenigen Layout-Hebel, die auch ohne Text funktionieren.
• Nichts Wichtiges in die Brachen. Steht das einzige Vertrauenssignal unten links, ist es faktisch nicht vorhanden.
• Auf Mobilgeräten gilt das Modell nicht. Bei einer Spalte gibt es keine Diagonale, sondern nur eine Reihenfolge. Die Frage lautet dort nicht „wo", sondern „an welcher Stelle im Scrollverlauf" — siehe Above the Fold.

Wie man die Annahme überprüft

Das Diagramm ist eine Hypothese über Blickverhalten, keine Messung. Belegen lässt sich der tatsächliche Verlauf mit Aufmerksamkeits-Heatmaps und Scrollmaps (siehe Heatmap-Tool) sowie mit einer strukturierten heuristischen Analyse. Wo die Daten dem Modell widersprechen, gewinnen die Daten — und zwar immer.

Häufige Fragen

Was ist das Gutenberg-Diagramm?

Ein Modell des Typografen Edmund Arnold, das beschreibt, wie der Blick eine gleichmäßig gestaltete Seite abtastet: von oben links diagonal nach unten rechts, wobei die Ecken oben rechts und unten links kaum beachtet werden.

Gilt das Gutenberg-Diagramm auch für Websites?

Als Ausgangsheuristik ja, als Gesetz nein. Sobald eine Seite starke visuelle Anker hat — große Bilder, farbige Flächen, Buttons — führen diese den Blick stärker als die Leserichtung.

Was ist der Unterschied zum Z-Pattern?

Das Z-Pattern beschreibt den Blickverlauf auf Seiten mit wenig Text und klaren visuellen Stationen. Das Gutenberg-Diagramm beschreibt gleichmäßig gefüllte Flächen ohne solche Anker.

Wo gehört der Call to Action hin?

Im Modell in die Terminal Area unten rechts, am Ende der Leseroute. In der Praxis dorthin, wo der Nutzer die Entscheidung tatsächlich trifft — das ist oft direkt nach dem Argument, das den letzten Zweifel ausräumt.