Una guida pratica ai tour dei prodotti nelle app React

Come affermato su Appcues:

"I tour dei prodotti, a volte chiamati procedure dettagliate sui prodotti, introducono gli utenti a un nuovo prodotto e li aiutano a orientarsi".

Di solito, quando deve mostrare una nuova funzionalità o una complessa funzionalità dell'interfaccia utente in un'app Web, il team di successo del cliente invia un'e-mail di campagna a tutti i suoi utenti. Sebbene questo sia un ottimo modo per creare tale consapevolezza, alcuni utenti potrebbero non avere l'opportunità di vedere la funzionalità aggiunta; quindi, lo scopo dell'e-mail verrebbe vanificato.

Un modo migliore per aumentare la consapevolezza degli utenti su una particolare funzionalità in un'app Web è integrare suggerimenti dell'interfaccia utente concisi e autoesplicativi, chiamati tour del prodotto.

I tour dei prodotti guidano gli utenti verso i momenti "a-ha" o mostrano funzionalità di alto valore che sono sottoutilizzate. I tour dei prodotti possono essere potenti strumenti per presentare agli utenti un nuovo prodotto e aiutarli a orientarsi. Possono attirare l'attenzione su lanci di prodotti, offerte promozionali e vendite di prodotti.

Ma se fatti male, i tour dei prodotti possono finire per sentirsi come un guidatore sul sedile posteriore. E a nessuno piace un guidatore sul sedile posteriore, vero?

In questo tutorial imparerai cos'è un tour del prodotto e i tipi di pacchetti del tour del prodotto nell'ecosistema React, insieme ai loro pro e contro.

Se stai creando prodotti rivolti ai clienti utilizzando React, potresti essere interessato a implementarlo nella tua applicazione React. Alla fine, avremo creato un tour del prodotto per una semplice interfaccia utente del carrello utilizzando React Joyride.

Non esamineremo le basi della sintassi di React e JavaScript, ma non è necessario essere esperti in nessuno di questi linguaggi per seguire.

Linee guida per il tour del prodotto

I tour dei prodotti sono un aspetto complicato delle app Web, che richiedono una certa esperienza dell'utente per ottenere risultati. Consiglierei di leggere i suggerimenti di Appcues per i tour dei prodotti. Di seguito sono riportate alcune linee guida da considerare.

Mai conferenza

Mettere un sacco di tour su una pagina web è allettante. Ma gli utenti di solito non amano i lunghi tutorial introduttivi. Diventano ansiosi quando devono ingerire molte informazioni prima di poter utilizzare una funzione nell'app.

Scomponilo

Non insegnare tutto. Concentrati su una singola funzionalità e crea un tour di due o tre passaggi per mostrare quella funzionalità. Mostra molti piccoli tour, piuttosto che un unico lungo tour. Dai priorità alla loro sequenza.

Aggiungere valore

Ti piace fare il tuo tour? E i tuoi compagni di squadra? Presenta il tour in modo che gli utenti lo capiscano. Mostra il valore, piuttosto che le storie.

Ora che conosciamo il valore dei tour dei prodotti e abbiamo visto alcune linee guida per crearli, esaminiamo alcune librerie React per i tour dei prodotti e impariamo come usarli.

Ci sono solo poche librerie basate su React per l'implementazione dei tour. Due dei più popolari sono React Tour e React Joyride.

Reagire Tour

React Tour ha circa 1.600 stelle su GitHub e viene sviluppato attivamente. Il miglior caso d'uso per React Tour è un semplice tour del prodotto in cui è richiesta una piccola personalizzazione. È disponibile una demo.

Come funziona

Con React Tour, passi al componente il selettore className e il contenuto per ogni passaggio. La libreria renderà l'interfaccia utente del tour in base al clic di un pulsante o dopo aver montato il componente. È semplice per le pagine statiche e le interfacce utente:

 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.', } // ... ]

Professionisti

• React Tour è l'ideale per i tour che richiedono poca personalizzazione.
• Funziona bene per il contenuto statico e per il contenuto dinamico le cui etichette del selettore sono sempre presenti nell'interfaccia utente.
• I fan dei componenti con stile potrebbero trovarlo interessante perché ha una forte dipendenza dai componenti con stile.

contro

• Se il tuo progetto non ha dipendenza dai componenti con stile, potresti non trovarlo facile da implementare.
• La tua creatività sarà limitata perché non supporta la personalizzazione.

Reagisci Joyride

L'altra libreria principale del tour del prodotto è React Joyride, che ha circa 3.100 stelle su GitHub ed è anche mantenuta attivamente.

Come funziona

