Tutorial guidati (gestione)

Dove si trova: indirizzo /config/tutorials — pagina di configurazione Tutorial guidati.

A cosa serve

Da questa pagina crei e gestisci i tutorial guidati che gli utenti possono avviare dal pulsante Tutorial nella barra in alto (vedi Seguire un tutorial guidato). Definisci i dati generali di ogni tutorial (nome, descrizione, pagina di partenza) e poi componi i passi direttamente "in interfaccia": navighi nell'applicazione, clicchi gli elementi da evidenziare e scrivi i testi di ciascun passo.

Cosa vedi

In alto trovi il titolo Tutorial guidati con il sottotitolo "Crea tour interattivi: seleziona i componenti, inserisci i testi, forza i click e mostra dati finti" e il pulsante Nuovo tutorial.

Se non esiste ancora nessun tutorial compare l'avviso "Nessun tutorial. Creane uno con «Nuovo tutorial»." Altrimenti vedi una tabella con:

• Nome — il nome del tutorial, con la descrizione sotto.
• step — quanti passi contiene.
• Feature — l'eventuale sezione dell'applicazione a cui è riservato ("—" se vale ovunque).
• Abilitato — ✔ se visibile agli utenti, "—" se spento.
• Azioni — i pulsanti Anteprima (avvia il tutorial per provarlo; disattivato se non ha passi), Componi step in interfaccia, Modifica ed Elimina.

La scheda di modifica

Cliccando Nuovo tutorial o Modifica si apre una scheda con:

• Nome (obbligatorio) e Descrizione;
• Pagina iniziale (rotta) — l'indirizzo della pagina da cui il tutorial parte (es. /);
• Feature (opz.) — se compilata, il tutorial compare solo agli utenti che stanno lavorando in quella sezione;
• la casella Abilitato;
• un promemoria con il numero di passi attuali ("Gli step si compongono in interfaccia: salva o usa «Componi step» per selezionare i componenti.");
• i pulsanti Annulla, Salva (disattivato senza nome) e Componi step in interfaccia (disattivato senza nome).

La modalità di composizione

Avviando Componi step in interfaccia l'applicazione ti porta alla pagina iniziale del tutorial e compare un pannello fisso in basso a sinistra con:

• il nome del tutorial e il conteggio dei passi;
• l'elenco dei passi, ciascuno con numero, titolo (o l'identificativo dell'elemento se il titolo manca) e i pulsanti ▲/▼ per spostarlo, ✎ per modificarlo e ✕ per eliminarlo;
• i pulsanti Aggiungi step, Salva (disattivato finché il tutorial non ha almeno un passo e un nome) e Annulla.

Cliccando Aggiungi step compare in alto il messaggio "Clicca un elemento evidenziato per creare uno step. Puoi anche navigare tra le pagine.": in questa fase gli elementi della pagina predisposti per i tutorial vengono evidenziati al passaggio e puoi spostarti liberamente tra le pagine finché non clicchi quello che ti interessa (oppure Annulla per uscire dalla selezione).

La finestra del passo

Dopo aver cliccato un elemento (o con ✎ su un passo esistente) si apre la finestra Nuovo step / Modifica step con:

• Elemento — l'identificativo dell'elemento della pagina da evidenziare (precompilato con quello che hai cliccato; è l'unico dato obbligatorio);
• Pagina (rotta) — la pagina in cui si trova l'elemento (precompilata con quella corrente); durante la riproduzione il tutorial vi naviga da solo;
• Titolo e Testo — quello che l'utente leggerà nel fumetto;
• Azione — cosa fa il passo sull'elemento:
  • Highlight — lo evidenzia soltanto;
  • ForceClick — lo clicca automaticamente al posto dell'utente;
  • RequireClick — chiede all'utente di cliccarlo lui stesso;
  • Input — vi scrive automaticamente un testo (compare il campo Testo da inserire);
• Posizione — dove collocare il fumetto rispetto all'elemento (auto, top, bottom, left, right);
• Avanzamento — come si passa al passo successivo:
  • Button — l'utente clicca Avanti;
  • OnAction — si avanza quando l'azione avviene (il clic dell'utente o quello automatico);
  • Delay — si avanza da solo dopo l'attesa indicata nel campo Attesa (ms) (se vuoto, circa 3 secondi);
• Scenario dati finti (opz.) — la chiave di uno scenario di dati dimostrativi da attivare durante il passo.

Confermi con Conferma (disattivato finché il campo Elemento è vuoto) o rinunci con Annulla.

Cosa puoi fare

Creare un tutorial

1. Clicca Nuovo tutorial.
2. Compila almeno il Nome; se serve indica descrizione, pagina iniziale, feature e lascia o togli la spunta Abilitato.
3. Clicca Salva per registrare solo i dati generali, oppure passa subito alla composizione dei passi (punto seguente).

Comporre i passi in interfaccia

1. Dalla scheda di modifica clicca Componi step in interfaccia (oppure usa l'icona corrispondente nella riga della tabella).
2. Clicca Aggiungi step, naviga se necessario fino alla pagina giusta e clicca l'elemento evidenziato che vuoi spiegare.
3. Nella finestra del passo scrivi titolo e testo, scegli azione, posizione e avanzamento, poi clicca Conferma.
4. Ripeti per tutti i passi; con ▲/▼ li riordini, con ✎ li correggi, con ✕ li elimini.
5. Clicca Salva nel pannello: compare la conferma "Tutorial salvato" e torni all'elenco. Con Annulla esci scartando le modifiche fatte in composizione.

Provare un tutorial

1. Nella riga del tutorial clicca il pulsante Anteprima (freccia di riproduzione).
2. Il tutorial parte esattamente come lo vedrà l'utente, dalla sua pagina iniziale.
3. Lo interrompi in qualsiasi momento con la ✕ (Salta) del fumetto.

Modificare o eliminare un tutorial

1. Clicca Modifica per cambiare i dati generali, oppure Componi step in interfaccia per rimettere mano ai passi.
2. Clicca Elimina per cancellare il tutorial.

Buono a sapersi

Quando un tutorial è visibile agli utenti

Nel menu Tutorial degli utenti compaiono solo i tutorial abilitati e con almeno un passo. Se hai indicato una Feature, il tutorial compare solo a chi sta lavorando in quella sezione; lasciandola vuota vale ovunque.

Elementi selezionabili

In modalità di selezione puoi cliccare solo gli elementi dell'applicazione predisposti per i tutorial (sono quelli che si evidenziano al passaggio). Nel campo Elemento della finestra del passo puoi comunque digitare a mano un identificativo, se lo conosci.

Se l'elemento non si trova durante la riproduzione

Se al momento della riproduzione l'elemento di un passo non è presente nella pagina, l'utente vede l'avviso "Elemento non trovato in questa pagina." e può comunque proseguire con Avanti. Usa l'Anteprima per accorgertene prima dei tuoi utenti.

L'eliminazione è immediata

Il pulsante Elimina cancella il tutorial senza chiedere conferma. In caso di errore dovrai ricrearlo da capo.

Salva prima di uscire dalla composizione

In modalità di composizione lavori su una copia: i passi aggiunti, spostati o eliminati diventano definitivi solo con Salva del pannello. Con Annulla tutte le modifiche fatte in composizione vanno perse.