Principales considérations d'interface utilisateur pour la meilleure conception de PWA

Si vous n'avez pas encore entendu parler de PWA, vous devriez d'abord vous plonger dans celui-ci : "Qu'est-ce que PWA ? Tout ce que vous devez savoir sur les applications Web progressives » . En bref, ce sont des applications Web conçues dans le but d'offrir des interfaces utilisateur et des expériences bien supérieures aux expériences offertes par les traditionnelles.

Dans cet article, nous suggérerons les principaux problèmes d'interface utilisateur (interface utilisateur) lors de la conception d'une PWA. Lisez la suite pour savoir comment vous pouvez avoir la meilleure interface utilisateur pour votre application Web progressive.

Polices système

Si vous voulez que les utilisateurs se sentent à l'aise lorsqu'ils utilisent votre application Web progressive (PWA), son style doit être légèrement amélioré pour correspondre à leur système d'exploitation (OS). Avant d'implémenter différents menus et boutons par plate-forme, vous pouvez simplement commencer avec la police préférée du système, pour iOS, Android, Windows séparément.

En d'autres termes, laissez le travail acharné de Microsoft (Segoe), Google (Roboto), Apple (San Francisco) ou même Mozilla (Fira Sans) vous faciliter la tâche en améliorant l'expérience des utilisateurs. Par conséquent, les polices système sont un élément que vous ne devriez jamais omettre de votre liste.

 /* iOS */
famille de polices : 'Helvetica Neue', Helvetica, Arial, sans-serif ;

/* Android */
famille de polices : 'RobotoRegular', 'Droid Sans', sans-serif ;

/* Téléphone Windows */
famille de polices : 'Segoe UI', Segoe, Tahoma, Genève, sans empattement ;

Icônes d'application

Il est vrai que les concepteurs d'applications mobiles accordent une attention particulière à la conception des icônes. Et puisque votre PWA (en l'ajoutant à l'écran d'accueil) sera assis à côté du reste des applications natives, il convient également de réfléchir à la conception de ses icônes.

Il y a une bonne raison pour cela. Les premières impressions sont toujours extrêmement importantes, et l'icône d'une application est la toute première impression qu'elle fait sur l'utilisateur. Pour expliquer, un utilisateur peut hésiter à appuyer sur une icône qui a une apparence différente parmi les icônes d'application natives sur son téléphone.

Pour que vos icônes PWA se fondent dans le reste des applications de votre appareil, elles doivent être flexibles pour s'adapter à différentes plates-formes - telles qu'Android, iOS et Windows - et s'adapter aux éléments stylistiques (sa forme, son apparence avec/sans arrière-plan ou de couleurs différentes, etc.). Un bon moyen d'y parvenir est de faire en sorte que la conception de l'icône de votre PWA corresponde - ou du moins se rapproche - du standard visuel des icônes d'application natives. Une source d'inspiration est les directives de conception matérielle de Google, les icônes matérielles de Google.

 Lecture recommandée : PWA vs application native : laquelle vous convient le mieux ?

Interactions tactiles

Les interactions tactiles doivent être très bien mises en œuvre, voire pas du tout.

Bien que ce ne soit pas vraiment impossible, il est trop difficile d'intégrer des interactions tactiles avancées, comme "glisser pour rejeter" ou "tirer pour actualiser". Bien que vous pensiez que de telles interactions impressionneront les utilisateurs, ce n'est le cas que si elles fonctionnent comme prévu. Si ce n'est pas le cas, vous êtes en difficulté.

Si vos PWA ont besoin d'interactions tactiles avancées, assurez-vous qu'elles fonctionnent bien sur de vrais appareils. Habituellement, cela signifie que vous avez trouvé une implémentation de cette fonctionnalité qui a été développée par quelqu'un d'autre avec beaucoup d'efforts, comme de brillantes vues réactives échangeables.

Pendant ce temps, vous pouvez entièrement éviter ce problème en modifiant la conception, de cette façon, il ne suggérera pas d'interactions tactiles avancées, par exemple, vous pouvez utiliser les onglets de navigation inférieurs à la place des onglets.

Contenu partageable

Dans le cas des Progressive Web Apps, souvent l'URL actuelle n'est pas facilement accessible ; vous devez donc vous assurer que les utilisateurs peuvent partager facilement ce qu'ils regardent. Un bouton de partage peut être intégré, ce qui permet aux utilisateurs de copier l'URL dans le presse-papiers afin qu'il puisse être partagé sur des sites de réseaux sociaux de premier plan.

Un petit conseil pour ce cas : si vous implémentez des boutons de partage social, assurez-vous de retarder le chargement du code JavaScript tiers jusqu'à ce que le contenu principal de la page soit chargé.

