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: London
• Transportmittel: Deutsche Bahn
• Testende Person und Autorin: Karolin Kutter

Die Startseite – erster Eindruck: ziemlich voll

Mein erster Eindruck? Durch Logo und die Farbgebung erkenne ich das Erscheinungsbild der Bahn. (Hier bin ich richtig!) Ansonsten finde ich die Startseite wegen der vielen dicht platzierten Elemente etwas unübersichtlich. Durch die Aufteilung der Inhalte in einzelne Boxen, die wiederum Boxen und auch noch Bildkästen beinhalten, bilden sich viele horizontale und vertikale Achsen, die das Auge erst einmal verarbeiten muss. Unruhe stiften zudem viele unterschiedliche Schmuckelemente. So enthält die Seite Überlagerungen mit und ohne Schlagschatten, Verläufe, Rahmen, Muster, Transparenzen sowie verschiedene Pfeil- und Bild-Icons. Hier hätte man sich auf weniger Elemente beschränken und damit besser Schwerpunkte schaffen können.

Aber mir geht es ja  jetzt in erster Linie darum, eine passende Zugverbindung nach London zu recherchieren. Deshalb ist prima, dass ich die Verbindungssuche schnell finde, liegen die Eingabefelder doch links oben direkt unterhalb der aufmerksamkeitsstärksten Elemente: dem Logo, der auffällig roten Navigationsleiste und den großen blauen Icons. Auch der Suchen-Button des Formulars sticht durch die von der Umgebung abweichende Farbigkeit (Orange) ins Auge. Alternativ entdecke ich auch noch den Punkt "Fahrplan & Buchung" in der auffälligen Navigationsleiste. (Super, jetzt kann's losgehen.)

+ Corporate Design wiedererkannt, Platzierung der Suchmaske

- Etwas unübersichtlich durch zu viele verschiedene Elemente

Schnellsuche auf der Startseite

Gut, die Auswahl in der Schnellsuche steht bereits auf "Bahn", das erkenne ich an dem auffälligen blauen Zug-Icon. (Erinnert an das Bahnhof-Leitsystem). Die Standardauswahl "Einfache Fahrt" ändere ich in "Hin- und Rückfahrt" und gebe meinen Startbahnhof ein (super, nach den ersten eingegebenen Buchstaben klappt auch schon ein Auswahlfeld mit möglichen Zielen auf und Frankfurt als große Stadt steht hier ganz oben) und mein Ziel. (Juhu, London ist dabei!)

Dann die Auswahl von Datum (prima, es gibt eine Kalenderfunktion, leider ohne Hervorhebung der Feiertage, aber ich weiß bereits, wann Ostern ist) und Uhrzeit (ich wähle 7:00 Uhr morgens, ist zwar früh, aber ich will ja keine Zeit verlieren).

Natürlich bevorzuge ich schnelle Verbindungen, dies ist auch vorausgewählt. (Will schließlich jeder.) "1 Erwachsener" und keine Kinder, auch schon vorausgewählt. Schnell noch die "Bahncard" und "2. Klasse" markiert und schon bin ich fertig, klicke aber nicht auf "Suchen", sondern verwende den Link "Weitere Suchoptionen" links daneben.

+ Instant Search, Angebot einer Detailsuche

Erweiterte Suche

Es lädt sich eine neue Seite mit einem umfangreicheren Formular. Hier stören weder Bilder noch auffällige Teaser, ich kann mich also voll und ganz auf die Eingabe konzentrieren. Einzelne Eingabegruppen sind im Formular durch weiße Linien voneinander abgetrennt. Das Formular erscheint mir dadurch recht übersichtlich. Ich habe die Möglichkeit, Zwischenhalte für Hin- und Rückfahrt (brauche ich aber nicht) und dann auch Datum und Zeit für die Rückfahrt anzugeben (wähle als Ankunftszeit 22:00 Uhr).

Im zweiten Eingabeblock besteht die Möglichkeit, Verkehrsmittelgruppen auszuwählen. Klickt man auf den Link "Erweiterte Verkehrsmittelwahl" rechts daneben, kann man sogar einzelne Verkehrsmittel an- oder ausklicken. Ich belasse es allerdings bei der Voreinstellung "alle".

Im nächsten Dropdown ist dann eine individuelle Umsteigzeit definierbar. Ich bin optimistisch und entscheide mich für "15 min".

Im letzten Abschnitt des Formulars "Reisende" ist meine Eingabe von der Startseiten-Eingabemaske übernommen worden und ich brauche keine Änderung mehr vorzunehmen. Den Suchen-Button erkenne ich dank der gleichen Farbgebung wie auf der Startseite schnell wieder, allerdings steht er doch sehr weit rechts von den Eingabefeldern, bei verkleinertem Browserfenster verschwindet er sogar ganz und muss herbeigescrollt werden. Fast hätte ich deshalb auf den Button "Eingabe löschen" geklickt, der direkt unterhalb des Formulars platziert ist. Ich drücke dann aber doch "Suchen".

+ Schlichte Gestaltung, dynamische Texte

- Button-Platzierung

Suchergebnisliste

21, 22 – huch, das ist schon das Ergebnis, das ging ja schnell! Allerdings erscheinen die Ergebnisse ausgegraut - aber wieso? (Hat es noch nicht richtig geladen, muss ich noch warten?) Moment, ich sehe rote Schrift: "Fehlermeldung". (Dank der Farbe gleich als solche erkannt.) Aha, ich muss also zur Bahncard noch mein Alter eingeben.

So, jetzt scheint alles in Ordnung zu sein. Der Fortschrittsbalken ganz oben zeigt mir, dass ich mich in Schritt 2 des Buchungsprozesses befinde und dass bis zur Buchung noch vier Schritte folgen. Darunter kann ich meine Reisedaten nochmals ändern und anschließend direkt die Suchergebnisliste aktualisieren. (Brauch ich aber nicht, ist alles korrekt.)

Unten auf der Ergebnisseite finde ich nun die Tabelle mit den Hinfahrtmöglichkeiten. Diese lassen sich unterschiedlich sortieren: nach Abfahrt, Ankunft, Dauer, Umsteigen und Preis. (Finde ich super!) Ich belasse es erst einmal bei der Grundeinstellung "nach Abfahrt" und lasse mir jetzt noch über den Link "Früher" oberhalb der Zeit-Spalte die eher am Tag abfahrenden Züge anzeigen.

Ich würde allerdings gerne wissen, wann und wo ich umsteigen muss. Am Ende der Tabelle entdecke ich den Button "Details für alle anzeigen" mit einem Pfeil davor. Der gleiche Pfeil befindet sich auch am Anfang jeder Zeile der Tabelle. Ich klicke also testweise auf den Pfeil vor meiner Verbindung und es passiert genau, was ich erwartet habe: Das Feld klappt aus und die Verbindung wird samt Umsteigebahnhof und Zuginfos angezeigt. (Prima!)

+ Auffällige Fehlermeldung, Fortschrittsbalken, Sortierfunktion in Ergebnisliste, konsistente Gestaltung der klickbaren Elemente

Detailinformationen

Die Detailinformationen besagen, dass ich in Paris 55 Minuten "Übergang" habe. Aber was bedeutet das? Da ich keine Hinweise innerhalb der Detailinformationen finde, klicke ich auf "Hilfe", die ich irgendwo oben auf der Seite erwarte und dort auch finde. (Ist ja eine übliche Platzierung in der Metanavigation.) Es öffnet sich ein neues Tab. (So komme ich auf jeden Fall schnell zurück.) Ins Suchfeld im Hilfebereich gebe ich "Übergang" ein, bekomme aber leider kein Ergebnis geliefert, versuche es nochmals in den FAQ, leider wieder ohne Erfolg. (Doof!)

Naja, ich werde dann beim Schaffner nachfragen müssen, was "Übergang" bedeutet, wird schon irgendwie klappen. (Hoffe nur, ich muss nicht 55 Minuten "weit" irgendwohin laufen, meinen Koffer möchte ich nicht so lange schleppen.)

Aber zurück zu meinen Detailinfos in der Ergebnisliste. Rechts unter den Details zur Fahrt finde ich noch drei Links: "Merken", "In Kalender eintragen" und "Druckansicht". (Sehr gut. So etwas kann ich gebrauchen).

Ich beginne mit Merken: "Verbindung wurde erfolgreich gemerkt. Sie können Ihre gemerkten Verbindungen auf 'Meine Bahn' einsehen. Sie können sich bis zu 4 Verbindungen merken. Das Merken Ihrer Daten erfolgt auf diesem Rechner in Cookies." Aha, eigentlich hätte ich mir lieber die Verbindung per E-Mail schicken lassen, aber okay, so kann ich die Seite später noch einmal aufrufen.

Jetzt teste ich, was es mit Kalender auf sich hat: Sieh an, ich kann die Verbindung direkt in meinen Outlook-Kalender eintragen und mir dafür eine Datei runterladen, die sich beim Öffnen in meinen Kalender überträgt. (Super Feature, aber leider verwende ich keinen Outlook-Kalender.)

Ich denke, ich drucke mir den Fahrplan jetzt einfach erstmal aus ... Moment, ich habe die Rückfahrt doch noch gar nicht ausgewählt! Also schließen und zurück zur Verbindungsliste. Ich klicke hier "Rückfahrt hinzufügen" hinter der von mir gewählten Verbindung. (Eigentlich kann man den Button nicht übersehen, habe es wegen der ganzen Übergang-Problematik dann aber doch geschafft.) Ich entscheide mich für eine Rückfahrt, bei der ich um 23:00 Uhr in Frankfurt ankomme. In Paris hab ich wieder einen "Übergang". (Hmpf.)

+ Umfangreiche Detailinformation, praktische Zusatzfeatures

- Unverständliches Wording (Könnte per Tipp-Box gelöst werden)

Druckansicht und Kartenansicht

Jetzt gehe ich zur Druckansicht. Diese lässt sich über verschiedene Radiobuttons meinen Wünschen entsprechend individualisieren. (Toll!) Bei Preis lasse ich "Ja" vorausgewählt und erwarte, die Preisinformation irgendwo lesen zu können. Allerdings steht da nur "Besonderer Fahrpreis". (Doof, dass ich jetzt nicht weiß, was mich der Spaß kostet!) Ich drucke die Verbindung trotzdem aus.

Das gedruckte Dokument könnte durch größere Überschriften und Abstände zwischen den einzelnen Bereichen etwas übersichtlicher gestaltet sein, aber es sind alle Infos drauf, die ich benötige (vom Preis abgesehen).

In der Detailansicht meiner Rückfahrtverbindung teste ich jetzt noch die beiden Links mit auffällig blauen Icons "Am Bahnhof" und "Karte anzeigen". Hinter dem ersten Link stecken Infos zum Bahnhof in Frankfurt (aber leider nicht zu London, wo ich mich weniger auskenne), der zweite Link liefert mir eine Karte der kompletten Strecke sowie der Umgebung von Start- und Zielbahnhof.

In der Karte kann man ganz einfach mit der Maus zoomen, indem man ein entsprechendes Feld des Ausschnitts zieht, den man sich genauer ansehen möchte. (Super!) So kann ich mir auch die Umgebung des Bahnhofs in Paris anschauen und stelle fest: "Übergang" bedeutet wohl tatsächlich, dass ich in Paris eine Strecke zu Fuß zurücklegen muss. Die Entfernung beträgt nach Augenmaß aber nur etwa 400 Meter. (Das sollte in 55 Minuten zu schaffen sein). Wegen der fehlenden Preisinformation bin ich allerdings noch nicht zufrieden.

+ Individualisierbare Druckansicht, Map-Funktion

- Struktur der Druckvorlage

London-Spezial

Ich gehe zurück zur Startseite und siehe da: Das Bild auf der Homepage hat sich verändert. Jetzt erscheinen dort drei Bilder im Wechsel, u.a. "Europa-Spezial". (War das zu Beginn auch schon da?)

Schnell finde ich das Angebot "London-Spezial" (genau das, was ich suche) und einen Preis: 49,- Euro pro Strecke, wenn ich über Brüssel fahre. Schade, dass mir so ein Angebot nicht automatisch angezeigt wird, wenn ich als Zielbahnhof "London" eingebe. Ich werde mir dann eben noch eine Strecke über Brüssel suchen. Aber später. Jetzt hab ich keine Lust mehr.

- Fehlende Verknüpfung von Suchmaske und Angeboten

Fazit

Eigentlich funktionieren die Suche und die Anzeige der passenden Ergebnisse sehr gut. Viele Zusatzfeatures sind nützlich und auch intuitiv verständlich. Da ich häufiger mit der Bahn fahre und das Buchungssystem recht oft nutze, kann ich sagen, dass sich in den letzten Jahren viel getan hat. An manchen Stellen fehlen noch erklärende Zusatzinformationen und ich hätte mir nach der Eingabe der Verbindung nach "London" einen Hinweis auf das London-Spezial gewünscht. Aber alles in allem bin ich mit der Nutzerführung angesichts des doch sehr komplexen Interfaces sehr zufrieden (was man von den neuen Bahnautomaten leider nicht behaupten kann).

Weiterführende Informationen

Test Verbindungssuche: Mit dem Flugzeug von Frankfurt nach Istanbul (Condor)
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