Promenez les utilisateurs sur votre site Web avec Bootstrap Tour

Lorsque vous avez une application Web qui nécessite une certaine familiarisation de la part de vos utilisateurs, une visite guidée de l'interface est nécessaire. Créer une procédure pas à pas directement au-dessus de l'interface rend les choses très claires. C'est ce que nous allons construire avec Bootstrap Tour..

Questions, questions

Bootstrap Tour est un plugin basé sur jQuery pour Twitter Bootstrap qui vous permet de créer facilement des procédures pas à pas interactives en utilisant un minimum de configuration JavaScript déclarative en conjonction avec votre structure DOM existante..

Si cela n’a aucun sens pour vous, lisez la suite: nous allons le décomposer pour vous permettre de créer des instructions utiles et intéressantes pour vos utilisateurs..

Pourquoi voudrais-je créer des instructions?

Si votre site Web nécessite un certain niveau de familiarité, il peut être très utile de montrer à vos utilisateurs ce qu'il faut faire. Une fois terminé, l'utilisateur peut, d'une certaine manière, voir l'ombre de l'instruction que vous avez fournie dans la procédure pas à pas. Cela évite à l'utilisateur d'interpréter les instructions si vous utilisez un support moins clair, tel que la vidéo, ou pire encore, des guides textuels..

Un autre cas d’utilisation d’une visite interactive consiste à décrire une photo. Imaginez que vous construisez un site dédié à la présentation de superbes panoramas de villes du monde entier. Lorsqu'un utilisateur clique sur une ville, une visite interactive vous permet de mettre en évidence des éléments de la photo qui pourraient autrement passer inaperçus..

Il existe de nombreux cas d'utilisation lorsque vous souhaitez utiliser une visite guidée..

Quand devrais-je éviter d'utiliser un tour?

Si votre interface respecte des conventions très claires et que vous ne vous plaignez pas de confusion, l'ajout d'une visite pourrait empêcher vos utilisateurs de faire ce qu'ils veulent le plus: utiliser votre application..

Pendant que nous sommes sur le point d'éviter ce qui devrait être évité, il serait sage de garder votre visite aussi courte que possible. Les utilisateurs souhaitent collecter toutes les informations nécessaires à l'utilisation de votre application ou à la visualisation de votre récit, mais ils souhaitent également que cela se produise le plus rapidement possible. La seule exception à cette règle serait un site qui utilise presque exclusivement une visite guidée comme caractéristique principale (le site photo décrit serait un exemple possible), mais même dans ces cas, il devrait être facile pour un utilisateur de quitter la visite. . Heureusement, cela est pris en charge dans Bootstrap Tour par défaut; un bouton "End Tour" est présent à chaque étape.

Commencez vite

Bien entendu, Bootstrap Tour nécessite des éléments de Twitter Bootstrap, ainsi que ses propres fichiers CSS et JavaScript, en plus de jQuery. De la documentation, voici les actifs requis.

   …    …

Notez que vous devrez également inclure le fichier CSS de base de Bootstrap pour afficher la fenêtre Bootstrap.

Début de la tournée

Ensuite, pour commencer avec une visite guidée, procédez comme suit dans votre fichier JavaScript (que nous couvrirons bientôt):

 // Créer un nouveau tour var tour = new Tour (); // Ajoutez vos étapes tour.addSteps ([element: ".message.message-1", // sélecteur d'élément pour afficher le popover à côté de; title: "Bienvenue dans ma tournée!", Contenu: "Nous allons pour rendre cela rapide et utile. ", element:" .message.message-2 ", titre:" Terminons cette chose avec un bang. ", content:" Boom, bang, bam! "]); // Initialise la méthode sur la classe Tour. Obtenez tout chargé et prêt à partir. tour.init (); // Ceci commence le tour lui-même tour.start ();

Cet exemple provient presque directement de la documentation et constitue le moyen le plus simple de démarrer avec Bootstrap Tour..

Allons plus loin, allons-nous?

