Die wichtigsten UI-Überlegungen für das beste PWA-Design

Wenn Sie noch nichts von PWA gehört haben, sollten Sie sich zuerst mit diesem beschäftigen: „Was ist PWA? Alles, was Sie über Progressive Web Apps wissen müssen“ . Kurz gesagt, es handelt sich um Webanwendungen, die mit der Absicht erstellt wurden, Benutzeroberflächen und Erfahrungen anzubieten, die den Erfahrungen herkömmlicher Anwendungen weit überlegen sind.

In diesem Artikel schlagen wir die wichtigsten Bedenken hinsichtlich der Benutzeroberfläche (UI) beim Entwerfen einer PWA vor. Lesen Sie weiter, um herauszufinden, wie Sie die beste Benutzeroberfläche für Ihre progressive Webanwendung haben können.

Systemschriften

Wenn Sie möchten, dass sich die Benutzer bei der Verwendung Ihrer Progressive Web App (PWA) wohlfühlen, sollte ihr Stil ein wenig verbessert werden, damit sie zu ihrem Betriebssystem (OS) passt. Bevor Sie verschiedene Menüs und Schaltflächen pro Plattform implementieren, können Sie einfach mit der bevorzugten Schriftart des Systems beginnen, für iOS, Android und Windows separat.

Mit anderen Worten, lassen Sie die harte Arbeit von Microsoft (Segoe), Google (Roboto), Apple (San Francisco) oder sogar Mozilla (Fira Sans) Ihre Arbeit erleichtern, indem Sie die Erfahrung für die Benutzer verbessern. Daher sind Systemschriftarten ein Element, das Sie niemals von Ihrer Liste streichen sollten.

 /* iOS */
Schriftfamilie: 'Helvetica Neue', Helvetica, Arial, serifenlos;

/* Android */
Schriftfamilie: 'RobotoRegular', 'Droid Sans', serifenlos;

/* Windows Phone */
Schriftfamilie: 'Segoe UI', Segoe, Tahoma, Geneva, serifenlos;

App-Symbole

Es stimmt, dass Designer mobiler Apps besonderes Augenmerk auf das Icon-Design legen. Und da Ihre PWA (indem Sie sie zum Startbildschirm hinzufügen) neben den übrigen nativen Apps platziert wird, sollten Sie sich auch Gedanken über das Icon-Design machen.

Dafür gibt es einen guten Grund. Der erste Eindruck ist immer extrem wichtig, und das Symbol einer App ist der allererste Eindruck, den sie beim Benutzer hinterlässt. Zur Erklärung: Ein Benutzer zögert möglicherweise, auf ein Symbol zu tippen, das anders aussieht als die nativen App-Symbole auf seinem Telefon.

Damit sich Ihre PWA-Symbole in die übrigen Apps Ihres Geräts einfügen, muss es flexibel sein, damit es in verschiedene Plattformen – wie Android, iOS und Windows – passt und stilistische Elemente (seine Form, wie es mit/ohne Hintergrund aussieht) aufnehmen kann oder in verschiedenen Farben usw.). Eine gute Möglichkeit, dies zu tun, besteht darin, das Design des Symbols Ihrer PWA an den visuellen Standard nativer App-Symbole anzupassen – oder ihm zumindest nahe zu kommen. Eine Inspirationsquelle sind Googles Material Design Guidelines Googles Material Icons.

 Empfohlene Lektüre: PWA vs. native App: Was passt besser zu Ihnen?

Berührungsinteraktionen

Touch-Interaktionen sollten sehr gut oder gar nicht umgesetzt werden.

Obwohl dies nicht wirklich unmöglich ist, ist es zu schwierig, erweiterte Touch-Interaktionen wie „zum Schließen wischen“ oder „zum Aktualisieren ziehen“ zu integrieren. Während Sie denken, dass solche Interaktionen die Benutzer begeistern werden, ist dies nur der Fall, wenn sie wie erwartet funktionieren. Wenn nicht, dann sind Sie in Schwierigkeiten.

Wenn Ihre PWAs erweiterte Touch-Interaktionen benötigen, stellen Sie sicher, dass sie auf echten Geräten gut funktionieren. Normalerweise bedeutet dies, dass Sie eine Implementierung dieser Funktion gefunden haben, die von jemand anderem mit großem Aufwand entwickelt wurde, wie beispielsweise brillante React-Swap-Views.

In der Zwischenzeit können Sie dieses Problem vollständig vermeiden, indem Sie das Design ändern. Auf diese Weise werden keine erweiterten Berührungsinteraktionen vorgeschlagen. Sie können beispielsweise die unteren Navigationsregisterkarten anstelle von Registerkarten verwenden.

Teilbarer Inhalt

Bei Progressive Web Apps ist die aktuelle URL oft nicht leicht zugänglich; Daher müssen Sie sicherstellen, dass die Benutzer das, was sie sehen, einfach teilen können. Ein Share-Button kann integriert werden, der es den Benutzern ermöglicht, die URL in die Zwischenablage zu kopieren, damit sie auf prominenten Social-Networking-Sites geteilt werden kann.

Ein kleiner Tipp für diesen Fall: Wenn Sie Social-Sharing-Buttons implementieren, verzögern Sie das Laden des Drittanbieter-JavaScripts, bis der primäre Inhalt der Seite geladen ist.

Feedback berühren

Erstens sollten berührbare Bereiche ein Berührungsfeedback geben . Wenn eine Schaltfläche oder ein antippbarer Bereich angetippt wird, sollte sich der Benutzer nicht fragen, ob das Antippen erkannt wurde.

Ziel ist es, sofort klar zu machen, dass die Abgriffe erkannt wurden. Dies kann beispielsweise dadurch erfolgen, dass der angetippte Bereich (hell)grau hervorgehoben wird, eine Materialwelligkeit angezeigt wird oder ein Seitenwechsel sofort beginnt.

Beispiel für gut gemachtes Touch-Feedback:

Die Google I/O 2016-Web-App bietet eine sofortige graue Hervorhebung, wenn auf einen Vortrag getippt wird, und die standardmäßige blaue Tap-Farbe ist deaktiviert (standardmäßig zeigen einige Browser ihre eigene Hervorhebung, wenn auf Elemente getippt wird. Dieses Standarddesign ist unattraktiv und kann mit Ihrem in Konflikt stehen Markenbildqualität).

Zweitens sollte das Berühren eines Elements beim Scrollen kein Berührungsfeedback auslösen .

Wann immer Sie das Touch-Feedback implementieren, ist es wichtig, dass es nicht fälschlicherweise ausgelöst wird, wenn der Benutzer nur ein Element berührt, um die Seite zu SCROLLEN.

Beispiel für Touch-Feedback zur falschen Zeit:

Eine frühe Version der beliebten Material-UI-Bibliothek löste Wellen auf berührbaren Elementen aus, wenn sie während des Scrollens berührt wurden.

Das Problem wurde behoben, indem die Ripple-Animation abgebrochen wurde, wenn sich die Berührungsposition des Benutzers innerhalb der ersten paar hundert Millisekunden um mehr als 6 Pixel in eine beliebige Richtung bewegte.

Scrollposition auf der vorherigen Listenseite beibehalten

Das Zurückdrücken von einer Detailseite sollte die Bildlaufposition auf der vorherigen Listenseite beibehalten

Wenn der Benutzer von einem Detail zurückdrückt, muss die Seite die Bildlaufposition auf der vorherigen Listenseite beibehalten. Wenn ein Benutzer Elemente aus einer Liste auswählt und ihre Details anzeigt, darf das Zurücktippen sie NICHT an den Anfang der Liste bringen. Das Hauptziel besteht darin, dass der Benutzer beim Tippen auf die Listenseite „mit derselben Scrollposition“ zurückgebracht wird, auf der er sich vor dem Drücken auf das Element befand.

Schließlich wird das Durchsuchen einer Liste von Produkten, Artikeln oder anderen Artikeln schwierig, wenn der Benutzer durch Drücken der Zurück-Taste wieder an den Anfang der Liste gelangt.

Wenn Sie den Benutzern die Navigation erschweren, neigen sie offensichtlich dazu, nicht wiederzukommen.

Vermeiden Sie übermäßig „webähnliches“ Design

„Klassisches“ Webdesign basiert stark auf Links im Text und auf jeder Seite verfügbaren statischen Elementen wie Kopf- und Fußzeile. Tatsächlich sind diese Designelemente selten in nativen Apps zu finden. Um den mentalen Modellen der Benutzer zu entsprechen, wird daher empfohlen, diese zu vermeiden und stattdessen mehr App-ähnliches Design zu verwenden.

Beispielsweise sollten Links sparsam eingesetzt werden. Sie sollten Schaltflächen oder antippbare Bereiche sorgfältig platzieren.

Außerdem sollten statische Seitenfüße vermieden werden, die Navigationslinks und Copyright-Informationen enthalten. Lassen Sie sich vom nativen App-Design inspirieren, um zu sehen, wie ähnliche Informationen in ein Menü verschoben oder anderweitig nicht auf jeder Seite eingefügt werden können.

Dunkles Thema

Dunkle Themen sind hier, um zu bleiben, und sie werden nur besser.

Laut Android-Entwicklern hat das dunkle Thema viele Vorteile : Kann den Stromverbrauch erheblich reduzieren (abhängig von der Bildschirmtechnologie des Geräts). Verbessert die Sichtbarkeit für Benutzer mit Sehbehinderung und Personen, die empfindlich auf helles Licht reagieren. Macht es jedem einfacher, ein Gerät in einer Umgebung mit wenig Licht zu verwenden.

Diejenigen, die die Balance zwischen der Zugänglichkeit einer dunklen Benutzeroberfläche und der emotionalen Reaktion greller Farben finden können, werden nächstes Jahr an der Spitze stehen. Es gibt eine Anleitung von Google Material, die Ihnen helfen kann.

Abschließend

Progressive Web Apps sind das Gebot der Stunde, da sie es Entwicklern ermöglichen, den Benutzern auf ihren Telefonen ein intuitives Weberlebnis zu bieten. Durch die einfache Umsetzung dieser Empfehlungen können Sie Ihren Benutzern ganz einfach großartige App-ähnliche Schnittstellen und Erfahrungen bereitstellen, während sie Ihre PWA verwenden.

SimiCart ist hier, um alle Ihre PWA-bezogenen Fragen und Bedürfnisse zu beantworten. Und insbesondere für Online-Händler, die eine rundum perfekte Magento PWA -Lösung für Ihren eCommerce-Webshop suchen, bieten wir eine vollständige und kostengünstige Lösung für Sie und Ihren Shop.