Catégories
Plugin et site web

Un guide pratique des visites de produits dans React Apps – Smashing Magazine

A 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…
Plus à propos
Bénédiction

Présenter de nouvelles fonctionnalités du produit aux utilisateurs ou les familiariser avec certaines fonctionnalités de l'interface utilisateur dans une application Web peut devenir fastidieux, en particulier lorsque vous souhaitez que les utilisateurs voient beaucoup de choses. Dans le guide suivant, vous apprendrez à utiliser de manière proactive les présentations de produits pour intégrer les utilisateurs dans une nouvelle interface utilisateur complexe et à les familiariser avec les fonctionnalités de l'interface utilisateur sans les ennuyer, à l'aide d'une application React typique.

Comme indiqué sur Appcues:

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

Habituellement, lorsqu'elle 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 envoie 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.

Une meilleure façon de sensibiliser les utilisateurs à une fonctionnalité particulière dans une application Web consiste à intégrer des conseils d'interface utilisateur concis et explicites, appelés visites de produits.

Les visites de produits guident les utilisateurs vers des moments «a-ha» ou présentent 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 à l'arrière. Et personne n'aime un conducteur à l'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.

Si vous créez des produits destinés aux clients à l'aide de React, vous voudrez peut-être l'implémenter dans votre application React. À la fin, nous aurons créé une présentation du produit pour une interface utilisateur simple de panier à l'aide de React Joyride.

Nous n’examinerons pas les bases de la syntaxe de React et de JavaScript, mais vous n’avez pas besoin d’être un expert dans l’un ou l’autre de ces langages pour suivre.

Une visite de base du produit
Une visite de base du produit. (Grand aperçu)

Consignes de visite des produits

Les visites de produits sont un aspect délicat des applications Web, nécessitant une certaine expertise en 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.

Jamais de conférence

Mettre beaucoup 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.

Décomposer

N'enseignez pas tout. Concentrez-vous sur une seule fonctionnalité et créez une visite de 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.

Ajouter de la valeur

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

Maintenant que nous connaissons la valeur des visites de produits et que nous avons vu quelques consignes pour les créer, examinons certaines bibliothèques React pour les visites de produits et apprenons à les utiliser.

Il n'existe que quelques bibliothèques basées sur React pour implémenter des visites. Deux des plus populaires sont React Tour et React Joyride.

Tour de réaction

React Tour compte environ 1600 étoiles sur GitHub et est en cours de développement. 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.

Comment ça fonctionne

Avec React Tour, vous passez le className sélecteur et contenu pour chaque étape du 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 idéal pour les circuits 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 composants stylisés pourraient trouver cela intéressant car il dépend fortement des composants stylisés.

Les inconvénients

  • Si votre projet ne dépend pas des composants stylisés, vous ne trouverez peut-être pas cela facile à implémenter.
  • Votre créativité sera limitée car elle ne prend pas en charge la personnalisation.

Réagir Joyride

L'autre principale bibliothèque de présentation de produits est React Joyride, qui compte environ 3100 étoiles sur GitHub et est également activement maintenue.

Comment ça fonctionne

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

  state = {
    steps: (
      {
        target: '.my-first-step',
        content: 'This is my awesome feature!',
      },
      {
        target: '.my-other-step',
        content: 'This is another awesome feature!',
      },
      ...
    )
  };

  render () {
    const { steps } = this.state;

    return (
      

...

); } }

Avantages

  • L'intégration de React Joyride dans une application Web est moins rigide qu'avec React Tour et n'a pas de dépendance absolue vis-à-vis d'autres bibliothèques.
  • Des événements et des actions sont rendus disponibles, ce qui favorise la personnalisation.
  • Il est fréquemment amélioré.

Les 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 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 disponibles dans React Joyride. Ensuite, nous utiliserons le useReducer hook pour automatiser les processus de la visite.

Clonez la branche "visite standard" dans le référentiel GitHub ou utilisez la page Web de votre choix, tant que vous êtes en mesure de suivre.

Installez les packages en exécutant npm install.

Pour démarrer l'application, exécutez npm run start.

Nous couvrirons les étapes suivantes:

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

Ensuite, nous ajouterons quelques 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);
  • cachez 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 du produit de l'interface utilisateur ci-dessous:

L'interface utilisateur Web. (Grand aperçu)

Définir les étapes de la visite

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

dans le component dossier, créez un Tour.js et collez-y le code suivant. Assurez-vous également que la cible classNames existent dans votre feuille de style. Tout au long de cet article, nous peaufinerons le Tour.js composant en fonction de la tâche à accomplir.

import React from "react";
import JoyRide from "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 classNames qui formera le fondement de notre contenu (le texte). le content propriété est l'endroit où nous définissons la text que nous voulons voir quand la tournée commence.

Activer l'option Ignorer à chaque étape

Une option de saut est importante dans les cas où un utilisateur n'est pas intéressé par une visite en particulier. Nous pouvons ajouter cette fonctionnalité en définissant le showSkipButton prop à true, qui sautera les étapes restantes. Également continuous prop est pratique lorsque nous devons montrer le Next bouton à chaque étape.

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

Pour changer le text libellés sur les boutons ou les liens, nous utiliserons le locale soutenir. le locale prop a deux objets, last et skip. Nous avons spécifié notre last tournée comme le End tour, tandis que skip est le Close tour.

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

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 modifier les couleurs des boutons et aligner correctement le texte.

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

  • tooltipContainer
    Sa clé est textAlign, et sa valeur est left.
  • buttonNext
    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 = () => {
  return (
    <>
      
    
  );
};

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

