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.
Maßnahme 2: Der Platz an der Sonne
Der Top-Quadrant hat für den Start der Scan-Phase besonderes Gewicht. Links oben sollte deshalb natürlich nicht nur das Logo platziert sein, sondern es sollte auch sofort der Blickkontakt mit den Inhalten angebahnt werden. Entsprechend braucht mindestens ein erster Teaserblock eine Schnittmenge mit dieser Fläche und bekommt so den Platz an der Sonne. So weit ist das unproblematisch. Die komplexeren Fragen des Seiten-Layouts stellen sich für die Site-Planung dann, wenn regelmäßig sehr viele Themen auf der Startseite unterzubringen sind.
Ist der Website-Inhalt sehr umfangreich und kann er in all seinen Facetten unmöglich auf einer Bildschirmportion geteasert werden, dann ist für die erforderliche Rollbalkenseite ein Template zu entwickeln, das die verschiedenen Themenbereiche gruppiert und im Grundsatz dauerhaft zueinander ins Verhältnis setzt, sie also hierarchisiert. Das Leitprinzip für dieses Hierarchisieren ist simpel und lautet: Relativ wichtigere Themen(-Gruppen) kommen nach oben. Die weiteren Themen (-Gruppen) folgen in absteigender Wichtigkeit.
Was banal klingt, hat weitreichende Konsequenzen: Es zwingt die verantwortlichen Planer dazu, ein Seiten-Template zu entwickeln oder auszuwählen, das prinzipiell für jedes Thema einen zielgruppenorientiert angemessenen Platz bereitstellt. Aufgabe der Redakteurinnen und Redakteure ist es dann, dieses Template in festgelegten Rhythmen mit frischem Inhalt zu befüllen und jedem Thema eine angemessene Position zuzuweisen. Für journalistische Redaktionen ist das tägliche Praxis, für Kommunikationsabteilungen in Firmen, Verbänden oder Ministerien zuweilen aber eine eher ungewohnte, manchmal heikle Aufgabe. Wenn allerdings schon das Template keine angemessene Hierarchisierung einrichtet, kann die beste Redaktion nichts mehr retten. Da hilft dann nur noch ein Relaunch (siehe Abb. 40 und 41, nächste Seite).
Abb. 39:Glasklare visuelle Hierarchie – durch die Fotogrößen wird vermittelt, welche Inhalte aktuell relativ wichtiger sind. Quelle:
