4 bibliothèques Vue pour créer des guides d'onboarding

Simple et flexible, Vue a récemment gagné en popularité parmi les frameworks JavaScript.

La variété des applications que vous pouvez créer avec Vue est pratiquement illimitée, mais nous connaissons tous un composant dont toute application digne de ce nom a besoin :

Un guide interactif simple.

Dans cet article, nous allons comparer les 4 meilleures bibliothèques de guides d'onboarding et de guides interactifs disponibles pour Vue.

Commençons :

Qu'est-ce qu'un guide d'onboarding Vue ?

Un guide d'onboarding Vue se compose de plusieurs écrans de dialogue superposés et vise à montrer à vos nouveaux utilisateurs comment fonctionne votre produit. Ils peuvent être utilisés dans pratiquement tous les types d'applications, afin de perfectionner les premières expériences des utilisateurs avec votre produit.

Aussi simple que soit le framework Vue, la création d'un tel élément peut être un défi pour les équipes disposant de peu de temps et de ressources. Et c'est exactement la raison pour laquelle des bibliothèques et des plugins pour la création d'infobulles Vue, quelque chose que nous aborderons également dans les sections suivantes, ont été créés.

Mais avant cela, je veux vous montrer les différents types de guides d'onboarding et de guides interactifs que vous pouvez avoir dans votre application et à quoi sert chaque type.

Tout d'abord, vous avez les écrans d'onboarding qui sont plus couramment utilisés dans les applications mobiles, mais qui ont fait leur chemin vers les applications web également. Ces écrans servent simplement de diaporama au-dessus de votre produit pour expliquer aux utilisateurs ce qu'il fait.

Deuxièmement, vous avez le type de visite guidée, qui présente aux utilisateurs les différentes parties de votre interface utilisateur et la fonction de chaque bouton. Il s'agit de simples manuels d'utilisation qui présentent aux utilisateurs les différentes parties de votre interface avant qu'ils ne commencent à utiliser votre produit.

Enfin, il y a les guides interactifs, dans lesquels l'utilisateur est censé contribuer au déroulement du guide. Ces guides sont plus axés sur l'assistance à l'utilisateur dans l'accomplissement d'une certaine tâche, comme l'utilisation de la fonction principale de l'application.

Nous ne pouvons pas vraiment comparer les trois différents types de visites guidées des produits, car chacun a ses propres utilisations. Si vous devez raconter, vous pouvez utiliser les écrans d'onboarding ; si vous devez montrer, vous devriez utiliser les guides interactifs, et si vous avez besoin que les utilisateurs accomplissent une tâche, vous devez utiliser les guides interactifs.

En fin de compte, votre objectif est de créer des utilisateurs engagés :

Obtenir l'engagement des utilisateurs

Une visite guidée des produits est un accueil parfait pour les nouveaux utilisateurs de votre appli. Ils comprennent exactement comment ils peuvent commencer à utiliser votre application, et s'il n'y a pas de complications, ils n'ont qu'à le faire.

Ainsi, au lieu que les utilisateurs tombent sur votre page d'accueil sans savoir quoi faire et avec une très, très forte envie d'abandonner, vos utilisateurs accomplissent la première tâche que vous leur donnez et s'ils décident que c'est facile, ils reviendront pour en savoir plus.

Mais une visite guidée ne peut pas tout faire à elle seule.

La plupart des entreprises tirent le meilleur parti de leurs processus d'onboarding en créant des flux d'onboarding utilisateur complets perfectionnés avec différents éléments et composants in-app, notamment des visites guidées, des infobulles, des hotspots et des check-lists d'onboarding utilisateur.

Puisque créer tout cela en interne serait une véritable torture pour l'équipe de développement, il existe divers outils d'onboarding que même les personnes non techniques peuvent utiliser pour créer de tels éléments sans codage.

Mais, le sujet d'aujourd'hui est exclusivement les visites guidées des produits, alors restons là-dessus 👇

Les 4 meilleures bibliothèques d'onboarding de Vue

Voici le top 4 des plugins Vue d'onboarding les plus populaires dans leurs catégories respectives :

1- Vue Shepherd

Vue Shepherd est un wrapper Vue pour la très populaire bibliothèque de guides JavaScript, Shepherd.

Shepherd compte environ 10,3K étoiles sur GitHub en date de mai 2022 et possède 575 forks. Avec des milliers de téléchargements et d'innombrables projets utilisant Shepherd pour guider les utilisateurs, Vue Shepherd est certainement l'un des meilleurs choix pour les développeurs Vue pour créer des visites guidées des produits.

Le plus grand avantage de cette bibliothèque, à mon avis, est que le style par défaut, bien que très spécifique, est très agréable à l'œil et ne devrait pas constituer une lourde charge pour le département de conception s'il s'adapte bien à votre produit.

Voici la démo de Shepherd que vous pouvez trouver sur leur site web :

Pourquoi Vue Shepherd ?

▶ Très réactif

▶ Prise en charge complète de la navigation au clavier

▶ Hautement personnalisable

▶ Facile à mettre en place, facile à utiliser

▶ Grande documentation

Installation

Vous pouvez utiliser la ligne ci-dessous pour installer Shepherd :

npm install vue-shepherd --save

Si vous utilisez un système de modules, vous devez également utiliser la commande Vue.use() pour installer Shepherd :

import Vue from 'vue' ;
import VueShepherd from 'vue-shepherd' ;

Vue.use(VueShepherd) ;

Pour l'utilisation de la bibliothèque et la documentation complémentaire, visitez la page GitHub de Shepherd ici.

2- Vue Tour

Bien qu'elle ne soit pas aussi populaire que Shepherd, Vue Tour est la bibliothèque de guides d'onboarding la plus populaire qui soit exclusivement dédiée à Vue, ce qui peut en faire une excellente option pour vous.

Développé par pulsardev, Vue Tour est un plugin très léger et personnalisable qui a une promesse très basique mais puissante :

« Fournir un moyen rapide et facile de guider vos utilisateurs à travers votre application. »

Avec plus de 2 000 étoiles sur GitHub, Vue Tour peut faire des merveilles pour votre application Vue.

Voici à quoi ressemble le guide de démonstration :

Pourquoi Vue Tour ?

▶ Grande documentation

▶ Haute performance

Facile à mettre en place, facile à utiliser

▶ Hautement personnalisable

▶ Léger

Installation

Vous pouvez installer Vue Tour via NPM en utilisant le code :

npm install vue-tour

Ensuite, suivez les étapes décrites dans la documentation officielle sur GitHub. N'oubliez pas de soutenir le développeur et les mainteneurs !

3- Vue Intro.js

Intro.js est le plus grand plugin JavaScript pour les visites guidées des produits.

Point final.

Développé par usablica, Intro.js a plus de 21K étoiles sur GitHub et 2,6K forks. Il a fait des merveilles au fil des ans pour de nombreuses entreprises, qu'il s'agisse de fondateurs solitaires ou de grandes sociétés.

Le plus grand avantage, à mon avis, ce sont les développeurs et les mainteneurs. Le plugin dispose d'un support officiel par email si vous achetez une licence unique, et nous savons tous que parfois vous êtes tellement bloqué que seule la personne qui a créé le code peut vous sauver.

Avec Intro.js, vous pouvez créer des visites guidées réactives qui fonctionnent très bien dans différents environnements et des infobulles Vue, des conseils sur les produits et des hotspots qui peuvent éduquer les utilisateurs avec de petits éléments d'information à la fois.

Voici leur guide de démonstration :

Vous pouvez installer Intro.js dans votre application Vue, mais vous avez toujours besoin des bindings, et c'est là que Vue Intro.js intervient.

Pourquoi Intro.js ?

▶ Très réactif

▶ Soutien officiel payant

▶ Conception simple de la base

▶ Contient des conseils et des hotspots

▶ Une documentation étonnante

Installation

Pour utiliser Vue Intro.js, vous devez d'abord télécharger et installer Intro.js en utilisant le CDN pour obtenir la version souhaitée.

Ensuite, vous devez installer Vue Intro.js :

npm i vue-introjs

Ensuite, vous devez suivre les instructions fournies sur la page GitHub de Vue Intro.js et la documentation officielle d'Intro.js.

4- Vue Tour de Salamanderbe

Vous ne voulez pas de boutons fantaisistes et d'écrans superposés qui se déplacent sur tout l'écran ?

Vous avez besoin de quelque chose de plus simple ?

Vous avez besoin d'un produit si léger que vous ne le sentirez même pas ?

Salamanderbe a tout prévu avec sa bibliothèque Vue Tour.

Il dispose d'un écran d'onboarding simple/un élément de type diapositive qui peut être utile pour créer quelque chose d'éducatif pour vos utilisateurs. Il est très léger avec une taille de fichier de 3,8 ko, et comme le design de l'élément est très simple, vous pouvez simplement ajouter votre propre texte et vos propres images et en finir avec lui.

Voici la démo du plugin :

Pourquoi Vue Tour de Salamanderbe ?

▶ Extrêmement léger et rapide

▶ Conception simple de la base

▶ Facile à mettre en place, facile à utiliser

▶ Bonne documentation

Installation

Tout d'abord, installez Vue Tour depuis NPM :

npm install @salamander.be/vue-tour

Ensuite, suivez la documentation officielle sur GitHub pour configurer et utiliser l'élément de guides.