Yves Tscherry, Senior Frontend Engineer bei Unic, hat die Entwicklung des «Billettautomaten der Zukunft» mitgeprägt und vorangetrieben. Im Interview erzählt er, was den Billettautomaten der Zukunft auszeichnet, und weshalb man sich strategisch für die Umsetzung der Webapplikation mit Web Components entschieden hat.
Auf direktem Weg zum gewünschten Produkt
Yves, die heutigen Billettautomaten waren häufig in der Kritik, dass sie kompliziert zu bedienen sind und den Benutzer überfordern. Was ist am Billettautomaten der Zukunft anders?
Yves Tscherry: Grundsätzlich wollte man die Billettautomaten näher an die Benutzererfahrung bringen, welche die Reisenden auf sbb.ch und in der Mobile App der SBB erleben. Was sich auf dem persönlichen Endgerät bewährt hat, soll auch auf dem Automaten möglich sein: einfach und ohne Umwege zum gewünschten Produkt kommen. Dazu wurden konsequent Abläufe, Funktionen und Erscheinungsbild auf dem Automaten hinterfragt und neu gestaltet. Mit den neuen Billettautomaten schafft die SBB eine durchgängige Erlebniswelt für den Reisenden, egal auf welchem Endgerät er sich befindet. Durch die geräteübergreifend einheitlichere Benutzeroberfläche können sich die Benutzer einfacher orientieren und gelernte Muster von einem Gerät auf das andere übertragen. Zentral ist zudem, dass künftig der SwissPass als Trägermedium für Billette und Abonnemente prominenter positioniert werden soll.
Was zeichnet die App aus Sicht der User Experience aus?
Die heutige Generation der Billettautomaten führt den Reisenden in einem linearen Prozess Schritt für Schritt oder 'Touch' für 'Touch' zum Produkt. Dieses sequentielle Vorgehen ist manchmal intransparent und für den Benutzer nicht vorhersehbar. Er weiss oft nicht, was im nächsten Schritt geschieht und erhält keine Informationen, wie sich eine Konfiguration auf das Angebot auswirkt. Die neue Benutzeroberfläche will die Benutzer mit möglichst wenigen Interaktionen zum richtigen Angebot führen. Sämtliche Abläufe in der Webapplikation wurden auf dieses Ziel ausgerichtet – von der Auswahl über die Konfiguration bis zur Bezahlung und zum Bezug. Dank der persönlichen Identifikation über den SwissPass können die Reisenden auf ihre absolvierten Reisen und gekauften Abonnemente zurückgreifen.
Die zahlreichen Rückmeldungen am Digitaltag im Zürcher Hauptbahnhof waren äusserst positiv. Die meisten Besucher:innen haben die Einfachheit der neuen Benutzeroberfläche gelobt. Wie habt ihr diese hohe Benutzerfreundlichkeit erreicht?
Bereits ganz früh im Projekt liess die SBB erste Entwürfe in A/B-Testings gegen die aktuellen Billettautomaten antreten. Während der Entwicklungszeit wurden drei Usability-Tests sowie ein Tree-Test durchgeführt. Die Erkenntnisse daraus wurden in die Iterationen aufgenommen.
Strategischer Entscheid für Web Components
Welches sind die zentralen technischen Lösungsansätze in der Webapplikation?
Die Wiederverwendbarkeit der einzelnen Elemente schien für das Projekt zentral und sinnvoll zu sein, deshalb haben wir uns strategisch für die Umsetzung der Webapplikation mit Web Components entschieden. Der modulare Aufbau der Komponenten erlaubt es uns, einzelne Elemente mit extrem wenig Aufwand anzupassen oder gar ganz auszutauschen. Einmal gebaut, können die einzelnen Funktionalitäten in verschiedenen Kontexten eingesetzt werden. Der grosse Vorteil von Web Components ist, dass sie technologie-agnostisch sind, d. h. auch z. B. React-, Angular- oder Vue-Projekte können die Komponenten sehr einfach beziehen und integrieren. Ein weiterer Vorteil ist die Kapselung: Die technischen Eigenschaften der Web Components gewährleisten, dass diese von aussen weder durch fremdes JavaScript oder CSS gewollt oder ungewollt manipuliert werden können.
Web Components erhalten in der Community derzeit viel Aufmerksamkeit. Was fasziniert dich daran?
Was wir in den letzten vier Monaten mit Web Components umgesetzt haben, zeigt deutlich ihr Potenzial; Wir haben eine Webapplikation geschaffen, die komplett clientseitig funktioniert und deren Komponenten innerhalb der SBB technologie-agnostisch verwendet werden können. Um die Web Components zu bauen, haben wir auf Stencil gesetzt. Wir sind uns zwar der Nachteile von Web Components bewusst, nehmen diese aber nur schon aufgrund der einfachen Integration in andere Technologie-Stacks in Kauf. Das ist auch gleichzeitig die Eigenschaft, welche mich im Business-Umfeld fasziniert: bei der SBB werden sehr viele spannende aber auch komplexe Projekte umgesetzt. Es ist von zentraler Bedeutung, dass so viele Ressourcen wie möglich wiederverwendet werden können um zu verhindern, dass ein und dieselbe Funktionalität von verschiedenen Teams mehrfach entwickelt wird. Zum einen geht es darum, ökologisch effizient und kostensparend zu entwickeln, anderseits geht es aber auch um die User Experience; denn werden Module aus einer Hand geliefert und in den verschiedenen Kanälen eingesetzt, ist es auch einfacher eine durchgängige User Experience über die verschiedenen Kanäle hinweg hinzubekommen.
Der grosse Vorteil von Web Components ist, dass sie technologie-agnostisch sind. So können die entwickelten Module flexibel in verschiedensten Kontexten wieder verwendet werden.
Yves Tscherry
Senior Frontend Engineer, Unic
Was waren die besonderen Anforderungen, die sich aus der Hardware ergaben?
Von Anfang an war klar, dass die webbasierte Applikation auf zwei technisch unterschiedlichen Geräten laufen muss; einerseits auf den bestehenden Billettautomaten und auf einem neuen Touch-Tablet-Prototypen. Die Einschränkung auf diese zwei Bildschirmgrössen hat uns technologisch viele Freiheitsgrade eröffnet, die man sonst nicht hat, wenn eine Applikation auf allen gängigen Internetbrowsern und Devices laufen muss. Zudem hatten wir die Freiheit zu definieren, in welchem Browser die Applikation laufen soll – wir haben uns deshalb für Chromium entschieden. In den zehn Jahre alten Billettautomaten steckten allerdings ganz spezielle Herausforderungen; wenig RAM, schwache Prozessoren – die neue Webapplikation musste mit diesen Restriktionen umgehen können. Die Touchfähigkeit auf dem alten Billettautomaten ist sehr eingeschränkt; man kann beispielsweise nur tippen. Scrollen oder swipen ist hier nicht möglich. Das neue Touch Tablet kennt alle diese Bedienmöglichkeiten. Mit einer App beiden Geräten gerecht zu werden, war technisch aber auch aus UX-/UI-Sicht eine grosse Herausforderung. So benötigten wir beispielsweise für die Billettautomaten ein Interaktionselement, mit welchem User den Screen durch Touch (Press) scrollen können. Dieses Element ist für das neue Tablet obsolet, da es gängige Touch-Interaktionen wie Touch-Scroll unterstützt.
Und wann stehen jetzt die neuen Automaten an den Bahnhöfen?
Die SBB wird in den nächsten Monaten die Webapplikation an weiteren internen und externen Anlässen zeigen. Der Digitaltag war sozusagen der Startschuss, um die Applikation zum ersten Mal der Öffentlichkeit zu präsentieren. Die Rückmeldungen aus diesen Roadshows werden wir nutzen, um das Produkt weiterzuentwickeln und zu verfeinern. Für Mitte 2020 ist der Rollout auf einzelne ausgewählte Automaten an grösseren Bahnhöfen als produktive Vorschau für Reisende geplant.
Kontakt für Ihre digitale Lösung mit Unic
Termin buchenSie möchten Ihre digitalen Aufgaben mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus: Jörg Nölke und Gerrit Taaks (von links nach rechts).
Wir sind da für Sie!
Termin buchenSie möchten Ihr nächstes Projekt mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus: Melanie Klühe, Stefanie Berger, Stephan Handschin und Philippe Surber (im Uhrzeigersinn).
