Panoramica
Con Touch costruisci contenuti interattivi per schermi touch senza programmare: menu su più livelli, quiz e altro. I visitatori toccano un pulsante o un’immagine e lo schermo passa alla diapositiva che hai scelto.
Primi passi
In questo tutorial creiamo un quiz semplice, come esempio di contenuto touch che risponde al tocco o al clic.
Prima di iniziare, prova tu il quiz. Puoi usare il mouse per fare clic sui pulsanti.
Costruire contenuti interattivi con Touch per il digital signage
Diapositive
Il quiz contiene 6 diapositive diverse:
- Pagina di arrivo / inizio
- Prima domanda
- La risposta corretta alla prima domanda
- Seconda domanda
- La risposta corretta alla seconda domanda
- Risposta sbagliata
Creare le diapositive
Quando crei interfacce touch, spesso non hai ancora in mente il quadro completo. Ti consigliamo di creare tutte le diapositive prima di collegarle con le azioni al clic, perché aggiungere un’azione al clic richiede di scegliere una diapositiva precisa. Se non hai ancora il quadro completo, l’ordine delle diapositive può cambiare: è più semplice crearle tutte e poi collegare le azioni al clic.
Aggiungere azioni al clic
Puoi aggiungere azioni al clic ai singoli elementi (immagini, testo, rettangoli e altro) oppure usare un elemento «pulsante». L’elemento pulsante è in realtà un elemento trasparente che puoi mettere sopra altri elementi per reagire al tocco. In questo quiz i pulsanti sono fatti di rettangoli con il testo sopra. Invece di assegnare un’azione al clic sia al rettangolo sia al testo, aggiungiamo un elemento pulsante sopra e assegniamo l’azione al clic a quello.
Posizioniamo l’elemento pulsante sopra il pulsante e gli assegniamo un’azione che, al clic, passa alla diapositiva 2.
Ora che tutte le diapositive sono create, passiamo tutti i pulsanti e li puntiamo alla diapositiva giusta. I pulsanti con la risposta sbagliata puntano a una diapositiva in cui all’utente compare «Risposta sbagliata» e può rifare il quiz. I pulsanti con la risposta corretta puntano a una diapositiva in cui compare «Risposta corretta» e si può passare alla domanda successiva.
Tornare a una pagina di arrivo
A volte si inizia il quiz e lo si lascia a metà. Vogliamo che il quiz torni all’inizio dopo un po’ di inattività. Per farlo usiamo la durata della diapositiva e la funzione che decide quale diapositiva viene dopo.
Ipotizziamo che, se l’utente non fa clic su un pulsante per 1 minuto, abbia lasciato il totem. Impostiamo quindi la durata delle diapositive a 1 minuto. Dato che vogliamo che la playlist torni alla prima diapositiva, impostiamo anche l’opzione «Dopo questa diapositiva riproduci» sul valore «Diapositiva 1», altrimenti per impostazione predefinita passerebbe alla diapositiva successiva (trovi questa opzione anche nella finestra delle impostazioni della diapositiva, nella sezione «Avanzate»).
Quando hai cambiato il comportamento predefinito (per impostazione predefinita si riproduce sempre la diapositiva successiva), nella miniatura della diapositiva compare una piccola freccia. Passandoci sopra il mouse, indica quale diapositiva viene dopo:
Se non ti serve riportare la playlist allo stato iniziale, puoi semplicemente impostare tutte le diapositive su «Riproduci questa diapositiva per sempre».
Ottieni questa playlist
Puoi clonare questo esempio di quiz nel tuo account, per vederlo e modificarlo. Per farlo vai alla pagina «Playlist» del nostro portale web, fai clic sul pulsante «Da modello» e trova la scheda «Touch». Fai clic sulla playlist «Touch Quiz» per clonarla nel tuo account.
Opzioni
Allineamento
Adatta, allinea e blocca o sblocca il plugin.
Al clic
Scegli a quale diapositiva passare al clic.
- Passa a – passa all’indice della diapositiva nella playlist. Fa riferimento a una posizione, quindi se l’ordine delle diapositive cambia, cambia anche la diapositiva di destinazione.
- Ancora a – ancora a una diapositiva precisa, così se l’ordine cambia il clic va comunque alla diapositiva definita. Per poter ancorare una diapositiva, dalle prima un nome nella pagina delle impostazioni della diapositiva (dove imposti la durata)
Posizionamento
Regola con precisione dimensione e posizione del plugin.
Domande frequenti
Le azioni al clic vanno alla diapositiva sbagliata dopo aver aggiunto altre diapositive alla playlist.
Per impostazione predefinita le azioni al clic sono collegate a una diapositiva tramite il suo indice nella playlist. Se l’ordine delle diapositive cambia, l’azione al clic va a una diapositiva diversa. Puoi però ancorare un clic a una diapositiva precisa: prima dagli un nome (nella pagina delle impostazioni della diapositiva, dove imposti la durata), poi seleziona l’opzione per ancorarla.
Come evito di tornare alla diapositiva iniziale mentre l’utente ci sta interagendo?
Come in questo esempio, vogliamo che la playlist torni alla diapositiva di arrivo dopo un po’ di inattività. Un caso comune è un modulo web da compilare: se l’utente è lento, come evitiamo che la playlist torni allo stato iniziale mentre sta compilando il modulo a metà (o sta interagendo con un sito)?
C’è un’impostazione chiamata «Ritardo d’interazione in secondi» per le playlist. La trovi nella finestra delle impostazioni della playlist (dove rinomineresti la playlist), nella sezione «avanzate». Il ritardo di interazione rimanda di fatto la diapositiva successiva ogni volta che l’utente tocca o fa clic sullo schermo.
Attenzione. Questa funzione NON è supportata nell’anteprima web e sui player Android (Fire TV compreso).
Mettiamo una diapositiva con durata di 60 secondi: dopo 60 secondi di inattività tornerebbe alla prima diapositiva. Mettiamo di impostare il ritardo di interazione della diapositiva a 20 secondi. Ora, se l’utente tocca, scrive o fa clic sullo schermo mentre alla diapositiva restano meno di 20 secondi, il tempo di riproduzione torna a 20 secondi a ogni interazione (e ricomincia a scendere da 20 secondi). Se l’utente interagisce con la diapositiva quando restano più di 20 secondi, l’impostazione non ha effetto. Un buon valore per il ritardo di interazione dipende da quanto spesso ti aspetti che gli utenti tocchino lo schermo.