Offres Bootstrap Tour des tonnes d’options pour personnaliser chaque étape du tour que vous voulez créer. Par défaut, il prend en charge localStorage (pour conserver votre place dans la visite si vous fermez l'onglet et revenez plus tard), les fonctions suivantes et précédentes, ainsi que tous les types de rappels que vous pouvez configurer pour répondre aux actions des utilisateurs. Il offre également de belles caractéristiques de finition, telles qu'un surligneur d'éléments, un "mode réflexe" (nous en expliquerons plus en détail ci-dessous), des étapes à progression automatique et même des visites de plusieurs pages..

Thème de démarrage

Pour les besoins de cette démo, nous allons commencer avec un modèle gratuit de StartBootstrap.com. StartBootstrap de Iron Summit Media Strategies est une collection de thèmes bootstrap gratuits et premium..

Une fois que vous avez téléchargé les projets, votre structure de fichier devrait ressembler à ceci.

. ├── css ├── bootstrap-tour.min.css ├── bootstrap.css └── └── landing-page.css ├── font-génial … ├── polices ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff ├── img ├── banner-bg.jpg ├── doge.png ├── intro-bg.jpg ├── ipad.png └── phones.png ├── index.html └── js ├── bootstrap-tour.min.js ├── bootstrap.js └── jquery-1.10.2.js

Remarque: nous avons ignoré la structure interne de FontAwesome, car ce ne sera pas important pour ce tutoriel.

Inclure les actifs

Ensuite, vous voudrez inclure CSS et JavaScript de Bootstrap Tour dans la index.html fichier. le de votre document devrait ressembler à ceci:

      Modèle de page de renvoi pour Bootstrap

Et à la fin du document, vous verrez le code JavaScript juste avant la fermeture. étiquette. Une fois que la configuration est opérationnelle, il est temps de commencer! Bien sûr, vous devrez ajouter votre propre code JavaScript personnalisé. Nous allons donc ajouter un "script.js" après le fichier Bootstrap Tour..

Vous voudrez concaténer et minimiser ces fichiers dans votre processus de construction. Nous ne couvrirons pas les processus de construction dans ce didacticiel, mais vous pouvez en apprendre davantage à ce sujet en lisant les meilleures pratiques pour augmenter les performances d'un site Web ou Meet Grunt: l'outil de construction pour JavaScript..

Mise en place de certaines étapes

Configurons quelques étapes simples avec le code suivant dans notre fichier "script.js".

 (function () var tour = new Tour (storage: false); tour.addSteps ([element: ".tour-step.tour-step-one", placement: "bottom", titre: "Bienvenue dans notre page de destination! ", contenu:" Cette visite vous guidera à travers certaines des fonctionnalités que nous aimerions souligner. ", element:" .tour-step.tour-step-two ", placement:" bottom ", titre:" Navigation principale ", contenu:" Voici les sections de cette page, faciles à afficher. ", element:" .tour-step.tour-step-three ", placement:" top ", toile de fond : true, title: "Section principale", content: "Ceci est une section que vous pouvez lire. Elle contient des informations précieuses.",]); // Initialise le tour tour.init (); // Commence le tour .début(); ());

Ce code est très similaire à l'exemple de démarrage facile ci-dessus. Nous initions notre Tour Par exemple, et dans l’intérêt de notre didacticiel, nous désactivons le stockage afin que la visite commence au début lorsque la page se charge à chaque fois. (Si vous supprimez cette option une fois que vous avez fini de créer votre visite, le stockage fonctionnera parfaitement.)

Ensuite, nous définissons quelques classes d'étape et les arguments associés. Notez l'argument "toile de fond" de la troisième étape; cela met en évidence l'élément que nous avons sélectionné pour attacher le popover ci-dessus.

Faire des changements de balisage

Ensuite, nous allons ajouter les classes d'étape aux éléments pertinents. Le haut de notre fichier d’index devrait maintenant ressembler à ce qui suit.

        Modèle de page de renvoi pour Bootstrap               Démarrer Bootstrap 
    Sur
 Prestations de service
 Contact
 
 
 
 
      Page d'atterrissage
 Un modèle par démarrage Bootstrap
 
   Gazouillement
  Github
  Linkedin
 
 
 
 
 
 
     
 
 Mort au Stock Photo: 
Remerciement spécial
 Un merci spécial à Death to the Stock Photo pour les photos que vous voyez dans ce modèle. Visitez leur site web pour devenir membre.

Et notre page devrait ressembler à ceci au chargement:

À la troisième étape, on peut voir le toile de fond fonctionnalité en action:

Génial! Nous avons effectué une tournée fonctionnelle dans une trentaine de lignes de JavaScript..

Utiliser le contenu dynamique

Les visites sont bien meilleures quand elles sont personnalisées, alors demandons à notre utilisateur quel est leur nom au début de la visite et utilisons-le pendant les étapes restantes de la visite. Voici le code JavaScript que nous utilisons pour accomplir cela.

 (function () var name = "Friend"; var tour = new Tour (storage: false); tour.addSteps ([element: ".tour-step.tour-step-one", placement: "bas ", titre:" Bienvenue sur notre page de destination! ", contenu:" Comment vous appelez-vous? "? 
", onNext: function (tour) var nameProvided = $ (" input [nom = votre_nom]]). val (); if ($ .trim (nameProvided)! == "") name = nameProvided; , element: ".tour-step.tour-step-two", placement: "bottom", titre: function () return "Welcome, + name;, content:" Voici les sections de cette page, facilement agencé. ", element:" .tour-step.tour-step-three ", placement:" top ", toile de fond: true, titre:" Section principale ", contenu:" Ceci est une section que vous pouvez lis. Il contient des informations précieuses. ", Element:" .tour-step.tour-step-four ", placement:" top ", orphelin: true, titre:" merci ", content: function () return" Nous sommes impatients de voir ce que vous pensez, "+ name +"!,]); // Initialisez le tour tour.init (); // Commencez le tour tour.start (); ());

Notez que le contenu et Titre Les arguments peuvent être une chaîne ou une fonction, ce qui leur permet d'être évalués au moment de l'affichage du popover. Le rappel de la première étape obtient le nom de l'utilisateur (à l'aide des classes intégrées de Bootstrap pour le style), puis nous affichons ce nom à la deuxième et dernière étape (nouvelle). Si l'utilisateur n'entre pas de nom ou n'entre que des espaces, nous définissons le nom par défaut sur "Ami"..

