Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Interaktiv ans Ziel

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Interaktiv ans Ziel

Im ÖPNV gibt es seit einiger Zeit nun auch vermehrt Netzspinnen als scheinbare digitale Alleskönner. Wie viel sie wirklich zu leisten im Stande sind, inwieweit sie auf den Benutzer eingehen und wie sie letztlich technisch umgesetzt werden, hat sich Stephan Zavodny einmal näher angeschaut.

Eine Netzspinne, auch Liniennetzplan genannt, beschreibt den Linienverlauf des öffentlichen Verkehrs. Speziell im öffentlichen Personennahverkehr (ÖPNV) sehen wir sie häufig in Form von schematischen Bus- oder S- und U-Bahnplänen. Neben den unterschiedlich farbigen Linien sind dort alle Haltestellen, Knotenpunkte sowie mögliche Angaben zu Tarifzonen oder der Barrierefreiheit von Bahnhöfen abgebildet, wie man dies anhand der Berliner Netzspinne (PDF) gut sehen kann.

Screenshot der Berliner Netzspinne

Von den sowieso schon vorhandenen Druckdaten der Liniennetzpläne ein PDF zu schreiben, um es dann auf die eigene Webseite zu stellen, bedeutet weder einen großen Mehraufwand noch verursacht es hohe zusätzliche Kosten. Deshalb ist es auch nicht verwunderlich, dass der Großteil der Verkehrsbetriebe diesen Service zur Verfügung stellt. Allerdings hat das Internet durch immer höhere Rechnerleistungen, potentere Browser und neue, verbesserte Technologien weitaus mehr zu bieten als downloadbare PDFs. Und hier kommen die interaktiven Netzspinnen ins Spiel.

Der Stand der Dinge

Laut der ARD/ZDF-Onlinestudie 2009 informieren sich von Jahr zu Jahr immer mehr Leute im Internet über den Verkehr. Jene Serviceinformationen landen dort gleich hinter den aktuellen Nachrichten auf dem zweiten Platz der häufig bzw. gelegentlich genutzten Onlineinhalte. Demzufolge findet man mittlerweile vermehrt interaktive Liniennetzpläne auf den Webseiten der Verkehrsbetriebe größerer Städte – wenn auch manchmal ein bisschen versteckt. Die Vorteile liegen dabei klar auf der Hand: sie erlauben es endlich all die Informationen in einer Applikation zu bündeln, die normalerweise über einzelne Druckerzeugnisse verstreut werden. Wie gut oder schlecht das in der Praxis funktioniert, hängt in erster Linie von der Einbindung und Verzahnung der Funktionen ab, auf die wir einen näheren Blick werfen sollten.

Grundfunktionen

Jede interaktive Netzspinne besitzt in der Regel eine Hilfe, in der erklärt wird, wie die Bedienung funktioniert. Bei größeren Plänen mit vielen Linien und Haltestellen hat man zudem die Möglichkeit die Ansicht zu verändern, um der Fülle an Informationen Herr zu werden. Dies geschieht zum einen über eine optionale Zoom-Möglichkeit und/oder via Ausschnittsverschiebung mit gedrückter Maustaste. Darüber hinaus hat der Nutzer standardmäßig die Option diese Informationen auszudrucken. Sei es direkt oder über den Umweg eines generierten PDFs. Die interaktive Umsetzung der Pariser Netzspinne sowie der aus Seoul demonstriert all jene Funktionen sehr gut.

Suchfunktion & Mehrsprachigkeit

Beim Besuch einer fremden Stadt ermöglicht die integrierte Suche das schnelle Auffinden von Haltestellen und Linien ohne lokale oder geografische Vorkenntnisse. Außerdem erleichtert eine englische Oberfläche zusätzlich zur Landessprache den Zugang für Touristen. Etwaige Sprachbarrieren werden so minimiert, insbesondere in Ländern, in denen üblicherweise asiatische und kyrillische Schriftzeichen benutzt werden. Ein gutes Beispiel hierfür ist die interaktive Netzspinne der Shanghai Metro. Wie man es nicht machen sollte, zeigt dagegen die Wiener Version. Sie hat weder eine Suchmöglichkeit noch eine Sprachauswahl zu bieten.

Haltestellen & Linien

Hat der Nutzer die Haltestelle gefunden, an der er zu-, um- oder aussteigen möchte, kann er sich bei einem Klick darauf optional mehrere Informationen einholen. Für die meisten dürften hierbei die Abfahrtzeiten am interessantesten sein. Äußerst praktisch sind überdies Haltestellenumgebungspläne, auch Standortpläne genannt. Sie zeigen detailliert das Umfeld einer Station. Oft erhält man ebenso zusätzliche Hinweise zur Barrierefreiheit sowie Statusmeldungen zu (defekten) Aufzügen oder Rolltreppen. Komplettiert wird das Ganze schließlich durch die Linieninformationen. Eine Übersicht nennt alle haltenden Linien an einer Station. Dieser Umfang wird sehr schön anhand der interaktiven Netzspinne Berlins dargestellt. Im besten Fall gibt es ergänzend eine Perlschnur je Linie. Dort werden alle Linienhaltestellen vom Start- bis zum Zielpunkt aufgeführt, wie Perlen einer Perlenkette. Die Taktung und Umsteigemöglichkeiten sind an dieser Stelle meistens inbegriffen.

Routing

Wenn Fachleute im ÖPNV vom Routing sprechen, dann meinen sie damit die Wahl einer Strecke von Standort A nach Zielort B. Unterschieden wird dabei zwischen zwei Methoden. Einerseits gibt es die schnellste Verbindung, bei der der Fahrgast zwar unter Umständen häufiger umsteigen muss und einen längeren Weg zurücklegt, aber dennoch schneller am Ziel ist als andererseits mit der einfachsten Route. Nach dem Motto »Zeit ist Geld« wird in der Praxis jedoch meistens der schnellste Weg angezeigt. Oftmals erhalten die Reisenden neben der Fahrdauer sogar auch die Information über die zurückgelegte Fahrdistanz. Seltener dagegen wird gleich der Kostenpunkt für die einfache Fahrt mit angegeben. Um das Routing letztlich zu bestimmen, klickt man entweder klassischerweise zwei Haltestellen nacheinander an (Start → Ziel) bzw. wählt im Kontextmenü der Haltestellen den Start- und Zielort aus oder verbindet die Stationen mit gedrückter Maustaste. Beijing und Moskau veranschaulichen das auf ihren interaktiven Netzspinnen in simpler Art und Weise. Auf dem Liniennetzplan von Los Angeles gibt es diese Option leider gar nicht.

Darf’s auch ein bisschen mehr sein?

Über die oben genannten Funktionen hinaus ließe sich natürlich noch weitaus mehr realisieren. So könnte man z.B. für Touristen Sehenswürdigkeiten oder kulturelle Angebote wie Museen, Theater, usw. mit in die interaktive Netzspinne integrieren. Daraus würde dann schnell ersichtlich, welche Haltestelle anvisiert werden müsste. Denkbar wäre zudem ein Tag- und Nachtmodus. Da in der Nacht häufig andere Linien als am Tage verkehren und es damit verbunden eine andere Taktung gibt, würde der Liniennetzplan gewiss übersichtlicher. Ein weiteres Feature wäre ein RSS-Feed, der über Störungen und Wartungsarbeiten im gesamten Liniennetz informiert. Und wenn wir schon über Kommunikationsdesign sprechen, wie wäre es dann mit der Option E-Mails mit Haltestelleninformationen oder kompletten Routen zu verschicken? Ebenso vermisst man das Feature, benutzerspezifische Daten abzuspeichern. Der Nutzer hat derzeit weder die Möglichkeit bestimmte Routen zu sichern noch werden auf ihn abgestimmte Informationen via Cookies gespeichert, um beim nächsten Aufruf der Seite wiederhergestellt zu werden. Lange Rede kurzer Sinn, beim Ausbau der interaktiven Netzspinnen gibt es noch viel Luft nach oben, um das Ganze weitaus besucherfreundlicher zu gestalten.

Die Benutzeroberfläche

Eines haben alle interaktiven Netzspinnen gemein: sie bilden den Linienverlauf ab. Das geschieht in der Regel in schematischer Form, wo alle Linien waagerecht, senkrecht oder diagonal im 45°-Winkel verlaufen. Diese Art der Darstellung ist zwar topografisch nicht genau, sie schafft aber eine bessere Übersicht und spart zugleich Platz. Die Linien sind alle farbkodiert, damit der Betrachter sie besser differenzieren kann. Umsteigemöglichkeiten werden kreisförmig darauf dargestellt. Piktogramme kommen ebenfalls zum Einsatz, weil sie vom Auge schneller zu erfassen sind als Text. Prinzipiell besitzen natürlich die Netzspinnen einen Vorteil, deren Liniennetz aus nur einigen wenigen Elementen besteht. Je mehr davon vorhanden sind, desto unübersichtlicher kann das Ergebnis aussehen. Deshalb stehen Begriffe wie Klarheit und Einfachheit ganz hoch im Kurs, wenn es um das Interfacedesign geht.

Bei der Bedienbarkeit der einzelnen Netzspinnen trennt sich dann schnell die Spreu vom Weizen. Hover- und Focus-Styles gibt es in den seltensten Fällen, teilweise verändert sich nicht einmal der Mauszeiger, was das Klicken zu einem Glücksspiel werden lässt. Dazu gesellt sich vielfach die schlechte Eigenart, dass der Besucher die Seite mit der interaktiven Netzspinne verlässt, sobald er auf eine Haltestelle oder Linie geklickt hat. Der Grund ist folgender: Viele Verkehrsunternehmen haben derzeit nur einen stark begrenzten Funktionsumfang anzubieten. Dies hat zur Folge, dass Informationen nach wie vor nur über statische Seiten oder hinterlegte PDFs verlinkt werden. Möchte der Benutzer daraufhin wieder zurück zur Netzspinne, um z.B. seine Planung fortzusetzen, ist die Ansicht oftmals in den Ausgangszustand zurückgesetzt worden und er darf von vorn beginnen.

Ein ähnliches Dilemma spielt sich bei der Zugänglichkeit ab. Eine simple Steuerung via Tastatur ist in fast allen Fällen quasi unmöglich. Screenreader versagen sogar vollends. Wenn schon im öffentlichen Raum bei den Bussen und Bahnen sowie den Bahnhöfen selbst ausdrücklich auf Barrierefreiheit geachtet wird, wieso schafft man das dann nicht genauso im Internet? Sicher ist es bei einer komplexen Netzspinne nicht ganz einfach, alle Barrieren abzubauen. Grundsätzlich besteht allerdings die Möglichkeit z.B. Flash-Anwendungen zugänglicher zu gestalten. Ob bzw. inwieweit aber diese doch zugegebenermaßen knifflige Aufgabe überhaupt durchführbar ist, müsste insgesamt einmal untersucht werden.

Unter die Haube geschaut

Die meisten interaktiven Netzspinnen setzen auf die proprietäre Software Flash. Nur wenige Ausnahmen benutzen ein anderes Format. Die Toronto Transit Commission z.B. macht auf Ihrer Webseite Gebrauch von JavaServer Pages (JSP). Der interaktive Liniennetzplan der New Yorker City U-Bahn hingegen setzt voraus, dass im Browser Java aktiviert und das Plugin installiert ist. Alternativ dazu gibt es eine interaktive Karte, die auf Google Maps basiert. Ebenfalls »powered by Google« ist der Plan der Washington Metro, die hierfür obendrein auf die Entwicklungssoftware ColdFusion bauen. Sehr einfach um nicht zu sagen zu einfach macht es sich die Stadt Montréal. Dort wird lediglich ein Bild der Netzspinne in den Hintergrund gelegt, um dann im Vordergrund mit einer Imagemap für die Haltestellen zu arbeiten. Unter Interaktion verstehen die meisten höchstwahrscheinlich etwas anderes.

Erstaunlich ist außerdem, dass es keine interaktive Netzspinne zu geben scheint, die rein auf JavaScript-Basis funktioniert. Wenn man sieht, was heute alles mit den JS-Frameworks jQuery oder Mootools – um mal zwei der Bekanntesten zu nennen – zu bewerkstelligen ist, dann stellt sich die Frage, warum bei den leistungsstarken JavaScript-Engines der Browser bisher keiner auf die Idee gekommen ist. Einer der größten Vorteile wäre zweifelsohne der, dass dadurch komplett auf Plugins von Drittanbietern verzichtet werden könnte.

Werfen wir nun einen Blick in den HTML-Quellcode der oben genannten Webseiten, so bleibt leider festzustellen, dass keine von ihnen validiert. Negativbeispiel ist die interaktive Netzspinne Berlins, die mit 2264 Fehlern und 2250 Warnungen den Vogel abschießt. Hinzu kommt, dass viele der Webseiten noch nicht einmal eine Doctype-Angabe besitzen. Ferner sollte darauf hingewiesen werden, dass der HTML-Anteil geschwindend gering ausfällt im Gegensatz zu den sonstigen Standard-Webseiten. In den meisten Fällen ist das HTML-Gerüst nämlich nur dazu da, um die interaktive Netzspinne einzubetten. Bedauerlicherweise wird für die Positionierung dort dann auch noch sehr häufig auf Layout-Tabellen zurückgegriffen, u.a. zu sehen beim Wiener Liniennetzplan, dessen Doctype dem Ganzen obendrein die Krone aufsetzt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Man weiß nicht, ob man weinen oder lachen soll.

Fairerweise sollte an dieser Stelle aber darauf hingewiesen werden, dass es sich bei dieser Version nicht um den »offiziellen« interaktiven Liniennetzplan Wiens handelt. Der führende Mobilitätsanbieter für den ÖPNV – Wiener Linien – besitzt zu diesem Zeitpunkt keine interaktive Version.

Ursprünglich hatte ich mir hier und jetzt vorgenommen positive Beispiele zu nennen, ich möchte ja nicht immer nur kritisieren. Doch meine Recherchen blieben leider ohne Erfolg. Keiner der Kandidaten vermochte z.B. durch semantischen Code o.ä. richtig zu überzeugen.

Fazit – oder: Da geht noch was!

Es bleibt festzuhalten, dass es immense Unterschiede gibt: Angefangen beim Funktionsumfang, über das Interfacedesign und die Qualität der Umsetzung bis hin zur Technologie, die zum Einsatz kommt. Das beste Komplettpaket besitzt sicherlich die Hauptstadt Frankreichs, wenn auch bei der Zugänglichkeit kräftig nachgebessert werden muss. Optimierungsbedarf besteht aber grundsätzlich bei allen interaktiven Netzspinnen, sei es in Bezug auf die Barrierefreiheit, die Bedienbarkeit oder bei der Gestaltung des Interfaces. Hier sind nicht nur gute Webdesigner, Webentwickler, Usability- und Accessibility-Experten gefragt, die ihr Handwerk verstehen. Ein großer Teil der Verantwortung liegt genauso bei den zuständigen Verkehrsunternehmen, die als Auftraggeber auf die gleiche Art und Weise in die Pflicht genommen werden müssen. Die Erfahrung zeigt, dass die dortigen Entscheider leider nur zu selten wissen, wie die Grundanforderungen an eine interaktive Netzspinne auszusehen haben und was überhaupt alles realisierbar ist. Schlussendlich liegt es somit an uns, Aufklärungsarbeit in beide Richtungen zu leisten.

Kommentare

David Maciejewski

David Maciejewski (Webkraut)
am 08.09.2009 - 09:10

Toller Artikel! Danke!

Permanenter Link

Markus
am 08.09.2009 - 14:55

Hervorragender Artikel. Sollte Pflichtlektüre für alle Anbieter von Informationen zum ÖPNV sein.

Permanenter Link

Stefan
am 08.09.2009 - 21:02

Ich habe gerade die area-Daten der interaktiven BVG-Map ausgelesen, auf eine größere Karte skaliert und das ganze in HTML gegossen: saubere HTML-Netzspinne Pre-Alpha. Bisher nur U-Bahn-Linien.

Falls jemand weitermachen will, bitte sehr, das HTML steht unter CC, das Bild ist natürlich (c) BVG.

Permanenter Link

Die Kommentare sind geschlossen.