Wanneer u een webtoepassing hebt die wat gewenning van uw gebruikers vereist, is een doorloop van de interface in orde. Een walkthrough maken direct boven de interface maakt dingen heel duidelijk, dus dat is wat we gaan bouwen, met gebruik van Bootstrap Tour.

---

Vragen, vragen

Bootstrap Tour is een jQuery-gebaseerde plug-in voor Twitter Bootstrap waarmee u gemakkelijk interactieve walkthroughs kunt bouwen met een minimale hoeveelheid declaratieve JavaScript-configuratie in combinatie met uw bestaande DOM-structuur.

Als dat niet logisch is voor u, lees dan verder - we gaan het opsplitsen zodat u waardevolle, boeiende instructies voor uw gebruikers kunt maken.

Waarom zou ik instructies willen maken??

Als uw website enige bekendheid vereist, kan het laten zien van uw gebruikers zeer nuttig zijn. Eenmaal voltooid, kan de gebruiker op een bepaalde manier de "schaduw" zien van de instructie die u in de walkthrough hebt gegeven. Dit voorkomt dat de gebruiker aanwijzingen moet interpreteren als u een minder duidelijk medium gebruikt, zoals video, of nog erger, tekstuele handleidingen.

Een andere use case voor een interactieve tour is om een ​​foto te beschrijven. Stel je voor dat je een site bouwt die gewijd is aan het laten zien van prachtige panorama's van steden over de hele wereld. Wanneer een gebruiker op een stad klikt, kunt u met een interactieve rondleiding elementen van de foto aanwijzen die anders onopgemerkt zouden blijven.

Er zijn veel gebruiksmogelijkheden voor wanneer je een rondleiding zou willen gebruiken.

Wanneer moet ik een rondleiding vermijden??

Als uw interface zeer duidelijke conventies hanteert en u geen klachten van verwarring hebt gehoord, kan het toevoegen van een rondleiding uw gebruikers blokkeren om te doen wat zij het meest willen doen: gebruik uw applicatie.

Hoewel we het hebben over wat te vermijden, is het verstandig om je tour zo kort mogelijk te houden. Gebruikers willen alle benodigde informatie verzamelen om uw toepassing te gebruiken of uw verhaal te bekijken, maar zij willen ook dat dit zo snel mogelijk gebeurt. De enige uitzondering op deze regel zou een site zijn die bijna volledig afhankelijk is van een tour als een kernfunctie (de beschreven fotosite zou een mogelijk voorbeeld zijn), maar zelfs in deze gevallen zou het voor een gebruiker gemakkelijk moeten zijn om de tour te verlaten. . Gelukkig wordt dit standaard ondersteund in Bootstrap Tour; een "End Tour" -knop is aanwezig bij elke stap.

---

Aan de slag, snel

Bootstrap Tour vereist natuurlijk elementen van Twitter Bootstrap, evenals zijn eigen CSS-bestand en JavaScript-bestand, naast jQuery. Uit de documentatie, hier zijn de vereiste activa.

   ...    …      

Merk op dat je ook het basis css-bestand van Bootstrap moet opnemen om de Bootstrap-popover weer te geven.

Start de tour

Om vervolgens aan de slag te gaan met een rondleiding, voer je het volgende uit in je JavaScript-bestand (dat we binnenkort bespreken):

 // Maak een nieuwe tour var tour = nieuwe Tour (); // Voeg uw stappen toe tour.addSteps ([element: ".message.message-1", // element selector om de popover naast weer te geven: title: "Welcome to my tour!", Content: "We're going om dit snel en nuttig te maken. ", element:" .message.message-2 ", titel:" Laten we dit ding afmaken met een knal. ", inhoud:" Boom, bang, bam! "]); // Initialiseer methode in de Tour-klasse. Zorg dat alles is opgeladen en klaar voor gebruik. tour.init (); // Hiermee start de tour zelf tour.start ();

Dit voorbeeld is bijna direct overgenomen uit de documentatie en is de gemakkelijkste manier om met Bootstrap Tour aan de slag te gaan.

---

Laten we dieper gaan, zullen wij?

Bootstrap Tour biedt tons van opties om elke stap van de tour die u wilt maken aan te passen. Standaard ondersteunt het localStorage (om je plek in de tour te behouden als je het tabblad sluit en later terugkomt), volgende en vorige functies, plus allerlei callbacks die je kunt instellen om te reageren op acties van gebruikers. Het biedt ook mooie Poolse functies, zoals een element markeerstift, "reflex-modus" (we leggen hieronder meer uit), stappen om automatisch vooruit te gaan en zelfs reizen van meerdere pagina's.