Passiamo il className come target e il contenuto. Lo stato memorizza il tour. Il componente Joyride utilizza i passaggi come oggetti di scena.

 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 (

        
        ...
      
    );
  }
}

Professionisti

• L'integrazione di React Joyride in un'app Web è meno rigida rispetto a React Tour e non ha una forte dipendenza da altre librerie.
• Gli eventi e le azioni sono resi disponibili, il che favorisce la personalizzazione.
• È spesso migliorato.

contro

• L'interfaccia utente non è elegante come quella di React Tour.

Perché reagire Joyride?

I tour dei prodotti, in particolare per le app Web davvero grandi, richiedono la personalizzazione e ciò distingue React Joyride da React Tour. Il progetto di esempio che realizzeremo richiede un po' di creatività e personalizzazione, quindi andremo con React Joyride.

Costruire un semplice tour del prodotto

Per prima cosa, costruiremo un semplice tour React utilizzando gli oggetti di scena a nostra disposizione in React Joyride. Successivamente, utilizzeremo l'hook useReducer per automatizzare i processi del tour.

Clona il ramo "standard-tour" nel repository GitHub o utilizza la pagina Web di tua scelta, purché tu sia in grado di seguirlo.

Installa i pacchetti eseguendo npm install .

Per avviare l'app, esegui npm run start .

Tratteremo i seguenti passaggi:

• definire le tappe del tour;
• abilitare un'opzione di salto in ogni passaggio;
• modificare le etichette di testo su pulsanti e collegamenti;
• personalizza stili come i colori dei pulsanti e l'allineamento del testo.

Quindi, aggiungeremo alcune funzionalità personalizzate:

• avviare automaticamente il tour;
• avviare il tour manualmente (ovvero con un collegamento o un clic su un pulsante);
• nascondere il faro lampeggiante.

Gli oggetti di scena in React Joyride ci consentono di eseguire alcune funzionalità di base.

Per questo tutorial, creeremo un tour del prodotto dell'interfaccia utente mostrata di seguito:

Definisci i passaggi del tour

Per cominciare, assicurati di prendere di mira i classNames particolari che conterranno il contenuto del tour sulla pagina, ovvero a seconda che utilizzerai l'interfaccia utente anziché l'interfaccia utente del carrello.

Nella cartella dei component , crea un file Tour.js e incolla il codice seguente al suo interno. Inoltre, assicurati che i classNames di destinazione esistano nel tuo foglio di stile. In questo articolo, modificheremo il componente Tour.js per adattarlo all'attività da svolgere.

 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", }, ];

Quello che abbiamo fatto è semplicemente definire i passaggi del nostro tour prendendo di mira i classNames che formeranno la base del nostro contenuto (il testo). La proprietà content è dove definiamo il text che vogliamo vedere all'inizio del tour.

Abilita l'opzione Salta in ogni passaggio

Un'opzione di salto è importante nei casi in cui un utente non è interessato a un determinato tour. Possiamo aggiungere questa funzione impostando showSkipButton prop su true , che salterà i passaggi rimanenti. Inoltre, l'elica continuous è utile quando dobbiamo mostrare il pulsante Next in ogni passaggio.

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} /> </> ); };

Modifica le etichette di testo su pulsanti e collegamenti

Per modificare le etichette di text sui pulsanti o sui collegamenti, utilizzeremo la prop locale . Il locale prop ha due oggetti, last e skip . Abbiamo specificato il nostro last tour come End tour , mentre skip è il Close tour .

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} locale={{ last: "End tour", skip: "Close tour" }} /> </> ); };

Personalizza gli stili, come i colori dei pulsanti e l'allineamento del testo

Il colore predefinito dei pulsanti è il rosso e l'allineamento del testo è sempre impostato correttamente. Applichiamo alcuni stili personalizzati per cambiare i colori dei pulsanti e allineare correttamente il testo.

Nel nostro codice vediamo che il prop degli styles è un oggetto. Ha altri oggetti con valori unici, tra cui:

• tooltipContainer
  La sua chiave è textAlign e il suo valore è left .
• buttonNext
  La sua chiave è backgroundColor e il suo valore è green .
• buttonBack
  La sua chiave è marginRight e il suo valore è 10px .
• locale
  Le sue chiavi sono last e skip e i suoi valori sono rispettivamente End Tour e Close Tour .

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} styles={{ tooltipContainer: { textAlign: "left" }, buttonNext: { backgroundColor: "green" }, buttonBack: { marginRight: 10 } }} locale={{ last: "End tour", skip: "Close tour" }} /> </> ); };

La libreria espone alcuni prop da utilizzare sui nostri elementi al posto degli elementi predefiniti, alcuni dei quali sono:

• beaconComponent
• tooltipComponent

useReducer

Abbiamo visto come creare un tour del prodotto e come personalizzarlo utilizzando i vari oggetti di scena di Joyride.

Il problema con gli oggetti di scena, tuttavia, è che, poiché la tua app Web si ridimensiona e hai bisogno di più tour, non vuoi solo aggiungere passaggi e passare loro oggetti di scena. Vuoi essere in grado di automatizzare il processo assicurandoti che il processo di gestione dei tour sia controllato da funzioni e non semplicemente da props di scena. Pertanto, useremo useReducer per rinnovare il processo di creazione dei tour.

In questo segmento prenderemo il controllo del tour utilizzando actions ed events , messi a disposizione dalla libreria tramite una funzione di callback.

Per rendere questo processo meno scoraggiante, lo suddivideremo in passaggi, consentendoci di costruire il tour in blocchi.

Il codice sorgente completo è disponibile, ma ti consiglio di seguire questa guida, per capire come funziona. Tutti i nostri passaggi verranno eseguiti nel file Tour.js nella cartella dei components .

Definisci i passaggi

 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", }, ];

In questo primo passaggio, definiamo i nostri passaggi prendendo di mira i classNames appropriati e impostando il nostro contenuto (testo).

Definire lo stato iniziale

 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 };

In questo passaggio, definiamo alcuni states importanti, tra cui:

• Imposta il campo di run su false , per assicurarti che il tour non si avvii automaticamente.
• Imposta il prop continuous su true , perché vogliamo mostrare il pulsante.
• stepIndex è il numero di indice, che è impostato su 0 .
• Il campo dei steps è impostato su TOUR_STEPS che abbiamo dichiarato nel passaggio 1.
• Il campo key fa rieseguire il rendering del tour quando il tour viene riavviato.

Gestisci lo Stato con Reducer

 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; } };

In questo passaggio, utilizzando un'istruzione switch quando case è START , restituiamo lo stato e impostiamo il campo di run su true . Inoltre, quando case è RESET , restituiamo lo stato e impostiamo stepIndex su 0 . Successivamente, quando case è STOP , impostiamo il campo di run su false , che interromperà il tour. Infine, quando il case è RESET , riavviamo il tour e creiamo un nuovo tour.

In base agli events ( start , stop e reset ), abbiamo inviato lo stato corretto per gestire il tour.

Ascolta le modifiche alla richiamata e le modifiche allo stato di spedizione

 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) } }); } };

Utilizzando le etichette EVENTS , ACTIONS e STATUS esposte offerte da React Joyride, ascoltiamo gli eventi di clic e quindi eseguiamo alcune operazioni condizionali.

In questo passaggio, quando si fa clic sul pulsante Chiudi o Salta, chiudiamo il tour. In caso contrario, se si fa clic sul pulsante Avanti o Indietro, controlliamo se l'elemento target è attivo nella pagina. Se l'elemento target è attivo, andiamo a quel passaggio. Altrimenti, troviamo la destinazione del passaggio successivo e ripetiamo.

Avvia automaticamente il tour con useEffect

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

In questo passaggio, il tour viene avviato automaticamente al caricamento della pagina o al montaggio del componente, utilizzando l'hook useEffect .

Attiva il pulsante di avvio

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

La funzione in quest'ultimo passaggio avvia il tour quando si fa clic sul pulsante di start , nel caso in cui l'utente desideri visualizzare nuovamente il tour. Al momento, la nostra app è configurata in modo che il tour venga mostrato ogni volta che l'utente aggiorna la pagina.

Ecco il codice finale per la funzionalità del tour in 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 ( <> <button className="btn btn-primary" onClick={startTour}> Start Tour </button> <JoyRide {...tourState} callback={callback} showSkipButton={true} styles={{ tooltipContainer: { textAlign: "left", }, buttonBack: { marginRight: 10, }, }} locale={{ last: "End tour", }} /> </> ); }; export default Tour; 

Conclusione

Abbiamo visto come creare un tour del prodotto in un'interfaccia utente web con React. Abbiamo anche trattato alcune linee guida per rendere efficaci i tour dei prodotti.

Ora puoi sperimentare con la libreria React Joyride e trovare qualcosa di fantastico nella tua prossima app web. Mi piacerebbe sentire le vostre opinioni nella sezione commenti qui sotto.

Risorse

• Documentazione, Reagire Joyride
• "Sette eccezionali tour dei prodotti e le migliori pratiche che ci insegnano", Morgan Brown, Telepatia
• "La guida definitiva ai tour dei prodotti e alle procedure dettagliate", Margaret Kelsey, Appcues