Usability & User Experience
Gut die Hälfte des gesamten Traffics im E-Commerce entfällt schon heute auf mobile Endgeräte. Mobile first ist schon lange keine Forderung mehr, sondern eine Realität, der sich Onlinehändler stellen müssen. Um der Nachfrage nach mobilen Angeboten gerecht zu werden, haben Händler bisher auf responsive Websites und native Apps gesetzt. Beide Lösungen haben Vor- und Nachteile:
Native Apps sind im Optimalfall sehr gut auf die mobile Nutzung zugeschnitten. Einmal heruntergeladen, sind sie sehr einfach zu erreichen und es besteht die Möglichkeit, Nutzer per Push-Nachricht beispielsweise über besondere Angebote zu informieren. Apps haben außerdem in der Regel kürzere Ladezeiten als responsive Websites. Durch native Apps lassen sich so sehr attraktive Angebote für Mobile-Nutzer verwirklichen, die in puncto Usability und User Experience gegenüber responsiven Websites in den meisten Fällen deutlich überlegen sind.
Für responsive Websites sprechen aus dieser Perspektive insbesondere zwei Aspekte: Zum einen müssen sie im Gegensatz zu nativen Apps nicht in einem App-Store heruntergeladen werden und zum anderen können sie plattformübergreifend von ganz unterschiedlichen, nicht nur mobilen Geräten aufgerufen werden.
Progressive Web-Apps sind in dieser Hinsicht nicht nur eine Alternative zu den bestehenden Ansätzen, sondern die Synthese aus den beiden Web-Technologien: PWAs laufen eigenständig direkt in einem Webbrowser, präsentieren sich dem Nutzer aber annähernd wie native Apps. Durch die Möglichkeiten der Gestaltung und die Integration in den Homescreen kommen PWAs den grundlegend sehr gefestigten und nutzerfreundlichen Design- und Bedienaspekten einer nativen App sehr nahe. PWAs können außerdem auf verschiedene Gerätefunktionen zugreifen und ermöglichen Push-Benachrichtigungen. Wie bei einer nativen App kann ein Icon auf dem Homescreen gespeichert werden, das einen schnellen Zugriff ermöglicht. Anders als bei einer herkömmlichen mobilen Apps ist bei einer PWA aber kein Download aus einem App-Store notwendig. Da sie immer über HTTPS ausgeliefert werden, erfüllen sie außerdem grundsätzlich aktuelle Sicherheitsstandards. Ebenso wie responsive Websites funktionieren PWAs plattform- und geräteübergreifend, während sie hinsichtlich der Ladegeschwindigkeit mit nativen Apps vergleichbar sind. Zusätzlich sorgen sogenannte Service Worker und intelligentes Caching dafür, dass PWAs auch bei schlechter Konnektivität und offline funktionieren.
Die Verbindung dieser positiven Eigenschaften von nativen Apps und responsiven Websites macht die PWA in Hinblick auf Funktionalität und Nutzererfahrung zu einer attraktiven Zukunftstechnologie.
Akzeptanz & Kundenbindung
Obwohl native Apps nachweislich deutlich bessere Conversion Rates als mobile Websites erzielen und bei Kunden eine starke Bindungswirkung entfalten, wenn sie einmal installiert sind, haben sie einen entscheidenden Nachteil: Der Download aus einem App-Store und die Speicherung der App auf dem eigenen Gerät stellt für viele Nutzer eine hohe Einstiegshürde dar. Der Erfolg eines entsprechenden Angebots hängt dabei wesentlich auch von äußeren Faktoren ab, die die Akzeptanz der Nutzer für eine App beeinflussen. Besonders für kleinere, unbekannte Unternehmen und Marken ist das ein Problem, da, zusätzlich zu den Entwicklungskosten der App, Mittel für Marketingmaßnahmen bereitgestellt werden müssen, um potentielle Kunden auf die App aufmerksam zu machen. Bei einer PWA besteht diese Einstiegshürde nicht, da sie nicht extra heruntergeladen werden muss, sondern einfach per Webbrowser aufgerufen werden kann. Dennoch haben Nutzer die Möglichkeit ein App-Icon auf ihrem Bildschirm zu speichern, um schneller auf die PWA zugreifen zu können. Dadurch wird der Vorteil der engeren Kundenbindung genutzt, der Nachteil der Einstiegshürde hingegen umgangen. Dabei wird auf dem Gerät 80-90 Prozent weniger Speicherplatz als bei einer nativen App benötigt. Gleichzeitig ist das Senden von Push-Nachrichten mit einer PWA ebenso möglich, wie die Nutzung bestimmter Gerätefeatures, um Usern eine optimale Nutzererfahrung zu bieten und sie so langfristig zu binden.
Kleine Kosten, große Leistung
Während bisher die Vorteile der PWA-Technologie vor allem aus der Perspektive des Users bzw. des Kunden aufgezeigt wurden, soll abschließend die Frage beantwortet werden, was sich Onlinehändler konkret von der neuen Technologie versprechen können. Denn das ist eine ganze Menge!
Besonders für Shop-Betreiber, die sowohl eine native App als auch einen responsiven Web-Shop betreiben, dürften die vergleichsweise günstigen Entwicklungskosten einer PWA ein wichtiger Aspekt sein. Da eine PWA unabhängig vom Betriebssystem (Android o. iOS) funktioniert und außerdem auch problemlos vom Desktop aus aufgerufen werden kann, muss sie nur einmal entwickelt werden. Die Entwicklungskosten und die Wartung sind dabei günstiger als bei einer nativen App. Im Zusammenhang mit einem modernen Headless-System kann eine PWA als Frontend-Applikation das klassische Frontend ersetzen und macht eine zusätzliche native App überflüssig. Gerade kleinere Unternehmen und neue oder weniger bekannte Marken können davon profitieren, ihren Kunden mit einer PWA ein App-Erlebnis zu bieten, ohne die Kosten der zusätzlichen Entwicklung einer nativen App tragen zu müssen.
Neben diesem Kostenvorteil haben PWAs einen weiteren Vorzug gegenüber nativen Apps. Die Inhalte von Progressive-Web-Apps werden von Suchmaschinen genauso indexiert wie die einer normalen Website. PWAs können also für Suchmaschinen optimiert werden. Durch ihre geringe Ladezeiten bringen sie dabei einen wichtigen Vorteil für das Ranking bei Google & Co. schon mit. An dieser Stelle sollte auch nicht verschwiegen werden, dass gerade Google die Entwicklung der PWAs in den letzten Jahren sehr gepusht hat. Man hält dort ganz offenbar große Stücke auf diese Technologie.
Last but not least: Die guten Usability und UX-Eigenschaften und die schnelle Ladegeschwindigkeit von Progressive-Web-Apps schlägt sich in messbarem Erfolg nieder. So weist beispielsweise Google in einer Reihe von Case Studies unter anderem beeindruckende Verbesserungen hinsichtlich der Bounce Rate, der Verweildauer auf der Seite und selbstverständlich der Conversion Rate durch PWAs nach.
Appinstitute hat einige der wichtigsten Erkenntnisse aus Googles Case Studies herausdestilliert und zusammengefasst:
* Appinstitute: Infographic: Progressive Web Apps. The Future of Mobile. https://appinstitute.com/progressive-web-apps-infographic/, 16.09.2019.
Nach einer vielzitierten Studie des Marktforschungsinstituts Gartner aus 2017 sollten bis 2020 die Hälfte aller nativen Apps durch Progressive-Web-Apps ersetzt sein. Heute ist absehbar, dass diese Prognose nicht eintreffen wird. In diesem Fall dürfte aber gelten: Aufgeschoben ist nicht aufgehoben. In einem E-Commerce-Umfeld, das zunehmend auf Flexibilität setzt und in dem das API-first-Prinzip und der Headless-Ansatz sich immer mehr durchsetzen, spricht viel dafür, dass PWAs mittelfristig das klassische Shop-Frontend und viele native Apps ersetzen werden.
Die PWA-Technologie bei basecom
Unser Experte für Progressive-Web-Apps ist Softwareentwickler Tom Daniek. In unserem Gespräch haben wir mit ihm über den aktuellen Stand der Entwicklung, technische Besonderheiten und Einsatzmöglichkeiten von PWAs geredet.
Tom, du beschäftigst dich seit einiger Zeit mit der PWA-Technologie und bist bei basecom für dieses Thema verantwortlich. Wie ist deine Einschätzung zur aktuellen Entwicklung im PWA-Bereich?
Generell ist es so, dass PWAs derzeit eine Art Start-Bonus genießen; einfach für die Idee an sich, die verschiedenen Technologien zu vereinen. Der Cross-Plattform-Aspekt ist für die Entwicklung sehr wichtig. Zusätzlich bieten die Offline-Funktionalitäten große Vorteile und durch die schnellen Ladezeiten sind Progressive-Web-Apps für die Nutzer sehr attraktiv. Die Erwartungen an die Technologie sind groß.
In den letzten Jahren sind im Bereich PWA große Fortschritte gemacht worden. Insbesondere Google hat die Entwicklung der Technologie vorangetrieben. Allerdings gibt es noch einen anderen großen Anbieter mobiler Betriebssysteme: Apple ist scheinbar bisher nicht so sehr an dem Thema interessiert. Wir merken in ersten PWA-Projekten, dass es unter iOS zu Reibungen kommt.
Bei PWAs handelt es sich noch um eine Zukunftstechnologie. Auch wenn die Idee nicht neu ist, ist die Verbreitung noch vergleichsweise gering. Obwohl man in der Entwicklung noch hier und da an Grenzen stößt, geht diese generell aber stetig voran und vieles funktioniert bereits sehr gut.
Eine wichtige ‘Basistechnologie’ für PWAs sind die Service Worker. Was hat es damit auf sich?
Service Worker fungieren als zusätzliche Instanz zwischen Server und Webbrowser, die in die Kommunikation eingreifen kann. Jedes Mal, wenn ein Request losgeschickt wird, egal ob zum Lesen oder zum Schreiben einer Ressource, kann der Service Worker intervenieren und entsprechende Informationen beispielsweise aus dem Cache ziehen oder zur späteren Übertragung in einer Datenbank zwischenspeichern. Dadurch entsteht der Speedvorteil bei PWAs.
Durch intelligentes Caching können Service Worker aber auch bei geringer Konnektivität oder wenn keine Internetverbindung besteht, zuvor lokal gespeicherte Inhalte darstellen, sodass die PWA auch offline funktioniert. Zudem ermöglicht der Service Worker durch seine Sonderstellung bestimmte Konzepte wie z.B. die Synchronisierung von Daten im Hintergrund, auch wenn die Seite der PWA gerade nicht im Vordergrund geöffnet ist, oder das Senden von Push-Benachrichtigungen.
Ein anderer wichtiger Aspekt ist das sogenannte Manifest (Web App Manifest). Dabei handelt es sich um eine Datenquelle für die darstellungstechnischen Aspekte der PWA bei einer „Installation“ auf dem Homescreen.
In welchen Bereichen ist deiner Ansicht nach der Einsatz von PWAs sinnvoll?
Progressive-Web-Apps sind sicher eine interessante Alternative zu herkömmlichen responsiven Websites und kleineren nativen Apps. Man sollte sich aber auch darüber im Klaren sein, dass eine PWA keine Universallösung ist. So kann zum Beispiel die Offline-Fähigkeit für bestimmte Anwendungen sehr vorteilhaft sein. Wir haben momentan ein Projekt im B2B-Bereich, wo das eine wichtige Rolle spielt. Auch für Webshops kann das intelligente Caching Vorteile haben. Außerdem kann das App-Icon auf dem Bildschirm zu häufigeren Interaktionen führen. Es gibt aber auch Fälle für die eine PWA nicht die richtige Lösung ist. Man muss bei jedem Projekt im Vorfeld analysieren welche Anforderung konkret bestehen, um dann entscheiden zu können: Hier ist eine PWA genau das Richtige, oder eben nicht. Bei dieser Entscheidung unterstützen wir unsere Kunden gerne.