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: Istanbul
• Zeitraum: 22. 04. - 25. 04. 2011 (Osterwochenende)
• Transportmittel: Flugzeug
• Anbieter: Condor
• Testende Person und Autorin: Marion Fiedler

Startseite

Da ich lange Auto- und Zugfahrten hasse, habe ich mich für eine Reise per Flugzeug entschieden und den Anbieter Condor gewählt. Ich gehe also auf die Startseite condor.de. Sofort fällt mir die Flugsuche in der linken Spalte auf. Ich habe schon oft im Internet Reisen gebucht und kenne diese Art der Positionierung von etlichen Anbietern. Aber bevor ich meine Eingaben starte, werfe ich noch einen Blick auf die Flugangebote, die sich direkt daneben in einer Teaserbox befinden.

Bei der Eingabe der Start- und Zielorte öffnet sich ein Flyout-Menü mit allen verfügbaren Flughäfen. Frankfurt als Startflughafen ist dabei.

Nun das Reiseziel wählen. Über Ostern zum Städtetrip nach Istanbul. Hervorragender Plan, wohl auch wettertechnisch! Also mal schnell die wichtigsten Daten im Formular eingegeben (Reiseziel, Datum, Anzahl der Passagiere) und – schwupps – habe ich nach zwei Sekunden eine Auflistung aller verfügbaren Hin- und Rückflüge.

+ Insgesamt ein stimmiges und ansprechendes Designkonzept auf der Startseite

+ Klarer, klassischer Aufbau und Übersichtlichkeit

+ Die hellblaue Farbhinterlegung grenzt das Formular von den übrigen Seiteninhalten gut ab. Die Platzierung links oben entspricht der Leserichtung und lenkt den Blick des Users direkt zu Beginn dort hin.

+ Der Einsatz von Flyout-Menüs bei der Auswahl von Ort und Datum erleichtert die Eingaben.

- Eine Erläuterung zu den einzelnen Flugklassen im Formular wäre hier hilfreich (evtl. Verlinkung).

- Buttons und Links besitzen keinen Hover-Effekt.

Buchungsschritt 1: Suchergebnisliste und Auswahl von Hin- und Rückflug

Ich erhalte eine Auflistung aller verfügbaren Flüge für Hin- und Rückflug (Wunschtermin +/- vier Tage). Das Wunschdatum ist jeweils gelb hervorgehoben und standardmäßig schon ausgewählt. Den beiden Listen kann ich sowohl die genauen Flugzeiten als auch die Flugnummer und den Preis entnehmen. Auch die verfügbare Platzanzahl steht mit dabei. Das finde ich sehr praktisch, da die genaue Teilnehmerzahl noch nicht feststeht und so zumindest abschätzbar ist, ob das Angebot überhaupt in Frage kommt.

Oberhalb der Listen befindet sich die Suchmaske mit den eingegebenen Daten, die ich hier problemlos bearbeiten kann. Die Ergebnisliste aktualisiert sich aber erst nach Drücken des Finden-Buttons.

Unterhalb der Hauptnavigation befindet sich übrigens ein Fortschrittsbalken, der anzeigt, in welchem Schritt der Buchung ich mich befinde und welche noch vor mir liegen. Alles im Condor-Illustrationsstil gehalten. Schöne Sache!

In der rechten Marginalspalte habe ich eine Übersicht über meine Flugdaten, die sich automatisch aktualisiert, sobald ich die Auswahl in der Ergebnisliste ändere. Ich habe hier einen genauen Überblick über Datum, Zeiten, gewählte Optionen und Kosten pro Passagier, aufgesplittet nach Flugpreis, Steuern, Treibstoffzuschlag, etc. Gefällt mir! Über einen Link in der Flugdatenbox gelange ich direkt zu den Flugdetails, die sich wiederum in einem Popup-Fenster öffnen. Hier kann ich mir per Klick auf den Link darunter auch den Gesamtpreis für alle Teilnehmer anzeigen lassen.

Diese Übersicht würde ich gerne meinen Mitreisenden zeigen. Da es keine offensichtliche Möglichkeit gibt, das Angebot per E-Mail zu verschicken, möchte ich die Gesamtkostenauflistung im Popup-Fenster gerne ausdrucken. Einen Drucken-Button finde ich hier leider nicht, deshalb benutze ich die Druckfunktion des Browsers.

Das Ergebnis ist ausreichend, ich sehe aber noch Optimierungsmöglichkeiten. Die Flugdaten aus der rechten Spalte, in der die aufgesplitteten Kosten für eine Einzelperson aufgeführt sind, kann ich leider nicht so ohne weiteres ausdrucken, weil die Spalte abgeschnitten wird. Lediglich die Ergebnisliste ist auf dem Ausdruck zu sehen.

In der rechten Marginalspalte sehe ich mir die Hilfe-Box „Was bedeutet ...?“ genauer an. Hier finde ich sowohl eine Legende zu diversen Icons als auch weiterführende Links, die die Flugklassen erklären. Durch Anklicken des jeweiligen Links öffnet sich ein Popup-Fenster mit einer genauen Erläuterung, die man außerdem per Klick auf den Drucken-Button einfach ausdrucken kann. Die Druckfunktion halte ich an dieser Stelle für weniger notwendig als bei der Kostenauflistung zuvor.

+ Das Designkonzept wird auch auf der Unterseite konsequent durchgezogen.

+ Die Ergebnisliste ist übersichtlich aufbereitet, gelbe Hervorhebungen machen wichtige Details kenntlich.

- Die Möglichkeit, die Kostenauflistung pro Person auszudrucken und Angebote online zu verschicken, wäre wünschenswert.

- Auch hier wurden bei Buttons und Links keine Hover-Effekte eingesetzt.

Buchungsschritt 2: Eingabe der Teilnehmer und Login

Da es im nächsten Schritt schon um die genaue Festlegung der Teilnehmer geht und diese noch nicht feststehen, breche ich den Buchungsvorgang hier ab. Die Möglichkeit, meine bisherigen Daten und meine Auswahl zu speichern, habe ich leider nicht.

Fazit

Design

• Condor legt Wert auf ein individuelles Webdesign, das auch auf den Unterseiten bis ins Detail konsistent ist.
• Elemente aus dem Unternehmensauftritt (Farbwelt, Typografie, sekundäre Gestaltungselemente wie z.B. Strichlinien, Bildsprache) lassen das Webdesign individuell und nicht wie ein vorgefertigtes 08/15-Template wirken.
• Liebe zum Detail beweist der Einsatz des Illustrationsstils in Teaserboxen, Icons, Infografiken etc.
• Die Seite hat 2009 einen Red dot Design Award erhalten.

Nutzerfreundlichkeit

• Das, was ich suche, finde ich direkt auf der Startseite (Suchformular für Flüge).
• Die Seite wirkt nicht überladen, sondern gut strukturiert und übersichtlich. Das vierspaltige Raster wird flexibel genutzt. Der Content geht mal über zwei, mal über drei Spalten. Oft kommen in der rechten Marginalspalte wechselnde Teaserboxen und Crosslinks zum Einsatz.
• Die Seite ist mit horizontaler Navigationsleiste ansonsten recht klassisch aufgebaut. Die dauerhaft sichtbare Unternavigation verschafft dem User eine gute Orientierung.
• Eingabehilfen wie die Flyouts im Suchformular unterstützen die Nutzerfreundlichkeit, machen die Dateneingabe komfortabel und reduzieren die Fehlerquote.

Insgesamt ...
... macht die Seite auf mich einen seriösen und ansprechenden Eindruck. Das Web- und Interface-Design wirkt zeitgemäß und nutzerorientiert. Ich habe mich bei der Flugrecherche gut zurechtgefunden und bin zu einem zufriedenstellenden Ergebnis gekommen. Von ein paar kleinen, "nebensächlichen" Funktionen abgesehen habe ich nichts vermisst.

Meine Vorschläge zur Optimierung
Optimierte Druckansichten, Funktionen zum Weiterleiten der Angebote (Share-Option) und zur Datenspeicherung (Merkliste) wären wünschenswert. Der Einsatz von Hover-Effekten in der Navigation, bei Buttons und Links würde die Benutzerfreundlichkeit verbessern und die Anwendung intuitiver und zeitgemäßer machen.

Weiterführende Informationen

Test Verbindungssuche: Mit der Bahn von Frankfurt nach London
Test Verbindungssuche: Mit dem Mietwagen von Wiesbaden nach Amsterdam (Sixt)
Test Verbindungssuche: Mit dem Flugzeug von Frankfurt nach Barcelona (TUI)
Die Website von //SEIBERT/MEDIA-Design
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