Un guide pratique des visites de produits dans les applications React

À propos de l'auteur

Blessing Krofegha est un ingénieur logiciel basé à Lagos au Nigeria, avec un désir ardent de contribuer à rendre le Web génial pour tous, en écrivant et en construisant…
En savoir plus sur
Bénédiction
…

As déclaré sur Appcues :

«Les visites de produits – parfois appelées procédures pas à pas du produit – présentent aux utilisateurs un nouveau produit et les aident à trouver leurs repères.»

Habituellement, lorsqu'il a besoin de présenter une nouvelle fonctionnalité ou une fonctionnalité d'interface utilisateur complexe dans une application Web, l'équipe de réussite client enverrait un e-mail de campagne à tous ses utilisateurs. Bien que ce soit un excellent moyen de créer une telle prise de conscience, certains utilisateurs peuvent ne pas avoir l'occasion de voir la fonctionnalité ajoutée; par conséquent, le but de l'e-mail serait vaincu.

Un meilleur moyen de sensibiliser l'utilisateur à une fonctionnalité particulière d'une application Web consiste à intégrer des conseils d'interface utilisateur concis et explicites, appelés visites de produits.

Guide des visites de produits utilisateurs à moments «a-ha» ou présenter des fonctionnalités de grande valeur qui sont sous-utilisées. Les visites de produits peuvent être des outils puissants pour présenter aux utilisateurs un nouveau produit et les aider à trouver leurs repères. Ils peuvent attirer l'attention sur les lancements de produits, les offres promotionnelles et les ventes de produits.

Mais lorsqu'elles sont mal faites, les visites de produits peuvent finir par se sentir comme un conducteur arrière. Et personne n'aime les pilotes sur la banquette arrière, n'est-ce pas?

Dans ce didacticiel, vous découvrirez ce qu'est une visite guidée de produit et les types de packages de visite guidée de produit dans l'écosystème React, ainsi que leurs avantages et inconvénients. [19659008] Si vous créez des produits destinés aux clients à l'aide de React, vous souhaiterez peut-être l'implémenter dans votre application React. À la fin, nous aurons construit une présentation du produit pour une interface utilisateur simple de panier en utilisant React Joyride .

Nous ne passerons pas par les bases de la syntaxe de React et JavaScript, mais vous n'avez pas être un expert dans l'une ou l'autre de ces langues à suivre.

Guide de présentation des produits

Les visites de produits sont un aspect délicat des applications Web, nécessitant une certaine expérience utilisateur pour obtenir des résultats. Je vous recommande de consulter les conseils d'Appcues pour les visites de produits. Voici quelques lignes directrices à prendre en compte:

Never Lecture

Mettre un grand nombre de visites sur une page Web est tentant. Mais les utilisateurs n'aiment généralement pas les longs tutoriels d'introduction. Ils deviennent anxieux lorsqu'ils doivent ingérer beaucoup d'informations avant de pouvoir utiliser une fonctionnalité de l'application.

Break It Down

N'enseignez pas tout. Concentrez-vous sur une seule fonctionnalité et créez une visite en deux à trois étapes pour la présenter. Montrez de nombreuses petites visites, plutôt qu'une seule longue tournée. Donnez la priorité à leur séquence.

Valeur ajoutée

Aimez-vous faire votre propre visite? Et vos coéquipiers? Présentez la visite de manière à ce que les utilisateurs comprennent. Présentez la valeur plutôt que les histoires.

Maintenant que nous connaissons la valeur des visites de produits et que nous avons vu quelques conseils pour les construire, couvrons certaines bibliothèques React pour des visites de produits et apprenons à les utiliser.

Il n'y en a que quelques-unes. Bibliothèques basées sur React pour la mise en œuvre de visites. Deux des plus populaires sont React Tour et React Joyride .

React Tour

React Tour compte environ 1 600 étoiles sur GitHub et est actif développé. Le meilleur cas d'utilisation de React Tour est une simple visite du produit dans laquelle peu de personnalisation est nécessaire. Une démo est disponible.

Fonctionnement

Avec React Tour, vous transmettez le sélecteur className et le contenu de chaque étape au composant. La bibliothèque rendra l'interface utilisateur de la visite en fonction d'un clic sur un bouton, ou après avoir monté le composant. C'est simple pour les pages statiques et les interfaces utilisateur:

  const steps = [
  {
    selector: '.first-tour',
    content: 'This is the content for the first tour.',
  },
  {
    selector: '.second-tour',
    content: 'Here is the content for the second Tour.',
  }
  // ...
]

Avantages

• React Tour est le meilleur pour les visites nécessitant peu de personnalisation.
• Cela fonctionne bien pour le contenu statique et pour le contenu dynamique dont les étiquettes de sélecteur existent toujours dans l'interface utilisateur.
• Les fans de styled-components pourraient trouver cela intéressant car il a une forte dépendance vis-à-vis des styled-components.