La visite des produits
La visite des produits. (Grand aperçu)

useReducer

Nous avons vu comment créer une visite guidée du produit et comment la personnaliser à l’aide des différents accessoires de Joyride.

Le problème avec les accessoires, cependant, est que, à 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 visites est contrôlé par des fonctions, et pas simplement props. 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 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 code source complet est disponible, mais je vous conseille de suivre ce guide pour comprendre son fonctionnement. Toutes nos étapes seront effectuées dans le Tour.js fichier dans le components dossier.

Définir les étapes

import React from "react";
import JoyRide from "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 et définir notre contenu (texte).

Définir l'état initial

 const INITIAL_STATE = {
  run: false,
  continuous: true,
  loading: false,
  stepIndex: 0, // Make the component controlled
  steps: TOUR_STEPS,
  key: new Date(), // This field makes the tour to re-render when the tour is restarted
};

Dans cette étape, nous définissons certains states, comprenant:

  • Met le run champ à false, pour vous assurer que la visite ne démarre pas automatiquement.
  • Met le continuous prop à true, parce que nous voulons afficher le bouton.
  • stepIndex est le numéro d'index, qui est défini sur 0.
  • le steps champ est défini sur TOUR_STEPS que nous avons déclaré à l'étape 1.
  • le key fait le rendu de la tournée à nouveau lorsque la tournée est redémarrée.

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

 const reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    // start the tour
    case "START":
      return { ...state, run: true };
    // Reset to 0th step
    case "RESET":
      return { ...state, stepIndex: 0 };
    // Stop the tour
    case "STOP":
      return { ...state, run: false };
    // Update the steps for next / back button click
    case "NEXT_OR_PREV":
      return { ...state, ...action.payload };
    // Restart the tour - reset go to 1st step, restart create new tour
    case "RESTART":
      return {
        ...state,
        stepIndex: 0,
        run: true,
        loading: false,
        key: new Date()
      };
    default:
      return state;
  }
};

Dans cette étape, à l'aide d'un switch déclaration quand case est START, nous retournons l'état et définissons le run champ à true. Aussi, quand case est RESET, nous retournons l'état et définissons stepIndex à 0. Ensuite, quand case est STOP, nous définissons le run champ à false, ce qui arrêtera la tournée. Enfin, quand case est RESET, nous redémarrons la tournée et créons une nouvelle tournée.

Selon le events (start, stop, et reset), nous avons envoyé l'état approprié pour gérer la visite.

Écoutez les changements de rappel et les changements d'état de distribution

 import JoyRide, { ACTIONS, EVENTS, STATUS } from "react-joyride";
const callback = data => {
    const { action, index, type, status } = data;
    if (action === ACTIONS.CLOSE
                ||
       (status === STATUS.SKIPPED && tourState.run)
                ||
      status === STATUS.FINISHED
    ) {
      dispatch({ type: "STOP" });
    } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) {
      dispatch({
        type: "NEXT_OR_PREV",
        payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) }
      });
    }
};

Utiliser les exposés EVENTS, ACTIONS, et STATUS labels proposés par React Joyride, nous écoutons les événements de clic puis effectuons certaines opérations conditionnelles.

Dans cette étape, lorsque vous cliquez sur le bouton Fermer ou Ignorer, 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"){
    dispatch({ type: "START"});
  }
}, ());

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

Déclenchez le bouton de démarrage

const startTour = () => {
  dispatch({ type: "RESTART" });
};

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

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

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

// Define the steps
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",
  },
);

// Define our state
const INITIAL_STATE = {
  key: new Date(),
  run: false,
  continuous: true,
  loading: false,
  stepIndex: 0,
  steps: TOUR_STEPS,
};

// Set up the reducer function
const reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case "START":
      return { ...state, run: true };
    case "RESET":
      return { ...state, stepIndex: 0 };
    case "STOP":
      return { ...state, run: false };
    case "NEXT_OR_PREV":
      return { ...state, ...action.payload };
    case "RESTART":
      return {
        ...state,
        stepIndex: 0,
        run: true,
        loading: false,
        key: new Date(),
      };
    default:
      return state;
  }
};

// Define the Tour component
const Tour = () => {
  const (tourState, dispatch) = useReducer(reducer, INITIAL_STATE);
  useEffect(() => {
    if (!localStorage.getItem("tour")) {
      dispatch({ type: "START" });
    }
  }, ());
  const callback = (data) => {
    const { action, index, type, status } = data;
    if (
      action === ACTIONS.CLOSE ||
      (status === STATUS.SKIPPED && tourState.run) ||
      status === STATUS.FINISHED
    ) {
      dispatch({ type: "STOP" });
    } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) {
      dispatch({
        type: "NEXT_OR_PREV",
        payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) },
      });
    }
  };
  const startTour = () => {
    dispatch({ type: "RESTART" });
  };
  return (
    <>
      
      
    
  );
};
export default Tour;

Conclusion

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

Maintenant, vous pouvez expérimenter avec la bibliothèque React Joyride et créer quelque chose de génial dans votre prochaine application Web. J'aimerais entendre vos opinions dans la section commentaires ci-dessous.

Ressources

Éditorial fracassant(ks, ra, al, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *