Quando si dispone di un'applicazione Web che richiede un po 'di tempo per abituarsi ai propri utenti, è necessaria una procedura dettagliata dell'interfaccia. Creare una soluzione direttamente sulla parte superiore dell'interfaccia rende le cose molto chiare, quindi è quello che stiamo per costruire, utilizzando Bootstrap Tour.

---

Domande, domande

Bootstrap Tour è un plug-in basato su jQuery per Twitter Bootstrap che consente di creare facilmente walkthrough interattivi utilizzando una quantità minima di configurazione dichiarativa di JavaScript in combinazione con la struttura DOM esistente.

Se questo non ha senso per te, continua a leggere: lo analizzeremo in modo da poter creare istruzioni utili e coinvolgenti per i tuoi utenti.

Perché dovrei voler creare istruzioni?

Se il tuo sito web richiede un certo livello di familiarità, mostrare ai tuoi utenti cosa fare può essere molto utile. Una volta completato, l'utente può, in un certo senso, vedere "l'ombra" delle istruzioni fornite nella procedura dettagliata. Ciò evita all'utente di dover interpretare le indicazioni se si utilizza un mezzo meno chiaro come video o, peggio ancora, guide testuali.

Un altro caso d'uso per un tour interattivo è descrivere una foto. Immagina di costruire un sito dedicato a mostrare splendidi panorami delle città di tutto il mondo. Quando un utente fa clic su una città, un tour interattivo ti consente di indicare elementi della foto che altrimenti potrebbero passare inosservati.

Ci sono molti casi d'uso per quando vorresti usare un tour.

Quando dovrei evitare di usare un tour?

Se la tua interfaccia segue convenzioni molto chiare e non hai mai sentito lamentele di confusione, l'aggiunta di un tour potrebbe impedire agli utenti di fare ciò che vogliono fare di più: utilizzare la tua applicazione.

Mentre siamo in tema di cosa evitare, sarebbe saggio mantenere il tuo tour il più breve possibile. Gli utenti vogliono raccogliere tutte le informazioni necessarie per utilizzare la tua applicazione o visualizzare la tua storia, ma vogliono anche che accada il più rapidamente possibile. L'unica eccezione a questa regola sarebbe un sito che si basa quasi esclusivamente su un tour come funzionalità principale (il sito di foto descritto sarebbe un possibile esempio), ma anche in questi casi, dovrebbe essere facile per un utente uscire dal tour . Fortunatamente, questo è supportato in Bootstrap Tour per impostazione predefinita; un pulsante "Fine tour" è presente ad ogni passaggio.

---

Inizia, veloce

Bootstrap Tour richiede, ovviamente, elementi di Twitter Bootstrap, oltre al proprio file CSS e file JavaScript, oltre a jQuery. Dalla documentazione, ecco le risorse richieste.

   ...    …      

Si noti che è anche necessario includere il file css di base di Bootstrap per visualizzare il popover Bootstrap.

Inizia il tour

Successivamente, per iniziare con un tour, esegui quanto segue all'interno del tuo file JavaScript (che tratteremo a breve):

 // Crea un nuovo tour var tour = new Tour (); // Aggiungi i tuoi passi tour.addSteps ([element: ".message.message-1", // selettore di elementi per mostrare il popover accanto a: title: "Benvenuto nel mio tour!", Contenuto: "Stiamo andando per rendere questo veloce e utile. ", element:" .message.message-2 ", titolo:" Finiamo questa cosa con il botto. ", contenuto:" Boom, bang, bam! "]); // Inizializza il metodo nella classe Tour. Tutto è carico e pronto per partire. tour.init (); // Questo avvia il tour stesso tour.start ();

Questo esempio è stato preso quasi direttamente dalla documentazione ed è il modo più semplice per iniziare con Bootstrap Tour.

---

Andiamo più in profondità, vogliamo noi?

Offerte di tour di avvio tonnellate di opzioni per personalizzare ogni fase del tour che si desidera creare. Per impostazione predefinita, supporta localStorage (per preservare la posizione nel tour se si chiude la scheda e si torna più tardi), le funzioni successiva e precedente, oltre a tutti i tipi di callback che è possibile impostare per rispondere alle azioni degli utenti. Fornisce anche belle funzionalità di lucidatura come un elemento evidenziatore, "modalità riflessa" (spiegheremo più in basso), passaggi autoavanzanti e persino tour di più pagine.

