Читать книгу Texten fürs Web: Planen, schreiben, multimedial erzählen - Stefan Heijnk - Страница 29

Ist die vertikale Hierarchie über die Gesamtlänge des Seiten-Templates geschaffen, dann geht es im letzten Schritt noch um die Hierarchie in abgegrenzten Zonen und zwischen den Zonen. Wörter und Fotos helfen, die Verhältnisse zu regeln. Auch hier ist es das primäre Ziel, die Blicke der Nutzer über möglichst viele Content-Angebote zu führen. Gelenkt wird dabei vor allem über Größenverhältnisse. Das Seiten-Layout unterliegt zwei einfachen Regeln:

1 Relativ größerer Schriftgrad dominiert relativ kleineren Schriftgrad.

2 Relativ größeres Illustrationselement dominiert relativ kleineres Illustrationselement.

Der wichtigste Inhalt der Startseite bekommt also nicht nur den Platz an der Sonne, sondern auch den größten Raum und die attraktivste Ausstattung. Und trifft es zu, dass größere Bilder und größere Schrift die Blickkontaktchancen steigern, dann entstehen zwischen den optisch dominanten Elementen wahrscheinliche Blickverlaufswege, die man als Blickachsennetze bezeichnen kann. Werden die optisch dominanten Elemente geschickt angeordnet, lässt sich durch engmaschige Blickachsennetze auch die Blickkontakt-Wahrscheinlichkeit für die nachrangig wichtigen Themen steigern.

Abb. 42:In einem Eyetracking-Test an der Hochschule Hannover wurde für die Titelseite einer Erstsemester-Zeitung überprüft, ob und inwieweit die konstruierten Blickachsen mit den tatsächlichen Blickverläufen übereinstimmen. Rechts: Die Heatmap zeigt, wohin die Probanden hauptsächlich gesehen haben (rote Flächen). Links: Die deduktiv konstruierten Blickachsen. Im Ergebnis zeigt sich eine weitgehende Kongruenz von Blickachsen-Endpunkten und Heatmap. Eigene Grafik.

Zu Hilfe kommt den Template-Entwicklern dabei ein Wahrnehmungsprozess, der in unser Sehen eingebaut ist: das periphere Sehen. Evolutionär betrachtet ist das periphere Sehen eine prima Erfindung, die beispielsweise hilft, wenn man auf der anderen Straßenseite einen Freund sieht, deshalb schnell die Straße überqueren will und dann im letzten Augenblick doch noch wahrnimmt, dass da von links ein LKW heranbraust. Auch den Seiten-Layoutern bereitet das periphere Sehen große Freude, denn beim Fokussieren einer Textstelle erfassen die Nutzer nicht nur die gerade betrachtete Textstelle, sondern es werden automatisch auch immer die benachbarten Bereiche auf Relevantes hin gescannt. Schaut ein Nutzer also auf eine bestimmte Fläche, dann grast sein Blick im Augenwinkel unbewusst und autark auch umliegende Zonen ab – und die Kontaktchancen für dort platzierte Themen steigen. Dies gilt besonders dann, wenn der Blick vom einen zum nächsten großformatigen Foto oder von einer zur nächsten Schlagzeile springt: Alle überflogenen Flächen bekommen im peripheren Sehen eine Chance auf Blickkontakt. Entsprechend sollten die dominanten Fotos und Überschriften so angeordnet sein, dass die zwischen ihnen aufgebauten Blickachsen möglichst viele sekundär wichtige Inhalte-Angebote überspannen. Die reichweitenstarken Publikumswebsites bild.de und spiegel.de sind in dieser Disziplin stilbildend (vgl. Abb. 43 und 44).

Das Beispiel bild.de zeigt auch in 2020, wie eine Verweilzone konstruiert werden kann: Die zahlreichen Größenvariationen bei Fotos und Überschriften lassen ein schnelles Scannen kaum zu – hier braucht es also relativ mehr Zeit, um die Themen zu erfassen. Auch die News-Rotation, die zunächst nur im Anschnitt zu sehen ist, bahnt nach dem Scrollen längere Blickkontakte an.

Auf spiegel.de hingegen wird die erste Bildschirmportion zwar nach wie vor von einem Aufmacherfoto dominiert. Anders als vor zehn Jahren sind die Textkomponenten in 2020 allerdings deutlich prominenter eingebunden. Hier zielen – im Gegensatz zu bild.de – vor allem die Überschriften auf ein weiteres Verweilen der Nutzerinnen und Nutzer.

Im weiteren Verlauf der spiegel.de-Startseite wechseln sich Verweilzonen und Scan-Rennstrecken ab: Soll ein schnelles Erfassen der angebotenen Teaser ermöglicht werden, dann stehen die Teaser in der Hauptspalte streng untereinander (Abb. 45 und 46).

Abb. 43:In 2011 war die erste Bildschirmportion auf bild.de so konstruiert, dass die Blickachsen zwischen den Fotos und Überschriften über die Sekundärkomponenten spannten. Die Chancen auf Blickkontakt für die drei kleineren Teaser und den News-Ticker stiegen. In 2020 ist das Layout noch deutlich stärker von Boulevard-Stilmitteln geprägt, die Fotos sind dominant. Auffällig: Oberhalb der News-Rotation gibt es jetzt zwei großflächige, statische Aufmacher. Die Foto-Blickachsen sind zahlreicher und insgesamt so angelegt, dass sie den Blick mobilfreundlich eher in die Seitenmitte lenken. Quelle: bild.de, eigene Screenshots.

Abb. 44:Spiegel.de akzentuierte früher (2011) in der ersten Bildschirmportion nur ein Aufmacherthema. 2020 ist der Akzent verlagert: Das Aufmacherfoto gibt es zwar immer noch, die Textkomponenten haben jedoch deutlich mehr Gewicht – abzulesen an den zahlreichen Text-Blickachsen (grün).Quelle: spiegel.de, eigene Screenshots.

Abb. 45:Die heiße Zone für schnelles Überfliegen: Sind die Teaser fein säuberlich untereinander angeordnet, wie hier beim Spiegel, dann wird bevorzugt im linken Drittel der Teaserflächen nach themenidentifizierenden Wörtern gescannt. Quelle: spiegel.de, eigener Screenshot.

Abb. 46:Zum Vergleich: Mobile Startseiten werden primär über die Seitenmitte gescannt. In der n-tv-App wird diese Rezeption unterstützt – die Mini-Fotos stehen links, sodass die Überschriften-Keywords in die Mitte rücken. Quelle: ntv.de, eigener Screenshot.

Die angesprochenen Effekte korrespondieren dabei mit entsprechenden Eyetracking-Befunden: Jakob Nielsen hatte bereits 2006 darauf hingewiesen, dass die Fixationen beim Scannen einer Webseite in Form eines F verteilt sind. In 2017 hat er dazu präzisiert und eingeräumt, dass es durchaus auch andere Scan-Muster gebe, etwa das Commitment Pattern und das Spotted Pattern. Das Commitment Pattern ist zu beobachten, wenn ein Text komplett durchgelesen wird, das Spotted Pattern, wenn ausgewählte Passagen durchgelesen werden. Das F-Muster wiederum stelle sich immer dann ein, wenn a) das betrachtete Textangebot hierarchiefrei formatiert ist, b) noch nicht klar ist, ob vertiefend gelesen werden soll, und c) der Nutzer möglichst effizient den Inhalt der Seite erfassen will.

Alle drei Bedingungen können für Scan-Rennstrecken auf Startseiten als erfüllt betrachtet werden: Die Teaser sind in der Form identisch und damit gleichrangig relevant, die Nutzerin hat noch nicht entschieden, ob vertiefend gelesen werden soll, und versucht, die angebotenen Inhalte möglichst effizient zu erfassen. In der Poynter-Studie Eyetrack III wurde zudem schon in 2004 beobachtet, dass sich die Nutzer beim Scannen der Teaser vor allem auf das linke Drittel konzentrieren und erst einmal einzelne Begriffe prüfen. Lesen im Sinne von Satzlesen findet zu diesem Zeitpunkt noch nicht statt. Stehen die Teaser also streng geordnet untereinander, dann wird bevorzugt das linke Drittel vertikal abwärts überflogen – und damit besonders flott.

Die zugrunde liegenden Gestaltungsprinzipien für das Konstruieren von Blickachsen lassen sich prinzipiell auf jede Desktop-Website übertragen, gleich ob es sich um eine Medienwebsite oder eine Shoppingsite, eine Verbandssite oder eine Firmenwebsite handelt. Einen echten Eyetracking-Test können sie zwar nicht ersetzen, schließlich kommt es entscheidend auf die konkreten Bild- und Text-Inhalte an. Allerdings geben die Blickachsen bei geringem Aufwand mindestens erste Hinweise darauf, wie die wahrscheinlich beschrittenen Blickwege auf der Startseite verlaufen.

Tipp: Machen Sie auf Ihrer Site selbst den Test. Drucken Sie die betreffende Seite dazu aus oder erstellen Sie einen Screenshot und verbinden dann die dominanten Fotos und die größten Text-Elemente durch Linien, sodass das Blickachsennetz sichtbar wird. Je mehr Textkomponenten kreuz und quer laufend von den Blickachsen überspannt werden, desto höher sind im Einzelfall die Chancen auf Blickkontakt für die unterliegenden Elemente. Auf der anderen Seite steigt auch die Scan-Zeit, was von den Nutzern als bremsend empfunden werden kann. Gibt es hingegen nur relativ wenige Blickachsen, die noch dazu parallel zur Vertikalen verlaufen, dann können die Nutzer die Themen tendenziell schneller scannen. Das Seiten-Layout wirkt in diesem Fall eher flott.