Aidez vos utilisateurs avec Intro.js

Cette bibliothèque permet de présenter facilement les éléments de vos pages. C'est une méthode efficace et simple pour aider vos utilisateurs à utiliser vos outils.

Principe d'Intro.js

Lorsqu'un nouvel utilisateur découvre une page, il peut être dérouté sur les éléments présents sur la page et leur utilité. Intro.js est système qui permet de présenter les différents éléments de la page. Pour cela il va présenter la page par étapes. Chaque étape correspond en réalité un bloc de votre page à présenter. Pour présenter un bloc, Intro.js va griser tout le reste de la page et afficher un texte explicatif correspondant au bloc.


Inclusions nécessaires

Tout d'abord vous devez télécharger le projet via le site officiel http://usablica.github.io/intro.js/. Vous devez ensuite intégrer le CSS et le fichier JS à vos pages :

<script src="static/lib/js/introjs-1.0/minified/intro.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/lib/js/introjs-1.0/minified/introjs.min.css" media="screen" />

Voilà maintenant on peut passer aux choses sérieuses.

Utilisation dans le code

Définir les étapes

J'ai été très étonné de la simplicité d'utilisation de cet lib. Pour ajouter une étape à votre présentation il vous suffit d'ajouter dans la balise voulue une propriété data-step dont le numéro va correspondre au numéro de l'étape et une propriété data-intro qui va correspondre au texte affiché comme sur l'exemple suivant :

<h2 data-step="1" data-intro="Titre de l'article">Aidez vos utilisateurs avec Intro.js</h2>

Vous pouvez ajouter autant d'étapes que vous voulez. Intro.js s'adaptera à partir du moment où le numéro de vos étapes est correctement défini.

Lancer la présentation

Vous pouvez utiliser le javascript pour lancer la présentation et vous pouvez aussi proposer un bouton d'aide à vos utilisateurs :

<button onclick="javascript:introJs().start();">Aide</button>

Un clic sur ce bouton lancera la présentation à partir de la première étape.

J'espère que cet article vous aura été utile et simplifiera la vie de vos utilisateurs.