Legen Sie eine Tageszeitung aus den 1950er-Jahren auf den Tisch: sechs Spalten, durchgehend gleiche Schriftgröße, kaum Bilder. Wohin schaut das Auge zuerst? Genau diese Frage stellte sich Edmund C. Arnold, und seine Antwort hat als Gutenberg Diagramm Karriere gemacht, weit über den Zeitungssatz hinaus.
Das Gutenberg-Diagramm teilt eine Seite in vier gleich große Bereiche und behauptet: Der Blick startet links oben, wandert diagonal nach rechts unten und verlässt die Seite dort. Zwei Bereiche bekommen viel Aufmerksamkeit, zwei bekommen kaum welche. Wer weiß, welche das sind, platziert Überschrift, Argument und Handlungsaufruf nicht mehr nach Gefühl, sondern dort, wo Nutzer ohnehin hinsehen.
Wer war Edmund Arnold, und warum heißt es Gutenberg-Diagramm?
Zuerst die Namensfrage, weil sie regelmäßig für Verwirrung sorgt: Das Gutenberg-Diagramm stammt nicht von einem Gestalter namens Gutenberg. Der Name verweist auf Johannes Gutenberg, den Mainzer Erfinder des Buchdrucks mit beweglichen Lettern, weil das Modell die klassische, gleichmäßig gesetzte Druckseite beschreibt. Mit Gutenberg selbst hat es sonst nichts zu tun, und aus dem 15. Jahrhundert ist es auch nicht.
In der englischsprachigen Fachliteratur läuft es als Gutenberg diagram. Entwickelt hat es Edmund C. Arnold (1913 bis 2007), ein amerikanischer Zeitungsgestalter, der in den 1950er-Jahren zu arbeiten begann. Arnold gilt als Vater des modernen Zeitungslayouts. Er beriet nach eigenen Angaben mehr als tausend Zeitungen, darunter den Boston Globe und den Toronto Star, schrieb 27 Bücher über Typografie und Gestaltung und lehrte ab 1960 an der Newhouse School der Syracuse University, später an der Virginia Commonwealth University.
Seine Beobachtung nannte er Leseschwerkraft, im Original reading gravity. Wer in einer Schrift aufgewachsen ist, die von links nach rechts und von oben nach unten läuft, dessen Blick fällt ganz natürlich nach rechts unten. Beim Lesen einer Zeitungsseite ist das kaum bewusst zu steuern. Diese Gewohnheit sitzt tief, und sie wirkt auch dann, wenn auf der Seite gar nicht gelesen, sondern nur überflogen wird.
Die vier Quadranten
Arnold legt ein Kreuz über die Seite. Daraus ergeben sich vier Felder mit sehr unterschiedlichem Gewicht.
| Feld | Lage | Englischer Begriff | Aufmerksamkeit | Wofür geeignet |
|---|---|---|---|---|
| Primäres Blickfeld, auch primärer optischer Bereich | oben links | Primary Optical Area | hoch, erster Kontakt | Logo, Hauptüberschrift, Kernaussage |
| Starkes Brachfeld | oben rechts | Strong Fallow Area | mittel | Bild, Auszeichnung, Zweitinformation |
| Schwaches Brachfeld | unten links | Weak Fallow Area | gering | Nebensächliches, Fußnoten, Bildnachweise |
| Terminales Blickfeld | unten rechts | Terminal Area | hoch, letzter Kontakt | Handlungsaufruf, Kontakt, Preis |
Die deutschen Bezeichnungen schwanken. Der primäre optische Bereich heißt je nach Quelle auch primäres Blickfeld oder Startfeld, das terminale Blickfeld auch Endfeld oder Ankerpunkt. Gemeint ist jeweils dasselbe.
Der Weg vom primären optischen Bereich zum terminalen Bereich heißt bei Arnold Leseachse. Sie verläuft diagonal, und alles, was auf ihr liegt, wird mit hoher Wahrscheinlichkeit wahrgenommen. Die beiden anderen Felder liegen daneben. Arnold nannte sie brach, wie ein unbestelltes Feld: Sie tragen wenig, wenn man sie nicht bewusst bespielt.
Das schwache Brachfeld links unten ist der eigentliche blinde Fleck. Wer dort ein Angebot, eine Telefonnummer oder ein wichtiges Argument unterbringt, verschenkt es. Umgekehrt eignet sich die Ecke gut für Inhalte, die vorhanden sein müssen, aber nicht auffallen sollen. Wichtig ist dabei: Arnold beschreibt keine Reihenfolge im Uhrzeigersinn. Nach seinem Modell springt der Blick von links oben direkt auf die Diagonale und lässt die beiden Brachfelder links liegen.
Was das für Layout, Werbung und Webdesign bedeutet
Aus dem Modell folgen ein paar sehr praktische Regeln dafür, wie Sie Inhalte platzieren. Sie taugen als erste Näherung, nicht als Gesetz.
- Die wichtigsten Informationen gehören nach links oben. Auf einer Anzeige ist das die Schlagzeile, auf einer Verpackung der Produktname, auf einer Landingpage das Nutzenversprechen.
- Der Handlungsaufruf, im Webdesign meist Call to Action genannt, gehört nach rechts unten, ans Ende der Leseachse. In Formularen sitzt der Absenden-Button deshalb rechts unter dem letzten Feld, nicht links.
- Auf der Diagonalen sollte nichts stören. Störer, Kästen und visuelle Trennlinien quer über die Achse unterbrechen den Lauf und kosten Aufmerksamkeit.
- Das schwache Brachfeld ist der richtige Ort für Pflichtangaben, Bildnachweise und rechtliche Hinweise. Solche Elemente müssen auffindbar sein, aber nichts verkaufen.
- In Werbebriefen und Flyern liegt die Unterschrift traditionell rechts unten. Das ist kein Zufall, sondern dieselbe Logik.
Im Webdesign hat das Diagramm eine zweite Karriere gemacht, allerdings mit einer Einschränkung: Es beschreibt eine Fläche, kein scrollendes Dokument. Sinnvoll anwenden lässt es sich deshalb auf einzelne Bildschirmabschnitte, besonders auf den Bereich above the fold, also das, was ein Nutzer beim Laden der Website ohne Scrollen sieht. Für die gesamte Seite taugt es nicht, weil unten rechts bei einer langen Seite schlicht nirgendwo ist.
Ein Beispiel aus der Praxis: Auf einer Landingpage mit Kopfbereich, Text und Formular liegt das Nutzenversprechen links oben, ein erklärendes Bild rechts oben, der Absenden-Button rechts unten im sichtbaren Ausschnitt. Besonders bei kurzen Seiten mit wenig Inhalten lohnt sich diese Anordnung. Wer die Inhalte so platziert, arbeitet mit der Lesegewohnheit statt gegen sie. Wer den Button links unten setzt, muss ihn durch Farbe oder Größe wieder sichtbar machen, was den Rest des Designs unruhiger macht.
Eine einfache Prüfung für die eigene Seite
Drucken Sie eine Webseite oder ein Layout aus und ziehen Sie mit dem Lineal ein Kreuz durch die Mitte. Dann drei Fragen:
- Steht die wichtigste Aussage im Bereich links oben, oder liegt dort nur Dekoration?
- Findet sich rechts unten etwas, das den Nutzer weiterbringt, also ein Button, eine Adresse, ein nächster Schritt? Das ist der zweite Ort, den Leser natürlicherweise ansteuern.
- Liegt links unten Content, den Sie eigentlich verkaufen wollen? Dann verschieben Sie ihn.
Diese Prüfung dauert zwei Minuten und deckt die häufigsten Fehler auf. Sie ersetzt keinen Test mit echten Nutzern, aber sie kostet auch nichts.
Die Grenzen: Wo das Modell nicht greift
Hier lohnt Ehrlichkeit, denn das Gutenberg-Diagramm wird oft weit über seinen Geltungsbereich hinaus zitiert. Arnold beschrieb gleichförmige Textblöcke ohne ausgeprägte Hierarchie. Genau dort trifft es zu und sonst kaum.
Sobald ein Design starke visuelle Anker enthält, führen diese den Blick, nicht die Diagonale. Ein großes Gesicht, eine kräftige Farbfläche, eine fett gesetzte Zahl: Solche Elemente ziehen die Aufmerksamkeit unabhängig davon, in welchem Quadranten sie liegen. Auch Vertrautheit spielt hinein. Wer eine Website kennt, springt direkt dorthin, wo er die gesuchte Information vermutet.
Dazu kommt die dünne Beleglage. Für die Behauptung, ein Layout nach dem Gutenberg Diagramm werde schneller gelesen oder besser verstanden, gibt es keine belastbaren Studien. Arnold hat beobachtet und beschrieben, nicht gemessen. Das macht das Modell nicht wertlos, aber es ist eine Faustregel und keine empirische Erkenntnis.
Die spätere Eye-Tracking-Forschung zeichnet ein differenzierteres Bild. Sie misst, wohin Nutzer tatsächlich blicken, statt es aus der Lesegewohnheit abzuleiten. Die Untersuchung der Nielsen Norman Group zum F-Muster hält fest, dass der F-förmige Blickverlauf vor allem dann entsteht, wenn ein Text kaum formatiert ist und der Leser schnell zum Ziel kommen will. Bei klarer Gliederung mit Zwischenüberschriften, Listen und Hervorhebungen entstehen andere Muster, etwa das schichtweise Abtasten von Überschriften. Formatierung schlägt Leseschwerkraft. Für die Praxis heißt das: Das F-Pattern beschreibt Webseiten mit viel Fließtext besser, das Gutenberg-Diagramm beschreibt die klassische Druckseite.
Gutenberg Diagramm, Z-Muster oder F-Muster?
Die drei Modelle werden häufig durcheinandergeworfen, obwohl sie verschiedene Fälle beschreiben. Welches Sie verwenden, hängt davon ab, wie die Fläche aufgebaut ist.
- Das Gutenberg Diagramm passt zu gleichmäßig gesetzten Textseiten ohne starke Hierarchie: Zeitungsseite, Buchdoppelseite, Broschüre, Textanzeige.
- Das Z-Muster, englisch Z-Pattern, passt zu wenigen, klar gesetzten Elementen auf einer Fläche: Plakat, Werbeanzeige, schlichte Startseite mit Logo, Menü, Bild und Button.
- Das F-Muster oder F-Pattern beschreibt das Überfliegen längerer Textstrecken am Bildschirm: Suchergebnisse, Artikelseiten, Produktlisten mit vielen gleichartigen Einträgen.
Die Auswahl folgt also der Textmenge und der Gliederung, nicht dem Medium. Ein einfaches Kriterium: Je gleichförmiger die Fläche, desto eher greift das Gutenberg-Diagramm. Eine Textanzeige im Netz kann dem Gutenberg Diagramm folgen, ein bildlastiges Printplakat dem Z-Muster.
Wo Sie das Modell im Original nachvollziehen können
Wer prüfen will, ob die Beschreibung trägt, braucht als Beispiel eine Seite ohne moderne Hierarchie. Die Gutenberg-Bibel ist dafür das Musterbeispiel: zweispaltig, 42 Zeilen, durchgehend gleiche Schriftgröße, keine Zwischenüberschriften. Auf so einer Seite gibt es tatsächlich nichts, was den Blick von der Diagonalen abbringen könnte.
Ein ähnliches Gefühl vermitteln die Volltexte in unserer Digitalen Bibliothek, etwa die Notizbücher Leonardo da Vincis mit ihren durchlaufenden Aufzeichnungen. Sobald Sie dort Zwischenüberschriften einziehen, verschwindet der Effekt, und genau das ist die Pointe des Modells.
Kurz zum Mitnehmen
- Das Gutenberg Diagramm stammt von Edmund C. Arnold aus den 1950er-Jahren und beschreibt die Leseschwerkraft von links oben nach rechts unten.
- Vier Quadranten: primäres Blickfeld oben links, starkes Brachfeld oben rechts, schwaches Brachfeld unten links, terminales Blickfeld unten rechts.
- Die wichtigsten Informationen nach oben links platzieren, den Handlungsaufruf nach unten rechts, Pflichtangaben nach unten links.
- Der Name kommt vom Erfinder des Buchdrucks, nicht von einem Gestalter dieses Namens.
- Es gilt nur für gleichförmige Textflächen. Sobald Sie gliedern, hervorheben oder Bilder setzen, führen diese Elemente den Blick, und für lange Fließtexte am Bildschirm passt das F-Pattern besser.
