Dans les modules précédents, vous avez appris à créer un formulaire, à aider les utilisateurs à éviter de saisir à nouveau des données et à valider les données de formulaire. Comment pouvez-vous maintenant vous assurer que le formulaire est utilisable ? Vous pouvez tester et analyser votre formulaire pour répondre à cette question.
Votre formulaire fonctionne-t-il sur d'autres appareils ?
Commencez par vérifier que votre formulaire fonctionne sur votre propre appareil. Cependant, vos utilisateurs peuvent utiliser de nombreux types d'appareils. Comment pouvez-vous vérifier si votre formulaire fonctionne avec d'autres appareils ?
Commencez par tester votre formulaire sur un ordinateur. Essayez ensuite d'utiliser uniquement le clavier. Ensuite, testez-la sur un téléphone. Vous avez maintenant testé votre formulaire avec différents modes de saisie (clavier, écran tactile et souris), différentes tailles d'écran, différents navigateurs et différents systèmes d'exploitation.
Avez-vous d'autres appareils sur lesquels vous pouvez effectuer des tests ? Testez votre formulaire sur chacun d'eux. Plus vous pouvez effectuer des tests sur différents appareils, navigateurs, versions de navigateur et systèmes d'exploitation, mieux c'est !
Vous pouvez également utiliser un service de test pour tester votre formulaire sur de nombreux navigateurs, versions de navigateur, appareils et systèmes d'exploitation différents. BrowserStack propose des comptes de test sans frais pour les projets Open Source afin de permettre les tests sur différents navigateurs, appareils et systèmes d'exploitation.
Comment pouvez-vous vérifier si votre formulaire fonctionne pour d'autres utilisateurs ?
Votre premier formulaire est prêt. Vous passez beaucoup de temps à vous assurer que cela fonctionne bien. Comment pouvez-vous vous assurer que votre formulaire peut être utilisé par tous les autres utilisateurs ? Dans un premier temps, vous pouvez demander à vos amis et collègues de remplir votre formulaire.
Asseyez-vous l'un à côté de l'autre ou partagez un écran. Vous pouvez ainsi voir comment ils interagissent avec votre formulaire. Regardez-les remplir le formulaire. Demandez-lui de dire à voix haute ce qu'il fait et s'il rencontre des problèmes. Une fois qu'il a terminé la tâche, posez-lui des questions. Les informations à remplir ont-elles été claires ? A-t-il rencontré des difficultés pour remplir le formulaire ? Avez-vous trouvé quelque chose qui n'était pas clair ? Ces questions vous aident à créer des formulaires encore meilleurs.
Comment mesurer les performances de votre formulaire ?
Vous avez confirmé que votre formulaire peut être utilisé par d'autres personnes. L'étape suivante consiste à mesurer les performances de votre formulaire. Des outils sans frais sont disponibles à cet effet. Examinons-en quelques-unes.
PageSpeed Insights (PSI)
Cet outil mesure les performances de votre site et vous donne des conseils pour l'améliorer.
Essayer : PageSpeed fournit un rapport sur les performances utilisant des données expérimentales et réelles. Un site rapide est le premier signe que votre formulaire est utilisable. Votre site n'est pas encore rapide ? PSI vous propose des recommandations sur la façon d'améliorer les performances.
Consultez à nouveau le rapport de votre site que vous avez déjà testé avec PSI. Vous voyez les informations concernant Core Web Vitals ? Il s'agit d'un récapitulatif si votre site répond aux critères des métriques Core Web Vitals. Les métriques Core Web Vitals vous aident à comprendre l'expérience des utilisateurs sur une page Web.
Phare
Lighthouse vous aide à identifier les problèmes de performances, d'optimisation du référencement (SEO), de bonnes pratiques et d'accessibilité.
Lighthouse peut être utilisé de différentes manières. Une option consiste à l'exécuter directement dans DevTools. Ouvrez l'URL contenant votre formulaire dans Chrome, ouvrez les outils de développement, passez à l'onglet Lighthouse et exécutez l'audit.
Les métriques de performances de PSI s'affichent. De plus, Lighthouse vérifie que votre site respecte bien le SEO, les bonnes pratiques et les problèmes d'accessibilité. Vous avez oublié d'associer un libellé à une commande de formulaire ? Lighthouse vous avertit et vous fournit un guide pour corriger le problème.
Outils d'identification des problèmes courants
Il existe de nombreux outils pour identifier les problèmes courants.
Vous pouvez, par exemple, utiliser l'extension de l'outil de dépannage des formulaires.
Il vous avertit en cas d'attributs autocomplete manquants, d'attributs non standards, d'étiquettes manquantes ou vides, etc.
Vous pouvez également utiliser un outil d'évaluation de l'accessibilité tel que WAVE ou axe. Ces outils vous signalent les libellés manquants, les connexions manquantes entre les libellés et les commandes de formulaire, les contrastes de couleurs insuffisants et de nombreux autres problèmes d'accessibilité.
Comment pouvez-vous surveiller l'expérience offerte par les formulaires ?
Le suivi de l'expérience utilisateur réelle de vos formulaires vous permet d'identifier rapidement les nouveaux problèmes. Voyons comment surveiller votre formulaire.
PSI
Pour surveiller l'expérience, vous pouvez de nouveau utiliser PSI. Vous pouvez utiliser l'API PageSpeed Insights pour créer votre propre outil de surveillance. Pour savoir comment procéder, consultez l'API PageSpeed Insights.
PSI inclut les données de l'ensemble de données du rapport d'expérience utilisateur Chrome (CrUX), s'ils sont disponibles pour l'URL donnée. De cette façon, vous pouvez également consulter les données des champs directement dans le rapport.
Phare
Lighthouse peut être utilisé comme outil de ligne de commande, en tant que module de nœud ou avec les outils de CI Lighthouse. La section Surveillance des performances avec l'intégration continue Lighthouse explique comment ajouter Lighthouse à un système d'intégration continue, tel que GitHub Actions.
Il existe de nombreux autres tools permettant de mesurer et de surveiller votre site. Certains sont disponibles en tant qu'outils Web, d'autres vous permettent d'exécuter l'audit sur votre ligne de commande, et d'autres proposent une API pour les intégrer à vos outils.
Analyser votre formulaire
Vous avez testé votre formulaire auprès d'utilisateurs réels, et vous avez appris à le mesurer et à le surveiller. Comment pouvez-vous collecter des statistiques sur vos utilisateurs et sur la façon dont ils interagissent avec votre formulaire ? Vous pouvez utiliser un outil d'analyse. Examinons l'une d'entre elles et son fonctionnement.
Analyse
Vous pouvez utiliser l'un des outils Google Analytics (GA). Une fois le code configuré, vous obtenez un extrait de code JavaScript que vous insérez dans chaque page de votre site. À partir de là, vous pouvez découvrir comment les internautes utilisent votre site.
Combien de personnes visitent la page qui contient votre formulaire ? Combien d'entre eux remplissent le formulaire et passent à la page suivante ? Les outils d'analyse vous permettent d'obtenir les réponses à ces questions.
Vous pouvez également configurer des rapports d'analyse plus avancés. Vous souhaitez savoir combien d'utilisateurs ont cliqué sur le bouton Envoyer ? Vous pouvez définir et intégrer des événements pour les analyser.
Une large gamme d'outils d'analyse est disponible. Certains sont minimalistes, d'autres offrent de nombreuses options d'individualisation. Essayez toute une gamme d'outils pour trouver celui qui répond le mieux à vos besoins.
Testez vos connaissances
Tester vos connaissances sur les formulaires de test
Qu'est-ce que les données réelles ?
Le RUM collecte des métriques depuis: