Visão geral dos componentes visuais

Os componentes visuais incluem cartões, carrosséis, listas e outros recursos visuais. Os componentes visuais são úteis quando você apresenta informações detalhadas, mas não são necessários em todas as rodadas de diálogo.

Esta seção oferece orientações sobre quais componentes visuais estão disponíveis para você usar na sua ação, quando usá-los e como personalizá-los.

Quando criar recursos visuais

Se você tiver seguido nosso processo de design de conversa, começará projetando um dispositivo sem tela, como o Google Home. Isso acontece porque é mais fácil acertar o fluxo da conversa se tudo estiver em um só lugar: as solicitações faladas.

Você começará a criar recursos visuais ao expandir o design para incluir outros dispositivos, como smartphones.

Os recursos visuais complementam a conversa e, portanto, não são necessários em todas as etapas do diálogo.

Pense em quais informações podem ser mais bem representadas em uma tela. Faça perguntas como estas:

  • Isso ajudaria os usuários a ver uma imagem do que está sendo discutido?
  • O usuário poderia escolher facilmente uma lista visual em vez de uma lista falada?
  • Há algum conteúdo adicional que, embora não seja essencial para a conversa, seria útil para mostrar aos usuários?


Onde e como os recursos visuais aparecem

Obviamente, os recursos visuais serão exibidos somente em dispositivos com saída de tela. Elas são redimensionadas automaticamente e reorganizadas para se ajustarem ao tamanho da tela em que aparecem.
Os recursos visuais nunca aparecerão sozinhos. Eles sempre serão acompanhados por um prompt falado e/ou de exibição. Eles também devem ser acompanhados por chips.
Pense nesses componentes visuais como modelos com campos obrigatórios e opcionais. Tudo o que você precisa fazer é especificar os dados (ou seja, as strings de texto, os arquivos de imagem etc.) que deseja exibir. Consulte as seções "Requisitos" em cada componente visual para ver detalhes sobre o que você precisa especificar.

Tipos de componentes visuais

Componente visual Descrição
Card básico Use cards básicos para exibir uma imagem e um texto aos usuários.
Carrossel de navegação Os carrosséis de navegação são otimizados para permitir que os usuários selecionem um dos muitos itens, quando eles forem conteúdo da Web.
Carrossel Os carrosséis são otimizados para permitir que os usuários selecionem um de muitos itens, quando esses itens são diferenciados com mais facilidade por uma imagem.
List As listas são otimizadas para permitir que os usuários selecionem um de muitos itens, quando esses itens são facilmente diferenciados pelo título.
Resposta à mídia As respostas de mídia são usadas para reproduzir e controlar a reprodução de conteúdo de áudio, como músicas ou outras mídias.
Tabela As tabelas são usadas para exibir dados estáticos aos usuários em um formato de fácil verificação.