Voorgerechtsthema

In het belang van deze demo gaan we beginnen met een gratis sjabloon van StartBootstrap.com. StartBootstrap van Iron Summit Media Strategies is een verzameling gratis en premium bootstrap-thema's.

Nadat u de projecten hebt gedownload, ziet uw bestandsstructuur er als volgt uit.

.
├── css
│ ├── bootstrap-tour.min.css
│ ├── bootstrap.css
│ └── landing-page.css
├── font-awesome
...
├── lettertypen
│ ├── 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


Notitie: we hebben de interne structuur van FontAwesome overgeslagen, omdat het niet belangrijk zal zijn voor deze tutorial.

Omvat activa

Vervolgens wil je de CSS en JavaScript van Bootstrap Tour opnemen in de index.html het dossier. De van uw document zou er als volgt uit moeten zien:

En aan het einde van het document ziet u het JavaScript vlak voor het sluiten label. Zodra u de set-up werkt, is het tijd om aan de slag te gaan! Natuurlijk moet je je eigen aangepaste JavaScript toevoegen, dus we zullen een "script.js" toevoegen na het Bootstrap Tour-bestand.

U wilt deze bestanden samenvoegen en verkleinen in uw bouwproces. In deze zelfstudie behandelen we geen build-processen, maar u kunt hier meer over leren door Best Practices voor het verbeteren van de websiteprestaties te lezen of Grunt te ontmoeten: de build-tool voor JavaScript.

Sommige stappen instellen

