Progressive Web Apps / PWA – die Zukunft des mobilen Webs
Inhaltsverzeichnis
1. Einführung
In den letzten Jahren hat die Nutzung von Mobilgeräten so stark zugenommen, dass die Menschen heute auf mobilen Geräten doppelt so häufig wie auf Desktop-Computern, und in vielen Ländern sind Mobiltelefone das einzige Gerät, das sie benutzen. Das ist nichts Neues: Wahrscheinlich haben Sie die gleichen Trends in Analysen auf Ihrer Website. Mit diesem Nutzungsboom gehen Erwartungen einher. Die Nutzer verlangen durchweg großartige Interaktionen sowohl mit nativen Apps als auch mit mobilen Websites, und erwarten, dass sie nahtlos zwischen sie je nach ihren Bedürfnissen.
Entwickler und Designer müssen jetzt und ihre eigenen Anwendungen für mehrere Betriebssysteme (OS) zusammen mit einer mobilen Website pflegen – Ein Prozess, der sehr viel Zeit und Mühe erfordert. Und wenn – wie ist es oft so, dass das Erlebnis auf der Website eines Unternehmens und in der eigenen App sehr unterschiedlich sind, sind die Nutzer am Ende frustriert. Es muss doch einen besseren Weg geben? Nun, jetzt gibt es sie: Progressive Web Apps. Das Konzept einer Progressive Web Apps (PWA) wurde erstmals 2015 eingeführt.
Progressive Web Apps sind Websites, die moderne Technologie nutzen, um Web-Funktionen, die ihren eigenen Anwendungen ähneln. Dieser Artikel untersucht die heutigen Möglichkeiten des mobilen Webs und warum Progressive Web Apps revolutionäre Lösungen zur Verbesserung der mobiles Internet. Wir schauen uns an, was wir mit Progressive Web Apps wirklich meinen und welche einzigartigen Funktionen sie bieten Nutzer, wie man sie erstellt und wie man die Ergebnisse bewertet.
2. Mobile Nutzung
Die Verbraucher erwarten von mobilen Geräten, dass sie ihre Bedürfnisse für alltägliche Aufgaben wie Einkaufen, Kommunikation und Unterhaltung erfüllen, und die Herausforderung für Designer und Entwickler besteht darin, Dienste anzubieten, die diesen Anforderungen gerecht werden. Um dies zu erreichen, müssen mobile Anwendungen schnell, einfach zu installieren, zuverlässig und attraktiv sein und in einer sicheren und zugänglichen Umgebung funktionieren. In den letzten Jahren haben sich die digitalen Plattformen, die von den Nutzern verwendet werden, stark verändert, und mobile Geräte haben sich gegenüber den Desktops stark durchgesetzt. comScore berichtet, dass die Nutzer von Mobilgeräten in den meisten Ländern mehr als doppelt so viel Geld ausgeben
mehr digitale Minuten als Desktop-Nutzer. Der Desktop ist jedoch nach wie vor wichtig und nimmt im Einzelhandel, bei Portalen, in der Geschäfts- und Finanzwelt, bei Reisen, Autos und im Bildungswesen weiterhin 50 % oder mehr der digitalen Zeit in Anspruch. Allerdings hat das mobile Publikum für einige dieser Kategorien eine größere Reichweite, und die Verbraucher wechseln oft zu der Plattform, die ihren Bedürfnissen am besten entspricht.
Darüber hinaus haben die digitalen Neueinsteiger, also diejenigen, die zum ersten Mal ins Internet gehen, zu einer allmählichen Umstellung auf einen reinen mobilen Internetzugang beigetragen. Die Verbraucher im asiatisch-pazifischen Raum (APAC), in Ländern wie Indien und Indonesien, greifen ausschließlich über mobile Geräte auf das Internet zu. Und Millennials nutzen mobile Geräte häufiger als andere Generationen, obwohl ihre Nutzung auch bei älteren Generationen deutlich zunimmt.
Die überwiegende Mehrheit der Zeit auf mobilen Geräten wird mit nativen Apps verbracht. comScore berichtet, dass 80 % aller mobilen Minuten in allen Märkten mit nativen Apps verbracht werden, verglichen mit 20 % im mobilen Web. Diese Zeit entfällt jedoch auf eine sehr begrenzte Anzahl nativer Anwendungen – in erster Linie soziale Medien, Musik, Spiele und Unterhaltung. Und was die Reichweite anbelangt, so zieht das mobile Web tendenziell ein größeres Publikum an: Laut comScore gibt es im Durchschnitt 2,2 Mal mehr Einzelbesucher pro Monat für das mobile Web als für native Apps.
2.1 Untersuchung: Mobile Web und Native Apps
Die Bedeutung einer mobilen Webpräsenz kann gar nicht hoch genug eingeschätzt werden, da die Verbraucher häufig auf mobile Websites zurückgreifen, um sich zu informieren und ihre Optionen zu erkunden. Tatsächlich sind mobile Websites die primäre Methode der Entdeckung, wie dieser Teilnehmer der Google-Nutzerforschung erklärt: „Wenn man denkt: ‚Ich weiß, dass ich das suche‘, ist es wahrscheinlich einfacher, auf eine mobile Website zu gehen und zu suchen…
Ich habe das Gefühl, dass mehr Produkte und Inhalte auf einer mobilen Website verfügbar sind als auf einer App. Da man davon ausgeht, dass sie die größte Reichweite haben, suchen die Nutzer häufig auf verschiedenen mobilen Websites nach Informationen; eine nützliche Methode, um Alternativen, Preise und Bewertungen zu erkunden. Tipp: Mobile Websites können die Vorteile von Suchmaschinen-Rankings und SEO für eine einfache Suche nutzen (siehe Google’s Search Engine Optimisation Guide for Beginners). Obwohl die Verbraucher mobile Websites für die Recherche und Entdeckung nutzen, finden sie native Apps im Allgemeinen einfacher zu bedienen.
Native Apps werden von Anfang an für mobile Geräte entwickelt, und dieser Ansatz führt in der Regel zu einem besseren Design, das den Zielen der Benutzer entspricht, und zu reibungsloseren Interaktionen. Auch wenn einige mobile Websites von Anfang an sehr gut konzipiert und benutzerfreundlich sind und weniger fortschrittliche Websites seltener in den Suchergebnissen erscheinen, stoßen die Nutzer immer noch auf viele Websites, die eine schlechte Erfahrung bieten. Die kumulative Vertrautheit mit ihnen kann dazu führen, dass die Nutzer zu dem Schluss kommen, dass native Apps besser funktionieren: „Die Apps, die ich mag, sind wirklich so konzipiert, dass sie sehr benutzerfreundlich und einfach zu bedienen sind. Du kannst einsteigen, aussteigen und dein Ding machen.“
Die Realität ist, dass die Nutzer bei Bedarf die Plattform wechseln, um die gewünschten Informationen oder Dienste zu finden. Eine kürzlich durchgeführte Studie ergab, dass 46 % der mobilen Einkaufssitzungen mindestens einen Wechsel zwischen einer mobilen Website und ihrer eigenen App beinhalten. Daher muss das Erlebnis auf allen von Ihnen unterstützten Plattformen hochwertig, schnell, zuverlässig, sicher und ansprechend sein. Darüber hinaus profitieren einige interne Anwendungen davon, dass ein mobiles Web in sie integriert wird, und Technologien wie Trusted Web Actions (verfügbar für Android) machen es Ihnen leicht, dies zu erreichen, indem sie ein einheitliches Erscheinungsbild bieten.
Die Nutzer sind im Allgemeinen der Meinung, dass native Apps eine sauberere und flüssigere Schnittstelle bieten, besser auf bestimmte Nutzer zugeschnitten sind und schneller geladen und verwendet werden können. Mobile Websites sind jedoch die erste Anlaufstelle für die Recherche zu einem Thema, einer Dienstleistung oder einem Produkt sowie für die Suche nach spezifischen Informationen. Außerdem müssen sie nicht heruntergeladen werden, und da die Technologie fortschreitet, können mobile Websites genauso schnell und einfach zu bedienen sein wie native Apps.
Die Nutzung dieser neuen Technologien sollte es Ihnen ermöglichen, ein großartiges Online-Erlebnis zu bieten, das allen Nutzerbedürfnissen zu jeder Zeit gerecht wird. Das Beste von beidem: Progressive Web Apps (PWAs) sind Websites, die moderne Webtechnologien nutzen, um mobile Web-Apps zu erstellen, die denen von nativen Apps ähnlicher sind. Über eine Desktop-Verknüpfung können die Nutzer Funktionen nutzen, die bisher nur im Web möglich waren:
Offline-Zugriff auf Inhalte, Erhalt von Benachrichtigungen von bevorzugten Marken, Hinzufügen von Favoriten auf dem Desktop. Progressive Web Apps tragen dazu bei, das Engagement der Nutzer zu erhöhen und nahtlose Konversionen zu ermöglichen – ob für E-Commerce, Produktivität, Publishing, Spiele oder Medien. Während mobile Geräte eine wichtige Triebkraft der Technologie sind, sind Desktops ein wachsender Markt. Progressive Web Apps bieten eine nahtlose Reise für Mobil-, Tablet- und Desktop-Nutzer und spielen daher unabhängig von der Plattform eine Schlüsselrolle. Werfen wir einen genaueren Blick darauf, was Progressive Web Apps sind und wie sie funktionieren.
3. Was sind Progressive Web Apps?
Progressive Webanwendungen sind ein spannender und pragmatischer Weg, um Benutzern die bestmögliche Softwarefunktionalität zu bieten. Doch bevor wir auf das „Wie“ eingehen, sollten wir kurz über das „Warum“ sprechen. Eine kurze Geschichte der Softwarebereitstellung In der Vergangenheit wurde Software in Form von Anwendungen bereitgestellt. Sie kauften sie auf Disketten, CDs oder Speicherkarten, installierten sie und benutzten sie. Dieser mühsame Prozess führte dazu, dass die Software nur selten aktualisiert wurde.
Die Kosten für die Herstellung und den Versand von physischen Produkten waren hoch, und wenn ein Fehler gefunden wurde, war er nicht leicht zu beheben. Aber das Internet hat das geändert. Anstatt physische Medien zu bestellen, luden Sie einfach die benötigte Software herunter und installierten sie. Mit der Entwicklung von Browsern und Technologien wurde auch dieser Vorgang einfacher: Statt herunterzuladen und zu installieren, tippte man eine URL ein oder klickte auf einen Link. Endlich haben wir die richtige Software auf Abruf. Das Aufkommen von Smartphones hat die Dinge wieder vorangebracht. Das Format der Software im Browser war nicht ideal für den Formfaktor; die Eingabe von URLs auf einem mobilen Gerät war schwierig.
Die von uns mit Hilfe von Web-Technologien (HTML, CSS und JavaScript) erstellten Oberflächen wurden häufig für große Bildschirme und Mausinteraktion optimiert. Das Hauptproblem bestand jedoch darin, dass der Benutzer online sein musste, und eine mobile Verbindung war im Allgemeinen weniger zuverlässig als eine kabelgebundene Verbindung auf einem Desktop oder Laptop. Proprietäre Apps auf iOS und Android boten, was mobile Websites nicht konnten: Offline-Fähigkeit und eine für den Smartphone-Formfaktor optimierte Oberfläche. Also haben wir begonnen, Software und Multimedia über App-Shops anzubieten. Der aktuelle Bedarf ist gedeckt, aber es hat sich gezeigt, dass auch dies keine ideale Lösung ist.
Die Verteilung von Software an Endbenutzer über einen Shop ist für Entwickler bequem und sicherer, da ein spezieller Shop bösartige Software herausfiltern kann. Aber es bedeutet auch, dass man mehrere Versionen seiner eigenen Anwendungen für verschiedene Betriebssysteme und Formfaktoren erstellen muss, was sich nicht jeder leisten kann.
Die Entwickler sind für die Veröffentlichung und den Vertrieb der App auf die Shops angewiesen und müssen unter Umständen die Gewinne mit ihnen teilen. Der Shop-Anbieter kann eine Validierungsfrist für neue Versionen einführen, und einige Benutzer sind nicht glücklich mit mehrfachen Aktualisierungen großer Anwendungen, so dass die Veröffentlichung neuer Versionen schwieriger ist. Die Bereitstellung unserer Lösungen in geschlossenen Geschäften und in unserem eigenen Format ist auch mit vielen Annahmen verbunden.
App-Shops unterstützen nicht immer ältere Geräte, so dass sie darauf angewiesen sind, dass die Nutzer ein bestimmtes Betriebssystem oder die neueste Version des Geräts haben. Die Nutzer benötigen ausreichend Speicherplatz auf ihrem Gerät, und natürlich enthalten proprietäre Apps in der Regel eine Menge Daten, so dass sie schnelle und uneingeschränkte Verbindungen zum Herunterladen und Aktualisieren benötigen.
Von den Nutzern wird erwartet, dass sie eine Kreditkarte besitzen, um Einkäufe zu tätigen. Betrachtet man jedoch die Märkte mit den meisten neuen Nutzern, so wird deutlich, wie unrealistisch selbst diese Grundannahmen sind. Daher ist es von entscheidender Bedeutung, einen Weg zu finden, um Reaktionsfähigkeit und eine niedrige Einstiegshürde ins Internet mit einem optimierten Formfaktor und der Funktionalität nativer Anwendungen zu kombinieren.
Der Einstieg in Progressive Web Apps. Wie der Name schon sagt, handelt es sich bei Progressive Web Apps um Anwendungen, die Webtechnologien nutzen, um uns das Beste aus dem Web und unserer eigenen Umgebung zu bieten. Sie werden progressiv bereitgestellt, d. h. wir müssen sie nicht in verschiedenen Formaten erstellen: Wir bieten eine Basislösung als Website an und fügen nach und nach zusätzliche Funktionen hinzu. Progressive Enhancement wird schon seit einiger Zeit für die Bereitstellung von Webinhalten eingesetzt – weil es sinnvoll ist. Wir erwarten nicht, dass die Nutzer einen bestimmten Browser oder eine bestimmte Hardware haben, sondern wir wollen etwas anbieten, das für alle funktioniert. Modernere Systeme können neue und komplexere Funktionen enthalten, aber die Grundfunktionen sollten einfach funktionieren, ohne den Benutzer zu stören.
Progressive Web Apps werden über einen Link in einer E-Mail, einem Chat, Suchergebnissen, Beacon, QR-Code oder über Werbung bereitgestellt. Die PWA bietet eine für das Gerät und den Formfaktor geeignete Schnittstelle, ist sofort verfügbar und kann vom Benutzer vor dem Kauf ausprobiert werden. Während der Nutzer mit der Progressive Web App interagiert, können wir die Fähigkeiten seines Geräts testen und weitere Daten im Hintergrund herunterladen. Zu einem späteren Zeitpunkt können wir auch erweiterte Funktionen anbieten – Offline-Nutzung, Benachrichtigungen, wenn neue Daten verfügbar sind, und verschiedene andere Annehmlichkeiten. Anfangs schienen PWA-Beschreibungen für Entwickler komplex und einschüchternd zu sein.
Eine PWA muss sein:
- Progressiv – je nach den Möglichkeiten des Endgeräts werden bei späteren Besuchen zusätzliche Funktionen verfügbar.
- Responsive – eine an die Umgebung angepasste Schnittstelle, die eine reibungslose und unmittelbare Interaktion ermöglicht.
- Netzwerkunabhängig – PWA funktioniert sowohl offline als auch online und bei instabilen Verbindungen.
- Eine benutzerdefinierte Anwendung wie PWA sollte wie jede andere Anwendung laufen: im Vollbildmodus und in ihrem eigenen Kontext, ohne dass ein Browser erforderlich ist.
- Frische Updates erfolgen automatisch, ohne langwierigen Installationsprozess
- Sicher – Daten werden über sichere Kanäle übertragen.
- Auffindbar – PWA ist sowohl online als auch in App-Shops erhältlich.
- Re-engageable – PWA-Benachrichtigungen erfordern nicht, dass die PWA ständig geöffnet ist.
- Installierbar – die PWA wird mit allen anderen Anwendungen angezeigt (Startmenü, Symbol auf dem Startbildschirm, Suchergebnis der Anwendung auf dem Gerät…).
- Konnektivität – der Zugang erfolgt über einen einfachen Übermittlungsmechanismus wie z. B. einen Link.
Im Zuge der Weiterentwicklung von Progressive Web Apps begannen wir, eine besser verdauliche Definition dessen zu entwickeln, was eine gute PWA ausmacht. Eine der Definitionen, die Sie vielleicht schon gesehen haben, ist FIRE: Fast, Installable, Reliable and Engaging. Und wir haben es auf drei Eigenschaften reduziert, die Progressive Web Apps haben sollten:
- Schnell – der erste Kontakt mit der PWA-Oberfläche ist ein sofortiges, reaktionsschnelles und angenehmes Erlebnis.
- Installierbarkeit – Progressive Web Apps werden wie jede andere proprietäre Anwendung installiert und erscheint auf Ihrem Desktop oder Ihrer Arbeitsoberfläche, anstatt einen Browser zu erfordern.
- Attraktivität – PWA folgt den Best Practices für eine qualitativ hochwertige UX und Benutzererfahrung und funktioniert unabhängig von den Netzwerkbedingungen oder Gerätefähigkeiten. Die Funktionen mögen begrenzt sein, aber es gibt nie einen leeren Bildschirm, der den Benutzer auffordert, eine Verbindung zum Internet herzustellen oder eine Aktualisierung durchzuführen.
3.1 Die Technologie
Um dieses Ziel zu erreichen, waren viele neue Funktionen erforderlich – Funktionen, die jetzt in allen Browsern und Betriebssystemen verfügbar sind und auf dem Konsens der verschiedenen Unternehmen basieren, die sie unterstützen. Dies macht die Progressive Web Apps Entwicklung einfacher als je zuvor, und da der PWA-Technologie-Stack progressiv ist, kann es so einfach sein, PWA als Website in einem Browser-Tab auszuführen. Sie können aber auch mehr als das tun, indem Sie zwei neue Webstandards nutzen, um die Funktionalität zu erhöhen. Der erste Schritt besteht darin, eine Website zu erstellen, die Ihre Anwendung darstellt. Sie sollte den Prinzipien des adaptiven Webdesigns folgen und so klein wie möglich sein: Sie möchten, dass die erste Erfahrung schnell und reibungslos verläuft. Da Progressive Web Apps wie jede andere Website mit HTML, CSS und JavaScript geschrieben werden, ist es nicht erforderlich, eine Entwicklungsumgebung einzurichten.
Der zweite Schritt besteht darin, ein Webmanifest zu erstellen, eine JSON-Datei, die Ihre PWA beschreibt. Sie zeigt Ihnen den Namen der PWA an, ob sie im Hoch- oder Querformat geöffnet wird, welchen Zugriff sie auf das Gerät benötigt, ihre Beschreibung, Screenshots und Icons. Das Webmanifest teilt fähigen Browsern und Geräten mit, dass es sich um eine PWA handelt und definiert im Wesentlichen die Benutzeroberfläche. Wenn ein Nutzer auf einen Link zu einer PWA klickt, löst das Manifest die Möglichkeit aus, die Anwendung zur späteren Nutzung zu installieren.
Der dritte Schritt ist die Konfiguration von Service Worker, einer JavaScript-Lösung, die im Hintergrund läuft, wenn der Benutzer auf die PWA zugreift. So können Sie entscheiden, welche Daten auf dem Gerät gespeichert und welche aus dem Internet heruntergeladen werden sollen, wenn der Benutzer wieder eine Verbindung zum Internet herstellt. Außerdem können Sie entscheiden, wann und wie die Anwendung aktualisiert werden soll und welche Benachrichtigungen der Nutzer erhält.
Progressive Web Apps sind eine natürliche Weiterentwicklung der Art und Weise, wie wir Software verteilen und konsumieren. Da sie webbasiert sind, sind sie unabhängig von einem Betriebssystem oder einer Entwicklungsumgebung. Eine ansprechende, attraktive und ansprechende Website bietet Ihnen eine schnelle Grundlage – sie sorgt für Schnelligkeit und Reaktionsfähigkeit. Eine Manifestdatei macht Progressive Web Apps für die Installation verfügbar – sie teilt dem Nutzer mit, was er bekommt und wie er darauf zugreifen kann; und Service Worker machen sie zuverlässig und attraktiv – eine Lösung, die sich an Änderungen im Netzwerk anpasst und den Nutzer benachrichtigt
4. Wie man Progressive Web Apps erstellt
Progressive Web Apps zielen darauf ab, den Kern einer adaptiven Website aufzubauen und nach und nach Technologien zur Verbesserung der Interaktion hinzuzufügen. Das ist es, was sie fortschrittlich macht! Um Entwicklern zu helfen, ihre Fähigkeiten zu verbessern und diesen neuen Designansatz zu verstehen, hat Google einen Progressive-Web-Schulungskurs für Entwickler entwickelt. google.com/web/ilt/pwa Dieser Kurs zielt darauf ab:
- Webentwickler der Einstiegs- bis Mittelstufe.
- Webentwickler, die mit HTML und CSS vertraut sind und über bescheidene Kenntnisse in JavaScript verfügen.
- Entwickler, die Webanwendungen erstellen wollen, die für alle funktionieren. Um herauszufinden, wie der Kurs Ihnen helfen kann, sehen Sie sich hier das Einführungsvideo an.
4.1 Design für einen Wandel der Benutzererwartungen
Progressive Webanwendungen werden unweigerlich zu einer Veränderung der Nutzererwartungen führen. Die Benutzer können sich an „netzfreie“ Seiten wie Chrome T-Rex gewöhnen, aber in dem Moment, in dem Sie die Benutzeroberfläche des Browsers entfernen, erhalten sie ein höheres Maß an Funktionalität. Viele systemeigene Apps – wie z. B. Nachrichten-Apps – funktionieren unabhängig von einer Netzverbindung, so dass zuvor heruntergeladene Inhalte weiterhin abgerufen werden können. Es ist wichtig, dass alles den gleichen Standards entspricht, sonst wirkt das Erlebnis unvollständig.
Wie beginnen wir mit der Gestaltung von Erlebnissen für Progressive Web Apps? Es gibt einige grundlegende Überlegungen:
- Responsiveness – stellen Sie sicher, dass die PWA auf allen Geräten funktioniert: Handy, Tablet und Desktop.
- Think UI – erstellen Sie Mock-ups Ihrer Entwürfe mit und ohne Browser-Benutzeroberfläche, um mögliche Probleme mit dem Layout zu erkennen.
- Verschiedene Zustände – Denken Sie daran, für verschiedene Zustände zu planen: online, offline, instabiles Netzwerk, Herunterladen von Inhalten und Fehler beim Herunterladen von Inhalten.
- PWA Icon – Berücksichtigen Sie jedes einzelne Betriebssystem und stellen Sie für jedes ein Symbol bereit.
- Berechtigungen – Überlegen Sie, wann Sie den Benutzer auffordern, Progressive Web Apps zum Desktop hinzuzufügen. Ein zu früher Zeitpunkt könnte aufdringlich wirken, ein zu später, und sie würden sich vielleicht nicht mehr darum kümmern.
- Standort – Denken Sie daran, dies im Kontext zu tun, damit der Nutzer den Wert erkennen kann.
Design für verschiedene Zustände Auf den ersten Blick neigen wir dazu, Zustände als binär zu betrachten: offline oder online. Die Realität ist fließender: Die Offline-Phase kann nur ein paar Sekunden dauern, und es kann einen Übergangszeitraum geben, der als Li-Fi bekannt ist, wenn das Gerät glaubt, dass ein Netzwerk vorhanden ist, aber dieses Netzwerk hinterherhinkt.
Es gibt viele Gründe, warum ein Netz ausfallen kann, z. B:
- Schlechte Netzabdeckung.
- Stromausfälle oder schlechte Wetterbedingungen.
- „Tote Zonen“, in denen Gebäude oder Eisenbahntunnel die Netzverbindung blockieren.
- Zeitlich begrenzte Internetverbindung (z. B. auf einem Flughafen oder in einem Hotel).
- Kulturelle Praktiken, die einen eingeschränkten oder keinen Internetzugang zu bestimmten Zeiten oder Tagen erfordern.
4.2 Die Zeit des Nutzers in Anspruch nehmen
Einem anekdotischen Bericht zufolge hat der Flughafen Houston einen genialen Weg gefunden, um die langen Wartezeiten bei der Gepäckabholung zu umgehen. Um das Problem zu lösen, tauschten sie die Flugsteige für problematische Flüge aus. Die Kunden mussten zwar einen längeren Weg zurücklegen, verbrachten aber weniger Zeit mit Warten, was zu weniger Beschwerden führte. In ähnlicher Weise erfordert der „Offline-Zustand“ mehr als nur Fehlermeldungen oder Fortschrittsanzeigen. Ein durchdachtes Konzept zur Einbindung des Nutzers, während er auf die Rückkehr des Netzes wartet (was nur wenige Sekunden dauern kann), kann einen großen Einfluss darauf haben, wie reibungslos und angenehm der Prozess verläuft.
Die Preisvergleichsseite trivago beispielsweise ermöglicht es jetzt, ein Spiel zu spielen, wenn das Netz ausfällt, und hat herausgefunden, dass 67 % der Nutzer, deren Internetverbindung ausgefallen ist, trotzdem zurückkommen, um zu surfen. Das Wichtigste ist, dass der Ladezähler nicht einfach durch ein graues Rechteck ersetzt wird, sondern durch etwas Geeignetes. Skelettbildschirme sind eine gute Möglichkeit, dem Benutzer zu zeigen, dass etwas vor sich geht, und Vorlagen wie die unten stehende können die Wahrnehmung des Benutzers beeinflussen, indem sie ihn davon überzeugen, dass die Seiten schneller geladen werden. Aber sobald der Inhalt verfügbar ist, müssen wir ihn auch sehen: Wenn wir kritische Inhalte zuerst zeigen, ist sichergestellt, dass der Nutzer den Fortschritt sieht. Youtube zum Beispiel sorgt immer dafür, dass Videos zuerst geladen werden; alles andere ist zweitrangig:
Informieren Sie den Benutzer über Änderungen
Es kann sein, dass Sie einen Benutzer aus allen möglichen Gründen benachrichtigen müssen: Änderungen der Netzwerkverbindung, Aktualisierungen der Website oder des Inhalts, Preisänderungen in einem E-Commerce-Shop.
Metaphern verwenden, die eine Bedeutung vermitteln
Die Progressive Web Apps -Erfahrung ist relativ neu, daher ist es wichtig, dass die Terminologie und die Bilder den Nutzer informieren und nicht in die Irre führen. Die Icons selbst können problematisch sein, weil sie für verschiedene Menschen unterschiedliche Bedeutungen haben. So mag das Disketten-Symbol für „Speichern“ für die ältere Generation sinnvoll sein, für die jüngere Generation jedoch nicht. Auch das Menüsymbol „Hamburger“ ist dafür bekannt, dass es die Benutzer verwirrt. Überlegen Sie, wie Sie die Aktion, die Sie vermitteln wollen, demonstrieren können, anstatt dem Nutzer ein abstraktes Konzept zu präsentieren. Wenn Ihre Anwendungen zum Beispiel verlangen, dass der Benutzer wählen kann, welche Daten im Falle eines Netzwerkausfalls synchronisiert werden sollen, wäre es ein guter Anhaltspunkt, ihn zu bitten, die Daten zu speichern oder herunterzuladen.
4.3 Design für alle Benutzer
Die Entwicklung von Progressive Web Apps zeigt, dass das Unternehmen die Zeit seiner Nutzer in den Vordergrund stellt und schnellere Downloads und attraktivere Funktionen anbietet. Progressive PWA-Funktionen sollten daher das Erlebnis unterstreichen, anstatt es zu beeinträchtigen. Bevor Sie entscheiden, welche Funktionen hinzugefügt werden sollen, sollten Sie sich fragen, warum der Nutzer auf Ihre Website kommt: Eine gut gestaltete Progressive Web Apps sollte es dem Nutzer erleichtern, seine Ziele zu erreichen. Im Folgenden finden Sie bewährte PWA-UX-Verfahren:
Weniger ist mehr – Im Internet neigen die Menschen dazu, eher zu scannen als detailliert zu lesen, und ziehen es vor, sich nicht zu viele Informationen anzusehen. Wenn ein Artikel auf Ihrer Website eine niedrige Click-Through-Rate (CTR) hat, können Ihre Nutzer seinen Wert oder seine Relevanz möglicherweise nicht erkennen. Um dieses Problem zu lösen, sollten Sie Ihrer wichtigsten Handlungsaufforderung (CTA) Priorität einräumen und Elemente mit geringem Engagement entfernen, was wiederum das Gewicht Ihrer Seite verringert. Ein klares und einprägsames Wertversprechen an prominenter Stelle. Tipp: Vermeiden Sie automatische Crawler.
Seien Sie konsistent – stellen Sie sicher, dass Schriftarten, Medien und Bilder ein einheitliches Erscheinungsbild haben und zur allgemeinen Markenstrategie beitragen. Tipp: Extrahieren Sie benutzerdefinierte Schriftarten bei späteren Downloads und verwenden Sie nach Möglichkeit Geräteschriftarten.
Wahrgenommene Leistung – Zeigen Sie dem Benutzer, dass er Fortschritte macht, indem Sie Skelettbildschirme laden und Übergangsanimationen verwenden. Dies sollte dazu beitragen, die Absprungrate zu senken und die Nutzer zu ermutigen, zu warten, um ihre Reise fortzusetzen (oder zurückzukehren, wenn die Verbindung unterbrochen wurde). Navigation – Halten Sie die Navigation einfach, schnell und am unteren Rand des Ansichtsfensters, um es den Nutzern zu erleichtern, zu navigieren und bei Bedarf wieder zurückzukehren.
Push-Benachrichtigungen – Push-Benachrichtigungen können das Nutzer-Engagement erhöhen, haben aber mehr Wirkung, wenn sie zum richtigen Zeitpunkt gesendet werden. Zwingen Sie den Nutzer nicht dazu, sich auf der Startseite einzuloggen – stellen Sie sich vor, Sie gehen in ein Geschäft und der Verkäufer fragt Sie sofort, ob Sie in Zukunft aktualisiert werden möchten. Aber wenn Sie etwas anprobieren und jemand höflich fragt, ob Sie wissen möchten, wann es in der richtigen Größe erhältlich ist, werden Sie viel eher ja sagen. Wenn Push-Benachrichtigungen einen echten Mehrwert bieten, ist es viel wahrscheinlicher, dass die Nutzer sie abonnieren.
Reibungsverluste verringern – Verfahren so reibungslos wie möglich gestalten. Die Nutzer neigen dazu, sehr wenig Geduld aufzubringen, wenn sie Formulare ausfüllen und den Bestellvorgang abschließen müssen. Der häufigste Grund für den Abbruch eines Einkaufs auf einem mobilen Gerät sind Probleme bei der Eingabe persönlicher Daten“ (siehe Grafik unten). Tipp: Verwenden Sie Express-Checkout-Lösungen wie Autofill, Web-Payments und Onetap-Login, um alles abzubilden, was der Benutzer beim Checkout benötigt, und gleichzeitig die Informationen sicher zu halten.
Zugänglichkeit – Wenn wir sagen, dass eine Website zugänglich ist, meinen wir damit, dass der Inhalt für jeden zugänglich ist und von absolut jedem genutzt werden kann. Die Zugänglichkeitsrichtlinien für Webinhalte (Web Content Accessibility Guidelines, WCAG) 2.0 sind eine Reihe bewährter Verfahren, die von Experten zusammengestellt wurden, um genau zu definieren, was „Zugänglichkeit“ bedeutet und wie sie erreicht werden kann.
Die WCAG sind um vier Prinzipien herum organisiert, die oft als POUR bezeichnet werden:
- Wahrnehmbar: Können die Nutzer den Inhalt wahrnehmen? Nur weil etwas mit einem Sinn, z. B. dem Sehsinn, wahrgenommen wird, bedeutet das nicht, dass alle Nutzer es erleben können.
- Praktikabel: Können die Nutzer durch den Inhalt navigieren? Zum Beispiel kann die Hover-Interaktion nicht von jemandem gesteuert werden, der nicht weiß, wie man eine Maus oder einen Touchscreen benutzt.
- Verständlich: Können die Nutzer den Inhalt verstehen? Ist die Schnittstelle klar und einheitlich genug, um Verwirrung zu vermeiden?
- Zuverlässigkeit: Kann der Inhalt von einer Vielzahl von User Agents (Browsern) genutzt werden? Funktioniert es mit unterstützenden Technologien?
4.4 Nach der PWA-Einführung
Herzlichen Glückwunsch, dass Sie sich diese bahnbrechende Technologie zunutze machen und Ihre Systeme auf erstklassige Webschnittstellen aufrüsten. Sobald die Progressive Web Apps in Betrieb sind, ist es wichtig, die Nutzerinteraktionen zu verfolgen, die Auswirkungen zu überwachen und die UX nach Bedarf zu wiederholen. Es gibt verschiedene Tools und Methoden, die Ihnen dabei helfen:
Leistung – Sobald Progressive Web Apps in Betrieb sind, verbessert sich in der Regel die Geschwindigkeit der Website. Überwachen Sie die Anzeige des ersten Inhalts (First Content Display, FCP), die Zeit bis zur Interaktion (Time to Interaction, TTI) und den Geschwindigkeitsindex, indem Sie Ihr Progressive Web Apps -Erlebnis mit Lighthouse, Chrome User Experience Report und web PageTest.org ständig testen. Testen Sie die Leistung von PWA unter verschiedenen Netzwerkbedingungen und auf verschiedenen Hardware-Geräten.
Neu Akquise – Überprüfen Sie die Absprungrate, um festzustellen, ob die verbesserte Leistung, die Übergangsanimationen und die Skelettbildschirme die Nutzer tatsächlich auf der Seite halten.
Nutzerbindung – Bestätigen Sie, dass Progressive Web Apps -Funktionen wie Add to desktop und WebPush die Nutzerbindung erhöhen. Verwenden Sie für das Desktop Add-On Kennzahlen wie die Verweildauer auf der Website und wiederholte Besuche, um die Besucher, die vom Desktop aus starten, mit denen zu vergleichen, die über den Browser kommen. Verfolgen Sie bei web Push die CTRs für verschiedene Benachrichtigungen und verwenden Sie auch hier die Verweildauer auf der Website und wiederholte Besuche, um diejenigen, die Benachrichtigungen erhalten, mit denen zu vergleichen, die keine erhalten. Die Engagement-Metriken für jede Funktion sollten einen Trend zu einer insgesamt höheren Konversionsrate zeigen.
Konversionen – Für die meisten Unternehmen ist die Steigerung der Konversionen einer der Hauptgründe, warum sie in die Erstellung von Progressive Web Apps investiert haben, daher wollen sie wissen, dass es funktioniert. Einzelhändler können Konversionen nachverfolgen, indem sie den durchschnittlichen Bestellwert (AOV) und die Ausstiegsgeschwindigkeit auf der Seite verfolgen, auf der der Checkout-Trichter beginnt. Unternehmen, die Leads generieren, sollten sich auf die CTR des wichtigsten Call-to-Action-Buttons und die Lead-to-Close-Ratio (erfolgreiche Verkäufe / Anzahl der Leads * 100) konzentrieren. Reise-Websites können wiederkehrende Sitzungen (Kundenbindung) und kanalspezifischen Datenverkehr verfolgen (z. B. Steigt die Zahl der Likes in sozialen Medien?).
and then 