La dernière étape introduit également une nouvelle propriété, orphelin. Cela permet de séparer l'étape de tout élément particulier. Nous avons seulement laissé les classes d'éléments dans un souci de continuité et, au cas où nous voudrions éventuellement attacher cette étape à un élément. Voici à quoi ressemble l'étape finale:

Faire preuve de créativité!

Si vous voulez que votre visite soit utile, vous avez besoin d'une bonne stratégie de contenu. Ne mettez pas simplement quelques phrases dans votre configuration JavaScript et appelez-le terminé; Pensez à ce que vous essayez d'inspirer, à l'utilisateur, que ce soit pour utiliser votre application ou simplement pour vous réjouir..

Écrire un récit

Avant d'écrire votre visite, écrivez l'histoire de l'utilisateur qui va faire l'expérience de la visite. Déterminez qui est l'utilisateur et ce qu'il va penser et faire tout au long du processus. Une tournée est intrinsèquement définie sur une sorte de chronologie; profiter de cela. Développer une intrigue, avec une introduction, une montée et une conclusion dynamiques, et appliquer le concept à la tournée.

Informer et ravir

Horace a dit une fois:

Le but du poète est d’informer ou de faire plaisir, ou de combiner ensemble, dans ce qu’il dit, à la fois plaisir et applicabilité à la vie.

Le célèbre designer Milton Glaser a ajouté ceci:

Le but de l'art est d'informer et de ravir.

Cela aussi peut être l’objectif d’une bonne visite du site Web. Découvrez comment vous pouvez non seulement créer un contenu d'information, mais aussi divertir l'utilisateur pendant le processus. Par exemple, donnez à l'utilisateur un sentiment d'accomplissement lorsqu'il termine la visite:

 var tour = new Tour (onEnd: function (tour) giveAward ();); fonction giveAward () $ (".attribution"). addClass ("show"); setTimeout (function () $ (". award"). removeClass ("show");)

Cet extrait de code pourrait montrer à l'utilisateur quelque chose à la fin de la visite, comme une sorte de "remerciement" du guide touristique (c'est-à-dire vous) pour avoir terminé le voyage..

Utiliser le médium

HTML est pliable. Ne faites pas les choses étape par étape. Plongez dans l'utilisation des rappels et observez le comportement des utilisateurs pour rendre des expériences comme des visites plus interactives Par exemple, vous pouvez utiliser cette bibliothèque pour créer un récit de style "choisissez votre propre aventure" qui saute entre les étapes, en utilisant la aller à() méthode. Utilisez des rappels pour déclencher un comportement riche, tel que des animations ou des injections iFrame. Faites preuve de créativité et rappelez-vous le pouvoir du médium.

Conclusion

Bootstrap Tour est un plugin puissant qui peut vous aider à démarrer rapidement. Si vous appliquez les meilleures pratiques en matière de création de contenu et d'expérience utilisateur, une visite peut s'avérer être la meilleure chose à faire pour vous connecter avec votre public de manière puissante. Bootstrap Tour offre encore plus de souplesse que ce que nous avons décrit ici. Si vous souhaitez qu'un second article aille plus loin avec Bootstrap Tour, n'hésitez pas à nous le signaler dans les commentaires! Quels autres usages pouvez-vous proposer? Laissez tout le monde savoir ci-dessous!

Création de sites web