Home ┬╗ App ┬╗ 5 Tipps, um ein exzellentes UX f├╝r Progressive Web Apps zu sichern

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

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“.

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.

Progressive Web App von Instagram.
Progressive Web App von Instagram. Quelle: Instagram

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.

UX App Design. Einstudieren des Stils mit Computer und Skizzen.
Bord mit App Studien. Quelle: Unsplash

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.

 

E7 Ebook Apps Prototyps

 

#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.

Notizen machen, um eine App zu verbessern.
Notizen machen, um eine App zu verbessern. Quelle: Pixabay

#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.

Studieren des Stils mit Computer und Skizzen.
Studieren des Stils mit Computer und Skizzen. Quelle: Unsplash

#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.

Proyecto App

Stichwort
Ver├Âffentlicht in App