In dieser Reihe nehmen wir Interfaces von Websites, die Fortbewegungsmittel anbieten, anhand einer bestimmten Aufgabenstellung unter die Lupe. Diese Case Studies sind keine systematischen Usability-Analysen, sondern subjektive Berichte von Nutzererlebnissen unter besonderer Berücksichtigung von Design-Aspekten. Die Aufgabe: Angebotsrecherche für eine Tour von Frankfurt/Main in eine europäische Metropole über das Osterwochenende 2011.

• Ziel: Barcelona
• Transportmittel: Flugzeug
• Buchung über tui.com (Online-Reisebüro)
• Testende Person und Autorin: Katja Weingärtner

tui.com – mein erster Eindruck

Rechts bewegen sich ein paar Buttons, auf denen Icons mit Hinweisen wie Pauschalreise, Last Minute, Hotel, Flug ... da muss ich sofort hinschauen. Die Hektik legt sich jedoch gleich wieder, das ist gut. Aber: Ich weiß sofort, wo die Links zu den relevanten Funktionen platziert sind. Außerdem bekomme ich hiermit einen schönen Überblick über das Gesamtangebot von TUI und sofort weiß ich: Hier kann ich wohl auch reine Flüge (ohne Hotel usw.) buchen. Bis eben war ich mir dessen nämlich gar nicht so sicher. Hier könnte ich direkt loslegen, ich schaue mir aber kurz die Seite noch an.

Die Startseite – Lust auf Urlaub und viele Möglichkeiten „einzusteigen“

Jogi Löw blickt sehnsüchtig in die Ferne – er scheint aber bereits im Urlaub zu sein. Vielleicht denkt er auch ein bisschen wehmütig an die vertane Chance im WM-Halbfinale …

Ansonsten Urlaubsstimmung pur: Himmelblau als Hauptfarbe kombiniert mit viel Weiß, orangefarbene oder gelbe Farbakzente und Farbflächen im Sand-Ton. Schön. Das Tui-Logo lächelt mich an, ich lese noch etwas von „Leben ist...“ und „Jetzt buchen und Preisvorteile sichern“ (der Link führt in die Buchungsmaske für Pauschalreisen). Darunter drei Reiter: Willkommen (der ist hervorgehoben, da bin ich also gerade), Suchen und Buchen und Urlaub mit TUI.

Eine Schnellsuche für Pauschalreisen ist sicher das meistgesuchte Tool auf tui.com, daher direkt unter dem Willkommen gut platziert. Darunter befinden sich Links zu den verschiedenen Suchoptionen – auch für Flüge. Daneben eine aktuelle Information für Gäste zur derzeit angespannten Lage in Ägypten. Die Seite geht nach unten noch weiter: mehrere Teaser, Werbung für die iPhone-App, bestimmte Angebote, die eher zum Stöbern einladen und mich jetzt nicht weiter interessieren.

Ganz oben am Seitenrand eine Toolbar, eine zurückgenommen gestaltete Navigationsleiste mit Suche, Schnellzugriff zu Service-Angeboten und weiteren Produkten von TUI.

+ Mindestens drei Möglichkeiten, um zur Flugsuche zu gelangen. Hier kann man wirklich nichts falsch machen und kommt innerhalb von Sekunden ans gewünschte Ziel.
+ Eine dezente Animation macht auf die wichtigsten Funktionen aufmerksam.
+ Ich habe richtig Lust auf Urlaub. Selbst die Icons (wie z.B. ein FlipFlop) machen Appetit auf Reisen. Wirklich gute Arbeit im Bereich Corporate Design und Image.

- Texte und Elemente im Bereich des Bildes sind für meinen Geschmack zu unruhig und kleinteilig.

Jetzt aber: Auf nach Barcelona!

Flugsuche – Eingabe von Start- und Zielflughafen

Ich starte mit einem Klick auf Flug oben rechts und lande auf einer Portalseite rund ums Fliegen mit TUI– ein entsprechendes Bild einer Flugzeugtragfläche im Kopfbereich der Seite unterstützt die Orientierung. Mich interessiert nun die Suche, die an der gleichen Stelle wie die Pauschalreisen-Suche auf der Startseite platziert ist.

Los geht’s: Flug – Ihre Suche. Die persönliche Ansprache finde ich nett, hier fühle ich mich gut aufgehoben.

Mein Startflughafen ist Frankfurt und eine Instant-Search zeigt mir bereits nach der Eingabe des ersten Buchstabens in der Eingabemaske Ergebnisvorschläge an – sehr übersichtlich aufbereitet übrigens. Ich wähle Frankfurt per Enter-Taste aus. Schön, dass es Eingabehilfen durch Kurzbefehle gibt. Nun schnell zum Zielort: Für Barcelona habe ich zwei Flughäfen zur Auswahl, ich entscheide mich für BCN Barcelona Airport.

