Faites évoluer votre design

Maintenant que vous avez une discussion solide sur Google Home, il est temps d'adapter votre conception pour aider les utilisateurs, où qu'ils se trouvent. Étant donné que l'Assistant Google aide les utilisateurs sur tous les appareils, vos actions devraient l'être également. Pour ce faire, vous allez la transformer en conversation multimodale.

Conception multimodale

Regardez cette vidéo pour découvrir comment exploiter les atouts de chaque modalité afin de créer une expérience attrayante adaptée à tous les appareils.

Anatomie d'une réponse

La réponse de votre action à l'utilisateur est composée de composants.

Les composants de conversation sont combinés pour composer le contenu des invites vocales, des invites d'affichage et des chips.

Les composants de conversation (invites et chips) doivent être conçus pour chaque tour de dialogue.

Invite vocale

Contenu que votre action s'adresse à l'utilisateur via la synthèse vocale ou un contenu audio préenregistré

Afficher l'invite

Contenu écrit par votre action à l'utilisateur, sous forme de texte imprimé à l'écran

Chips

Suggestions sur la manière dont l'utilisateur peut poursuivre ou réorienter la conversation

Les composants visuels incluent les fiches, les carrousels et d'autres assets visuels.

Idéal pour scanner et comparer les options, les composants visuels sont utiles si vous présentez des informations détaillées, mais ils ne sont pas obligatoires à chaque tour de boîte de dialogue.

Carte
standard

Utilisez des fiches de base pour présenter une image et du texte aux utilisateurs.

Carrousel
de navigation

Les carrousels de navigation sont optimisés pour permettre aux utilisateurs de sélectionner l'un des nombreux éléments associés à du contenu trouvé sur le Web.

Carrousel

Les carrousels sont optimisés pour permettre aux utilisateurs de sélectionner l'un des nombreux éléments, lorsqu'ils sont facilement différenciés par une image.

Liste

Les listes sont optimisées pour permettre aux utilisateurs de sélectionner l'un des nombreux éléments, lorsque ceux-ci sont plus facilement identifiables par leur titre.

Réponse
multimédia

Les réponses multimédias permettent de lire et de contrôler la lecture de contenus audio comme de la musique ou d'autres contenus multimédias.

Table

Les tables permettent d'afficher des données statiques dans un format facile à analyser.

Pour les conversations sur des enceintes intelligentes ou un casque, les invites vocales couvrent l'ensemble de la conversation et transmettent le message principal.
Pour les conversations en voiture ou sur un écran connecté, l'utilisateur peut ne pas toujours accéder à l'écran. Par conséquent, les invites vocales doivent accompagner la majeure partie de la conversation et transmettre le message principal. L'écran peut être utilisé pour afficher des informations visuelles supplémentaires ou des suggestions afin de poursuivre ou d'orienter la conversation.
Les conversations sur un téléviseur, un ordinateur portable, un téléphone ou une montre sont adaptées aux entrées et sorties audio, ainsi qu'aux interactions basées sur l'écran. L'utilisateur peut choisir de poursuivre la conversation dans la modalité vocale ou visuelle. Par conséquent, tous les composants fonctionnent ensemble pour échanger la conversation et transmettre le message principal.

Passer du texte parlé au mode multimodal

Lorsque vous avez rédigé vos exemples de boîtes de dialogue, nous vous recommandons de commencer par une conversation vocale, c'est-à-dire de concevoir des applications pour des appareils sans écran comme des enceintes intelligentes et des écouteurs. Maintenant que vous êtes prêt à adapter vos conceptions à d'autres appareils, les éléments seront retirés des invites vocales pour les intégrer aux icônes, aux chips et aux visuels.
Commencez par l'invite vocale d'origine de l'exemple de boîte de dialogue.

La plupart du temps, il vous suffit de réutiliser la même invite vocale sur des appareils tels que les écrans connectés, car le besoin de faire circuler la conversation reste le même.

À ce stade de la conversation, aucun contenu n'est approprié dans un composant visuel (une fiche ou un carrousel, par exemple).

Veillez à ajouter des chips. Elles doivent au minimum inclure toutes les options proposées pour que l'utilisateur puisse appuyer dessus rapidement pour répondre.

Étant donné qu'aucun contenu ne convient à un composant visuel, aucun contenu ne peut être déplacé en dehors de l'invite vocale. Par conséquent, vous pouvez réutiliser l'original.

L'invite d'affichage doit être une version condensée de l'invite vocale, optimisée pour la numérisation. Déplacez les options de réponse dans les chips, mais n'oubliez pas de toujours inclure la question.

Réutilisez les chips que vous venez de créer.

Commencez par l'invite vocale d'origine de l'exemple de boîte de dialogue.

Notez que la liste vocale est limitée à six éléments (sur 17 au total) afin de réduire la charge cognitive. Les thèmes sont randomisés pour ne pas favoriser un thème plutôt qu'un autre.

Là encore, vous pouvez réutiliser la même invite vocale, car nous ne pouvons pas supposer que l'utilisateur regarde l'écran.

En incluant une liste visuelle de tous les sujets, vous permettez à l'utilisateur de parcourir votre site et de faire votre choix. Notez que la liste visuelle des 17 éléments (paginés) est affichée par ordre alphabétique, ce qui facilite la recherche du sujet par les utilisateurs.

Comme la liste énumère déjà les thèmes pouvant être choisis, il n'est pas nécessaire de les inclure sous forme de chips. Incluez plutôt d'autres options telles que "Aucune de ces options" pour permettre à l'utilisateur de se retirer.

Nous supposons ici que l'utilisateur a le même niveau d'accès à l'audio et à l'écran. Étant donné que la modalité visuelle convient mieux aux listes, exploitez cet avantage en dirigeant l'utilisateur vers l'écran pour choisir un sujet. Nous pouvons ainsi raccourcir l'invite vocale pour afficher une simple liste et une question simple.

Seule la question doit être maintenue dans l'invite d'affichage.

Réutilisez le chip que vous venez de créer.

Pour en savoir plus sur le scaling de votre conception, consultez cet article de blog en deux parties qui explique comment nous avons conçu et développé l'action I/O 18. Vous pouvez également examiner de plus près le code Open Source.

Relation entre les invites

En règle générale, les invites vocales sont optimisées pour les conversations vocales et en suivent les conventions. Les invites d'affichage sont optimisées et suivent les conventions des conversations écrites. Même s'ils sont légèrement différents, ils doivent transmettre le même message principal.

Concevoir des invites pour les oreilles et les yeux. Il est plus facile de commencer par une incitation vocale, qui consiste à imaginer ce que vous pourriez dire dans une conversation entre humains. Ensuite, condensez-la pour créer l'invite d'affichage.

Pour faire simple,
Conservez le même récit que l'invite vocale pour afficher l'invite.
Ne redirigez pas l'utilisateur vers un autre sujet ou une autre branche.
Les invites d'affichage doivent être des versions condensées de leurs équivalents
Utilisez des invites d'affichage condensé.
Ne vous contentez pas de répéter les invites vocales.
Assurer la cohérence du ton et du ton
Restez en persona.
Évitez de concevoir des invites qui ressemblent à des personas.

Relation entre les composants

N'oubliez pas que tous les composants sont destinés à fournir une réponse unifiée unique.

Il est souvent plus facile de commencer par rédiger des invites pour une expérience sans écran, en imaginant à nouveau ce que vous pourriez dire dans une conversation entre humains. Imaginez que la conversation change si l'un des participants tient un écran tactile. Quels détails peuvent désormais être omis dans les composants de la conversation ? En général, l'invite d'affichage est considérablement réduite, car l'utilisateur comprend tout aussi facilement les informations visuelles que l'invite affichée. Regroupez les informations de sorte que l'utilisateur n'ait pas besoin de jongler entre l'invite d'affichage et l'image de façon répétée.

ARRÊTÉ