Design ist eine Kunst. Gutes Design umso mehr. Und über Geschmack lässt sich zudem meist treffend streiten. Doch Design bei Produkten oder bei visuellen Illustrationen erfüllt weitaus mehr Zwecke, als nur schön aus zu sehen. Man spricht hier von der Usability – die Benutzerfreundlichkeit bzw. die Bedienbarkeit eines Objektes. Das Design sollte dabei die Ergonomie dahingehend unterstützen, so dass die Funktionen (des Objektes) sich möglichst einfach, fehler- und interpretationsfrei bedienen lassen. Bei der Fahrinfo Berlin (BVG) hat man diese Usability gründlich gegen die Wand gefahren.
Das „Meisterwerk“ kann unter www.fahrinfo-berlin.de aufgerufen werden. Und hier die Liste der verbockten Usability:
- Aufbau: Der komplette Aufbau ist unnötig in die Länge gezogen. Die Ansicht der Eingangsseite (erster Aufruf des Formulars) passt nicht einmal ohne Scrollen auf den Bildschirm. Der Benutzer kann nicht auf einen Blick erkennen, was er für Angaben machen muss. Die Abstände zwischen den einzelnen Felder und die Freiflächen sind zu groß.
- Buttons I: Buttons haben bei der BVG-Fahrinfo meist die Farbe gelb. Beim Überfahren der Buttons verlieren sie allerdings ihre gelbe Farbe und werden weiß. Haben sie damit ihre Funktion verloren? Löst das Überfahren der Buttons bereits eine Aktion aus?
- Buttons II: Wie bereits erwähnt, sind die meisten Buttons gelb. Es gibt aber auch weiße Buttons; treffender weise auf weißem Hintergrund. Soll man diese Buttons bewusst übersehen? Wieso sind sie überhaupt weiß? Haben Sie eine gesonderte Funktion, oder gar keine? Beim Überfahren mit der Maus verändern sie auch nicht ihre Farbe so wie die gelben Kollegen.
- Buttons III: Die Reihenfolge der Buttons wechselt je nach Seite. Mal ist die „Neue Anfrage“ in der Mitte, ein anderes Mal steht sie ganz vorne in der Buttonleiste. Wer auf Webseiten sich „blind“ durchklickt und sich auf die vorherige Anordnung verlässt, löst damit unbewusst eine komplett andere Aktion aus.
- Hilfefunktion: Zu (fast) jedem Eingabefeld gibt es eine Hilfe. Diese öffnet einen Layer, der sich über den Inhalt „klebt“. Der Schließen-Link befindet sich allerdings unten am Layer-Fenster und nicht oben – an der Position, wo sich der Link zum Aufrufen/Öffnen der Hilfe befindet.
- Infozeilen: Fährt man mit der Maus in der Übersicht der Verbindungen über eine Auswahl oder über eine der Zwischenhalte, so färbt sich die Zeile gelb. Eine dahinter liegende Funktion gibt es aber nicht. Waren nicht auch die Buttons (=Aktion) gelb? Zur Hervorhebung der unterschiedlichen Zeilen hätte es auch eine einfache Umrandung getan.
- Unnötige Klicks: Möchte man weitere Informationen zu einer Verbindung, muss man zuerst ein Häckchen bei der entsprechenden Verbindung setzen und dann auf den Link „Details für Auswahl“ klicken. Das versteht kein normaler Benutzer, da der Zwischenschritt „erst markieren“ nicht logisch erscheint. Natürlich muss es eine Möglichkeit geben, die einzelnen Verbindungen zu selektieren. Doch hätte man diesen Schritt auch weitaus einfacher und vor allem eleganter lösen können.
- Links: Manche Informationen gehen in der Liste hingegen komplett unter, so z. B. die Links zu „frühere“ oder „spätere“ Verbindung(en). Diese sind im Vergleich zum Rest sehr klein und unauffällig geraten.
- Übersicht der Verbindungen: Wieso ist das Wort „Umst.“ unterstrichen und die anderen Worte nicht? Nur weil es zu der Abkürzung eine weitergehende Erklärung gibt? Sehr schwer verständlich. Und ob die Mouseover-Information überhaupt jemand mit der Abkürzung in Verbindung bringt?
- Suchfeld ‚Verbindung‘: Ganz blind geht der Suchalgorithmus vor sich. Wer bei der Eingabe einer Straße bspw. den Punkt nach „str“ weg lässt, wird von der Suche ein weiteres mal gequält, ob man wirklich auch „str.“ meinte. Und selbst wer sich an die exakte Bezeichung einer Station hält, wird mit sinnlosen Nachfragen aufgehalten. Wie wäre es, wenn man diesem Eingabefeld ein „fuzzy-logic“ spendiert? Die Suche nach Stationen oder Straßen wird „weicher“ ausgelegt. Der Algorithmus sucht nicht mehr nach der exakten Übereinstimmung sondern akzeptiert auch ähnliche Treffer. Und sollte der Suchalgorithmus dadurch mal eine falsche Station ausgewählt haben, so könnte man den Benutzer auf ähnliche Treffer aufmerksam machen. Im ersten Schritt würde die Fahrinfo allerdings mit der automatisch ausgewählten Station arbeiten.
Es ist erstaunlich, wie viel man auf so wenig Raum verbocken kann. Die grafische und inhaltliche Seite wurde durch die Firma exozet interact aus Berlin realisiert. Eine glückliche Referenz sieht anders aus. Bei dieser Website hat man sich bei exozet nicht mit Ruhm bekleckert. Es wird in der Referenzenliste viel von „besserer Integration in den Gesamtauftritt“ geschwafelt. Und immer wird betont, dass die Website barrierefrei sei. Wer sich die Seite allerdings mal in einem Screenreader angeschaut hat, wird selbst als mobiler Mensch seine größte Mühe haben. Entweder liegen die Eingabebereiche zu weit auseinander, so dass man „kilometerlang“ scrollen muss. Oder die Informationen kleben ohne Punkt und Komma hintereinander, so dass nicht zwischen den einzelnen Bereichen unterschieden werden kann. Für eine barrierefreie Seite wäre es auch hilfreich, wenn zuerst die wichtigen (und ausgewählten) Informationen erscheinen würden und dann zuletzt die weiterführenden Links zu den anderen Gebieten.
Das traurige an der Geschichte ist nur, dass diesen Usability-Quatsch der Berliner Steuerzahler finanziert hat. So kann exozet ruhigen Gewissens in einem Folgeprojekt das Usability-Update nachschieben – auf Kosten der Allgemeinheit versteht sich.