+ Instant-Search
+ Kurzbefehle
+ Gleiche Elemente an den gleichen Stellen

- Fehlende Informationen über Flughäfen, wenn es mehrere in einer Stadt gibt.

Flugsuche – Datumseingabe und „Suche starten“

Die nächste Frage „Wann möchten Sie fliegen?“ beantworte ich mithilfe der Kalenderfunktion. Ich wähle im Dropdown-Menü April für die Hinreise (ginge alternativ auch über die Pfeil-Icons) und klicke den 22. an. Nach dem Klick aktualisiert sich der Monat für die Rückreise. Die Daten, die zeitlich vor der Hinreise liegen, sehen inaktiv aus, weil sie hellgrau eingefärbt sind. Super, das verringert das Fehlerpotenzial und damit unnötigen Frust für mich. Ich wähle das Rückreise-Datum aus. Da ich hier nicht flexibel bin, wähle ich +/- 0 Tage für beide Termine. Die weiteren Optionen wie Schulferien sind für mich weniger relevant.

Mit einem Klick auf Übernehmen schließt sich der Kalender und es geht weiter in der Eingabemaske. Nachdem ich nun noch die Anzahl der Reisenden eingetragen habe, klicke ich auf den himmelblauen, großen Such-Button. Direkt nach dem Klick erscheint an der gleichen Stelle die Meldung „Die Suche läuft, bitte warten ...“ Auch eine gute Möglichkeit für eine Erfolgsmeldung, obwohl sie etwas auffälliger gestaltet sein könnte, z.B. durch einen fetten Schriftschnitt für eine stärkere Abhebung von den anderen Texten.

+ Komfortable Kalenderfunktion
+ Nur die wichtigsten Eingaben werden abgefragt
+ Erfolgsmeldung nach Klick auf den Suchen-Button
+ Gute Orientierung auf der Seite

- Gestalterisches Detail: Der blaue Kalender überlagert den blauen Teaser im Hintergrund und verschwimmt mit ihm – hier wäre eine andersfarbige Kontur gut.
- Die Erfolgsmeldung ist etwas zu unauffällig gestaltet.

Suchergebnisliste – Filter- und Sortierfunktion

Ein Fortschrittsbalken „Hier befinden Sie sich“ zeigt mir an, dass ich mich nun für einen Flug entscheiden soll. Gestalterisch bildet dieser eher einen Fremdkörper und ist etwas lieblos umgesetzt. Aber: Er lenkt auch nicht von den viel wichtigeren Informationen ab.

Links in der Spalte, an der eben noch die Sucheingabemaske zu sehen war, entdecke ich eine Zusammenfassung meiner Suchangaben. Stimmt alles. Ich kann von hier aus zurückgehen oder auch die Suche ändern. Rechts daneben werde ich aufgefordert, den Flug zu wählen und lese, dass es ganze 214 (!) Möglichkeiten auf mindestens sieben Seiten gibt. Glücklicherweise wird ein Filter angeboten, mit dem ich die Ergebnisse sortieren und eingrenzen kann. Ich wähle per Checkbox Nur Direktflüge und somit reduziert sich die Seitenzahl – die Trefferanzahl bleibt aber offenbar gleich, das verwirrt mich etwas. Die Sortierung stelle ich auf Hinflugzeit aufsteigend um – ich möchte schließlich keine Zeit verlieren. Der Filter funktioniert übrigens über die Auswahl in einem Dropdown-Menü – ohne meine Auswahl bestätigen zu müssen, ändert sich das Suchergebnis dynamisch. Es scheint keine erweiterte Suche zu geben, was im Vergleich zu anderen Anbietern ungewöhnlich ist. Ich lasse mir alle Airlines anzeigen. Alternativ könnte ich mir nur die Flüge einer Airline anschauen. Interessanter wäre es aus meiner Sicht, manuell mehrere anwählen bzw. einzelne Anbieter ausschließen zu können.

Die Suchergebnisliste ist übersichtlich aufbereitet, passt ins Gestaltungskonzept und ist durch abwechselnd farbig hinterlegte Balken gut strukturiert. Unterstützt wird die Übersichtlichkeit zusätzlich durch den Einsatz von Icons: Pfeil nach rechts = Hinflug, Pfeil nach links = Rückflug. Ist (zumindest für uns Europäer) klar verständlich und passt optisch zu TUI.

Ich lasse mir die Details zu einer Verbindung anzeigen, und merke erst dann, dass ein Zwischenstopp vorgesehen ist. Das ärgert mich, weil ich doch oben die Auswahl verändert hatte. Ich klicke den Haken Nur-Non-Stop-Flüge noch einmal aus und wieder an – hier war wohl beim Filtern etwas schief gegangen. Jetzt scheint es zu stimmen.

+ Gute Orientierung durch Zusammenfassung der Suchangaben und Fortschrittsbalken
+ Filter- und Sortierfunktion der Ergebnisse, die eine erweiterte Suche unnötig machen
+ Übersichtliche Gestaltung

- Fortschrittsbalken
- Gleichzeitige Auswahl mehrerer Airlines im Filter nicht möglich
- Kleine Bugs in der Filterfunkion

Suchergebnisliste – Detailansicht

Der erste Flug sieht gut aus, ich klicke auf Details: Es blenden sich Details innerhalb der Suchergebnisliste ein. Die betreffenden Informationen sind nun orange hinterlegt, was einerseits die Aufmerksamkeit auf sich zieht, mich aber andererseits etwas verwirrt, da es ziemlich anders aussieht als eben. Ich finde jedoch alle Informationen zur Flugverbindung und auch zum Preis, mehr muss ich nicht wissen. Ich klicke auf Auswählen – ein auffälliger Button im gewohnten Blau.

Start des eigentlichen Buchungsprozesses

Hier stechen mir zunächst die Worte Ihre Sicherheit ins Auge. Eine Info zum SSL-Sicherheitszertifikat, darunter ein Teaser mit dem Hinweis, dass die Seite wohl auch durch den TÜV geprüft wurde. Klar, jetzt geht’s langsam ans Eingemachte. Da will ich schon wissen, ob das alles mit rechten Dingen zugeht.

Wieder zeigt mir ein Fortschrittsbalken, wo ich mich befinde. Oben steht – auch wieder orange hervorgehoben – die Zusammenfassung meiner Flugdaten, auch hier kann ich mir die Details wieder anzeigen lassen. Zurück zu den Suchergebnissen komme ich nur über den Zurück-Pfeil im Browser.

Hier müsste ich nun allerhand persönliche Informationen eingeben. An dieser Stelle breche ich den Vorgang ab, da ich erst noch mit meiner Begleitung die Details und Kosten besprechen möchte.

Ich würde das Angebot gerne per E-Mail weiterleiten oder es auf eine Merkliste setzen, aber diese Funktionen gibt es offenbar nicht. Da bleibt mir nur, die Seite über den Browser auszudrucken - was leider gar nicht gut funktioniert.

+ Informationen zur Sicherheit
+ Zusammenfassung der gewählten Daten
+ Wieder gute Orientierung durch Fortschrittsbalken

- Keine Merkfunktion
- Keine optimierte Druckansicht

Gibt es wirklich keine Merkfunktion?

Weil's mich interessiert, schaue ich noch einmal in die anderen Rubriken und werde fündig: Es gibt Ihre Favoriten und per Tooltip erhalte ich eine Erklärung, wie das alles funktioniert. Diese Funktion ist vermutlich für umfangreichere Buchungen wie bei Pauschalreisen interessanter als bei der Buchung eines reinen Fluges. Vielleicht wird diese Funktion ja auch noch in die Flugsuche integriert.

Fazit:

Dem User werden viele verschiedene Möglichkeiten geboten, um sein Ziel mit wenigen Klicks zu erreichen. Einmal gelernt, fällt die Orientierung auf der Seite sehr leicht, da gleiche Funktionen und Inhalte auch durchgängig an den gleichen Stellen platziert werden. Das Design ist konsequent umgesetzt und vermittelt neben dem positiven Urlaubsgefühl auch Seriosität und Vertrauen. Die Nutzerführung ist sehr komfortabel und entspricht den aktuellen Gewohnheiten. Einzige Ausnahme: Mir fehlt die Möglichkeit, mir mein Suchergebnis zu merken oder es weiterzuempfehlen. Insgesamt gefällt mir der Suchprozess auf tui.com allerdings wirklich gut.

Weiterführende Informationen

Die Website von //SEIBERT/MEDIA-Design
Verbindungssuche: Mit der Bahn von Frankfurt nach London
Verbindungssuche: Mit dem Flugzeug von Frankfurt nach Istanbul (Condor)
Verbindungssuche: Mit dem Mietwagen von Wiesbaden nach Amsterdam (Sixt)
Web-Design-Trends: Mit intuitiver Navigation und informativen Mouseover-Effekten schnell ans Ziel
Das Wo und Wann der User-Erwartungen
Der Bestellvorgang: Was häufig schiefgeht und was User frustriert

Mehr über die Creative-Commons-Lizenz erfahren