Modernisierung der Bahnleittechnik-Oberfläche VBBa

Ein Farbkonzept, ein Design System und ein Prototyp für das Leitsystem, mit dem Fahrdienstleiter den Bahnbetrieb überwachen und steuern. Dazu der Nachweis, dass sich das Konzept im bestehenden System umsetzen lässt.

Ausgangslage

Das VBBa ist ein Leitsystem für Bahninfrastruktur. Es wird von Actemium entwickelt und bei mehreren Schweizer Bahnen eingesetzt, der wichtigste Anwender ist die RBS. In der Leitstelle bedienen die Fahrdienstleiter das System über die ganze Schicht, um den Bahnbetrieb zu überwachen und zu steuern. Der Betrieb ist zeitkritisch, eine Störung wirkt sich schnell auf andere Verbindungen aus.

VBBa wird in einem Zwei-Jahres-Zyklus weiterentwickelt. Der Fokus lag beim letzten Release auf Funktion und Zuverlässigkeit, die Oberfläche blieb dabei liegen. Sie entspricht nicht mehr den heutigen UI/UX-Standards und zeigt Schwächen bei Kontrast, Lesbarkeit und Auffindbarkeit von Funktionen. Einige davon sind sicherheitsrelevant und können zu Bedienfehlern führen.

Zielsetzung

Unser Ziel war ein modernes und anwendbares Designkonzept und darauf aufbauend ein Prototyp, der die Umsetzbarkeit belegt. Dazu gehören ein Farbkonzept, ein Design System mit Styleguide sowie ein Navigations- und Interaktionskonzept. Die Modernisierung soll die bestehende Bedienlogik nicht verletzen.

Nicht Teil der Arbeit sind das Gleisdiagramm selbst, funktionale Änderungen an der Leitlogik und die vollständige Integration in das laufende System. Diese setzt Actemium in einem Folgeprojekt um.

Vorgehen

Wir sind einem iterativen, nutzerzentrierten Designprozess gefolgt. Am 30. April 2026 waren wir in der Leitstelle der RBS und haben sechs Fahrdienstleiter befragt, in drei Gesprächen zu zweit und einem schriftlich ausgefüllten Leitfaden. Alle haben dieselbe Rolle, unterscheiden sich aber im Erfahrungsstand, von in Ausbildung bis langjährig erfahren. Ergänzt haben wir die Aussagen durch Beobachtung am Arbeitsplatz im Normalbetrieb.

Dazu kam eine Literaturrecherche zu HMI-Design, Alarmmanagement, Farbe und Kontrast. Für die Einordnung der Befunde haben wir festgehalten, wie belastbar jeder einzelne ist, also ob er von mehreren Quellen genannt, durch Literatur gestützt oder von uns nur beobachtet wurde. Die Designkonzepte haben wir danach in mehreren Feedbackrunden mit Actemium überprüft.

Was wir in der Leitstelle gefunden haben

Das System wird insgesamt geschätzt. Es gilt als stabil und zuverlässig, an den Funktionen würde kaum jemand etwas ändern. Die Wünsche betreffen fast nur die Darstellung. Die grösste Stärke ist die Nähe zum alten physischen Domino-Stellpult: Ein Signal sieht aus wie ein Signal, ein Übergang wie ein Übergang, bedient wird fast gleich, nur mit der Maus. Diese Nähe ist so gewollt und soll erhalten bleiben.

Die Schwächen liegen woanders. Die Schrift in der Übersicht ist zu klein und der Kontrast zu schwach, der dunkle Hintergrund gilt als ermüdend. Zustände werden teilweise nur über die Farbe angezeigt, obwohl ein Zustand immer zusätzlich über Form, Text oder Position erkennbar sein sollte. Panels öffnen an einer freien Stelle statt dort, wo geklickt wurde. Betriebliche und technische Alarme sind gemischt. Die Streckenrichtung ist nicht durchgehend gleich, was vor allem neue Nutzer verwirrt. Und viele Funktionen sind vorhanden, aber unbekannt und damit praktisch unsichtbar.

Aus diesen Befunden haben wir vierzehn Nutzeranforderungen abgeleitet, jede mit der Angabe, wie stark sie belegt ist.

Farbkonzept und Design System

Über alle Themes hinweg gelten dieselben Regeln: keine reine schwarze Fläche, Kontrast mindestens nach WCAG 2.2, ein Zustand nie nur über den Farbton, und die Bedeutung der Zustandsfarben nach IEC 60073. Statt einer einzigen Palette liefern wir sechs Modi, darunter eine verfeinerte Version des heutigen Looks, eine moderne dunkle und eine helle Variante nach ISA-101, eine kontraststarke Variante und eine warme, blauarme für die Nachtschicht. Ein weiterer Modus bildet die heutigen Farben exakt ab und dient als Vergleichsbasis.

Möglich macht das eine Token-Architektur in drei Schichten. Rohe Werte, semantische Tokens wie Fläche oder Gefahr, und die Bindung jeder Komponente an diese Tokens. Nichts ist fest verdrahtet, deshalb lässt sich die ganze Oberfläche von einer Stelle aus umfärben. Dass der Kundenwunsch nach den exakten heutigen Farben allein über einen zusätzlichen Modus erfüllt werden konnte, ohne eine einzige Komponente zu ändern, ist für uns der beste Beleg dafür, dass die Architektur trägt.

Ein überprüfbares Ergebnis ist der Kontrast. Wir haben für jedes funktionale Paar das Kontrastverhältnis in jedem Modus berechnet. Dabei zeigte sich, dass die ursprünglichen Rahmenfarben mit rund 1,4:1 praktisch unsichtbar waren. Wir haben sie so nachgezogen, dass funktionale Umrisse in jedem Theme mindestens 3:1 erreichen. Ebenso sind die Schriftgrössen angehoben, Zahlenwerte stehen in einer Monospace-Schrift sauber untereinander, und die Abstände folgen einer engen Skala, damit die gewohnt hohe Informationsdichte erhalten bleibt.

Prototyp

Der Prototyp in Figma besteht vollständig aus Instanzen der Komponentenbibliothek, die nach Atomic Design geordnet ist. Abgedeckt sind die zentralen Bildschirme: die Netz-Übersicht, die Bahnhofsansicht, das Faceplate für ein Objekt und der Alarmschirm, dazu ein Arbeitsplatz aus mehreren verschiebbaren Fenstern. Die Themes sind nicht als getrennte Kopien umgesetzt, sondern über den Farbmodus. Ein Bildschirm wechselt sein Theme, indem er den Modus wechselt, und dieselbe Komponente skinnt sich ohne Eingriff um. So lassen sich der heutige und der modernisierte Zustand direkt nebeneinander zeigen.

Konkret setzen wir damit die Anforderungen aus der Analyse um. Die Faceplates sind aufgeräumt, die Bedienung steht vor dem Status, und die Bereiche sind in Reiter gruppiert. Ein Panel öffnet nahe beim angeklickten Objekt. Die Alarme lassen sich nach Kategorie trennen. Die Navigation ist eine Minimap, die die offenen Fenster und die Anzahl Meldungen je Station zeigt, statt der Pfeile, die heute kaum jemand nutzt. Befehle sind zusätzlich über ein Kontextmenü erreichbar.

Umsetzung im bestehenden System

Ein Designkonzept ist nur so viel wert, wie es sich anwenden lässt. Die Oberfläche von WinCC OA baut auf Qt auf und lässt sich über Stylesheets in CSS-Syntax gestalten. Auf diesem Weg haben wir zuerst die einzelnen Bausteine umgesetzt, also den Button in mehreren Ausprägungen, die Status-Chips und das Eingabefeld mit Fokus- und Fehlerzustand.

Als grösseres Beispiel haben wir das Weichen-Faceplate vollständig aufgebaut. Es fasst die früher drei getrennten Fenster für Bedienung, Status und Meldungen in einem Popup mit Reitern zusammen und öffnet direkt neben dem angeklickten Symbol. Der Status kommt live aus dem System, jeder Punkt ist an einen realen Datenpunkt der Weiche gebunden und färbt sich bei einer Wertänderung um. Das aktive Theme steckt in einem einzelnen Datenpunkt, deshalb färben sich alle offenen Panels beim Umschalten live um, ohne neu zu öffnen. Sechs Themes sind so im laufenden System umgesetzt.

Die Grenzen halten wir offen. Statische Texte und einfache Rechtecke sind keine Qt-Bedienelemente und lassen sich nicht über das Stylesheet gestalten. Die Designschriften müssen auf jedem Bedienrechner installiert sein. Viele echte Panels sind verschlüsselt und lassen sich nicht von Hand anpassen. Das eigentliche Stellkommando haben wir bewusst nicht umgesetzt: Die Anzeige zeigt die reale Ist-Lage, löst aber keinen Befehl aus.

Evaluation

Zum Abschluss sind wir den erarbeiteten Stand gemeinsam mit Actemium vollständig durchgegangen, vom Aufbau des Design Systems über die ausgearbeiteten Bildschirme bis zur Umsetzung im laufenden System. Für den Vergleich zwischen heute und neu diente eine Figma-Datei, die die heutige Oberfläche abbildet.

Die Rückmeldung war positiv. Gut angekommen sind vor allem der klickbare Prototyp mit seinen Themes, der frei platzierbare Alarmschirm, die Navigation, die eine Störung sofort sichtbar macht, und die Reiter im Faceplate. Ebenso, dass sich Farben und Themes im laufenden System übernehmen und umschalten lassen, was bisher nicht möglich war. Die Abstimmung mit den Fahrdienstleitern ist der nächste Schritt, und genau dafür ist der Prototyp mit seinen Varianten gebaut.

Ergebnisse

• Eine Analyse der heutigen Oberfläche mit vierzehn belegten Nutzeranforderungen
• Ein evidenzbasiertes Farbkonzept mit sechs Modi und geprüften Kontrastwerten
• Ein Design System mit Styleguide, Token-Architektur und Komponentenbibliothek
• Ein Navigations- und Interaktionskonzept
• Ein klickbarer Prototyp der zentralen Bildschirme, mit Varianten zur Abstimmung
• Eine Umsetzung im bestehenden System, mit benannten Grenzen

Ausblick

Als Nächstes werden die Varianten mit den Fahrdienstleitern abgestimmt. Vor einer Umsetzung im laufenden System ist zudem eine erweiterte Machbarkeitsstudie nötig. Die vollständige Integration des Styleguides in die Applikation setzt Actemium danach selbst um.

Technologien und Methoden

• ZielsystemVBBa auf Basis von SIMATIC WinCC Open Architecture
• Design und PrototypFigma mit Token-Architektur und Komponentenbibliothek
• DesignansatzAtomic Design, semantische Tokens, sechs Farbmodi
• UmsetzungQt Style Sheets in CSS-Syntax, Anbindung an reale Datenpunkte
• MethodikNutzerzentrierter Designprozess, halbstrukturierte Interviews, Beobachtung

Auftraggeber

Actemium Schweiz AG
Renzo Cattarossi, Projektleitung
www.actemium.ch

Team

Matias Pizzolato
Florin Zuberbühler

Betreuung
Kevin Kim

P5 Projektübersicht

Wenn Sie daran interessiert sind, Kunde zu werden, wenden Sie sich bitte an projekte.sgi.technik@fhnw.ch