Mobile Usability: Lufthansa vs Airberlin – 90% Optimierungspotential

Lufthansa: So kommt man zum mobilen Boardingpass via Passbook

1. Einstieg über die mobile Email

Lufthansa versendet in der Email den QR Code. Er ist gleich am Anfang platziert. Das erleichtert auch ohne Passbook den CheckIn am Gate, da die Mail nur geöffnet werden muss. SOfort ist der QR Code sichtbar.

Wir wollen aber die schicke iOS 6 Funktion Passbook verwenden. Das ist noch praktischer, wie Vielflieger wissen.

2. Klick auf den Link in der Email zum Passbook download

In der Email ist ein Link auf die Passbook Boardkarte gesetzt. So kommt man direkt zum Download. Praktisch.

3. Boardingpass ins Passbook laden

Und schon ist der Boardingpass im Passbook abgelegt. Das war easy!

 

Air Berlin: Schritt für Schritt zum Passbook Boardingpass

1. Bestätigungsmail empfangen und Link suchen

Air Berlin platziert den QR Code am Ende der Email. Etwas unpraktisch, da beim Aufrufen am Gate die gesamte Email bis ans Ende gescrollt werden muss. Die hinter uns Wartenden freuen sich…

2. Passbook Link in der Email suchen – Bummer!

Leider bietet die Email nur die Möglichkeit, den Boardingpass noch mal zusenden zu lassen. Gedankenspiel: Ich lese ja gerade die Email mit dem Boardinpass. Hmmm? Er dürfte also angekommen sein….Nette Rekursion.

3. Googeln & Lösung finden: die Air Berlin iPhone App

Die App muss aus iTunes gezogen werden. Darin wird die Speicherung der Boardkarte im Passbook versprochen. Wir laden die 7,6MB herunter.

4. App starten: Yeah, ein Willkommensbildschirm

Die Idee einer App einen „emotionalen“ Startbildschirm zu verleihen ist nicht besonders gut, aber immerhin ok. Die kleinen Buttons lassen sich aber nur schwer treffen. Hier sollte man mal Fitt’s-Law studieren. Aber wollen wir nicht zu kritisch sein und klicken auf Account, um unsere Daten einzusehen.

5. Registrieren und anmelden

Wer noch kein Mitglied im Vielfliegerprogramm ist hat noch den Registrierungsmarathon vor sich. Wir haben Glück und geben unsere Kennung ein. Dem gewissenhaften Leser fällt sofort auf: iPhone 5 Anpassung gab es noch keine. Die schwarzen Balken oben und unten bestätigen es.

6. Wir werden Willkommen geheißen

Ein weiterer Übersichtsbildschirm zeigt uns diverse Statusmeldungen an. Und auch sehr prominent ist der Link zu den Buchungen platziert. Da wollen wir hin. Klick.

7. Bitte noch einmal klicken

Noch ein wichtiger Hinweis, wir nicken ihn ab. Gut. Bitte weiter.

[SPOILER: Insider haben es sofort gesehen, Conversion Doktor Gabriel Beck grätscht mir hier in meine Screenshot Session. ]

Nun werden die vergangenen Flüge angezeigt. Nunja, hier müsste überlegt werden, welches Szenario öfter vorkommt: Alte Flüge ansehen, oder sich auf Flüge, die unmittelbar bevorstehen zu konzentrieren. Wir müssen daher noch einmal klicken, um die benötigte Seite aufzurufen.

Hier sieht es gut aus: Nochmal klicken. Ich fühle es, es wird wärmer…

8. Endlich am richtigen Flug angekommen. Jetzt aber…

Auf einen Blick sind Informationen sichtbar. Doch wo können wir das Passbook befüttern? Lass uns auf das Icon klicken… Es war ein Versuch, denn als klickbares Icon hat sich dieses Element nicht hervorgetan. Aber immerhin wir sind im CheckIn.

9. Übersicht über den CheckIn

Da wir schon eingecheckt sind, stimmt uns die Statusmeldung zufrieden. Der Pfeil sieht verlockend aus. Let’z click…

10. Übersicht über die Buchung

Ahh, das ist herrlich. Ich habe schon lange keine Bilder mehr gesehen. Lass uns doch einfach mal ein Bild von einem schicken Flugzeug ansehen. Zwei Links sind doch genug – oder? Boardkarte anzeigen weckt unser Interesse…

11. Boardkarte(n) – So müssen Headlines aussehen

If $Anz_Boardkarten<2 title=“Boardkarte“ else title=“Boardkarten“. So hätten wir das Teil 1995 rausgecoded. Aber egal. Wir stoßen wieder auf eine Linkliste. Diesmal wieder anders formatiert.

Auffällig ist, dass die Konsistenz der App  etwas zu wünschen übrig lässt. Die Links sehen fast in jedem Screen anders aus. Aber es muss ja in Version 2.6 nicht gleich auf alles Rücksicht genommen werden. ;-) Vor allem vor dem Hintergrund, dass gute App-Developer schon bis Ende 2013 ausgebucht sind.

Zugegeben, es wird nervig, aber „Boardkarte senden“ verspricht wieder mal viel.

12. Bingo! Hier ist der Link zum Passbook Boardingpass

Nach 12 Schritten haben wir den Link erreicht. KLICK!

13. Alle guten Dinge sind drei….zehn.

Immerhin der Boardingpass ist im Passbook abgelegt. *ächtz*

Fazit: Scrollen statt klicken!

Bei der Entwicklung von Apps ist es wichtig, dass die Informationsarchitekur den wichtigsten Anwendungsfällen folgt. User Experience und die sogenannte Customer Journey stehen dabei im Vordergrund.

Lufthansa zeigt, dass drei bis fünf direkte Links auch schon in der Email Platz finden können, um die Benutzer rasch auf die richtigen Pfade zu leiten.

Von der Air Berlin App kann man lernen und am eigenen Leib erleben, wie wichtig es ist, rasch zum Punkt zu kommen und auch gerne mal 4 bis 7 Links pro Seite darzustellen. Eine rasche Lösung, damit derartiges nicht einem selbst passiert: Cardsorting.

Bezüglich des Interfacedesigns muss vor allem auch das technische Artefakt – in unserem Fall das iPhone berücksichtigt werden. Das Teil wurde geschaffen um zu scrollen. Scrollen geht mit einer Hand einfach sehr gut, daher kann im Interface ruhig darauf eingegangen werden. Mehrere Links in Listenform auf einer Page stellen kein Problem dar, auch wenn diese über mehrere Seitenansichten scrollen.

Eine Liste mit den wichtigsten Links würde folglich der AirBerlin App gute 10 Schritte sparen. Eine Speed-Optimierung von fast 90%. Cool, oder?

Have fun!