Ein Modell aus der Typografie und dem Layout-Design, das beschreibt, wie Blicke über eine Seite wandern. Hilft, visuelle Hierarchie so zu setzen, dass sie der natürlichen Leseroute folgt.
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:
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.
konversion.digital