User Experience

Bessere UX durch Technologie: ZDF Mediathek als PWA

User Experience wird nicht ausschließlich über konzeptionelle und visuelle Aspekte dekliniert — die ZDF Mediathek beweist in der Umsetzung als “Progressive Web App” (PWA), dass technische Exzellenz entscheidend zur User Experience beitragen kann.

Überall verfügbar — aber nur, wenn es installiert ist

Seit 2014 konzipieren und realisieren wir bei Cellular die ZDF Mediathek — als iOS-App, als Android-App (jeweils in Smartphone- und Tablet-Ausführungen) sowie für Apple TV, Android TV und Smart TV. Und seit der Fußball WM 2018 auch für Amazon Alexa und Google Home.

Insbesondere in den mobilen Nutzungsszenarien beschränkte sich die Nutzung auf die Zielgruppen, die eine native App bereits installiert haben. Für neue Nutzergruppen, die noch keine native App auf ihren Devices haben, bietet die responsive Website des ZDF zwar auch im mobilen Umfeld Zugriff auf Bewegtbildinhalte der ZDF Mediathek — jedoch bei Weitem nicht mit dem Komfort und der durchgängigen User Experience, die eine fokussierte ZDF Mediathek App leistet.

Da muss doch mehr gehen

Gerade im mobilen Nutzungsszenarien ist ein schneller, unkomplizierter — und gleichzeitig komfortabler — Zugriff entscheidend, um neue Nutzergruppen auf diversen Devices für die ZDF Mediathek schnell zu begeistern und langfristig gewinnen zu können.

Im Sommer 2019 haben wir gemeinsam mit dem ZDF überlegt, wie wir es neuen, potenziellen Nutzern ermöglichen, schnell, einfach und komfortabel auf Sendungen zuzugreifen — ohne unmittelbar sofort eine native App installieren zu müssen, ohne dass der Nutzer auf Betriebssysteme und Appstore-Prozesse Rücksicht nehmen muss. Alles unter der Prämisse, den Komfort und die optimierte User Experience der nativen ZDF Mediathek Apps soweit wie möglich zu erhalten.

An der Schnittstelle von Strategie, Design und Technologie

Gesucht war eine Lösung, die uns an der Schnittstelle von Strategie, Design und Technologie schnell einen Schritt nach vorne bringt. In Anbetracht der Anforderungen kam im cross-funktionalen Team relativ schnell ein Lösungsansatz zur Umsetzung der Mediathek als “Progressive Web App” (PWA) auf den Tisch. Prinzipiell ist eine PWA eine Website, also eine browser-basierte Lösung, die jedoch zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren. Grundlage in der Umsetzung sind typische Webtechnologien wie HTML5, CSS3 und Javascript, mit denen eine Art Symbiose aus einer responsiven Website und einer App kreiert wird.

Dafür konnten Design und User-Flows auf Basis der erfolgreichen, bestehenden iOS- und Android-Apps adaptiert werden, um einerseits eine nahtlose Mediathek-Experience über diverse Touchpoints zu gewährleisten und andererseits bereits erprobte Nutzungsmuster weiter einzusetzen.

Die ZDF Mediathek als PWA

Mit der PWA-Umsetzung der ZDF Mediathek haben wir eine Browser-basierte Lösung kreiert, die in der Experience der einer nativen App in nichts nachsteht. Gleichzeitig ist die PWA-Lösung als direkter Link teilbar, ist ohne Installation auf quasi jedem Gerät nutzbar, und damit für jeden Nutzer sofort nutzbar.

Dabei passt sich zudem der Leistungsumfang dynamisch an die Performance des jeweiligen Endgeräts an, die PWA steuert sich selbst aus — das bedeutet, Features und Animationen, die die Leistungsfähigkeit des Gerätes überbeanspruchen würden, werden automatisch reduziert oder unterdrückt, wodurch die User Experience optimiert wird.
Für das hauptsächlich im Mittelpunkt stehende mobile Nutzungsszenario bietet die Offline-Fähigkeit der PWA ein zusätzliches Highlight — mittels Service Workern wird ein optimiertes Caching erzielt, womit die PWA auch bei abbrechender Internetverbindung im Browser einfach weiter funktioniert.

Abgerundet wird das Ganze durch die Unterstützung moderner Device-Features wie Dark-Mode, die über den Browser selbstverständlich unterstützt werden, um den Nutzer in seiner selbst definierten Device-Welt bestmöglich abzuholen.

ZDF Mediathek als PWA – auch auf großen Screens ein Erlebnis

Zurück in die Zukunft

Browser-basiert in die Zukunft? Ja!
Mit der PWA können wir die Einstiegshürde für neue Nutzer der ZDF Mediathek massiv senken — ohne dabei auf eine app-nahe Experience verzichten zu müssen. Browser sind auf nahezu allen einigermaßen modernen, mobilen Devices unmittelbar verfügbar. Und neue Technologie-Kombinationen ermöglichen uns, die User Experience gerätespezifisch auszusteuern und anzupassen.

Zudem ermöglicht die zentrale, server-basierte Auslieferung über den Browser — anders als über Appstore-Prozesse — neue Features und Updates in Echtzeit auszuliefern. Auch A/B-Testing ist mit überschaubarem Aufwand realisierbar.

In weniger als drei Monaten konnte so eine Vorab-Version des Beta-Release realisiert werden, die seit dem sukzessive weiterentwickelt wird.

Thorsten Barré, CCO, Cellular
Autor

Thorsten Barré
CCO
tbarre@cellular.de