Enregistrer, revoir et évaluer les parcours utilisateur à l'aide d'outils pour les développeurs Chrome

1. Introduction

Pour enregistrer, revoir et évaluer les parcours utilisateur, utilisez le panneau "Enregistreur".

Nous vous invitons à regarder la vidéo ci-dessous pour découvrir ce nouveau panneau (fonctionnalité bêta).

Ce que vous allez apprendre

• Enregistrer un parcours utilisateur
• Revoir un parcours utilisateur
• Modifier un parcours utilisateur
• Évaluer un parcours utilisateur

Prérequis

• Un ordinateur qui fonctionne et un réseau Wi-Fi fiable
• Chrome 101 ou version ultérieure

2. Ouvrir le panneau "Enregistreur"

Ouvrez le panneau "Enregistreur" comme suit :

1. Accédez aux outils de développement.
2. Cliquez sur Autres options > Plus d'outils > Enregistreur. Vous pouvez également ouvrir le panneau Enregistreur à l'aide du menu de commandes.

3. Début

Nous allons utiliser cette page de démonstration pour commander du café. Le paiement est un parcours utilisateur courant sur les sites de vente en ligne.

Dans les prochaines sections, nous allons vous expliquer comment enregistrer, revoir et évaluer le parcours de paiement ci-dessous avec le panneau "Enregistreur" :

1. Ajouter un café au panier
2. Ajouter un autre café au panier
3. Accédez à la page du panier.
4. Supprimer un café du panier
5. Passer à l'étape de paiement
6. Saisir les informations de paiement
7. Payer

Ouvrir la page

4. Enregistrer un parcours utilisateur

1. Ouvrez la page de démonstration. Cliquez sur le bouton Démarrer un nouvel enregistrement pour commencer.
2. Saisissez "paiement du café" dans la zone de texte Nom de l'enregistrement.
3. Cliquez sur le bouton Démarrer un nouvel enregistrement. L'enregistrement est lancé. La mention Enregistrement… affichée dans le panneau indique que l'enregistrement est en cours.
4. Cliquez sur Cappuccino pour l'ajouter au panier.
5. Cliquez sur Americano pour l'ajouter au panier. Notez que les étapes que vous avez effectuées jusqu'à présent sont affichées dans l'Enregistreur.
6. Accédez à la page du panier.
7. Supprimez Americano du panier.
8. Cliquez sur le bouton Total : 19,00 $ pour passer à l'étape de paiement.
9. Dans le formulaire des détails du paiement, remplissez les zones de texte Nom et Adresse e-mail, puis cochez la case Je souhaite recevoir des notifications sur mes commandes et des messages promotionnels.
10. Cliquez sur le bouton Envoyer pour terminer l'étape de paiement.
11. Dans le panneau Enregistreur, cliquez sur le bouton Arrêter l'enregistrement pour mettre fin à l'enregistrement.

5. Revoir un parcours utilisateur

Après avoir enregistré un parcours utilisateur, vous pouvez le revoir en cliquant sur le bouton Revoir.

Vous pouvez le revoir sur la page, et plus en détail, dans le panneau Enregistreur.

Vous pouvez simuler une connexion réseau lente en configurant les paramètres de nouvelle lecture. Par exemple, développez la section Paramètres de nouvelle lecture, puis sélectionnez 3G lente dans le menu déroulant Réseau.

Vous pouvez également définir un délai d'inactivité plus long pour toutes les étapes.

D'autres paramètres pourraient être pris en charge à l'avenir. Indiquez-nous les paramètres dont vous souhaitez disposer pour revoir des parcours utilisateur.

6. Évaluer un parcours utilisateur

Vous pouvez évaluer les performances d'un parcours utilisateur en cliquant sur le bouton Évaluer les performances. Par exemple, le paiement est un parcours utilisateur crucial lors d'un achat en ligne. Le panneau Enregistreur vous permet d'enregistrer ce parcours une fois et de l'évaluer régulièrement.

En cliquant sur le bouton Évaluer les performances, vous reverrez d'abord le parcours utilisateur, puis la trace des performances dans le panneau Performances.

