Linee guida per la progettazione (Dialogflow)

Esistono due aspetti principali della progettazione per Interactive Canvas:

  • Progettare la conversazione
  • Progettare l'interfaccia utente (UI)

Gli utenti possono interagire con l'Azione che utilizza Interactive Canvas parlando con l'assistente o toccando l'interfaccia utente. È necessario assicurarsi che la conversazione vocale e l'interfaccia utente si completino a vicenda e che rendano facile ed emozionante per gli utenti l'avanzamento nell'Azione. In questa sezione vedremo come progettare sia la conversazione che l'interfaccia utente per ottimizzare l'esperienza utente.

La funzionalità Canvas interattiva è adatta alla mia azione?

Prima di iniziare la progettazione, valuta se l'Azione è compatibile con Interactive Canvas. Ti consigliamo di utilizzare Interactive Canvas se:

  • L'Azione trarrebbe vantaggio da esperienze visivamente accattivanti a schermo intero. Interactive Canvas è ideale per le esperienze a schermo intero che beneficiano di immagini ricche, come i giochi immersivi con comandi vocali.
  • L'Azione ha un flusso di conversazione intuitivo. Il percorso critico dell'Azione deve essere percorribile soltanto con la voce. Un'azione che richiede precisione spaziale, come un'app di disegno, potrebbe fornire un'esperienza difficile per progettare un flusso di conversazione intuitivo.
  • I componenti esistenti e la personalizzazione non sono sufficienti (ad esempio, se vuoi andare oltre i componenti visivi e la personalizzazione esistenti dell'assistente). La funzionalità Canvas interattiva è un'ottima soluzione per mettere in evidenza le caratteristiche distintive del tuo brand, gli elementi dinamici e le animazioni. Inoltre, è possibile utilizzare Interactive Canvas per fornire aggiornamenti a una singola interfaccia visiva man mano che l'utente avanza nella conversazione.

Requisiti

Sebbene Interactive Canvas sia un ambiente di sviluppo web familiare, è necessario tenere in considerazione alcuni requisiti prima di progettare l'Azione.

Nella parte superiore di ogni app web canvas è presente un'intestazione con il nome del tuo brand. Quest'area riservata ha un'altezza di 56 dp per i dispositivi mobili, 96 dp per Home Hub e 120 dp per lo smart display. Assicurati di rispettare questo requisito dell'intestazione:

  • Assicurati che dietro l'intestazione non siano nascosti elementi interattivi o informazioni importanti. Il metodo getHeaderHeightPx() determina l'altezza dell'intestazione.
Figura 1. Esempi di visualizzazione dell'intestazione in varie azioni.

Limitazioni

Prima di progettare l'azione con Canvas interattiva, considera questi vincoli:

  • Nessuna archiviazione locale dei dati. Impedisciamo all'Azione di memorizzare cookie e accedere all'API Web Storage. Alla luce di queste restrizioni, ti consigliamo di fare in modo che l'Azione gestisca lo stato nel webhook e utilizzi il campo userStorage di AppRequest per salvare i dati utente.
  • Non utilizzare popup né finestre modali. Impedisciamo all'Azione di mostrare finestre popup o modali. Inoltre, sconsigliamo vivamente di utilizzare altri elementi standard dell'interfaccia utente di navigazione che generalmente vedi nelle app web, come tastiere e impaginazione.

Progetta la tua conversazione

Per prima cosa devi progettare la conversazione dell'Azione. Le esperienze interattive su Canvas sono ancora voice-forward, quindi è importante che la conversazione accompagni in modo efficace l'utente nell'esecuzione dell'Azione. Un'azione che utilizza Interactive Canvas può essere paragonata a una conversazione con immagini utili. Per ulteriori informazioni sulla progettazione delle conversazioni, consulta la pagina Guida introduttiva del sito Conversation Design.

Linee guida

Per un'esperienza utente ottimale, è necessario:

  • Segui il processo di progettazione delle conversazioni e le best practice descritte nel sito per la progettazione della conversazione. Ciò significa che, tra le altre cose, devi:

    • Assicurati che l'esperienza di azione sia adatta alle conversazioni
    • Creare un utente tipo del brand
    • Gestire gli errori all'interno della conversazione
    • Prova un'esperienza solo vocale prima di capire che aspetto avrebbe con uno schermo

  • Prova a fornire le stesse funzionalità tramite tocco e voce. Se possibile, assicurati di svolgere tutte le operazioni che puoi svolgere toccando lo schermo che puoi svolgere anche con i comandi vocali.

  • Assicurati che il percorso critico dell'Azione sia fattibile tramite comandi vocali. Gli utenti devono essere in grado di esplorare i percorsi principali dell'Azione utilizzando solo la voce.

  • Assicurati che l'utente possa utilizzare l'Azione senza audio. Sui dispositivi mobili, l'utente potrebbe non avere l'audio attivo. Per questo motivo, valuta l'opportunità di aggiungere trascrizioni all'Azione per guidare l'utente.

  • Prendi in considerazione il carico cognitivo. Evita risposte vocali troppo lunghe per ridurre il carico cognitivo per l'utente.

Progetta la tua UI

Dopo aver progettato la conversazione, puoi progettare l'interfaccia utente di conseguenza. In fase di progettazione, valuta in che modo il naturale avanti e indietro del dialogo può spingere l'interfaccia visiva che presenti all'utente. Se ti occupi di progettazione per gli smart display, consulta le considerazioni specifiche in Design per smart display.

Linee guida

Per un'esperienza utente ottimale, è necessario:

  • Crea design adattabili. Assicurati che il tuo design sia adatto alla modalità orizzontale e verticale sia per i telefoni di piccole dimensioni che per gli schermi più grandi. I tuoi utenti devono essere in grado di leggere facilmente l'interfaccia utente per ogni tipo di piattaforma.
  • Prendi in considerazione il carico cognitivo. Per evitare di sovraccaricare gli utenti, fai in modo che le informazioni e i contenuti presentati sullo schermo siano organizzati, puliti e concisi.
  • Adatta l'output vocale allo schermo. Usa le immagini in modo creativo per accompagnare l'audio: non limitarti a scrivere quello che viene detto ad alta voce. Quando è disponibile una schermata, possiamo essere più concisi con l'output vocale rispetto a quando non lo è.
  • Evita di posizionare le informazioni o i componenti critici nella parte inferiore dello schermo. Sui dispositivi mobili, la trascrizione dell'utente appare sopra la piastra del microfono e può crescere fino a poche righe. Anche se questa trascrizione è temporanea, eviti di scrivere contenuti importanti in fondo allo schermo. I pulsanti simili ai chip di suggerimenti possono essere visualizzati nella parte inferiore dello schermo, in quanto l'input utente è un'alternativa all'utilizzo dei chip di suggerimento.
  • Gestisci visivamente gli errori all'interno della conversazione. Gli errori possono verificarsi quando l'utente non risponde, se non li capisci o non restituisci il fulfillment per quello che ha detto. Cercate di capire dove si trovano queste richieste di errore nella vostra UI. La posizione può essere qualsiasi posizione in cui vengono visualizzati i prompt (ad es. nel titolo) oppure qualcosa di diverso (ad es. un'area speciale di contenuti visualizzata in base alle esigenze). Per ulteriori suggerimenti sulla gestione degli errori, consulta il sito dedicato alla progettazione della conversazione.

Design per gli smart display

Anche se le linee guida precedenti sono ancora valide, dovresti tenere a mente altre considerazioni di progettazione quando progetti per gli smart display. Si ha la tentazione di considerare gli smart display come i tablet quando si progettano per loro. Tuttavia, gli smart display sono una categoria di dispositivi completamente nuova e diversa per due motivi:

  • Gli smart display sono compatibili con la voce e l'Assistente Google è il sistema operativo
  • Gli smart display sono fissi e, a differenza dei dispositivi mobili, spesso si trovano in cucina o in camera da letto quando usati a casa

A causa di queste caratteristiche, gli utenti a volte non sono fisicamente vicini al dispositivo e interagiscono con gli smart display usando soltanto la loro voce. Gli utenti possono anche svolgere più attività contemporaneamente mentre utilizzano gli smart display. È importante tenere a mente questi usi quando si progetta per gli smart display.

Linee guida

Per un'esperienza utente ottimale con gli smart display, dovresti:

  • Progettare tenendo a mente la voce. Progettare l'azione interattiva Canvas in modo che sia orientata alla voce è ancora più importante per gli smart display. A differenza di un dispositivo mobile, l'utente potrebbe trovarsi dall'altra parte della stanza e comunicare con il suo smart display soltanto tramite la voce. Per questo motivo, non sempre puoi fare affidamento sul fatto che l'utente tocchi il dispositivo per procedere con l'Azione e devi assicurarti che gli utenti possano proseguire nell'Azione utilizzando i comandi vocali.
  • Progetta tenendo in considerazione una distanza di visualizzazione specifica. Progetta i contenuti sullo smart display in modo che possano essere visti da lontano. A seconda delle dimensioni della stanza, la distanza di visualizzazione tipica per gli smart display va da 9 a 3 metri.
    • Utilizza una dimensione minima dei caratteri di 32 pt per il testo principale, ad esempio i titoli. Utilizza almeno 24 pt per il testo secondario, ad esempio descrizioni o paragrafi di testo.
  • Concentrati su un touchpoint alla volta. Visualizza un tipo di attività o informazioni principali alla volta per ridurre il carico di lavoro cognitivo e mantenere leggibili i contenuti a distanza. Ad esempio, quando gli utenti chiedono "Com'è la mia giornata?", l'assistente risponde fornendo informazioni relative a meteo, calendario, tragitto giornaliero e notizie. Ogni tipo di contenuto occupa tutto lo schermo e viene presentato in sequenza anziché mostrare tutti insieme sullo schermo.

Risorse

Per ulteriori informazioni sulla progettazione di un'azione che utilizza Interactive Canvas, consulta le seguenti risorse: