eTarif-Preisrechner als Single-Page-Application (VUE)

In Zusammenarbeit mit der Kölner-Verkehrsbetriebe AG (KVB) testet der Verkehrsverbund Rhein-Sieg (VRS) seit April 2019 den elektronischen Tarif der Zukunft. Mithilfe einer "FTQ-Lab"-App (iOS/Android) wird die Fluglinie zwischen der Start- und Ziel-Haltestelle eines Reisenden ermittelt, was die anschließende Berechnung des zu zahlenden Ticketpreises ermöglicht. Die Intention ist, dem Kunden dadurch den zeitaufwendigen Ticketkauf, die Suche nach dem meist fehlenden Kleingeld sowie das Auseinandersetzen mit den verschiedenen Preisstufen zu ersparen. Die App ist ohne Vorbereitung direkt an der Haltestelle nutzbar.

Das ursprünglich bis zum 06.09.2019 angedachte Testprojekt wurde bis zum 30.06.2020 verlängert. Sowohl bestehenden als auch neuen Testern wird somit die Chance geboten, das Zukunftsmodell weiterhin ausgiebig zu prüfen. Zum Austausch der gesammelten Erfahrungen entwickelte die Faktor E GmbH bereits im Juni diesen Jahres ein VRS-Dialogforum. Die Verlängerung des Projekts brachte für die Agentur nun einen weiteren Auftrag mit sich, die Onepage-Website mit eTarif-Preisrechner. Mit dieser können Kunden den Preis der gewünschten Fahrt künftig vor Fahrtantritt komfortabel ermitteln oder in den Tarif hineinschnuppern ohne die App installieren zu müssen.

Entwicklung und Design

Umgesetzt wurde die Website als SPA (Single-Page-Application) mit dem modernen VUE JavaScript-Framework und einem responsiven HTML/CSS Template. Neben einem kurzen Erläuterungstext beinhaltet die Seite einen benutzerfreundlichen Preisrechner. Letzteres setzt sich aus den Haltestellen des VRS-Gebiets, einer Suchfunktionalität zur leichteren Auswahl der Haltestellen und einer zur Verfügung gestellten Formel, welche den Streckenpreis berechnet, zusammen. Um die Barrierefreiheit zu gewährleisten, wurden zusätzliche Bedienmöglichkeiten mit der Tastatur integriert.

Der gesamte Preisrechner lässt sich dank des VUE-Frameworks trotz der rund 6700 Haltestellen sehr performant bedienen und benötigt nach dem Laden keine weiteren Netzwerkaufrufe. Damit ist die App im Kern komplett offlinefähig, eine der vielen berücksichtigten Erweiterungsmöglichkeiten der Anwendung. Die Haltestellensuche nutzt eine auf dem JSON-Format basierende Schnittstelle, wodurch sie komplett CMS (Content-Management-System) unabhängig, sprich headless, ist.

Mit einer Anbindung an das Tracking-System Matomo kann der VRS durchgeführte Kundenaktionen, wie Berechnungen und künftig auch eingegebene Start-/Ziel-Haltestellen, auswerten und daraus Rückschlüsse auf Erfolg und populäre Verbindungen ziehen. DSGVO-konform wird Nutzern der Seite ein Opt-Out ermöglicht, um das Tracking zu deaktivieren.

Das Design spiegelt die Farben des VRS wider. Eine dynamische Fahrplan-Animation (SVG-basiert) im Hintergrund lockert das Gesamtbild der Onepage-Website auf. Nach der Wahl einer Ziel- und End-Haltestelle erscheint ein neuer Bereich mit den ermittelten Daten. Dieser stellt anhand einer weiteren Animation die Länge der Strecke dar und listet den Preis sowie die gewählte Verbindung auf. Mithilfe ausgiebiger Tests wurde sichergestellt, dass die Seite trotz der Animationen auf allen mobilen Geräten flüssig und fehlerfrei läuft.

etarif-preisrechner.vrs.de