Inhaltsverzeichnis
Einführung
Die mobile Nutzung von Websites steigt kontinuierlich und hat überwiegend die Marke von 50% überschritten. Daraus ergeben sich vielfältige Anforderungen an die User Experience sowie Performance. Nur die wenigsten Shops finden darauf aktuell eine adequate Antwort. Zu groß sind die tatsächlichen oder vermeintlichen Hürden, die sich bspw. in veralteten technischen Herangehensweisen und Denkmustern ergeben. Ein Game Changer, der die bisherigen Ansätze in Frage stellt, muss her. Hier steht PWA - kurz für Progressive Web Applications - in den Startlöchern. Aktiv unterstützt von Google und bereits von den Big Playern des Marktes adaptiert, zeigt PWA, wie man Nutzererfahrung und damit Conversion Rates substantiell verbessern kann.
Warum ist die bisherige Denkweise für E-Commerce Frontends überholt?
E-Commerce Projekte stellen eine äußerst anspruchsvolle Art in der Familie von Softwareprojekten dar. Online-Shops müssen einerseits hochverfügbar sei und werden laufend durch Verkaufstransaktionen auf die Probe gestellt. Somit müssen sie sorgfältig und nachhaltig entwickelt werden. Andererseits steigen die Anforderungen, die an die Systeme gestellt werden beinahe exponentiell und vor allem in unfassbarer Dynamik. Shops sind eingebettet in ein komplexes Ökosystem vieler ineinander verwobener Systeme. Änderungen werden täglich eingespielt.
Jeder Tag ist wie Schlussverkauf. Das Nutzerverhalten ist geprägt von hohen Ansprüchen und der Diversifikation der Endgeräte bzw. des Verhaltens der Konsumenten im Allgemeinen. Diese erwarten kanalübergreifend ein gleichbleibendes und vor allem ineinandergreifendes und auf die jeweiligen Situation optimiertes Einkaufserlebnis. Über eine Vielzahl von Touchpoints - welche sich einander bedingen und kumulieren - interagieren User mit dem Angebot eines Händlers. Einen signifikanten und aktuell stetig steigenden Kanal stellen mobile Endgeräte dar. Je näher das Sortiment die sog. Millennials anspricht, desto höher der mobile Anteil.
Auch wenn diese Feststellung nicht unbedingt neu ist, sind heutige Online-Shops weiterhin sehr stark auf klassische Desktop-User optimiert. Mobile Nutzer werden allenfalles derart berücksichigt, dass Layouts responsive auf kleine Displays angepasst werden. Mobile First ist oftmals nicht konsequent umgesetzt und vor allem Ladegeschwindigkeiten sind unzureichend verstanden und optimiert.
Der Erfolg und die Möglichkeiten von klassischen Apps für Smartphones haben in den vergangenen Jahren bereits die Richtung angezeigt, wie man User mobil optimal abholen kann. Jedoch ergaben sich durch den Einsatz von Apps immer wieder Medienbrüche, recht hohe Zugangshürden (wer will schon zig Apps von ihm ggf. noch neuen Shops installieren) und hohe IT-Kosten für parallele Entwicklung und Infrastrukturen.
Quelle: youtu.be/QCoQs9NO9q0 (ab 2:24)
PWA - Progressive Web Applications als Zukunft des (M) Commerce
PWA - Progressive Web Applications treten nun an, die Anforderungen der mobilen, plattformübergreifenden Konsumentenbedürfnisse zu erfüllen und gleichermaßen effiziente und agile IT-Strukturen zu ermöglichen.
Die Ansprüche von Usern an Online-Shops im mobilen Kontext, die Google - fokussiert man auf die technischen Aspekte - herausstellt sind:
- Verfügbarkeit und Verlässlichkeit: Die Seite soll sofort laden auch dann, wenn eine Internetverbindung schwach oder für den Moment nicht existent ist
- Ladezeit: Die Website lädt schnell und ermöglicht geschmeidige Interaktionen, die mit einer nativen App vergleichbar sind
- Interaktivität: Die Website lässt sich optimal auf ein Smartphone ausgerichtet bedienen und ermöglicht aktive Interaktion mit dem User.
Die PWA im Detail
Definition
Kurz gefasst, ist eine PWA ist eine Website, die direkt für alle User und Endgeräte funktioniert und sich so flüssig bedienen lässt, wie eine native App. Insbesondere Websites mit einem hohen Interaktionsgrad profitieren von diesem Ansatz, da User Experience und Ressourcenverbrauch (z.B. Ladezeit und Akkuverbrauch) sich optimal darstellen.
Vorteile
Die Vorteile von PWA sind:
- Entwickler benötigen für das Programmieren von PWAs lediglich HTML5, CSS und JavaScript. Eine „doppelte Entwicklung“ ist somit nicht mehr erforderlich
- Sie können - anders als native Apps - von Suchmaschinen indiziert werden und folgen somit den bekannten SEO Regeln
- Push Nachrichten sind möglich (aktuell noch nicht auf Mobile iOS)
- Die Darstellung ist responsive und somit für die Endgeräte angepasst
- Inhalte können einfach geteilt und “geliked” werden, da jeder Inhalt über eine eigene, sprechende URL verfügt
- Benutzer müssen keine App finden und herunterladen, um diese auf dem Homescreen verfügbar zu machen
- Eine Verknüpfung auf dem Desktop ist ebenfalls möglich
- Eine Offline-Nutzung ist möglich
- Über die Payment Request API werden zukünftig stark vereinfachte Möglichkeiten der Bezahlung bereitstehen und Abbruchraten reduzieren
Geschwindigkeit
Vor allem die Ladezeit soll an dieser Stelle ausdrücklich hervorgehoben werden. Verschiedene Studien weisen darauf hin, dass Performance der Schlüsselfaktor zu (mobiler) Conversion ist. Sobald die Gesamtladezeit > 3 Sekunden liegt, verlassen 53% der User die Website. Die Ladezeit stellt daher auch konsequenterweise einen Rankingfaktor in der Google Suche dar.
Optimale Ladezeiten ergeben sich aus einer Vielzahl von Faktoren und werden leider oftmals sehr eindimensional und somit letztlich falsch dargestellt. Da dies ein Thema für sich selbst ist, sie an dieser Stelle auf diesen Beitrag hingewiesen.
Der PWA Ansatz fordert daher mehr, als schnelle Time To First Byte der Applikation und umfasst wesentlich mehr als Caching (für den Offline Betrieb).
Als Kriterium führt Google an dieser Stelle den sog. RAIL Ansatz ein:
RAIL ist die Abkürzung für Response, Animation, Idle und Load. Zusammengefasst steckt dahinter der Gedanke, dass Performance zuvorderst aus der Perspektive User Experience also anhand der Erwartungen des Nutzers beurteilt wird. Es geht vor allem darum, dass ein User möglichst sofort ein Feedback auf seine Aktion erhält und die folgenden Screens sich intelligent rasch aufbauen und im Hintergrund ergänzende Elemente geladen werden.
Response: Aktionen sollen in weniger als 50 ms ein Feedback geben. Dies betrifft nicht ausschließlich die Zeit für das Laden neuer Screens beim Seitenwechsel, sondern alle Aktionen des Users, die zu einer Antwort der Applikation führen.
Animationen: dienen dazu, die Applikation geschmeidig auf Aktionen eines Users antworten zu lassen, bevor diese fertig ausgeführt ist. Dies führt vor allem einem direkten Feedback an den User, so dass dieser ein sicheres Gefühl bekommt. Die Geschwindigkeit dieser Animationen soll < 10 ms je Frame (also 60 frames per second) liegen.
Idle: Da die Applikation bereits in den ersten 50 ms ein Feedback geben soll, also erste relevante Inhalte für den User ausspielen soll, sollen die weiteren 50 ms der sog. Idle-Time (also der Zeit, die ein User nun benötigt, auf der Website eine Entscheidung für eine mögliche nächste Aktion zu treffen) für weitere Prozesse genutzt werden. Dies kann beispielsweise ein Nachladen im ersten Schritt nicht im Sichtbereich liegender Inhalte sein.
Load: Das Ausliefern von Inhalten verbunden mit der Möglichkeit mit der Applikation zu interagieren soll in < 5 Sekunden ermöglicht werden. Dieses Ziel gliedert sich in verschiedene Unterpunkte, die dem User das Gefühl einer angenehmen Nutzbarkeit geben, wie folgende Grafik darstellt:
Das Messinstrument Google Lighthouse gibt hierzu die einfache Möglichkeit, die notwendigen Maßnahmen transparent zu auditieren.
User Experience
User Experience steht im Mittelpunkt von Progressive Web Apps, und somit wenden diese selbstverständlich das Konzept des “Responsive Web Design” an. Sie passen sich also der Bildschirmgröße des Endgeräts an und können gleichermaßen im Fullscreen angezeigt werden, sodass bei der Nutzung der PWA optisch kein Unterschied zu einer nativen App ausgemacht werden kann.
Offline-Modus
Ein weiterer Bestandteil von PWA ist ein Offline-Modus. Das bedeutet per Definition erstmal nur, dass die Website auch funktionsfähig sein muss, wenn keine Internetverbindung besteht. Den Umfang dieser Funktionsfähigkeit legt die Applikation selbst fest. So würde es bereits ausreichen, wenn eine Basis Navigation erhalten bleibt Offline-Hinweis erscheint. Idealerweise sind natürlich signifikante Teile der Website weiterhin sinnvoll bedienbar.
App Features: Push-Benachrichtigungen & Add-to-Homescreen
Push-Benachrichtigungen sind bisher ein Privileg nativer Apps gewesen. Aktuell stellen diese eine sehr effizienten Weg dar, hohe Aufmerksamkeit beim User zu erlangen, da diese Nachrichten auch ohne, dass die Website aktuell im Browser geöffnet ist, ausgeliefert werden können. Auf diese Weise können User am oberen Bildschirmrand über Neuigkeiten und Aktionen informiert werden.
Zusätzlich können PWAs über die "Add-to-Homescreen"-Funktionalität zum Startbildschirm hinzugefügt werden, sodass das bekannte App-Icon sich auf dem Startbildschirm nicht von nativen Apps unterscheidet.
SEO und User-Akzeptanz
Im Gegensatz zu nativen Apps aus dem App-Store bietet PWA zwei deutliche Vorteile. Einerseits werden die Inhalte einer PWA ganz normal über die Suchmaschine indizierbar und erlauben dem User den Zugang über seine gewohnten Wege. Zweitens wird die Hemmschwelle der User zur Interaktion mit der PWA enorm gesenkt, da die Installation via App-Store entfällt und die PWA direkt auf dem Homescreen hinzugefügt werden kann. Diese Vorteile zeigen sich insbesondere bei Websites, die nicht zu den Marktführern gehören.
Wird sich PWA durchsetzen?
Natürlich lässt sich nun einwenden, dass die oben genannten Vorteile bereits heute durch den Einsatz nativer Apps zu erreichen sind. Darüber hinaus stellt sich - wie bei jeder neuen Technologie - die Frage, “ob sich PWA wohl durchsetzen wird?”. Dies möchte dieser Beitrag mit einem klaren “ja” beantworten.
Da für Entwickler die Entwicklung von PWA einfacher ist und somit die Kosten für diese unter denen von nativen (hybriden) Apps liegt, ist davon auszugehen, dass sich die Diskussion “was besser ist”, PWA oder App, erübrigt und das Pendel Richtung PWA ausschlagen wird. Vor allem auch, weil Google diese Technologie stark fördert und bereits namhafte Unterstützer gefunden hat.
Die Unterstützung der PWA Features durch aktuelle Browser ist grundsätzlich gegeben und auf den Entwicklerroadmaps der Hersteller wird eine vollständige Unterstützung (“Can I use”) der wesentlichen Features angestrebt. Apples iOs mit dem Safari (mobile) legt hier - wohl aus rein strategischen Gründen, dem eigenen App-Universum geschuldet - ein eher zögerliches Tempo vor.
Welche Lösungen gibt es für PWA im E-Commerce?
Stellt sich abschließend die Frage, was man nun tun muss, den eigenen Shop auf die nächste Evolutionsstufe zu heben?
Die aktuell auf dem deutschen Markt mit einer signifikanten Verbreitung präsenten Shop-Systeme bieten out-of-the-box noch keine bzw. keine weitreichend erprobte native Unterstützung für PWA. Einiges tut sich jedoch bereits über externe Lösungen oder Research Projekte der Hersteller:
- Magento entwickelt mit dem PWA Studio eine Lösung für Magento 2. Für Magento 1 wird es seitens des Herstellers keine Unterstützung für PWA geben
- Von Shopware gibt es zum Thema PWA bisher keine offizielle Aussage oder nennenswerte Quellen, die auf eine baldige Unterstützung schließen lassen
Folgende Unternehmen stellen fertige Lösungen bereit und ermöglichen somit eine PWA ohne die Notwendigkeit der eigenen Entwicklung:
