6 Meilleures pratiques UX pour les PWA
La Progressive Web App (PWA) est un concept développé par Google en 2015. Il s’agit d’un site internet implémenté sur la base des standards du web : HTML, CSS et Javascript, qui est destiné à opérer comme une application native sur un appareil mobile. Cette application associe les avantages d’un site web et d’une application mobile, afin d’offrir au mobinaute une expérience mobile plus agréable.
Plusieurs pratiques UX sont recommandées pour concevoir une PWA performante qui permet au mobinaute d’interagir de manière intuitive avec l’application et d’atteindre son objectif de la manière la plus efficace possible. Découvrez dans ce qui suit 6 pratiques UX pertinentes à cet effet.
Qu’est ce qu’une PWA ?
La PWA réunit les points forts du site web et d’une application mobile native, dans le but de camoufler leurs points faibles et de façonner une expérience mobile plus adorable. Il s’agit d’une solution hybride qui assure un accès facile à travers une URL et une interaction souple dans le contexte d’une application mobile. De ce fait, la différence entre une PWA et une application native est insensiblement identifiée par l’utilisateur.
Plusieurs acteurs du web prennent ce tournant pour profiter des atouts des PWA. Tel est l’exemple de :
- Google : se penche sur l’application de ce paradigme sur ses sites web, comme Gmail et Google Drive.
- Aliexpress, l’incontournable site e-commerce chinois, a aussi développé sa PWA, à travers laquelle il a pu toucher de nouveaux prospects et augmenter son taux de conversion.
- Pinterest a tiré un avantage important de la mise en œuvre de sa PWA, qui lui a permis d’accroître le nombre et le taux d’engagement de ses abonnés.
Les caractéristiques d’une PWA
La PWA se distingue par les caractéristiques suivantes :
- Une utilisation plus facile par rapport à une application native. La PWA ne nécessite pas un téléchargement depuis un store et elle est accessible directement, depuis n’importe quel navigateur, via une URL sécurisée (grâce à l’intégration du protocole HTTPS).
- Une exécution plus fluide par rapport à un site internet, grâce à son temps de chargement plus rapide. Il convient de rappeler que le temps de chargement idéal d’un site ou d’une application web ne doit pas dépasser 3 secondes. Cela dans l’objectif d’éviter le désintérêt des utilisateurs et de garantir de les retenir plus longtemps sur le dispositif en question.
- Une accessibilité hors ligne, assurant au mobinaute une utilisation de l’application sans heurt, même en cas de coupure d’internet. C’est un facteur considérable pour augmenter la fidélisation des clients.
- Une meilleure interopérabilité permettant à la PWA de tourner sur n’importe quel système d’exploitation.
- Un fonctionnement à l’instar d’une application native (app-like), avec la possibilité d’accéder aux ressources de l’appareil mobile (caméra, géolocalisation, détecteur de mouvement, etc) et à certaines fonctionnalités natives (comme les notifications push et l’icône sur l’écran d’accueil). L’expérience commence par une connexion à une page web et finit par un fonctionnement à l’instar d’une application native, d’où l’aspect “progressive“ de la PWA.
- Une application mise à jour de manière permanente, permettant aux utilisateurs d’utiliser toujours la dernière version de la PWA.
- Une meilleure adaptabilité à toutes les résolutions des écrans: desktop, smartphone, tablette, etc, grâce à son responsive design.
- Une meilleure visibilité, puisqu’elle est accessible via une URL et indexée dans les moteurs de recherche. Ainsi, vous pouvez garantir le développement de votre trafic, grâce à un classement dans les premières pages du résultat de recherche mobile.
- Une expérience plaisante qui ressemble à celle d’une application mobile. La PWA garantit une amélioration des conversions et du niveau d’engagement des utilisateurs (grâce à ses atouts cités précédemment). Cela s’accompagne d’une augmentation du temps passé sur l’application et d’un meilleur positionnement dans les résultats de recherche mobile.
6 pratiques UX pour la conception d’une PWA
Adopter une démarche centrée sur l’utilisateur
La conception UX repose sur une démarche centrée sur l’utilisateur (User centered design : UCD) qui place le l’utilisateur au cœur du design. Cette approche permet de contourner ses besoins et de comprendre son modèle mental et comment il se comporte pour interagir avec l’application.
Les utilisateurs sont impliqués dès le début du projet de conception et ils sont présents tout au long de ce processus. De cette manière, ils participent minutieusement à l’évolution de l’application vers une expérience mobile personnalisée.
Le design centré utilisateur permet également d’éviter la perte de temps et de l’effort dans la conception d’interfaces web inadéquates au besoin désiré et dans leur mise à niveau par la suite.
A noter qu’il ne faut pas perdre de vue l’objectif essentiel de la conception et la valeur ajoutée que votre progressive web app doit assurer. Cela dispose d’une grande influence sur les décisions que vous désirez prendre pour mettre en œuvre votre stratégie de conception.
Avec un objectif bien précis et un public cible bien déterminé, les utilisateurs qualifiés se redirigent directement vers votre application. Inversement, vous pouvez obtenir un taux de rebond élevé.
Prototyper la mise en page de l’application
Il faut prendre le temps nécessaire pour prototyper la mise en page et le plan de navigation de votre PWA. Cela dans l’objectif d’éviter le gaspillage de temps sur des opérations de rectification ultérieures et de passer à la phase effective de développement avec des interfaces web validées par les utilisateurs ciblés.
Les wireframes, les mockups et les prototypes sont des représentations graphiques (plus ou moins fidèles) du rendu à quoi vos interfaces finales doivent ressembler. Ces maquettes permettent de définir la structure de l’application et son architecture d’information initiale.
Ces représentations permettent aussi de concevoir les chemins de navigation plus adéquats, qui s’alignent sur le modèle mental des utilisateurs. De plus, elles permettent de mettre en évidence les éléments les plus essentiels et les fonctionnalités les plus fondamentales pour exécuter efficacement les tâches envisagées.
D’un autre côté, ces maquettes sont utiles pour évaluer la pertinence des choix établis sur le côté visuel et fonctionnel. A cet effet, elles sont soumises à des tests utilisateurs itératifs, afin de les ajuster de manière évolutive, en se basant sur les feedbacks des utilisateurs, jusqu’à l’obtention du résultat souhaité.
Le test utilisateur (peut être effectué par le commanditaire de l’application ou l’utilisateur final) peut déboucher sur de nouvelles idées permettant de développer la performance de l’application et de procurer l’engouement des utilisateurs.
Miser sur une conception simple
La simplicité est au cœur de la conception d’une application mobile. Cela à cause de la taille réduite des appareils mobiles, qui impose la nécessité de créer un contenu minimaliste, pour afficher uniquement les informations les plus importantes.
Dans une app mobile, l’interface utilisateur renferme purement les composants UI les plus pertinents et qui sont indispensables pour réaliser l’action désirée. De ce fait, il faut reposer votre conception mobile sur le principe de minimalisme (less is more), afin d’éviter la distraction de l’utilisateur et de lui délivrer une réponse objective et directe à son besoin.
Le design minimaliste conteste l’encombrement visuel et prône l’utilisation de l’espace blanc. Cela dans le but d’aérer la page web et d’afficher un rendu épuré et clair. Ce qui assure par conséquent une compréhension facile du contenu en question. Chaque élément se comporte de manière autonome sur la même interface web, ce qui facilite le parcours de l’utilisateur et réduit le nombre d’actions à accomplir pour atteindre le but désiré.
La conception minimaliste garantit un meilleur équilibre et une meilleure cohérence entre les fonctionnalités à accomplir à chaque étape du parcours utilisateur. Ce qui donne lieu à une interaction plus fluide et une expérience mobile plus engageante.
Optimiser l’ergonomie de la PWA
La conception UX d’une PWA est orientée vers l’utilisateur et non vers le concepteur UX. A cet effet, elle doit prendre en compte les besoins et les caractéristiques du mobinaute et lui assurer une expérience mobile optimale. Notamment, votre UX designer doit prendre en considération ces points :
- Une meilleure accessibilité à travers des interfaces utilisateurs faciles à manipuler.
- Un plan de navigation méticuleusement pensé, avec des fils d’Ariane précis, permettant d’éviter de désorienter les mobinautes et de les voir fuir. Notamment, il faut concevoir un menu raffiné qui renferme un nombre réduit de sous-menus. Il faut aussi y insérer des mots clés stratégiques, afin d’optimiser le référencement naturel de votre application.
- Une interface ihm intuitive qui intègre certains composants UI standards des applications mobiles. Ces éléments servent de repères visuels familiers aux utilisateurs, qui leur permettent de naviguer de manière plus souple.
- Un mode sombre en simulation des nouvelles tendances et dans l’intention d’offrir aux utilisateurs une navigation plus confortable. Notamment, Android 10 et iOS 13 adoptent le dark mode pour optimiser l’économie d’énergie des batteries et offrir aux utilisateurs une UX moins agaçante visuellement, tout en limitant le danger de la lumière bleue.
- Une meilleure cohérence dans toutes les pages web de l’application, cela concerne par exemple la cohérence dans la forme de certains composants graphiques, le style typographique, les couleurs, etc.
La cohérence de design permet de concevoir des interfaces web parfaitement structurées et intuitives, qui garantissent de créer un lien purement naturel entre la cognition humaine et l’écran du terminal mobile.
La cohérence constitue un facteur éminent pour éviter la confusion de l’utilisateur et lui délivrer une expérience transparente. Ainsi, ce dernier peut naviguer en toute fluidité sur l’application sans avoir besoin d’apprendre, à chaque page, de nouvelles fonctionnalités ou d’explorer le nouvel emplacement de certains éléments, tels que la barre de recherche, l’emplacement d’un menu, etc.
Jouer sur l’effet WOW
La première impression éprouvée par l’utilisateur suite à la première interaction avec la PWA (effet WOW) est très décisive. Cette impression peut être la motivation qui incite l’utilisateur à rester plus longtemps sur l’application ou à la quitter immédiatement.
Dans ce sens, votre UX designer doit miser sur la conception d’interfaces utilisateur séduisantes, raffinées et attirantes visuellement. Cela dans le but de capter l’attention de l’usager en quelques minutes et de laisser une bonne impression dès les premières secondes.
Optimiser la phase d’onboarding
L’onboarding désigne la phase d’exploration des fonctionnalités de la progressive web app par l’utilisateur. Lors de cette étape, ce dernier apprend à manipuler l’application et les différents gestes qu’il doit effectuer pour s’en servir.
Idéalement, il faut mettre en avant une seule fonctionnalité par interface web. La suite des fonctionnalités sera découverte au fur et à mesure de l’expérimentation de l’application.
Il est aussi recommandé d’intégrer des options de personnalisation, afin de rendre le processus d’apprentissage plus intéressant et de baser l’expérience sur les préférences du mobinaute. Cette phase de découverte doit être légère, pour garantir un apprentissage plus rapide et plus efficace. Notamment, vous pouvez proposer à l’utilisateur d’expérimenter l’application sans une inscription obligatoire. Cela lui permet de parcourir l’appli de manière holistique et de constituer une idée claire de son contenu.
Par ailleurs, vous pouvez opter pour une inscription rapide et simplifiée, qui s’effectue à travers un formulaire épuré. Ce formulaire doit contenir le minimum de champs à remplir et il doit être affiché sur un seul écran. Ainsi, vous augmentez la rétention des nouveaux visiteurs et vous les emmenez à poursuivre leur expérience jusqu’au bout.
Mot de la fin
La Progressive Web App (PWA) réunit les avantages d’un site web et d’une application mobile pour composer une expérience utilisateur optimale qui ressemble à l’expérience mobile d’une application native.
La PWA gagne beaucoup d’intérêt grâce à la rapidité de son temps de chargement et la facilité de son usage. En effet, cette solution ne nécessite aucun téléchargement depuis un magasin d’applications mobiles et elle est facilement accessible par le biais d’une URL sécurisée. Ce qui permet d’indexer son contenu par les moteurs de recherche et d’acquérir un meilleur classement dans un contexte de Mobile First.
Dans l’objectif de créer une expérience mobile immersive, la conception d’une PWA doit suivre un ensemble de pratiques UX pertinentes. Notamment, il est recommandé d’adopter un design minimaliste qui accentue l’esthétique et l’efficacité de la PWA, grâce à un design simple et épuré.
Il est important aussi de soigner l’effet WOW de l’application, afin de gagner l’engouement de l’utilisateur dès les premières secondes. De plus, il est nécessaire de fluidifier le processus d’onboarding, afin de diminuer le taux de rebond et de renforcer la rétention des visiteurs.
by 
