Enregistrez, revoyez et mesurez les parcours utilisateur

Sofia Emelianova
Sofia Emelianova

Jetez un coup d'œil au nouveau panneau Enregistreur (fonctionnalité en preview) avec la vidéo ci-dessous.

Suivez ce tutoriel pour apprendre à enregistrer, relire et mesurer les parcours utilisateur à l'aide du panneau Enregistreur.

Pour découvrir comment partager et modifier les parcours utilisateur enregistrés, ainsi que la procédure à suivre, consultez la documentation de référence sur les fonctionnalités de l'Enregistreur.

Ouvrir le panneau "Enregistreur"

  1. Ouvrez les outils de développement.
  2. Cliquez sur Plus d'options   Plus. > Plus d'outils > Enregistreur.

    Enregistreur dans le menu.

    Vous pouvez également utiliser le menu de commandes pour ouvrir le panneau Enregistreur.

    Afficher la commande "Enregistreur" dans le menu de commandes.

Introduction

Nous allons utiliser cette page de démonstration pour la commande de café. Le paiement est un flux utilisateur courant entre les sites Web d'achat.

Dans les sections suivantes, nous vous expliquerons comment enregistrer, revoir et auditer le processus de paiement suivant avec le panneau Enregistreur:

  1. Ajouter un café au panier
  2. Ajoutez un autre café au panier.
  3. Accédez à la page du panier.
  4. Retirez un café du panier.
  5. Démarrez le processus de paiement.
  6. Saisissez les détails du mode de paiement.
  7. Procédez au paiement.

Enregistrer un flux utilisateur

  1. Ouvrez cette page de démonstration. Cliquez sur le bouton Démarrer un nouvel enregistrement pour commencer.
  2. Saisissez "café en caisse" dans la zone de texte Nom de l'enregistrement. Démarrez un nouvel enregistrement.
  3. Cliquez sur le bouton Démarrer un nouvel enregistrement. L'enregistrement démarre. Le message Enregistrement... s'affiche dans le panneau, ce qui indique que l'enregistrement est en cours. enregistrement en cours.
  4. Cliquez sur Cappuccino pour l'ajouter au panier.
  5. Cliquez sur Americano pour l'ajouter au panier. Notez que l'Enregistreur affiche les étapes que vous avez effectuées jusqu'à présent. Étapes du panneau "Enregistreur".
  6. Accédez à la page du panier, puis supprimez Americano.
  7. Cliquez sur le bouton Total: 19,00 $ pour lancer le processus de paiement.
  8. 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 les commandes et des messages promotionnels. Formulaire de détails du paiement.
  9. Cliquez sur le bouton Envoyer pour terminer le processus de paiement.
  10. Dans le panneau Enregistreur, cliquez sur le bouton Arrêter l'enregistrement Arrêter l'enregistrement. pour mettre fin à l'enregistrement.

Revoir un flux utilisateur

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

Vous pouvez voir la relecture du flux utilisateur sur la page. La progression de la relecture est également indiquée dans le panneau Enregistreur.

Si vous avez fait un mauvais clic pendant l'enregistrement ou si quelque chose ne fonctionne pas, vous pouvez déboguer votre flux utilisateur: ralentir la relecture, définir un point d'arrêt et l'exécuter étape par étape.

Simuler un réseau lent

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

Paramètres de relecture.

D'autres paramètres pourraient être acceptés à l'avenir. Indiquez-nous les paramètres de relecture que vous souhaitez utiliser.

Mesurer un flux utilisateur

Vous pouvez mesurer les performances d'un parcours utilisateur en cliquant sur le bouton Mesurer les performances. Par exemple, le paiement est un flux utilisateur essentiel d'un site Web d'achat. Le panneau Enregistreur vous permet d'enregistrer le processus de paiement une seule fois et de l'évaluer régulièrement.

Lorsque vous cliquez sur le bouton Mesurer les performances, vous déclenchez d'abord une nouvelle lecture du 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 dans le panneau Performances pour afficher les métriques Signaux Web et identifier des opportunités d'amélioration de l'expérience de navigation des utilisateurs.

Panneau "Performances".

Modifier les étapes

Examinons les options de base permettant de modifier les étapes d'un workflow enregistré.

Pour obtenir la liste complète des options de modification, consultez la section Modifier la procédure du document de référence sur les éléments géographiques.

Développer les étapes

Développez chaque étape pour afficher les détails de l'action. Par exemple, développez l'étape Cliquer sur l'élément "Cappuccino".

Dans le panneau "Enregistreur", l'élément Cappuccino a été développé pour afficher le type, la cible, les sélecteurs, ainsi que les décalages X et Y.

L'étape ci-dessus présente deux sélecteurs. Pour en savoir plus, consultez Comprendre le sélecteur d'enregistrement.

Lors de la nouvelle lecture du parcours utilisateur, l'Enregistreur tente d'interroger l'élément avec l'un des sélecteurs, dans l'ordre indiqué. Par exemple, si l'Enregistreur interroge avec succès l'élément avec le premier sélecteur, il ignore le deuxième sélecteur et passe à l'étape suivante.

Ajouter et supprimer des sélecteurs dans une étape

Vous pouvez ajouter ou supprimer n'importe quel sélecteur. Par exemple, vous pouvez supprimer le sélecteur 2, car seul aria/Cappuccino est suffisant dans ce cas. Passez la souris sur le sélecteur 2, puis cliquez sur - pour le supprimer.

Le panneau "Enregistreur" des outils de développement affiche une option permettant de supprimer un sélecteur.

Modifier des sélecteurs dans une étape

Vous pouvez également modifier le sélecteur. Par exemple, si vous voulez sélectionner Mocha au lieu de Cappuccino, vous pouvez:

  1. Remplacez la valeur du sélecteur par aria/Mocha.

    Modifiez un sélecteur.

    Vous pouvez également cliquer sur le bouton Select (Sélectionner) Bouton "Sélectionner", puis sur Mocha sur la page.

  2. Relancez le flux. Il devrait sélectionner Mocha au lieu de Cappuccino.

  3. Essayez de modifier d'autres propriétés d'étape, telles que type, target, value, etc.

Ajouter et supprimer des étapes

Vous pouvez également ajouter et supprimer des étapes. Cela peut être utile si vous souhaitez ajouter une étape ou supprimer une étape ajoutée par erreur. Au lieu de réenregistrer le flux utilisateur, vous pouvez simplement le modifier:

  1. Effectuez un clic droit sur l'étape à modifier ou cliquez sur l'icône à trois points Menu à trois points. située à côté.

    Menu déroulant d'une étape avec des options permettant d'ajouter une étape avant ou après une étape.

  2. Vous pouvez sélectionner Supprimer l'étape pour la supprimer. Par exemple, l'événement Défilement après l'étape Mocha n'est pas nécessaire.

  3. Imaginons que vous souhaitiez attendre que les neuf cafés s'affichent sur la page avant d'effectuer une quelconque étape. Dans le menu de l'étape Mocha, sélectionnez Add step before (Ajouter une étape avant). Une étape intitulée "Assert Element" a été ajoutée et peut désormais être modifiée.

  4. Dans Élément assertion, 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) La nouvelle étape pour le paiement du café a été mise à jour avec les détails susmentionnés.
  5. Revoir.Revoyez le parcours maintenant pour voir les modifications.

Étapes suivantes

Félicitations, vous avez terminé le tutoriel.

Pour découvrir d'autres fonctionnalités et workflows (importation et exportation, par exemple) liés à Enregistreur, consultez la documentation de référence sur les fonctionnalités de l'Enregistreur.