Inconvénients

• Si votre projet ne dépend pas des styled-components, vous ne trouverez peut-être pas facile à mettre en œuvre.
• Votre créativité sera limitée car elle ne prend pas en charge la personnalisation.

React Joyride

L'autre bibliothèque principale de présentation de produits est React Joyride qui en contient environ 3 100 étoiles sur GitHub et est également activement maintenu.

Comment ça marche

Nous passons le className comme cible et le contenu. L'État stocke la tournée. Le composant Joyride utilise les étapes comme accessoires.

  état = {
    étapes: [
      {
        target: '.my-first-step',
        content: 'This is my awesome feature!',
      },
      {
        target: '.my-other-step',
        content: 'This is another awesome feature!',
      },
      ...
    ]
  };

  render () {
    const {étapes} = this.state;

    revenir (
      

         ...
      
    );
  }
}

Avantages

• L'intégration de React Joyride dans une application Web est moins rigide qu'avec React Tour et ne dépend pas des autres bibliothèques.
• Les événements et les actions sont rendus disponibles, ce qui favorise la personnalisation.
• C'est fréquemment améliorées.

Inconvénients

• L'interface utilisateur n'est pas aussi élégante que celle de React Tour.

Pourquoi React Joyride?

Les visites de produits, en particulier pour les très grosses applications Web, nécessitent une personnalisation et cela distingue React Joyride de React Tour. L'exemple de projet que nous allons créer exige de la créativité et de la personnalisation – par conséquent, nous allons utiliser React Joyride.

Construire une visite simple du produit

Tout d'abord, nous allons créer une simple visite React en utilisant les accessoires dont nous disposons dans React Joyride. Ensuite, nous utiliserons le hook useReducer pour automatiser les processus de la visite.

Clonez la branche " standard-tour " dans le référentiel GitHub, ou utilisez la page Web de votre

Installez les packages en exécutant npm install .

Pour démarrer l'application, exécutez npm run start . [19659008] Nous allons couvrir les étapes suivantes:

• définir les étapes de la visite;
• activer une option de saut à chaque étape;
• modifier les étiquettes de texte sur les boutons et les liens;
• personnaliser les styles comme les couleurs des boutons et alignement du texte.

Ensuite, nous ajouterons des fonctionnalités personnalisées:

• démarrer automatiquement la visite;
• démarrer la visite manuellement (c'est-à-dire avec un lien ou un clic sur un bouton);
• masquer la balise clignotante.

] Les accessoires de React Joyride nous permettent d'exécuter certaines fonctionnalités de base.

Pour ce didacticiel, nous allons créer une présentation produit de l'interface utilisateur illustrée ci-dessous: [19659069] L'interface utilisateur Web. ( Grand aperçu )

Définir les étapes de la visite

Pour commencer, assurez-vous que vous ciblez le classNames particulier qui contiendra le contenu de la visite sur la page – c'est-à-dire selon que vous utiliserez votre interface utilisateur au lieu de celle du panier.

Dans le dossier component créez un fichier Tour.js et collez-y le code suivant. Assurez-vous également que la cible classNames existe dans votre feuille de style. Tout au long de cet article, nous allons ajuster le composant Tour.js pour l'adapter à la tâche à accomplir.

 import React de "react";
importer JoyRide depuis "react-joyride";
const TOUR_STEPS = [
  {
    target: ".tour-logo",
    content: "This is our tour’s logo",
  },
  {
    target: ".tour-cart",
    content:
      "View the cart you’ve added here",
  },
  {
    target: ".tour-contact",
    content: "Contact the developer",
  },
  {
    target: ".tour-policy",
    content: "We accept returns after 14 days max",
  },
];

Nous avons simplement défini les étapes de notre visite en ciblant les classNames qui formeront le fondement de notre contenu (le texte). La propriété content est l'endroit où nous définissons le texte que nous voulons voir lorsque la visite commence.

Activer l'option Ignorer à chaque étape

Une option Ignorer est importante dans les cas où un utilisateur n'est pas intéressé par une visite particulière. Nous pouvons ajouter cette fonctionnalité en définissant la prop showSkipButton sur true ce qui sautera les étapes restantes. De plus, l'accessoire continu est pratique lorsque nous devons afficher le bouton Suivant à chaque étape.

  const Tour = () => {
  revenir (
    <>
      
    >
  );
};

Modifier les étiquettes de texte sur les boutons et les liens

Pour modifier les étiquettes de texte sur les boutons ou les liens, nous utiliserons l'accessoire locale . L'accessoire locale a deux objets, last et skip . Nous avons spécifié notre dernière tournée comme End tour tandis que skip est la Close tour .

  const Tour = () = > {
  revenir (
    <>
      
    >
  );
};