Découvrez comment analyser les performances d'exécution de votre page dans le panneau Performances. Vous pouvez cocher la case Signaux Web du panneau Performances pour afficher les métriques des signaux Web et identifier des opportunités pour améliorer l'expérience de navigation des utilisateurs.

7. Modifier un parcours utilisateur

Examinons les options disponibles pour modifier un parcours utilisateur.

Le menu déroulant en haut du panneau Enregistreur vous offre plusieurs options :

1. Ajouter un enregistrement : cliquez sur l'icône + pour en ajouter un nouveau.
2. Afficher tous les enregistrements : le menu déroulant affiche la liste des enregistrements sauvegardés. Sélectionnez l'option [nombre] enregistrement(s) pour développer et gérer cette liste.
3. Exporter un enregistrement : vous pouvez exporter le parcours utilisateur sous la forme d'un script Puppeteer pour personnaliser celui-ci davantage.
4. Supprimer un enregistrement : supprimez l'enregistrement sélectionné.

Vous pouvez également modifier le nom d'un enregistrement en cliquant sur le bouton de modification situé à côté du nom concerné.

8. Modifier les étapes

Voyons maintenant les options pour modifier les étapes d'un workflow.

Développer les étapes

1. Développez chaque étape pour en afficher le détail. Par exemple, développez l'étape Clic Élément "Cappuccino".
2. L'étape ci-dessus contient deux sélecteurs. Pour en savoir plus, consultez la section Priorité du sélecteur. Lorsque vous revoyez le parcours utilisateur, l'Enregistreur tente d'interroger l'élément avec l'un des sélecteurs, dans un ordre précis. Par exemple, si l'Enregistreur interroge avec succès l'élément avec le premier sélecteur, il ignore le second sélecteur et passe à l'étape suivante.
3. Vous pouvez ajouter ou supprimer n'importe quel sélecteur. Par exemple, vous pouvez supprimer le sélecteur 2, simplement parce que aria/Cappuccino suffit dans le cas présent. Pointez sur le sélecteur 2, puis cliquez sur - pour le supprimer.
4. Vous pouvez également modifier le sélecteur. Par exemple, si vous voulez sélectionner Mocha plutôt que Cappuccino, vous pouvez changer la valeur du sélecteur en la définissant sur aria/Mocha. Vous pouvez également cliquer sur le bouton Sélectionner, puis sur Mocha sur la page.
5. Regardez de nouveau le parcours (Mocha devrait être sélectionné à la place de Cappuccino).
6. Essayez de modifier d'autres propriétés d'étape telles que le type, la cible, la valeur, etc.

Ajouter et supprimer des étapes

Vous pouvez également ajouter et supprimer des étapes. Cela peut être utile si vous voulez ajouter une étape ou en supprimer une ajoutée par erreur. Au lieu de réenregistrer le parcours utilisateur, vous pouvez simplement le modifier. Cliquez sur le menu à trois points situé à côté de l'étape pour afficher les options correspondantes.

1. Par exemple, l'événement Défilement après l'étape Mocha n'est pas nécessaire. Vous pouvez sélectionner Supprimer l'étape pour la supprimer.
2. Imaginons que vous voulez attendre que les neuf cafés soient affichés sur la page avant d'effectuer une étape.
3. Dans le menu de l'étape Café, sélectionnez Ajouter une étape avant.
4. Dans Élément Assert, modifiez la nouvelle étape comme suit :
   • type : waitForElement
   • sélecteur 1 : .cup
   • opérateur : == (cliquez sur le bouton Ajouter un opérateur)
   • nombre : 9 (cliquez sur le bouton Ajouter un nombre)
5. Regardez de nouveau le parcours pour voir les modifications.

9. Félicitations

Bravo ! Vous avez terminé cet atelier de programmation.

Sachez que vous pouvez également personnaliser le sélecteur pour les enregistrements. Pour en savoir plus, consultez notre documentation.

Comment avez-vous trouvé cet atelier de programmation ?

Bof, ennuyeux. Excellent, je l'ai adoré !