07.07.2017

UX im gelben Trikot

Ergosign designte und entwickelte einen Liveticker für den SR

Die Bikes rollen wieder auf der Tour de France 2017. Der Startschuss des bekanntesten Radrennens der Welt fiel am Samstag, den 1. Juli. Bei starkem Regen begann das Grand Départ mit einem Einzelzeitfahren über 13 Kilometer durch die Düsseldorfer City. Für alle, die bei der Tour immer und überall mitfiebern möchten, hat Ergosign den Liveticker der Tour de France im Auftrag des Saarländischen Rundfunks (SR) entwickelt. So können alle Interessenten jederzeit auf Streckeninformationen wie Höhenmeter und die aktuelle Position des Feldes zugreifen.

UI und UX des Livetickers von Ergosign für den SR
UI der Etappenübersicht

Ergosign übernahm die vollständige Entwicklung des Tour Tickers, das heißt sowohl Front-End (Zuschauersicht) als auch Back-End (Redakteurssicht). In einer eingangs durchgeführten Analyse wurden die Redakteure des SR befragt, um das neue Back-End möglichst optimal auf deren Arbeitsläufe und Bedürfnisse anzupassen. Das entstandene System ist hochgradig flexibel: So können nicht nur mehrere Redakteure am gleichen Ticker arbeiten (z. B. Feld-Updates und Tickermeldungen), sondern auch mehrere Ticker gleichzeitig betrieben werden. Die verschiedenen Aspekte des Tickers können individuell aktualisiert werden. Alle Informationen sind somit immer auf dem neusten Stand. Die XML-Schnittstelle hält auch den Teletext stets up to date.

Der Administrationsbereich ist von der Front-End-Ausspielung vollständig entkoppelt. Das Front-End ist leichtgewichtig, robust, updatefähig und wird komplett statisch generiert. Dadurch bietet es eine sehr gute Performance in Hinblick auf die beliebige Skalierbarkeit durch Caching-Server. Verwendet wurden State-of-the-Art-Techniken wie HTML5, CSS3 (SASS), JavaScript und JSON.
Kurz vor der Tour launchte die Sportschau ein neues Design, auf das der Tour Ticker mit seinem reduzierten Design abgestimmt ist. Auch mobil können alle Informationen bequem abgerufen werden. Das responsive Design ist unter der Verwendung von Vektorgrafiken und eigens angefertigten SVG Icons für Mobile, Tablet und Desktop optimiert.

UI der Landkarte zu den Ertappen der Tour de France
Karte der Etappen

Eine besondere Herausforderung stellte die Anpassung der Höhenprofile im SVG Format dar. Deren Inhalte sollen sich dynamisch an den zur Verfügung stehenden Platz der verschiedenen Endgeräte anpassen. Doch auch dies meisterte Ergosign durch eine enge Zusammenarbeit zwischen Designern und Entwicklungsteam.

Lisa Föllinger & Björn Busch-Geertsema

Weitere News

SPS IPC Drives 2018

SPS IPC Drives 2018

Sneak Peek ins Ergosign-IoT-Lab Saarbrücken

Sneak Peek ins Ergosign-IoT-Lab Saarbrücken

Masterclass beim UX-Day Mannheim 2018

Masterclass beim UX-Day Mannheim 2018