Les meilleurs expériences UX pour les progressive web app

Les applications progressive web app (PWA) ont modifié notre perception des applications Web. Ils ont ouvert la porte à davantage de possibilités pour créer des expériences UX riches sur le Web mobile

Les applications progressive web app (PWA) ont modifié notre perception des applications Web. Ils ont ouvert la porte à davantage de possibilités pour créer des expériences UX riches sur le Web mobile, grâce à plusieurs fonctionnalités récemment normalisées dans JavaScript et les navigateurs Web. Il incombe maintenant aux développeurs d’examiner de près la convivialité des PWA et de veiller à ce que l’ expérience utilisateur (UX) soit aussi performante que les applications natives.

Le design, en général, est meilleur quand c’est simple. Mais c’est particulièrement le cas pour la conception de sites Web mobiles, où l’une des premières choses à prendre en compte est la simplicité. On le répète depuis 10 ans, il y a beaucoup moins d’espace sur l’écran d’un téléphone portable 🙂 et c’est votre pouce qui fait le gros du travail pour naviguer ! C’est bête à dire, mais c’est l’essentiel dans la conception d’une bonne expérience utilisateur.

Autres points les utilisateurs de smartphones s’attendent maintenant à des performances transparentes. Des temps de chargement pratiquement immédiats, des transitions rapides et attrayantes et une fonctionnalité constante sans temps d’arrêt sont la règle pour les applications natives. C’est ce que vous devez offrir dans votre conception de la PWA.

Voici quelques recommandations :

Créer une icône distinctive

Pour donner aux utilisateurs le goût de l’application avant même qu’ils ne commencent à interagir avec elle, créez l’icône qui suit les instructions essentielles des applications natives. Elle doit être distinctive , suffisamment simple pour se démarquer sur différents arrière-plans et s’adapter facilement à divers éléments tels que les nuances.Les icônes transparents ne sont pas pris en charge. et comme la plupart des PWAs utilisent les icônes circulaires d’android, le rendu n’est pas terrible quand on passe sur iOS. Mais c’est possible regarder Twitter, c’est parfait sur iOS ! Prévoyez plusieurs versions.

Évitez les erreurs UX courantes du web

Concevoir des PWA est plus proche de la conception d’une application mobile native que d’une application Web réactive classique. Par conséquent, vous devez vous assurer de ne pas tomber dans les pièges que rencontrent les conceptions Web conventionnelles lorsqu’elles sont redessinées pour le mobile.

Sur les réseaux lents, il est très courant que les applications aient une transition d’écran bloqué. Cela peut être résolu en utilisant des écrans de squelette. Un squelette d’écran indique aux utilisateurs à quoi s’attendre et les guide vers l’endroit où ils doivent se concentrer ensuite. Si un écran de squelette est exécuté correctement, les utilisateurs ne réalisent même pas qu’ils le regardent, et l’expérience est toujours fluide.

Les développeurs PWA ont souvent des problèmes avec le retour tactile qui est insensible (Responsive Touch), car leur application ne possède pas le type d’intégration de plate-forme qu’une application native. Chez Google on recommande aux développeurs PWA de suivre un schéma de codage lors de la création d’onglets ou de boutons censés déclencher une réponse tactile afin que les expériences Web sur des appareils bas de gamme ne souffrent pas et restent réactives.

Problèmes de défilement
Les sites Web avec un défilement infini ou des flux volumineux deviennent souvent illisible lors du défilement, ce qui est vraiment agaçant pour les utilisateurs. Mais il existe un correctif : une liste virtualisée. Cela rend le défilement plus rapide en rendant les DOM nodes, qui sont visibles pour les utilisateurs en fonction de leur position de défilement actuelle. Twitter a utilisé cette technique pour créer son PWA.

Chez Twitter, ils ont mis en œuvre leur propre composant de liste virtualisé, elle rend uniquement le contenu visible dans la fenêtre, rend les éléments sur plusieurs images à l’aide de l’API requestAnimationFrame et conserve la position de défilement sur les écrans.

Les polices nuisent aux performances
Utilisez des polices des devices au lieu de polices personnalisées. Utilisez des images ou des SVG pour les en-têtes et les logos au lieu de polices personnalisées. Si vous utilisez des polices personnalisées, utilisez-les lors des chargements ultérieurs.

Gestes imprévisibles
Parfois, les utilisateurs se promènent inutilement sur un site sans savoir où cliquer. Cela peut arriver avec un menu hamburger ou avec des onglets pour la navigation. Vous pouvez résoudre ce problème en gardant la navigation simple en bas.

Clignotements bleus
Les flashes bleus ont été utilisés pour faire prendre conscience aux utilisateurs que leur frappe avait été reconnue et qu’ils devaient maintenant attendre. Mais lorsque vous créez des expériences Web qui réagissent rapidement aux entrées de l’utilisateur, les flashs bleus ne sont rien de moins que des distractions. Supprimez-les de votre CSS.

Utiliser l’interface utilisateur native sur le Web

– Polymer est une bibliothèque JavaScript qui vous aide à créer des applications Web progressives en créant des éléments HTML personnalisés et réutilisables.
– Material-UI est un ensemble de composants React permettant aux développeurs d’implémenter la conception matérielle de Google sur le Web. Il est recommandé de savoir comment React s’intègre dans le développement Web avant de commencer à utiliser Material-UI.
– Les composants material pour le Web fournissent aux développeurs des composants d’interface utilisateur modulaires et personnalisables

Par exemples les icônes sont disponible dans cinq thèmes et une gamme de tailles et de densités téléchargeables pour Android, iOS et les PWA.

Améliorer les performances de charge

Vous ne pouvez pas fournir des expériences Web riches et réactives sans travailler sur les performances de charge. Le Web mobile est trop lent. Au fil des ans, le Web est passé d’une plate-forme centrée sur les documents à une plate-forme d’applications de premier ordre. Grâce aux améliorations apportées à la plate-forme elle-même et aux outils et techniques que nous utilisons pour créer des applications, les utilisateurs peuvent faire pratiquement tout ce qu’ils peuvent sur le Web avec une application native. Dans le même temps, la majeure partie de notre informatique est passée de puissants ordinateurs de bureau dotés de connexions réseau rapides et fiables à des périphériques mobiles relativement sous-développés dotés de connexions souvent lentes, floues ou des deux. Cela est particulièrement vrai dans les régions émergentes.

À lire : Exploration de 2 philosophies pour la gestion du offline PWA

Malheureusement, les modèles que nous avons conçus pour concevoir et déployer des applications Web puissantes et riches en fonctionnalités à l’ère des ordinateurs de bureau génèrent généralement des applications qui prennent beaucoup trop de temps à charger sur les appareils mobiles – si longtemps que de nombreux utilisateurs abandonnent tout simplement.

Google a mis en place la patern PRPL, qui est un modèle permettant de structurer et de servir des applications Web progressives (PWA), en mettant l’accent sur les performances de livraison et de lancement d’applications. PRPL peut aider à fournir le code fonctionnel minimal nécessaire pour rendre l’itinéraire de vos utilisateurs en mode interactif, permettant de relever ce défi, d’être aussi bon qu’une app native.

Rendu côté serveur
Pour offrir une meilleure expérience utilisateur, Google recommande le rendu côté serveur pour les PWA, car l’utilisateur obtient le contenu plus rapidement, même lorsque JavaScript est désactivé ou en panne. En outre, les moteurs de recherche ont plus de facilité à l’indexer.

Utilisation des API

– L’une des frictions sur les applications c’est l’identification ! Et bien vous pouvez utiliser l’API de gestion des informations d’identification permettant d’accéder aux informations d’identification enregistrées dans le navigateur.
– Les clients du commerce électronique faisant leurs achats sur des appareils mobiles trouvent qu’il est vraiment frustrant de remplir de longs formulaires afin de pouvoir effectuer leurs achats. L’API de demande de paiement élimine les formulaires de commande et vous permet de créer une expérience plus sans friction pour les clients.

– L’API de géolocalisation vous permet de découvrir, avec le consentement de l’utilisateur, son emplacement. Vous pouvez utiliser cette fonctionnalité pour, par exemple, guider un utilisateur vers sa destination et géolocaliser le contenu créé par l’utilisateur; par exemple, marquer l’endroit où une photo a été prise.

Test de vos PWA avec Lighthouse

Google a lancé un outil de gestion des performances open source appelé Lighthouse, qui peut s’exécuter en tant qu’extension Chrome . Vous pouvez auditer votre application Web ou toute page Web avec Lighthouse et demandez à celle-ci de générer un rapport sur les performances de la page. De plus, vous pouvez obtenir un document de référence pour chaque audit, décrivant pourquoi l’audit est important et comment remédier aux audits ayant échoué. Regarder les deux vidéos, la première montre ce que fait Lighthouse, la deuxième est les annonces 2019 de l’outil.