target="_blank" rel="nofollow" href="#fb3_img_img_4b9c8d09-f4f0-5341-b2d5-67dc2ee006d4.png" alt="image"/>
Abb. 40:Das Landesportal Hessen im Jahr 2011 – damals war nur mit Mühe zu erfassen, was wichtig ist und was nicht. Quelle: hessen.de, eigener Screenshot.
Abb. 41:Das Landesportal Hessen im Jahr 2020 mit glasklarer Hierarchie. Quelle: hessen.de, eigener Screenshot.
Hierarchisieren muss also sein, damit die Nutzer schon in den ersten Sekunden wissen, wo sie hinschauen sollen. Die Antwort auf die Frage, welche der eigenen Inhalte-Angebote relativ wichtiger und welche relativ weniger wichtig sind, entscheidet in der täglichen Content-Produktion darüber,
was auf die erste Bildschirmportion gestellt wird,
was auf die weiteren Portionen der Rollbalkenseite gestellt wird und
in welcher Reihenfolge dies geschieht.
Zu berücksichtigen sind für die Template-Entwicklung auch die typischen, positionsgebundenen Klickwahrscheinlichkeiten – und die können in Abhängigkeit von der Länge einer Startseite durchaus unerwartet variieren. Für lange Rollbalken-Startseiten ab etwa drei Bildschirmportionen ist der Fall aus Forschungssicht klar: Hier nimmt die Klickwahrscheinlichkeit im Normalfall nach unten hin linear ab, die Klick-Chancen sinken mit jedem weiteren Pixel. Wichtiges gehört also nach oben, weniger Wichtiges gehört nach unten. Für relativ kurz gehaltene Startseiten mit bis zu zwei oder drei Bildschirmportionen ist in Usability-Studien allerdings auch beobachtet worden, dass die Klickchancen am Seitenkopf hoch sind, im mittleren Teil absinken, zum Seitenende aber wieder signifikant ansteigen. Wer also eine relativ kurze Startseite zu bauen hat, sollte wichtige Themen auch ans Seitenende stellen. Gängige Tools zeigen die Werte für jede Seite heute in Echtzeit an.
Maßnahme 3: Flugplan für scannende Blicke
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
