5 Tipps, um ein exzellentes UX für Progressive Web Apps zu sichern

So ziemlich jedes Mal, wenn ich eine App installieren muss, denke ich am Ende: „Mir geht der Speicher aus“, oder „mein Handy ist bereits mit Apps überfüllt“. Die Lösung sind progressive Web Apps.

Ich gehöre zu den Menschen, die trendige Apps ausprobieren müssen. Wenn nicht, bin ich immer auf der Suche nach Apps, die mir helfen, meine Arbeitsroutine zu bewältigen. Der wesentliche Punkt ist aber, dass das Installieren von Apps ziemlich ermüdend werden kann. 

Ehrlich gesagt, die meisten Leute installieren eine App und vergessen nach ein paar Tagen wieder, dass sie sie überhaupt heruntergeladen haben. Die App sitzt nur da und wartet darauf, wieder gelöscht zu werden.

Zum Glück haben Unternehmen für die Entwicklung mobiler Anwendungen „Progressive Web Apps“ erfunden. Wenn Sie noch nichts über Progressive Web Apps gehört haben, erklären wir im folgenden Abschnitt was sie sind:

 

Sind Sie auf der Suche nach Progressive-Web-App-Entwicklern? Wir können Sie mit den besten Experten verbinden!

 

Was sind Progressive Web Apps?

Progressive Web Apps sind Websites, die genau wie mobile Anwendungen aussehen und funktionieren. Somit wird den Nutzern die Mühe erspart, Apps zu installieren und auf ihrem Gerät zu verwalten.

Die Nutzern müssen nicht den App Store besuchen, die App finden und sie herunterladen, um sie nach ein paar mal benutzen wahrscheinlich wieder zu löschen. 

Mit Hilfe von Progressive Web Apps können Benutzer einfach ihren Browser auf ihrem Smartphone öffnen, den URL eingeben und werden zur PWA ihrer jeweiligen mobilen Anwendung weitergeleitet.

Hier sind einige weitere Vorteile von Progressive Web Apps:

1. Sind sehr reaktionsschnell
2. Laden sofort, auch ohne Internetverbindung
3. Bieten ein gutes Benutzererlebnis
4. Lösen das Problem der App Lücke

Aliexpress, Twitter und Forbes sind einige berühmte Beispiele für Websites, die außergewöhnliche PWAs entwickelt haben; ihre Web Apps haben ihnen geholfen, ihre Benutzerfreundlichkeit zu verbessern und ein größeres Publikum anzuziehen.

Nun, da wir das Konzept hinter Progressive Web Apps gründlich verstanden haben, lassen Sie uns einen Blick darauf werfen, wie ein Unternehmen für die Entwicklung mobiler Apps eine hervorragende User Experience in Progressive Web Apps sicherstellen kann.

 

Das könnte Sie interessieren: Progressive Web App-Entwicklung, um neue Geschäftsmöglichkeiten zu schaffen

 

#1 Optimieren Sie die Ladezeit und Performance

Wenn ein Nutzer Ihre Web App benutzt, sollte es sich nicht so anfühlen, als würde er den Browser benutzen. Vor allem sollte er nicht warten müssen, bis die Seite geladen ist.

Deswegen achten Sie darauf, dass die Seite auch ohne Internetverbindung gut laden kann. Google hat empfohlen, dem PRPL-Muster zu folgen, um Probleme zu reduzieren, die durch langsame Netzwerke verursacht werden:

Die PRPL-Architektur

PRPL ist das Muster für die Strukturierung von Websites und Apps, die auf Smartphones und anderen Geräten gut funktionieren, ohne dass sie durch unzuverlässige Netzwerkverbindungen behindert werden. PRPL steht für:

• Push kritischer Ressourcen für die initiale URL-Route
• Rendering der initialen Route
• Pre-Cache der verbleibenden Routen
• Lazy-Load & Erstellen der verbleibenden Routen bei Bedarf

Das PRPL-Muster verbessert die Reaktionszeit Ihrer Web App, insbesondere bei erstmaligen Interaktionen auf realen mobilen Geräten.

PRPL verbessert weiterhin die Effizienz von Progressive Web Apps, wenn neue Updates veröffentlicht werden und das Caching effektiver gestaltet wird.

Service Worker Caching

Service Worker sind ein erstaunliches Feature der Web Plattform, das Funktionalitäten wie URL-Response-Caching ermöglicht. Dies macht es möglich, dass Progressive Web Apps offline arbeiten können.

Service Worker ermöglichen es, Anfragen wie Skripte, CSS-Dateien, Seiten, Bilder usw. als Cache-Daten zu speichern. Wenn ein Benutzer eine Netzwerkanforderung stellt, durchläuft diese den Service Worker und es liegt an Ihnen zu entscheiden, ob Sie die zwischengespeicherten Antworten zurückgeben oder auf die Netzwerkanforderung reagieren.

Serverseitiges Rendering:

Google empfiehlt die Verwendung von serverseitigem Rendering für Progressive Web Apps. So erhält der Nutzer die Daten schneller, auch wenn das JavaScript deaktiviert ist.

 

Wenn ein Nutzer Ihre Progressive Web App benutzt, sollte es sich nicht so anfühlen, als würde er den Browser benutzen.

 

 

#2 Fokus auf die Nachbildung von Nativen Apps

Wenn Sie eine PWA entwerfen, denken Sie daran, dass sie im Aussehen und in der Benutzererfahrung einer nativen mobilen App ähnlich sein sollte. Warum? Weil der Aufbau eines Vertrautheitsgefühl ein wesentliches Merkmal von Progressiven Web Apps ist.

Nehmen wir das Beispiel von Instagram: Die Leute sind an das Layout, die Funktionalität und die Navigation der App gewöhnt. Wenn Instagram eine PWA entwerfen würde, die mehr wie die Website funktioniert und aussieht, warum würden die Leute Zeit in sie investieren wollen? Es würde ihren Erwartungen widersprechen und sie würden wahrscheinlich zur App zurückkehren.

Denken Sie daran, die folgenden Fehler zu vermeiden, wenn Sie Ihren Nutzern ein optimales Nutzererlebnis bieten wollen:

Scrolling-Probleme

Websites haben Probleme beim Scrollen, wie z. B. leere Seiten, die erscheinen, wenn Sie eine Website mit unendlichem Feed, wie z. B. Twitter, scrollen. Twitter löste das Problem der Scroll-Störungen durch die Verwendung von virtualisierten Listen.

Virtualisierte Listen machen den Teil des Inhalts sichtbar, der sich innerhalb des Blickwinkels des Benutzers befindet. So werden die Elemente schrittweise über verschiedene Frames mithilfe der requestAnimationFrame-API angezeigt, wobei die Scroll-Position über die Bildschirme hinweg erhalten bleibt.

 

Wenn Sie eine progressive Web App entwerfen, denken Sie daran, dass sie das Look-and-Feel einer nativen mobilen App haben sollte.

 

Übergangsprobleme im Netzwerk

Bei der Erstellung von PWAs müssen Sie darauf achten, dass Sie für das Erscheinungsbild der Geschwindigkeit entwerfen. Ihre Web App muss auf die Interaktion des Benutzers reagieren.

Übergangsprobleme in PWA’s treten auf, wenn der Benutzer auf eine Schaltfläche oder einen Link tippt und warten muss, bis er weitergeleitet wird. Er verschwendet Zeit damit auf den aktuellen Bildschirm zu starren, bevor er plötzlich zum neuen Bildschirm geführt wird.

Dies fühlt sich reaktionslos und störend an. Besser ist es, wenn sich eine PWA so anfühlt, als ob alle Informationen bereits im Telefon gespeichert sind und sofort abrufbar sind. Wenn Sie zum Beispiel Skeleton Screens in Ihre PWAs einbauen, dann können Sie eine reibungslose Interaktion sicherstellen.

Skeleton Screens sind im Grunde genommen leere Bildschirme, die dem Benutzer nach einer Interaktion angezeigt werden, wobei die Inhalte nach und nach in die Bildschirme geladen werden.

Ungewohnte Gesten

Machen Sie die Navigation zu einem Kinderspiel und halten Sie sie so nah wie möglich an der nativen App. Wie oben erwähnt, müssen Sie auf die Erwartungen des Nutzers aufbauen, indem Sie die Vertrautheit beibehalten.

#3 Vermeiden Sie Web Design Standards

Wenn Sie schon viel zu lange in der Webdesign-Branche arbeiten, müssen Sie tief durchatmen, neu anfangen und sich nur darauf konzentrieren, eine PWA zu entwerfen, die der nativen mobilen Anwendung ähnelt.

Verfolgen Sie den minimalistischen Ansatz, behalten Sie nur die notwendigen Informationen bei und filtern Sie die zusätzlichen Inhalte heraus. Das Interface so zu gestalten, dass es sowohl informativ als auch ansprechend ist, ist eine der Herausforderungen, denen sich App Entwickler stellen müssen.

Versuchen Sie außerdem, vertraute Gesten wie Tippen und Streichen zu verwenden und vermeiden Sie es, zu viele Links und Schaltflächen hinzuzufügen.

#4 Einbindung von Systemschriftarten

Der beste Weg, um Ihrer Progressiven Web App ein Gefühl von Vertrautheit zu verleihen, ist, sie so zu gestalten, dass sie zum Betriebssystem (OS) des Benutzers passt. Sie können damit beginnen, die Systemschriften für die einzelnen Betriebssysteme zu implementieren, iOS, Windows, Android, etc.

Mit der Hilfe von Google (Roboto), Apple (San Francisco), Microsoft (Segeo) und anderen können Sie die User Experience Ihrer App verbessern. Wenn Sie kreativ werden wollen, können Sie auch eigene Schriftarten in den Überschriften oder Logos verwenden.

#5 Optimieren Sie Inhaltsinteraktionen

Aufgrund der Platzbeschränkungen auf mobilen Geräten müssen Designer sehr vorsichtig sein, um sie Überladung von Inhalten zu verhindern. Platzbeschränkungen können zu unerwünschtem Verhalten führen, z. B. zum versehentlichen Öffnen eines Elements beim Scrollen durch eine Liste.

In Chrome zum Beispiel könnte sogar ein einfaches Antippen einiger Inhalte als Interaktion interpretiert werden. Es kann eine ziemlich ärgerliche Erfahrung für Benutzer sein, wenn Tippen auf „einfachen Inhalt“ zu Auswahlen wird und die Benutzer zu unerwünschten Ergebnissen umleitet.

Abgesehen davon kann die Gestaltung von „Auswahlschaltflächen“ und „interaktiven Inhalten“ als reiner Text auch zu einer sehr verwirrenden Benutzererfahrung führen. Sie können dies verhindern, indem Sie CSS verwenden, um Nicht-Inhaltselemente zu markieren.

Wenn Ihre PWA außerdem erweiterte Touch-Interaktionen erfordert, wie z. B. das Streichen zum Verlassen eines Navigationsmenüs, können Sie dies zwar ermöglichen, sollten aber sicherstellen, dass es auf realen Geräten fehlerfrei funktioniert.

Zusammenfassen

Mit Hilfe der richtigen Entwicklungs- und Designstrategien bieten Sie eine unvergessliche User Experience auf Ihren Progressiven Web Apps.

Progressive Web Apps werden sogar von Google mit offenen Armen empfangen, sie sind also definitiv das nächste große Ding, sowohl aus Anwender- als auch aus Unternehmenssicht.

Hoffentlich hat dieser Artikel einige Ihrer Fragen geklärt. Sollten noch weitere Fragen bestehen, kontaktieren Sie uns, wir helfen Ihnen gerne.