Laten we een paar eenvoudige stappen instellen met de volgende code in ons "script.js" -bestand.

 (function () var tour = new Tour (storage: false); tour.addSteps ([element: ".tour-step.tour-step-one", plaatsing: "bottom", titel: "Welkom bij onze landingspagina! ", inhoud:" Deze rondleiding zal u door enkele van de functies leiden die wij u willen wijzen. ", element:" .tour-step.tour-step-two ", placement:" bottom ", titel:" Hoofdnavigatie ", inhoud:" Dit zijn de secties van deze pagina, gemakkelijk aan te brengen. ", element:" .tour-step.tour-step-three ", plaatsing:" top ", achtergrond : true, titel: "Hoofdgedeelte", inhoud: "Dit is een sectie die u kunt lezen. Het heeft waardevolle informatie.",]); // Initialiseer de tour tour.init (); // Start de rondleiding .start (); ());

Deze code lijkt erg op het voorbeeld hierboven. We initiëren onze Tour Bijvoorbeeld, en omwille van onze tutorial schakelen we opslag uit, zodat de tour begint aan het begin wanneer de pagina elke keer wordt geladen. (Als u deze optie verwijdert als u klaar bent met het maken van uw rondleiding, werkt de opslag prima.)

Vervolgens definiëren we een paar stapklassen en bijbehorende argumenten. Let op het "achtergrond" -argument van de derde stap; dit markeert het element dat we hebben geselecteerd om de popover hierboven te bevestigen.

Markeringen aanbrengen

Vervolgens voegen we de stapklassen toe aan de relevante elementen. De bovenkant van ons indexbestand moet er nu als volgt uitzien.

                    
 
 
 
 
 
Landingspagina
 
Een sjabloon van Start Bootstrap
 
 
 
 tjilpen
 
 Github
 
 Linkedin
 
 
 
 
 
 
 
 
 
 
 
 
 
Dood aan de stockfoto: 
Speciale dank
 
Een speciale dank aan Death to the Stock Photo voor het leveren van de foto's die u in deze sjabloon ziet. Bezoek hun website om lid te worden.
 
 
  
 
 
 
   

En onze pagina zou er ongeveer zo uit moeten zien bij het laden:

In de derde stap kunnen we de backdrop functie in actie:

Super goed! We hebben een functionerende rondleiding gemaakt in ongeveer dertig regels JavaScript.

---

Gebruik maken van dynamische inhoud

Tours zijn veel beter wanneer ze gepersonaliseerd zijn, dus laten we onze gebruikers vragen wat hun naam is aan het begin van de tour en deze gebruiken tijdens de rest van de stappen van de tour. Hier is het JavaScript dat we gebruiken om dit te bereiken.

 (function () var name = "Friend"; var tour = new Tour (storage: false); tour.addSteps ([element: ".tour-step.tour-step-one", plaatsing: "bottom ", titel:" Welkom op onze landingspagina! ", inhoud:" Wat is uw naam? 
", onNext: function (tour) var nameProvided = $ (" input [name = your_name] "). val (); if ($ .trim (nameProvided)! ==" ") name = nameProvided; , element: ".tour-step.tour-step-two", plaatsing: "bottom", title: function () return "Welcome," + name;, content: "Dit zijn de gedeelten van deze pagina, gemakkelijk ingedeeld. ", element:" .tour-step.tour-step-three ", plaatsing:" top ", achtergrond: waar, titel:" Hoofdgedeelte ", inhoud:" Dit is een sectie die u kunt bekijken lezen. Het heeft waardevolle informatie. ", Element:" .tour-step.tour-step-four ", plaatsing:" top ", wees: waar, titel:" Thank you. ", Content: function () return" We kunnen niet wachten om te zien wat je denkt, "+ naam +"! ",]); // Initialiseer de tour tour.init (); // Start de tour tour.start (); ());

Merk op dat de inhoud en titel argumenten kunnen een tekenreeks of een functie zijn, waardoor ze kunnen worden geëvalueerd op het moment dat de popover wordt getoond. De callback voor de eerste stap krijgt de naam van de gebruiker (gebruikmakend van Bootstrap's ingebouwde klassen voor styling), en dan tonen we die naam in de tweede en laatste (nieuwe) stap. Als de gebruiker geen naam invoert, of alleen witruimte invoert, stellen we de standaardnaam in op 'Vriend'.

De laatste stap introduceert ook een nieuwe eigenschap, wees-. Hierdoor kan de stap worden losgemaakt van een specifiek element. We hebben de elementklassen alleen verlaten omwille van de continuïteit, en in het geval we uiteindelijk die stap willen toevoegen aan een element. Dit is hoe de laatste stap eruit ziet:

---

Wees creatief!

Als je wilt dat je tour nuttig is, heb je een goede contentstrategie nodig. Zet niet zomaar een paar zinnen in je JavaScript-configuratie en noem het gedaan; denk na over wat je probeert te _inspire_en de gebruiker te doen, of dat nu is om je applicatie te gebruiken of gewoon om blij te zijn.

Schrijf een verhaal

Noteer, voordat u uw tour gaat schrijven, het verhaal van de gebruiker die de tour gaat beleven. Zoek uit wie de gebruiker is en wat hij tijdens het hele proces zal denken en doen. Een rondleiding is inherent ingesteld op een soort tijdlijn; profiteer hiervan. Ontwikkel een plotlijn, met een dynamische introductie, opkomst en conclusie, en pas het concept toe op de tour.

Informeer en geniet

Horace zei ooit:

Het doel van de dichter is om te informeren of te verrukken, of om te combineren, in wat hij zegt, zowel plezier als toepasbaarheid aan het leven.

De beroemde ontwerper Milton Glaser breidde dit uit door te zeggen:

Het doel van kunst is om te informeren en vreugde te scheppen.

Dit kan ook het doel zijn van een goede websitour. Zoek uit hoe u niet alleen informatie-inhoud kunt maken, maar dat u de gebruiker tijdens het proces kunt vermaken. Geef de gebruiker bijvoorbeeld een gevoel van voldoening wanneer ze de tour voltooien:

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

Dit fragment kan de gebruiker iets laten zien aan het einde van de tour als een soort "dank u" van de gids (dat ben je) voor het voltooien van de reis.

Gebruik het medium

HTML is flexibel. Doe niet alleen stap voor stap dingen; duik in het gebruiken van callbacks en het bekijken van gebruikersgedrag om ervaringen zoals tours interactiever te maken. U zou bijvoorbeeld deze bibliotheek kunnen gebruiken om een ​​"kies uw eigen avontuur" -stijlverhaal te maken dat tussen de stappen springt, met behulp van de ga naar() methode. Gebruik callbacks om rich behaviour te activeren, zoals animaties of iFrame-injecties. Wees creatief en onthoud de kracht van het medium.

   Ga naar de betekenis!

---

Conclusie

Bootstrap Tour is een krachtige plug-in waarmee je snel van start kunt gaan. Als u praktische tips toepast voor UX en inhoudsontwerp, is een rondleiding misschien wel de juiste manier om op een krachtige manier contact te maken met uw publiek. Bootstrap Tour biedt nog meer flexibiliteit dan we hier behandeld hebben, dus als je een tweede artikel nog verder wilt laten gaan met Bootstrap Tour, laat het ons dan weten in de comments! Welke andere toepassingen kan je bedenken? Laat iedereen hieronder weten!