Progressive Web Apps – Das Allheilmittel für höhere Conversion Rates und neue Leads?

E-CommerceSoftwareWebsites

„Progressive Web App“ ist eins der neuen Trendworte der letzten Jahre. Durch dieses neue Konzept lassen sich die Interaktion der Nutzer mit der Webseite, die Conversions, und sogar die Leads verbessern. Unternehmen wie Starbucks hatten nach der Umstellung auf eine Progressive Web App einen Anstieg ihrer Conversions um den Faktor 2. Bei Trivago haben 150% mehr Nutzer die Seite zu ihrem Homescreen hinzugefügt, es gab einen Anstieg um 97% der Klicks auf Hotelangebote und 67% der Besucher kamen auf die Seite zurück, wenn diese vorher offline war.

Was genau verbirgt sich hinter dem Begriff „Progressive Web App“?

Der Begriff „Progressive Web App“ besteht aus zwei Teilen: „Progressive“ und „Web App“, was durch das Akronym PWA abgekürzt wird. Der erste Teil, Progressive, bezieht sich auf die Tatsache, dass die Web App nach dem Prinzip des Progressive Enhancement funktioniert. Kurz gesagt bedeutet das, dass die Anwendung für jeden Anwender unabhängig vom Browser funktioniert. Der zweite Teil, Web App, beschreibt die Anwendung, die der Seite zugrunde liegt. Nämlich, dass diese nicht auf dem Rechner des Nutzers installiert ist, um diese zu verwenden. Ein Beispiel hierfür ist z. B. Google Docs. Google Docs ist ein vollwertiges Texteditierungsprogramm, das im Web aufrufbar und nutzbar ist, ohne dass es auf dem Rechner des Nutzers installiert sein muss.

Weitere Charakteristika einer PWA sind:

  • Die Seite funktioniert unabhängig von der Verbindung. Eine PWA lässt sich selbst bei schlechter Verbindung, sogar offline (bei vorherigem Besuch der Seite), dank des Service Workers benutzen.
  • Die Inhalte sind immer aktuell. Die Inhalte der PWA werden dank des Service Workers im Hintergrund aktualisiert und sind daher immer aktuell.
  • Die Ansicht auf Mobilgeräten ist App-ähnlich. Eine PWA nutzt App-ähnliche Benutzungskonzepte und ist somit auch responsive, um sich allen Displaygrößen anzupassen. Sie läuft im Vollbildmodus mit versteckter Browserleiste. Grund hierfür ist das Buch von Steve Krug „Don’t make me think“ – eine Art Design-Gesetz, was besagt, dass eine Webseite oder App intuitiv, ohne nachzudenken, nutzbar sein soll.
  • Die Inhalte sind suchmaschinenfreundlich. Bei einer PWA handelt es sich um eine Webseite, die mit Hilfe eines Service Workers und eines Web App Manifests zu einer PWA wird. Durch das Web App Manifest kann die Web App als solche erkannt werden. Der Service Worker ermöglicht es, nach der App zu suchen und da es sich in der absoluten Basis um eine Webseite handelt, kann auch von anderen Webseiten auf die PWA verlinkt werden.
  • Die Web App ist installierbar. Durch die vorher genannten Erweiterungen, die eine Webseite zu einer PWA machen, ist diese auf Mobilgeräten wie auch auf Desktopgeräten zu installieren bzw. dem Homescreen hinzuzufügen.

Lässt sich eine PWA im E-Commerce nutzen?

PWA’s sind wie geschaffen für die Anwendung im E-Commerce. Sie bieten durch ihr natürliches Verhalten eine Menge Vorteile gegenüber Non-PWA-Shops.

Einer der größten Vorteile gegenüber einem herkömmlichen Shop ist, dass dem Nutzer eine ganz neue User Experience geboten wird. Durch diese neue Herangehensweise werden Ladezeiten verkürzt und das Wechseln der Seiten innerhalb des Shops verbessert – der Nutzer merkt kaum, dass die Seite neu lädt.

Ebenfalls wird auf die Verbindung geachtet. Wenn diese schlecht oder gar nicht vorhanden sein sollte, lassen sich Funktionen wie das Ausführen einer Bestellung oder das Aufrufen bereits besuchter Seiten realisieren. Ein weiterer Faktor, der stark mit in dieses Feature reinspielt, ist die enorme Verbesserung der Ladezeit. Diese führt zu einer größeren Kundenzufriedenheit und höheren Conversions sowie durch Progressive Enhancement zu einem Funktionieren auf fast allen Endgeräten.

Speziell für den E-Commerce-Bereich gibt es verschiedene Lösungsansätze, wie das Thema PWA angegangen und welche Basis genutzt werden kann. Wir haben uns für VueStorefront von Divante entschieden. Hierbei handelt es sich um das größte Open Source PWA Projekt im Bereich E-Commerce. Es bietet den breitesten Funktionsumfang, kombiniert mit einer einfachen Handhabung und der benötigten Modularität.

Zusammengefasst bieten sich einige Vorteile:

  • Es muss nur ein System betreut und gewartet werden. So fehlt der zusätzliche Entwicklungsaufwand für eine Native App, wodurch auf lange Sicht Kosten gespart werden können.
  • Der Shop kann gleichzeitig als App auf dem Homescreen installiert werden, aber auch klassisch auf allen Endgeräten im Browser aufgerufen und genutzt werden und somit eine Native App ersetzen – zumal viele Features in der Progressive Web App, wie Push Benachrichtigungen, auch benutzt werden können.
  • Den Kunden bietet sich ein neues und verbessertes Erlebnis bei der Nutzung des Shops.
  • Es wird eine höhere Conversion Rate erzielt und der Kunde ist zufriedener.

Warum ist es sinnvoll, eine PWA zu nutzen?

Wenn Sie mehr potentielle Leads bekommen und Ihre Conversions verbessern wollen, ist es essenziell, dass die Webseite in unter zwei Sekunden lädt. Denn knapp 50% der Nutzer erwarten eine solche Ladezeit und verlassen die Seite, wenn diese erst in drei Sekunden oder noch länger lädt. Amazon hat 2009 demonstriert, dass schon eine um 100 Millisekunden längere Wartezeit beim Kunden das Unternehmen 1% Umsatz kostet. Walmart hat in einer Studie belegt, dass jede Sekunde weniger Wartezeit die Conversion um 2% steigert.

Eine Progressive Web App kann hier Abhilfe schaffen. Sie ist meistens nach dem PRPL-Pattern aufgebaut. Bei dem PRPL-Pattern handelt es sich um eine Technik, mit der die Ladezeiten verbessert werden können. Des Weiteren kommen dann noch die oben genannten Features hinzu, wie die Möglichkeit, die PWA auf dem Homescreen zu installieren und die Seite bei einer schlechten Verbindung oder sogar komplett offline zu nutzen.

Progressive Web Apps sind sicher nicht das alleinige Allheilmittel, um Conversions zu steigern oder neue Leads zu generieren, aber sie sind ein sehr guter Anfang.

Ebenfalls interessant: