Thorsten Barré
CCO
@T210
Share this article on
User Experience

Bessere UX durch Technologie: ZDFmediathek als PWA

User Experience wird nicht ausschließlich über konzeptionelle und visuelle Aspekte dekliniert — die ZDFmediathek 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 ZDFmediathek — 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 Nutzergruppen, 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 ZDFmediathek — jedoch bei Weitem nicht mit dem Komfort und der durchgängigen User Experience, die eine fokussierte ZDFmediathek 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 ZDFmediathek 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 ZDFmediathek 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 ZDFmediathek als PWA

Mit der PWA-Umsetzung der ZDFmediathek 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.

ZDFmediathek 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 ZDFmediathek 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 — die aktuelle Beta-Version der ZDFmediathek ist hier verfügbar:

https://pwa.zdf.de

Fazit

Mit der PWA konnten wir die Einstiegshürde für neue Nutzer der ZDFmediathek massiv senken, ohne dass diese dabei auf eine app-nahe Experience verzichten müssen. Nach wie vor bieten die nativen Apps im iOS- und Android-Umfeld eine umfangreichere, weitaus integriertere Experience — und für Nutzer dieser Systeme können wir eine Transition aus der PWA in die nativen Apps nachgelagert in geeigneten Nutzungsszenarien umsetzen.

Durch die Device-Unabhängigkeit der PWA können wir außerhalb der etablierten nativen Plattformen zudem Zugang für andere und vor allem ältere Devices garantieren — für das ZDF kein ganz unwichtiger Faktor: Als öffentlich-rechtlicher Sender bedient das ZDF die gesamte Gesellschaft. Aus unserer Sicht ist das nicht nur hinsichtlich der demographischen Struktur der potenziellen Nutzer interessant, sondern vielmehr auch hinsichtlich der unendlichen Vielfalt der mobil genutzten Devices.

Kontakt

Wir sind gespannt – auf neue Ideen und neue Leute.

HAM
Cellular GmbH
Große Elbstraße 39
22767 Hamburg
Germany
BER
Cellular GmbH
Karl-Marx-Allee 90A
10243 Berlin
Germany
VIE
Cellular GmbH
Lange Gasse 65/14
1080 Wien
Austria
Cellular GmbH
Große Elbstraße 39
22767 Hamburg
Germany
Cellular GmbH
Karl-Marx-Allee 90A
10243 Berlin
Germany
Cellular GmbH
Lange Gasse 65/14
1080 Wien
Austria