Tema di avviamento

Per il bene di questa demo, inizieremo con un modello gratuito da StartBootstrap.com. StartBootstrap di Iron Summit Media Strategies è una raccolta di temi di bootstrap gratuiti e premium.

Una volta che hai scaricato i progetti, la struttura dei file dovrebbe essere simile a questa.

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


Nota: abbiamo saltato la struttura interna di FontAwesome, in quanto non sarà importante per questo tutorial.

Includi risorse

Successivamente, ti consigliamo di includere CSS e JavaScript di Bootstrap Tour in index.html file. Il del tuo documento dovrebbe assomigliare a questo:

E alla fine del documento, vedrai il codice JavaScript appena prima della chiusura etichetta. Una volta che hai completato l'installazione, è ora di iniziare! Naturalmente, dovrai aggiungere il tuo codice JavaScript personalizzato, quindi aggiungeremo un "script.js" dopo il file Tour di Bootstrap.

Ti consigliamo di concatenare e minimizzare questi file nel processo di creazione. In questo tutorial non tratteremo i processi di compilazione, ma puoi saperne di più leggendo le best practice per aumentare le prestazioni del sito web o Meet Grunt: lo strumento di compilazione per JavaScript.

Impostazione di alcuni passaggi

Impostiamo alcuni semplici passaggi con il seguente codice all'interno del nostro file "script.js".

 (function () var tour = new Tour (storage: false); tour.addSteps ([element: ".tour-step.tour-step-one", posizionamento: "bottom", titolo: "Benvenuto in la nostra pagina di destinazione! ", contenuto:" Questo tour ti guiderà attraverso alcune delle funzionalità che vorremmo segnalare. ", element:" .tour-step.tour-step-two ", posizionamento:" bottom ", titolo:" Navigazione principale ", contenuto:" Ecco le sezioni di questa pagina, facilmente disposte. ", elemento:" .tour-step.tour-step-three ", posizionamento:" top ", sfondo : true, titolo: "Sezione principale", contenuto: "Questa è una sezione che puoi leggere. Ha informazioni preziose.",]); // Inizializza il tour tour.init (); // Inizia il tour .inizio(); ());

Questo codice è molto simile all'esempio easy-start di cui sopra. Iniziamo il nostro giro Per esempio, e per il nostro tutorial stiamo disabilitando la memoria in modo che il tour inizi dall'inizio quando la pagina viene caricata ogni volta. (La rimozione di questa opzione una volta terminata la creazione del tour consentirà all'archiviazione di funzionare correttamente).

Quindi, definiamo alcune classi di passaggi e argomenti associati. Si noti l'argomento "contesto" del terzo passo; questo evidenzia l'elemento che abbiamo selezionato per attaccare il popover sopra.

Fare modifiche al markup

Successivamente, aggiungeremo le classi di passaggi agli elementi pertinenti. La parte superiore del nostro file di indice dovrebbe ora apparire come la seguente.

                    
 
 
 
 
 
Pagina di destinazione
 
Un modello per Start Bootstrap
 
 
 
 cinguettio
 
 Github
 
 Linkedin
 
 
 
 
 
 
 
 
 
 
 
 
 
Morte alla Foto Stock: 
Ringraziamenti speciali
 
Un ringraziamento speciale a Death to the Stock Photo per aver fornito le fotografie che vedete in questo modello. Visita il loro sito Web per diventare un membro.
 
 
  
 
 
 
   

E la nostra pagina dovrebbe apparire qualcosa del genere al momento del caricamento:

Sul terzo gradino possiamo vedere il fondale funzione in azione:

Grande! Abbiamo fatto un tour funzionante in circa trenta righe di JavaScript.

---

Utilizzo del contenuto dinamico

I tour sono molto meglio quando sono personalizzati, quindi chiediamo al nostro utente quale sia il loro nome all'inizio del tour e lo utilizzi per il resto dei passaggi del tour. Ecco il JavaScript che usiamo per realizzare questo.

 (function () var name = "Friend"; var tour = new Tour (storage: false); tour.addSteps ([element: ".tour-step.tour-step-one", posizionamento: "bottom ", titolo:" Benvenuto nella nostra pagina di destinazione! ", contenuto:" Qual è il tuo nome? 
", onNext: function (tour) var nameProvided = $ (" input [nome = tuo_nome] "). val (); if ($ .trim (nameProvided)! ==" ") name = nameProvided; , element: ".tour-step.tour-step-two", posizionamento: "bottom", title: function () return "Welcome," + name;, content: "Ecco le sezioni di questa pagina, facilmente disposto. ", elemento:" .tour-step.tour-step-three ", posizionamento:" top ", fondale: true, titolo:" Sezione principale ", contenuto:" Questa è una sezione che puoi leggere. Ha informazioni preziose. ", Elemento:" .tour-step.tour-step-four ", posizionamento:" top ", orfano: true, titolo:" Grazie. ", Content: function () return" Non vediamo l'ora di vedere cosa ne pensi, "+ name +"! ",]); // Inizializza il tour tour.init (); // Avvia il tour tour.start (); ());

Si noti che il soddisfare e titolo gli argomenti possono essere una stringa o una funzione, che consente loro di essere valutati nel momento in cui viene mostrato il popover. Il callback per il primo passo ottiene il nome dell'utente (utilizzando le classi incorporate di Bootstrap per lo styling), e quindi lo visualizziamo nel secondo e ultimo (nuovo) passo. Se l'utente non immette un nome o inserisce solo spazi bianchi, impostiamo il nome predefinito su "Amico".

L'ultimo passaggio introduce anche una nuova proprietà, orfano. Ciò consente al passaggio di essere separato da qualsiasi elemento particolare. Abbiamo lasciato le classi di elementi solo per motivi di continuità e nel caso in cui alla fine desideriamo collegare quel passaggio a un elemento. Ecco come appare il passaggio finale:

---

Diventa creativo!

Se vuoi che il tuo tour sia utile, hai bisogno di una buona strategia per i contenuti. Non inserire solo poche frasi nella configurazione JavaScript e chiamarla completata; pensa a cosa stai provando a _inspire_ l'utente a fare, sia che si tratti di usare la tua applicazione o semplicemente di essere deliziato.

Scrivi una descrizione

Prima di scrivere il tuo tour, scrivi la storia dell'utente che vivrà il tour. Scopri chi è l'utente e cosa penseranno e faranno durante tutto il processo. Un tour è intrinsecamente impostato su una sorta di timeline; approfittare di questo. Sviluppa una trama, con un'introduzione dinamica, un aumento e una conclusione, e applica il concetto al tour.

Informa e delizia

Orazio una volta disse:

L'obiettivo del poeta è quello di informare o deliziare, o di combinare insieme, in quello che dice, sia piacere che applicabilità alla vita.

Il famoso designer Milton Glaser ha ampliato questo concetto dicendo:

Lo scopo dell'arte è quello di informare e deliziare.

Anche questo può essere l'obiettivo di un buon tour del sito web. Scopri come non solo puoi creare contenuti informativi, ma divertirti mentre sei nel processo. Ad esempio, dare all'utente un senso di realizzazione quando completano il tour:

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

Questo frammento potrebbe mostrare all'utente qualcosa alla fine del tour come una sorta di "ringraziamento" della guida turistica (che sei tu) per aver completato il viaggio.

Utilizza il mezzo

L'HTML è flessibile Non limitarti a fare le cose passo dopo passo; immergersi nell'uso di callback e osservare il comportamento degli utenti per rendere le esperienze come le visite più interattive. Ad esempio, potresti usare questa libreria per fare un racconto di stile "scegli la tua avventura" che salta tra i passaggi, usando il vai a() metodo. Usa le callback per attivare un comportamento ricco, come le animazioni o le iniezioni iFrame. Diventa creativo e ricorda il potere del mezzo.

   Ottieni il significato!

---

Conclusione

Bootstrap Tour è un potente plug-in che ti consente di iniziare rapidamente. Se applichi le migliori pratiche di UX e progettazione dei contenuti, un tour potrebbe essere la cosa giusta per entrare in contatto con il tuo pubblico in modo potente. Bootstrap Tour offre una flessibilità ancora maggiore di quella di cui abbiamo parlato qui, quindi se desideri un secondo articolo andando ancora oltre con Bootstrap Tour, assicurati di farcelo sapere nei commenti! Quali altri usi puoi trovare? Fai sapere a tutti sotto!