Lufthansa Relaunch

Lufthansa.com im neuen Design

Lufthansa Relaunch

Anlässlich seines 15-jährigen Bestehens präsentiert sich der Webauftritt von Lufthansa unter Lufthansa.com in einem neuen Design, zumindest die Verkleidung ist neu. Unter der Haut, sprich der eigentliche Inhalt ist in weiten Teilen unverändert geblieben. In den kommenden Monaten werden weitere Anpassungen in den Auftritt einfließen. Ausgenommen von dem letzter Woche vollzogenen Relaunch ist unter anderem der Buchungsprozess, der derzeit hinsichtlich der User Experience komplett hinterfragt und überarbeitet wird. Aber auch die aktuelle „Hülle“ von Lufthansa.com ist ein Besuch und einen näheren Blick wert.

Ein erster Schritt

Ziel des jetzigen Relaunchs war es, den bestehenden Inhalt nahtlos in die neue Außenhaut einzuweben, was in Summe auch gut gelingt. Schaut man sich im Detail den Umgang mit Schriften, Bildern und Grafiken an, so erkennt man allerdings, dass der Relaunch (lediglich) einen Zwischenschritt darstellt.

Dass Lufthansa.com mittlerweile etwas in die Jahre gekommen war, sah man schon anhand der Gesamtbreite, die bislang bei lediglich 770 Pixeln lag. In Verbindung mit zahlreichen Grautönen und den eher kleinformatigen Bildern war Lufthansa.com lange Zeit ein optisch eher tristes Onlineangebote, ordentlich und mit erwartungsgemäßen Nutzwert, aber doch weitestgehend emotionslos. Die Konzern-Website von Lufthansa wurde im März 2009 relauncht (siehe Kurzmeldung im dt) und gab schon einmal einen Ausblick auf die neue Großzügigkeit im Interface, die nun auch auf der Consumer-Site Einzug gehalten hat.

Die Breite ist nun auf smarte 960 Pixel angewachsen. Mit dem neuen Format lassen sich Bilder größer einbinden, was zumindest auf der Startseite auch erfolgt ist. Diese verfügt nun über eine Hauptbühne, ähnlich wie der vor zwei Jahren relaunchte Miles & More-Auftritt. Mehrere Aktionen oder Themen können auf diese Weise gleichzeitig gespielt werden; eine Funktionalität, die zweifellos überfällig gewesen ist. Integriert in die Hauptbühne ist die Eingabemaske zur Buchung. Waren die Abfragen „Auto“ und „Hotel“ bislang als kleines Symbol eher versteckt integriert, springen die hier hinterlegten Formulare nun bei Klick auf eine der in Balken befindlichen Überschriften auf. Die Animation, die der JavaScript-gesteuerte Klappmechanismus jeweils mit jedem Klick vollzieht, ist wohl eher Geschmacksache. Benötigt wird er nicht.

Keine Frage des Geschmacks, sondern eine Frage der webgerechten Aufbereitung von Inhalt, ist hingegen der Umgang mit Teaser-Grafiken. Texte, zumal ohne Schriftenglättung, gehören hier (Screenshot) nicht hinein. Weder den Suchmaschinen wird man mit solch einer Darstellung gerecht, noch den Nutzern der Site, denen so ein einheitliches Schriftbild verwehrt bleibt.

Buchungsprozess: Auswahl des Datums

In der Gegenüberstellung von alter und neuer Darstellung des zweiten Prozessschrittes ist gut zu sehen, dass der Inhalt selbst unverändert ist. Weder sind Meta- und Footer-Navigation neu strukturiert, noch hat sich die Anzahl der Buchungsschritte geändert, die nach wie vor bei 6 liegt. In vielen Fällen, wie auch im Beispiel des Buchungsprozesses, sorgen also einige angepasste Stylesheets für einen leicht veränderten Look des Contents.

Lufthansa Relaunch

There is a better way to navigate

Ein Manko von Lufthansa.com war von je her der Umgang mit internen und externen Inhalten, insbesondere die Frage, wie diese im Browser angezeigt werden. Bislang, und sehr zu meinem Bedauern offenbar auch zukünftig, werden viele Inhalte in einem neuen, eigenen Fenster angezeigt, so zum Beispiel das Vielfliegerprogramm „Miles & More“, das sich bei Klick auf den Begriff innerhalb der Hauptnavigation(!) in besagtem neuen Fenster öffnet, was deshalb besonders unglücklich ausschaut siehe Screenshot, da die Breite des Fensters auch noch auf 625 Pixel begrenzt wurde. Weder empfiehlt es sich im Sinne einer am Nutzer orientierten Führung, aus der Hauptnavigation heraus auf externe Inhalte zu verlinken – zumindest ohne dies sichtbar und für den Nutzer nachvollziehbar zu machen –, noch bedarf es überhaupt in diesem Fall eines neuen Fensters, das zudem nicht einmal die Breite der aufgerufenen Seite berücksichtigt. Gegen Fenster oder Layer, die nach einer Auswahl wieder selbsttätig schließen, etwa die Auswahl eines Flughafens innerhalb des Buchungsprozesses –, gibt es nicht viel einzuwenden. Dank Suchvorschläge, die bei Eingabe der ersten drei Buchstaben erscheinen, kann allerdings auch an dieser Stelle auf ein Fenster verzichtet werden. So praktiziert es ja die neue Startseite von Lufthansa. Insbesondere auch für den Bereich „Hilfe & Kontakt“, der gewissermaßen die Vorlage für das 625 Pixel große Fensterformat sein dürfte, ist die Nutzerführung zu hinterfragen.

An und für sich liegt der Idee, ein Hilfe-Fenster nebenbei offen zu halten, ja durchaus ein ehrbarer Ansatz zugrunde. Hilfestellung und Kontext sind auf diese Weise für den Nutzer gleichzeitig sichtbar. In der Praxis stellt es sich auf Lufthansa.com allerdings so dar, dass jeder(!) Klick auf „Hilfe & Kontakt“ ein neues Fenster öffnet, ungeachtet dessen, ob bereits ein solches Hilfe-Fenster geöffnet ist. Und da auch jeder Link aus der Hilfe heraus ein neues Fenster zur Folge hat, sind ganz schnell 10 Fenster von Lufthansa zeitgleich geöffnet. Besser wäre es aus Sicht der Nutzerführung, wenn Inhalte stets im gleichen Tab aufgerufen würden. Beispiel: Auf der Seite „Streckennetz“ wird die Routemap trotz unterschiedlichem Interface im gleichen Tab respektive Fenster aufgerufen. Das Öffnen eines neuen Fensters sollte nur in wenigen Fällen forciert werden. Keinesfalls sollten sie ein täglicher Begleiter der User Expericene sein, weil sie nämlich Nutzer dazu zwingen, sich mit Dingen zu beschäftigen, die Zeit kosten und die vermeidbar gewesen wären. Überdies sieht es der W3C-Validator nicht gerne, wenn target=“_blank“ im Code genutzt wird.

Details der Website vor und nach dem Relaunch

Das größere Interface ermöglicht auch einen großzügigeren Umgang mit Schriften. Auf den Zeitpunkt der Sichtung bezogen, lässt sich jedoch sagen, dass das ganze Potenzial hier noch nicht ausgeschöpft wird. Während Modul-Überschriften und Preisauszeichnungen deutlich präsenter sind, erscheinen Textlinks leicht vergrößert, wo hingegen Schaltflächen (Typo und Dimension) zum Teil sogar verkleinert dargestellt werden. Ansatzweise erkennt man zudem, dass auch der Fließtext leicht vergrößert wurde bzw. in einem zukünftigen Schritt auch auf den Unterseiten vergrößert erscheinen wird. Statt schwarz ist dieser analog zu den Headlines nun grau.

Lufthansa Website Details

People Interactive hatte im Sommer 2010 den Zuschlag für den Relaunch bekommen (siehe Airliners.de). Die Kölner sind für Konzeption, Kreation und Umsetzung des Frontends verantwortlich, IBM für das Backend.

Nicht so ganz glauben sollte man übrigens der offiziellen Pressemeldung von Lufthansa, in der es heißt, neu sei auch eine personalisierbare Startseite – das war sie vorher auch schon, wie der folgende Screenshot sehr schön belegt, in der die Funktionalität bereits verlinkt ist.

 

8 Kommentare zu “Lufthansa.com im neuen Design