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.
Mehr Haftkraft auf mobilen Startseiten
Ganz so wie für Desktopsites gilt auch für Mobile Sites, dass die Startseite schnellen Zugang zur gerade gewünschten Information eröffnen muss. Damit in den wenigen Sekunden der Lade- und Scan-Phase ein Kontakt angebahnt werden kann, sind auch hier einige Grundregeln zu beachten.
Maßnahme 1: Glasklare Übersicht – aber anders
Glasklare Übersicht sieht auf dem Smartphone anders aus als auf dem Desktop-Monitor. Wie man es auch dreht und wendet: Auf einem Smartphone-Bildschirm ist schlicht und ergreifend weniger Platz als auf einem Desktop-Monitor. Wer eine App konzipiert oder ein App-Konzept evaluieren will, steht deshalb immer vor der Frage: Was gehört zwingend in die erste Bildschirmportion? Und worauf ist zu verzichten? Die Antworten auf diese Fragen hängen davon ab, welche Aufgabe die Nutzerinnen und Nutzer in der jeweiligen App oder Mobile Site erwartbar erledigen wollen. Es macht natürlich einen Unterschied, ob Sie Lesestoff anbieten oder Gebrauchtwagen. Gehen Sie sorgsam mit der zur Verfügung stehenden Fläche um. Überlegen Sie sich genau, welche Funktionen unbedingt nötig sind, damit getan werden kann, was getan werden muss oder soll. Google hat dazu bereits 2015 gut zwei Dutzend Empfehlungen formuliert. Eine allerdings steht dort nicht, weil sie vermutlich zu naheliegend ist: Das Wichtigste gehört ins Zentrum der ersten Bildschirmportion, nicht nach links oder rechts oben. Es ist immer das, was das zu unterstellende Nutzerbedürfnis befriedigt. Glasklare Übersicht zu schaffen bedeutet für Mobile Sites deshalb nicht, das Interface auf nur eine Komponente zu reduzieren. Glasklare Übersicht zu schaffen bedeutet für Mobile Sites, die zweckdienlichen Komponenten möglichst kompakt anzuordnen.
Abb. 47:Oberstes Interfacedesign-Gebot für mobile Startseiten: Verstehe die Intention Deiner Kunden und gib ihnen genau das, was sie wirklich brauchen. Im linken Beispiel kann ein Nutzer sofort mit dem Versicherungsvergleich loslegen, während das im rechten Beispiel nicht möglich ist. Quelle: Google.
Maßnahme 2: Vorsicht vor Hamburgern
Drei Striche, akkurat übereinander gestapelt – das sogenannte »Hamburger«-Menü ist weit verbreitet und findet sich in Apps und Mobile Sites manchmal links oben und manchmal rechts oben. Wer es sieht und erkennt, weiß sofort, dass sich dahinter weitere Navigationsoptionen verbergen. So gebräuchlich das Symbol mittlerweile aber auch ist, es hat einen nicht zu unterschätzenden Nachteil: Die Navigationsoptionen sind immer erst nach dem Antippen des Symbols anklickbar, können also nicht direkt angetippt werden. Und: Sind sie aufgerufen, dann verstellen sie unweigerlich den Blick auf die Primärinhalte. Ein Hamburger-Symbol verlängert den Klickweg also immer um mindestens einen zusätzlichen Schritt. Schon dieser minimal erscheinende Mehraufwand kann dramatische Trafficverluste verursachen. Ein Hamburger-Menü sollte man deshalb nur dann einsetzen, wenn es nicht anders geht.
Als nützliche Alternative zum Hamburger-Menü bieten sich Sektionen- beziehungsweise Rubriken-Tabs an. Allerdings ist auch bei ihnen darauf zu achten, dass die Menüs ein möglichst direktes Agieren erlauben. Immer wenn ein sofortiges Handeln-Können verkompliziert wird, vor allem durch Drop-down-Menüs, läuft man Gefahr, bei den Nutzern »Grmpfs« und »Och-Nös!« zu kassieren – also ablehnende innere Kommentare. In der Folge kann die Reichweite schnell erheblich schwinden. Das Hamburger-Menü steht da also nur stellvertretend für andere, ähnlich funktionierende Navigationsoptionen. Leitgedanke für die erste Bildschirmportion sollten immer diese Fragen sein: Was wollen die Nutzerinnen und Nutzer bei uns erledigen? Welches Bedürfnis wollen sie befriedigen? Und was ist dazu unbedingt notwendig?
Maßnahme 3: Das Wichtigste ins erste Viertel
Im