Retour tactile

Tout d'abord, les zones tactiles doivent donner un retour tactile . Lorsqu'un bouton ou une zone tactile est touché, l'utilisateur ne doit pas se demander si le toucher a été reconnu.

Visez à ce qu'il soit immédiatement clair que les robinets ont été reconnus. Par exemple, cela peut être fait en mettant en surbrillance la région touchée en gris (clair), en montrant une ondulation matérielle ou en faisant démarrer une transition de page immédiatement.

Exemple de retour tactile bien fait :

L'application Web Google I/O 2016 fournit une surbrillance grise immédiate lorsqu'une conversation est tapée et que la couleur de tapotement bleue par défaut est désactivée (par défaut, certains navigateurs affichent leur propre surbrillance lorsque des éléments sont tapés. Ce style par défaut n'est pas attrayant et peut entrer en conflit avec votre qualité visuelle de la marque).

Deuxièmement, toucher un élément pendant le défilement ne doit pas déclencher de retour tactile .

Chaque fois que vous implémentez le retour tactile, il est important qu'il ne se déclenche pas par erreur lorsque l'utilisateur ne fait que toucher un élément pour faire défiler la page.

Exemple de retour tactile donné au mauvais moment :

Une première version de la populaire bibliothèque Material-UI déclenchait des ondulations sur les éléments tactiles lorsqu'ils étaient touchés pendant les défilements.

Le problème a été résolu en annulant l'animation d'ondulation si l'emplacement tactile de l'utilisateur se déplaçait de plus de 6 pixels dans n'importe quelle direction au cours des premières centaines de millisecondes.

Conserver la position de défilement sur la page de liste précédente

Appuyer sur retour à partir d'une page de détail devrait conserver la position de défilement sur la page de liste précédente

Lorsque l'utilisateur appuie à partir d'un détail, la page doit conserver la position de défilement sur la page de liste précédente. Lorsqu'un utilisateur sélectionne des éléments dans une liste et affiche ses détails, le fait d'appuyer en arrière ne doit PAS les ramener en haut de la liste. L'objectif principal est que pendant que l'utilisateur tape, il doit être ramené à la page de liste "avec la même position de défilement" à laquelle il se trouvait avant d'appuyer sur l'élément.

Après tout, parcourir une liste de produits, d'articles ou d'autres éléments devient difficile lorsque le fait d'appuyer sur retour ramène l'utilisateur en haut de la liste.

Évidemment, lorsque vous rendez la navigation plus difficile pour les utilisateurs, ils ont tendance à ne plus revenir.

Évitez les conceptions trop "web-like"

La conception Web "classique" dépend fortement des liens dans le texte et des éléments statiques disponibles sur chaque page, tels qu'un en-tête et un pied de page. En fait, ces éléments de conception sont rarement trouvés dans les applications natives, donc afin de correspondre aux modèles mentaux de l'utilisateur, il est recommandé de les éviter et d'utiliser plutôt une conception de type application.

Par exemple, les liens doivent être utilisés avec parcimonie. Vous devez placer les boutons ou les régions tappables avec soin.

En outre, les pieds de page statiques contenant des liens de navigation et des informations de copyright doivent être évités. Inspirez-vous de la conception d'applications natives pour voir comment des informations similaires peuvent être déplacées dans un menu ou non incluses sur chaque page.

Thème sombre

Les thèmes sombres sont là pour rester et ils ne feront que s'améliorer.

Selon les développeurs Android, le thème sombre présente de nombreux avantages : Peut réduire considérablement la consommation d'énergie (selon la technologie d'écran de l'appareil). Améliore la visibilité pour les utilisateurs malvoyants et ceux qui sont sensibles à la lumière vive. Facilite l'utilisation d'un appareil dans un environnement peu éclairé.

Ceux qui peuvent trouver l'équilibre entre l'accessibilité de l'interface utilisateur sombre et la réponse émotive des couleurs éclatantes seront au top l'année prochaine. Il existe un guide de Google Material qui peut vous aider.

En conclusion

Les applications Web progressives sont le besoin de l'heure car elles permettent aux développeurs d'offrir une expérience Web intuitive aux utilisateurs sur leurs téléphones. En mettant simplement en œuvre ces recommandations, vous pouvez facilement offrir à vos utilisateurs de superbes interfaces et expériences de type application pendant qu'ils utilisent votre PWA.

SimiCart est là pour répondre à toutes vos questions et besoins liés aux PWA. Et en particulier pour les commerçants en ligne à la recherche d'une solution Magento PWA parfaite pour votre boutique en ligne de commerce électronique, nous proposons une solution complète et rentable pour vous et votre boutique.