Personnaliser les styles, comme les couleurs des boutons et l'alignement du texte

La couleur par défaut des boutons est le rouge et l'alignement du texte est toujours réglé à droite. Appliquons des styles personnalisés pour changer les couleurs des boutons et aligner correctement le texte.

Nous voyons dans notre code que l’accessoire styles est un objet. Il a d'autres objets avec des valeurs uniques, notamment:

• tooltipContainer
  Sa clé est textAlign et sa valeur est left .
• buttonSuivant
  Sa clé est backgroundColor et sa valeur est green .
• buttonBack
  Sa clé est marginRight et sa valeur est 10px .
• locale
  Ses clés sont last et skip et ses valeurs sont End Tour et Close Tour respectivement.

 const Tour = () => {
  revenir (
    <>
      
    >
  );
};

La bibliothèque expose quelques accessoires à utiliser sur nos éléments à la place des éléments par défaut, dont certains sont:

useReducer

Nous avons vu comment créer une présentation produit et comment la personnaliser à l'aide des divers accessoires de Joyride.

Le problème avec les accessoires, cependant, à mesure que votre application Web évolue et que vous avez besoin de plus de visites, vous ne voulez pas simplement ajouter des étapes et leur transmettre des accessoires. Vous voulez être en mesure d'automatiser le processus en vous assurant que le processus de gestion des tournées est contrôlé par des fonctions, et pas simplement par accessoires . Par conséquent, nous utiliserons useReducer pour réorganiser le processus de construction des visites.

Dans ce segment, nous allons prendre le contrôle de la visite en utilisant les actions et events mis à disposition par la bibliothèque via une fonction de rappel.

Pour rendre ce processus moins intimidant, nous allons le décomposer en étapes, ce qui nous permettra de construire la visite en morceaux.

Le complet le code source est disponible, mais je vous conseille de suivre ce guide, pour comprendre son fonctionnement. Toutes nos étapes seront effectuées dans le fichier Tour.js dans le dossier components .

Define the Steps

 import React from "react";
importer JoyRide depuis "react-joyride";
const TOUR_STEPS = [
  {
    target: ".tour-logo",
    content: "This is our tour’s logo.",
  },
  {
    target: ".tour-cart",
    content:
      "View the cart you’ve added here",
  },
  {
    target: ".tour-contact",
    content: "Contact the developer",
  },
  {
    target: ".tour-policy",
    content: "We accept returns after 14 days max",
  },
];

Dans cette première étape, nous définissons nos étapes en ciblant les classNames appropriés et en définissant notre contenu (texte).

Define the Initial State

  const INITIAL_STATE = {
  exécuter: faux,
  continu: vrai,
  chargement: faux,
  stepIndex: 0, // Rendre le composant contrôlé
  étapes: TOUR_STEPS,
  key: new Date (), // Ce champ fait le rendu de la visite lorsque la visite est redémarrée
};

Dans cette étape, nous définissons quelques états importants notamment:

• Réglez le champ run sur false pour garantir que la visite ne fonctionne pas. t démarrer automatiquement.
• Réglez l'accessoire continu sur true car nous voulons afficher le bouton.
• stepIndex est le numéro d'index, qui est défini sur 0 .
• Le champ steps est défini sur le TOUR_STEPS que nous avons déclaré à l'étape 1.
• La touche rend le tour de nouveau rendu lorsque le tour est redémarré.

Gérer l'état avec le réducteur

  const reducer = (state = INITIAL_STATE, action) => {
  commutateur (action.type) {
    // démarrer la visite
    cas "START":
      return {... state, run: true};
    // Réinitialiser à la 0ème étape
    cas "RESET":
      return {... état, stepIndex: 0};
    // Arrête la tournée
    cas "STOP":
      return {... state, run: false};
    // Mettre à jour les étapes du clic sur le bouton suivant / précédent
    case "NEXT_OR_PREV":
      return {... état, ... action.payload};
    // Redémarrez la visite - réinitialisez passez à la 1ère étape, redémarrez créer une nouvelle tournée
    cas "RESTART":
      revenir {
        ...Etat,
        stepIndex: 0,
        run: vrai,
        chargement: faux,
        clé: nouvelle date ()
      };
    défaut:
      état de retour;
  }
};

Dans cette étape, en utilisant une instruction switch lorsque case est START nous renvoyons l'état et définissons le champ run sur vrai . De plus, lorsque le cas est RESET nous retournons l'état et définissons stepIndex sur 0 . Ensuite, lorsque case est STOP nous définissons le champ run sur false ce qui arrêtera la visite. Enfin, lorsque case est RESET nous redémarrons la tournée et créons une nouvelle tournée.

Selon les événements ( start , stop et reset ), nous avons réparti l'état approprié pour gérer la visite.

Écoutez les changements de rappel et les changements d'état de répartition

  import JoyRide, { ACTIONS, EVENEMENTS, STATUS} de "react-joyride";
const callback = data => {
    const {action, index, type, statut} = données;
    si (action === ACTIONS.CLOSE
                ||
       (statut === STATUS.SKIPPED && tourState.run)
                ||
      statut === STATUS.FINISHED
    ) {
      expédition ({type: "STOP"});
    } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) {
      envoi({
        tapez: "NEXT_OR_PREV",
        charge utile: {stepIndex: index + (action === ACTIONS.PREV? -1: 1)}
      });
    }
};

En utilisant les étiquettes EVENTS ACTIONS et STATUS proposées par React Joyride, nous écoutons les événements de clic puis effectuons des opérations conditionnelles. [19659008] Dans cette étape, lorsque le bouton Fermer ou Ignorer est cliqué, nous fermons la visite. Sinon, si le bouton suivant ou précédent est cliqué, nous vérifions si l'élément cible est actif sur la page. Si l'élément cible est actif, nous passons à cette étape. Sinon, nous trouvons la cible de l'étape suivante et l'itérons.

Démarrage automatique de la visite avec useEffect

 useEffect (() => {
  if (! localStorage.getItem ("tour") {
    expédition ({type: "START"});
  }
}, []);

Dans cette étape, la visite est lancée automatiquement lorsque la page se charge ou lorsque le composant est monté, à l'aide du crochet useEffect .

Déclenchez le bouton de démarrage

 const startTour = () => {
  expédition ({type: "RESTART"});
};

La fonction de cette dernière étape démarre le tour lorsque le bouton start est cliqué, juste au cas où l'utilisateur souhaiterait revoir le tour. À l'heure actuelle, notre application est configurée pour que la visite guidée s'affiche chaque fois que l'utilisateur actualise la page.

Voici le code final de la fonctionnalité de visite dans Tour.js :

 import React , {useReducer, useEffect} de "react";
importer JoyRide, {ACTIONS, EVENTS, STATUS} de "react-joyride";

// Définir les étapes
const TOUR_STEPS = [
  {
    target: ".tour-logo",
    content: "This is our tour’s logo.",
    disableBeacon: true,
  },
  {
    target: ".tour-cart",
    content:
      "View the cart you’ve added here",
  },
  {
    target: ".tour-contact",
    content: "Contact the developer",
  },
  {
    target: ".tour-policy",
    content: "We accept returns after 14 days max",
  },
];

// Définir notre état
const INITIAL_STATE = {
  clé: nouvelle date (),
  exécuter: faux,
  continu: vrai,
  chargement: faux,
  stepIndex: 0,
  étapes: TOUR_STEPS,
};

// Configurer la fonction réducteur
réducteur const = (état = INITIAL_STATE, action) => {
  commutateur (action.type) {
    cas "START":
      return {... state, run: true};
    cas "RESET":
      return {... état, stepIndex: 0};
    cas "STOP":
      return {... state, run: false};
    case "NEXT_OR_PREV":
      return {... état, ... action.payload};
    cas "RESTART":
      revenir {
        ...Etat,
        stepIndex: 0,
        run: vrai,
        chargement: faux,
        clé: nouvelle date (),
      };
    défaut:
      état de retour;
  }
};

// Définir le composant Tour
const Tour = () => {
  const [tourState, dispatch] = useReducer (réducteur, INITIAL_STATE);
  useEffect (() => {
    if (! localStorage.getItem ("tour")) {
      expédition ({type: "START"});
    }
  }, []);
  rappel const = (données) => {
    const {action, index, type, statut} = données;
    si (
      action === ACTIONS.CLOSE ||
      (statut === STATUS.SKIPPED && tourState.run) ||
      statut === STATUS.FINISHED
    ) {
      expédition ({type: "STOP"});
    } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) {
      envoi({
        tapez: "NEXT_OR_PREV",
        charge utile: {stepIndex: index + (action === ACTIONS.PREV? -1: 1)},
      });
    }
  };
  const startTour = () => {
    expédition ({type: "RESTART"});
  };
  revenir (
    <>
      
        Tour initial
      
      
    >
  );
};
exporter le tour par défaut;

Conclusion

Nous avons vu comment créer une présentation du produit dans une interface utilisateur Web avec React. Nous avons également abordé quelques consignes pour rendre les visites de produits efficaces.

Vous pouvez désormais tester la bibliothèque React Joyride et créer quelque chose de génial dans votre prochaine application Web. J'aimerais connaître votre opinion dans la section commentaires ci-dessous.

Ressources

(ks, ra, al, yk, il)