Consignes de conception (Dialogflow)

La conception d'Interactive Canvas comporte deux aspects principaux:

  • Conception de la conversation
  • Concevoir l'interface utilisateur (UI)

Vos utilisateurs peuvent interagir avec votre action qui utilise Interactive Canvas en s'adressant à l'Assistant ou en appuyant sur l'interface utilisateur. Vous devez vous assurer que votre conversation vocale et votre UI se complètent, et permettent aux utilisateurs de progresser facilement dans votre action. Dans cette section, nous verrons comment concevoir à la fois la conversation et l'UI pour une expérience utilisateur optimale.

Interactive Canvas est-il adapté à mon action ?

Avant de commencer à concevoir, demandez-vous si votre action fonctionnera bien avec Interactive Canvas. Vous devriez envisager d'utiliser Interactive Canvas dans les cas suivants:

  • Votre action bénéficie d'expériences visuellement attrayantes en plein écran. Interactive Canvas est idéal pour les expériences plein écran qui bénéficient de visuels riches, comme les jeux vocaux immersifs.
  • Votre action offre un flux de conversation intuitif. Le chemin critique dans votre action doit être accessible uniquement par la voix. Une action qui nécessite une précision spatiale, comme une application de dessin, peut fournir une expérience difficile pour concevoir un flux de conversation intuitif.
  • Les composants existants et la personnalisation ne sont pas suffisants (par exemple, si vous souhaitez aller au-delà des composants visuels et personnalisations existants de l'Assistant). Interactive Canvas est idéal pour présenter les attributs visuels de votre marque, vos éléments dynamiques et vos animations. En outre, Interactive Canvas peut être utilisé pour fournir des mises à jour à une seule interface visuelle à mesure que l'utilisateur progresse dans la conversation.

Conditions requises

Bien qu'Interactive Canvas soit un environnement de développement Web familier, vous devez prendre en compte certaines exigences avant de concevoir votre action.

Un en-tête s'affiche en haut de chaque application Web de canevas, avec le nom de votre marque. Cette zone réservée a une hauteur de 56 dp pour les mobiles, de 96 dp pour Home Hub et de 120 dp pour les écrans connectés. Assurez-vous de respecter l'exigence d'en-tête suivante:

  • Assurez-vous qu'aucune information importante ni aucun élément interactif n'est caché derrière l'en-tête. La méthode getHeaderHeightPx() détermine la hauteur de l'en-tête.
Figure 1. Exemples d'affichage de l'en-tête dans différentes actions.

Contraintes

Tenez compte des contraintes suivantes avant de concevoir votre action avec Interactive Canvas:

  • Pas de stockage local des données. Nous empêchons l'action de stocker des cookies et d'accéder à l'API Web Storage. Compte tenu de ces restrictions, nous vous recommandons de gérer l'état dans le webhook et d'utiliser le champ userStorage d'AppRequest pour enregistrer les données utilisateur.
  • Pas de pop-up ni de fenêtre modale. Nous empêchons l'action d'afficher des fenêtres pop-up ou des fenêtres modales. Nous vous déconseillons également vivement d'utiliser d'autres éléments d'interface utilisateur de navigation standards que vous voyez généralement dans les applications Web, tels que les claviers et la pagination.

Concevez votre conversation

Vous devez d'abord concevoir la conversation de votre action. Les expériences Interactive Canvas sont toujours vocales. Il est donc important que votre conversation guide efficacement l'utilisateur dans votre action. Vous pouvez considérer une action qui utilise Interactive Canvas comme une conversation avec des éléments visuels utiles. Pour en savoir plus sur la conception de conversations, consultez la page Premiers pas du site de conception de conversations.

Consignes

Pour une expérience utilisateur optimale:

  • Suivez le processus de conception des conversations et les bonnes pratiques décrits sur le site Concevoir des conversations. Cela signifie que vous devez, entre autres:

    • Assurez-vous que votre expérience d'action fonctionne bien pour les conversations
    • Créer un persona de marque
    • Gérer les erreurs dans votre conversation
    • Essayez une expérience vocale uniquement avant de déterminer à quoi cela ressemblerait avec un écran

  • Essayez d'offrir les mêmes capacités avec l'écran tactile et la voix. Si possible, assurez-vous que tout ce que vous pouvez faire en touchant l'écran est aussi réalisable avec votre voix.

  • Assurez-vous que votre action est réalisable via les commandes vocales. Vos utilisateurs doivent pouvoir parcourir les principaux chemins de votre action en utilisant uniquement la voix.

  • Assurez-vous que l'utilisateur peut utiliser votre action sans son. Sur les appareils mobiles, il est possible que l'audio ne soit pas activé pour l'utilisateur. Envisagez donc d'ajouter des transcriptions à votre action pour guider l'utilisateur.

  • Prenez en compte la charge cognitive. Évitez les réponses vocales trop longues pour réduire le poids cognitif de l'utilisateur.

Concevoir votre UI

Une fois que vous avez conçu votre conversation, vous pouvez concevoir votre interface utilisateur pour la compléter. Lors de la conception, réfléchissez à la manière dont les échanges naturels peuvent orienter l'interface visuelle que vous présentez à l'utilisateur. Si vous concevez pour des écrans connectés, consultez les considérations spécifiques dans Conception pour les écrans connectés.

Consignes

Pour une expérience utilisateur optimale:

  • Créez des designs réactifs. Assurez-vous que vos conceptions fonctionnent en mode paysage ou portrait, et qu'elles s'adaptent aussi bien aux petits téléphones qu'aux écrans plus grands. Vos utilisateurs doivent pouvoir lire facilement l'UI de chaque type de surface.
  • Prenez en compte la charge cognitive. Pour éviter de submerger vos utilisateurs, veillez à ce que les informations et le contenu que vous présentez à l'écran soient organisés, clairs et concis.
  • Adaptez la sortie vocale à l'écran. Soyez créatif : utilisez les éléments visuels pour compléter l'audio. Ne vous contentez pas d'écrire ce qui est dit à haute voix. Lorsqu'un écran est disponible, la sortie vocale peut être plus concise.
  • Évitez de placer des informations ou des composants critiques vers le bas de l'écran. Sur mobile, la transcription s'affiche au-dessus du micro et peut atteindre quelques lignes. Bien que cette transcription soit temporaire, évitez d'écrire du contenu important vers le bas de l'écran. Les boutons semblables aux chips de suggestion se trouvent en bas de l'écran, car l'entrée utilisateur constitue une alternative aux chips de suggestion.
  • Gérez visuellement les erreurs dans votre conversation. Des erreurs peuvent se produire lorsque l'utilisateur ne répond pas, si vous ne le comprenez pas ou s'il ne répond pas à ses propos. Déterminez où ces messages d'erreur vont dans votre interface utilisateur. Il peut s'agir de l'endroit où vous placez vos invites d'affichage (dans le titre, par exemple) ou de quelque chose de différent (par exemple, une zone de contenu spéciale qui s'affiche selon vos besoins). Pour obtenir d'autres conseils sur la gestion des erreurs, consultez le site sur la conception de conversations.

Concevoir pour les écrans connectés

Bien que les directives ci-dessus s'appliquent toujours, vous devez garder à l'esprit les autres considérations de conception lors de la conception d'écrans connectés. Il est tentant de traiter les écrans connectés comme des tablettes lorsque vous concevez pour eux. Cependant, les écrans connectés constituent une catégorie d'appareils complètement différente, et ce pour deux raisons:

  • Les écrans connectés sont à commande vocale, et l'Assistant Google est le système d'exploitation
  • Les écrans connectés sont fixes et, contrairement aux appareils mobiles, sont souvent placés dans la cuisine ou la chambre lorsqu'ils sont utilisés à la maison.

En raison de ces caractéristiques, les utilisateurs ne sont parfois pas physiquement à proximité de l'appareil et interagissent avec les écrans connectés par simple commande vocale. Les utilisateurs peuvent également effectuer plusieurs tâches à la fois lorsqu'ils utilisent des écrans connectés. Il est important de garder ces usages à l'esprit lors de la conception d'écrans connectés.

Consignes

Pour une expérience utilisateur optimale avec les écrans connectés, vous devez:

  • Donnez la priorité à la voix lorsque vous concevez votre application Concevoir une action Interactive Canvas pour qu'elle utilise les commandes vocales est encore plus importante pour les écrans connectés. Contrairement à un appareil mobile, il se peut que l'utilisateur, debout à l'autre bout de la pièce, ne communique avec son écran connecté que par commande vocale. Pour cette raison, vous ne pouvez pas toujours compter sur l'appui de l'utilisateur sur l'appareil pour effectuer votre action et vous devez vous assurer que les utilisateurs peuvent l'exécuter par commande vocale.
  • Concevez votre appareil en tenant compte d'une distance de visionnage spécifique. Concevez votre contenu sur l'écran connecté pour qu'il puisse être consulté de loin. Selon la taille de la pièce, la distance de visionnage moyenne des écrans connectés est comprise entre 9 et 3 mètres.
    • Utilisez une taille de police minimale de 32 points pour le texte principal, comme les titres. Le texte secondaire, comme les descriptions ou les paragraphes, doit être d'au moins 24 points.
  • Concentrez-vous sur un point de contact à la fois. Affichez un type d'information ou de tâche principale à la fois pour réduire la charge de travail cognitive et garder le contenu lisible à distance. Par exemple, lorsque les utilisateurs demandent "Quel est le programme de ma journée ?", l'Assistant répond en fournissant des informations sur la météo, votre agenda, votre trajet domicile-travail et les actualités. Chaque type de contenu occupe la totalité de l'écran et est présenté de manière séquentielle au lieu d'être tous affichés en même temps.

Ressources

Pour en savoir plus sur la conception d'une action qui utilise Interactive Canvas, consultez les ressources suivantes: