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

  1. Das ist doch ein recht gut gelungener Neustart, wie ich finde. Sehr gut gefällt mir die Navigations-Lösung sowie das Accordion für Flug buchen, Online Check-In und Mietwagen. Die Bedienung ist da sehr intuitiv.

    Schade dagegen finde ich, dass der Hover-Effekt in der Navigation so kontrasarm ist. Leider wurde bei der Umsetzung nicht auf barrierefreiheit geachtet – weder die Navigation, noch die Formulare sind mit der Tastatur bedienbar. Es wundert mich, dass die Lufthansa auf eine so große Gruppe Menschen verzichten kann.

    Schade auch, dass auf der Startseite teilweise so schlechte Bilder verwendet werden. Wären sie alle auf dem Niveau des A380-Tabs, würde die Seite einiges an optischer Qualität gewinnen…

  2. Das war bitter bitter nötig, auch wenn ich finde, dass es jetzt auch noch weit weg von einer guten/schönen Website ist. Aber wenn es nur ein Zwischenschritt darstellt, wollen wir mal abwarten.

  3. Die neue Website, oder besser das neue Gerüst sieht doch schon wesentlich freundlicher aus. Aber jetzt kommt meine riesen Kritik. Mein W3C-Validator zeigt 217 Fehler an. Nicht nur, dass man von „&“ noch nie etwas gehört hat… nein auch von „self-closing“ Elementen hat man noch nie etwas gehört.
    Ich habe während meiner Ausbildung jedes mal eines auf die Finger bekommen, wenn ich diese Fehler gemacht habe. Es sind nämlich die billigesten Fehler.
    Im Ganzen gesehen bleibt es ja auch bei diesen kleinen Fehlern, auf Lufthansa.com, aber wenn schon alles neu gemacht werden soll, dann bitte richtig.

    Sonst ist es ein guter Ansatz.

  4. Auf den ersten Blick könnte die Seite auch von jeder Bank, Versicherung oder Rechtsanwaltskanzlei sein. Die Seite habe ich schon ca. 100 mal gesehen. Wie kann das ein Relaunch sein???

    Dennoch eine klare Verbesserung. Hätte mir nur etwas mehr gewünscht. (wie eigentlich jedes mal)

    Passt dennoch zum Zeitgeist und zur Marke.

  5. Sehe das ähnlich wie „Technokrat“. Bei dem Aufwand der da finanziell betrieben wurde – wäre eine Validität doch schon drin gewesen. Funktionell und optisch hat sich die Arbeit gelohnt, aber technisch gesehen nur Mittelklasse, sorry.

Kommentar verfassen

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src="meineurl"> <a> <blockquote>