Istruzioni sul design

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 rivolgendosi all'Assistente Google 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. Nelle sezioni seguenti viene illustrato 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 soddisfa i seguenti criteri:

  • L'Azione trae 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, vuoi andare oltre i componenti visivi e la personalizzazione esistenti dell'assistente. Interactive Canvas è ideale per mostrare le caratteristiche uniche del tuo brand, gli elementi dinamici e le animazioni del tuo brand. Inoltre, è possibile utilizzare Interactive Canvas per fornire aggiornamenti a una singola interfaccia visiva man mano che l'utente procede con la conversazione.

Requisiti

Sebbene Interactive Canvas utilizzi ambienti di sviluppo web familiari, ci sono alcuni requisiti da prendere in considerazione prima di progettare l'Azione.

Intestazione o avviso popup

Per impostazione predefinita, ogni app web Interactive Canvas include un'intestazione nella parte superiore dello schermo con il nome del tuo brand. L'area riservata all'intestazione 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.

Se vuoi, puoi sostituire l'intestazione con un avviso popup che viene visualizzato nella schermata di caricamento e include il nome visualizzato dell'Azione, il nome dello sviluppatore e le istruzioni per uscire dall'Azione. Per sostituire l'intestazione con il messaggio popup e attivare la modalità a schermo intero per l'utente, consulta Attivare la modalità a schermo intero.

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 limitazioni, ti consigliamo che l'Azione gestisca lo stato nel webhook e utilizzi lo spazio di archiviazione dell'utente 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 l'utente in modo efficace 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 le linee guida di Google per la progettazione delle conversazioni.

Linee guida

Per un'esperienza utente ottimale, è necessario:

  • Segui il processo di progettazione delle conversazioni e le best practice. Le linee guida per la progettazione delle conversazioni di Google descrivono le best practice che consigliamo. 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 usando la voce. 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 devi progettare 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 potrebbe essere la posizione in cui vengono visualizzati i prompt, ad esempio nel titolo, oppure un'area diversa (ad esempio un'area speciale di contenuti visualizzata all'occorrenza). Consulta la sezione Errori nelle linee guida per la progettazione delle conversazioni per ulteriori suggerimenti sulla gestione degli errori.

Progettare gli smart display

Anche se le linee guida precedenti sono ancora valide, devi tenere a mente altre considerazioni di progettazione quando progetti per gli smart display. Si ha la tentazione di trattare 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 i comandi vocali 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 sono usati in casa

Per via di queste caratteristiche, gli utenti a volte non sono fisicamente vicini al dispositivo e interagiscono con gli smart display usando solo la loro voce. Gli utenti potrebbero anche essere multitasking 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 quanto accade con un dispositivo mobile, l'utente potrebbe trovarsi dall'altra parte della stanza e comunicare con il proprio smart display soltanto tramite comandi vocali. 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 Google risponde per aggiornamenti su 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: