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

Um die Nutzerblicke möglichst rasch an die Site binden zu können, ist es nützlich zu wissen, an welcher Stelle der Startseite die Nutzer ihren Blickflug typischerweise starten. Dort, wo die Nutzer zuerst hinschauen, sollte auch das zugkräftigste, stärkste Thema platziert werden. Die Befundlage zu dieser Frage ist inzwischen recht eindeutig: Die Nutzer schauen in den ersten Sekunden auf das obere linke Viertel der ersten Bildschirmportion – sofern die angebotenen Bildformate bestimmte Flächengrößen nicht überschreiten.

Die Fläche oben links ist also der Top-Quadrant jeder Website. Nach dem Aufrufen der Seite schauen die Nutzer auf diese heiße Zone, vor allem, um sich rasch zu orientieren. Das Firmenlogo, der Firmenname und Teile der Hauptnavigation gehören deshalb als visuelle Anker immer in diese Fläche. Neuankömmlingen auf einer Site wird auf diese Weise in Sekundenbruchteilen unzweifelhaft mitgeteilt, wo sie sich jetzt befinden und wie sie navigieren können. Abweichungen von diesem Standard sind zwar nicht von vornherein unsinnig, aber es sollte schon klar sein, dass sie in jedem Fall kostbare Zeit verbrauchen. Auf der anderen Seite: Wenn gezielte Abweichungen positiv überraschen, kann natürlich auch ein aufmerksamkeitssteigender Effekt eintreten.

Die beiden im Folgenden beschriebenen Automobil-Websites finden sich als Screenshots auf der folgenden Doppelseite.

Abb. 30:Blickverlauf in der Scan-Phase auf informierenden Websites. Links oben ist die wichtigste Blickkontakt-Zone für den Bindungsaufbau. Quelle: Poynter Institute.

Die Website von BMW zum Beispiel ist im Screenlayout seit Jahren strukturell nur moderat verändert worden, wie die Abbildungen 31 bis 33 zeigen.

Der zentrale Eye-Catcher ist das BMW-Foto im Seitenzentrum, auch der Schriftzug BMW Deutschland steht im Top-Quadranten. Das Logo ist rechts oben platziert und damit an eher ungewohnter Position außerhalb des Top-Quadranten. 2010 ist das kaum anders: Der Auftritt ist visuell noch stärker auf das Produkt Automobil fokussiert. Der Aufmacher ist ein schnell ladendes Video, die Videoszenen sind so gefilmt und geschnitten, dass der Wagen in drei von vier Szenen zum Schriftzug »Freude ist grenzenlos« fährt. Das Firmenlogo ist also nach wie vor visuell nachrangig platziert, das nichtssagende Key Visual mit Auto-Lichtern in einer Abendlandschaft weggefallen. Vorfahrt hat das Produkt BMW-Automobil. 2019 ist der Auftritt mobile-friendly umgesetzt und noch einmal deutlicher auf das Produkt fokussiert.

Deutlich stärkere Optimierungen hat es beim Konkurrenten Mercedes gegeben (vgl. Abb. 34 bis 36). Im Jahr 2003 ist zwar das Logo erwartungskonform platziert. Nur: Wo sind die Informationen über die Autos? Jedenfalls nicht an der Top-Position der Startseite. Schon ziemlich erstaunlich ist, dass die eigentlichen Produkte der Nobelmarke Mercedes auf der Website-Startseite des Unternehmens so gut wie gar nicht stattfanden, zumal die animierten Illustrationen als Werbebanner wahrgenommen werden müssen. In 2010 haben die Website-Macher dazugelernt: Die Startseite konzentriert den Blick ähnlich wie bei BMW auf das Wesentliche. In der Bildsprache gibt es jedoch immer noch Optimierungspotenzial, die Motive schauen häufig vom Text weg statt zum Text hin.

Abb. 31:Die BMW-Website in einem Screenshot aus dem Jahr 2003. Die roten Linien zeigen die Blickachsen für die wichtigsten visuellen Elemente der Startseite. Quelle: bmw.de, eigener Screenshot.

Abb. 32:Die BMW-Website in 2010. Das Screenlayout ist strukturell nur moderat verändert worden, visuell dominiert nach wie vor das Produkt Auto. So war’s schon damals richtig. Quelle: bmw.de, eigener Screenshot.

Abb. 33:Die BMW-Website in 2019. Das Interface fokussiert noch stärker auf das Produkt. Die Motive in der Rotation wechseln automatisch. Der dünne blaue Balken zeigt den Bildwechsel an, ist allerdings nicht anklickbar. In der Rotation kann also nur über die Pfeile vor und zurück navigiert werden. Quelle: bmw.de, eigener Screenshot.

Abb. 34:Print lässt grüßen: Die Mercedes-Benz-Website 2003 mit Introtext auf der Startseite. Quelle: mercedes-benz.de, eigener Screenshot.

Abb. 35:Die Mercedes-Benz-Website 2010 kommt schneller auf den Punkt, auch wenn visuell noch nicht alles vom Besten ist. Quelle: mercedes-benz.de, eigener Screenshot.

Abb. 36:Bei Mercedes Benz hat sich ganz offensichtlich einiges getan. Das Interface 2019 ist mobilfreundlich. Sehr gut gelöst ist die Fortschrittsanzeige in der Aufmacherrotation: Die blauen Balken innerhalb der weißen Balken funktionieren wie Sanduhren und zeigen an, wie viel Zeit noch bis zum nächsten Fotowechsel verbleibt (siehe Pfeil). Und: Alle Balken sind anklickbar. Die Nutzer können also nicht nur vor und zurück navigieren, sondern nach Belieben zwischen den Fotos springen. Quelle: mercedes-benz.de, eigener Screenshot.

Verbunden mit den Positionserwartungen für Standard-Webkomponenten lässt sich aus diesen Befunden ein Analyseraster für das Screendesign auf informierenden Websites erstellen, mit dem schnell zu identifizieren ist, ob eine Startseite erwartungskonform und für den Blickkontakt optimal aufgebaut ist. Dieses Analyseraster sieht auf der Basis der Studien von Michael Bernard und der Poynter-Eyetrack-III-Studie so aus wie in Abbildung 37.

Es ist abgeleitet aus den Usability-Forschungen zur optimalen Platzierung von Standard-Website-Komponenten. Es lässt sich prinzipiell auf jede Website-Startseite legen, sodass schnell festgestellt werden kann, ob das Screendesign wirklich glasklare, erwartungskonforme Übersicht bietet oder nicht.

Abb. 37:Analyseraster: Die Nutzer erwarten Desktop-Standardkomponenten an Standardpositionen. Die Erwartungshaltung für die Hauptnavigation hat sich gegenüber früheren Befunden verändert: Heute wird sie horizontal am Seitenkopf erwartet. Früher war es optimal, wenn sie vertikal an der linken Seite positioniert wurde. Eigene Grafik.

Abb. 38:Analyse per Wahrnehmungsraster: Auf welt.de stehen die Desktop-Standardkomponenten an ihrer jeweils erwarteten Position. Sehr nutzerfreundlich ist zudem, dass in der ersten Bildschirmportion komplett auf Werbung verzichtet wird. Das gefällt auch Google. Quelle: welt.de, eigene Grafik.