Diretrizes de design

Há dois aspectos principais no design para tela interativa:

  • Elaboração da conversa
  • Como projetar a interface do usuário (interface)

Os usuários podem interagir com sua ação que usa a tela interativa falando com o Google Assistente ou tocando na interface. Você precisa garantir que a conversa falada e a interface se complementem e facilitem o progresso da ação para os usuários. As seções a seguir discutem como projetar a conversa e a IU para a melhor experiência do usuário.

A tela interativa é adequada para minha ação?

Antes de começar a projetar, pense se a ação vai funcionar bem com a tela interativa. Considere usar a tela interativa se a Ação atender aos seguintes critérios:

  • Sua Ação se beneficia de experiências visualmente avançadas em tela cheia. A tela interativa é ideal para experiências em tela cheia que se beneficiam de recursos visuais avançados, como jogos imersivos baseados em voz.
  • A Ação tem um fluxo de conversa intuitivo. O caminho crítico da sua ação precisa ser navegável usando apenas a voz. Uma ação que exige precisão espacial, como um app de desenho, pode oferecer uma experiência difícil para criar um fluxo de conversa intuitivo.
  • Os componentes e a personalização atuais não são suficientes. Por exemplo, você quer ir além dos componentes visuais e da personalização atuais do Google Assistente. A tela interativa é ótima para mostrar atributos visuais exclusivos da marca, elementos dinâmicos e animações. Além disso, a tela interativa pode ser usada para fornecer atualizações para uma única interface visual à medida que o usuário avança na conversa.

Requisitos

Embora a tela interativa use ambientes de desenvolvimento da Web conhecidos, você precisa considerar alguns requisitos antes de projetar sua ação.

Cabeçalho ou mensagem de aviso

Por padrão, todos os apps da Web de tela interativa incluem um cabeçalho na parte de cima da tela com o nome da sua marca. A área reservada do cabeçalho tem uma altura de 56 dp para dispositivos móveis, 96 dp para o Home Hub e 120 dp para o smart display. Siga este requisito de cabeçalho:

  • Verifique se nenhuma informação importante ou elemento interativo está oculto atrás do cabeçalho. O método getHeaderHeightPx() determina a altura do cabeçalho.
Figura 1. Exemplos de como o cabeçalho aparece em várias ações.

Você também pode substituir o cabeçalho por uma mensagem de aviso que aparece na tela de carregamento e inclui o nome de exibição, o nome do desenvolvedor e instruções para sair da ação. Para substituir o cabeçalho pela mensagem de aviso e ativar o modo de tela cheia para o usuário, consulte Ativar o modo de tela cheia.

Restrições

Considere estas restrições antes de projetar sua ação com a tela interativa:

  • Sem armazenamento local de dados. Impedimos que a Ação armazene cookies e acesse a API Web Storage. Devido a essas restrições, recomendamos que a ação gerencie o estado no webhook e use o armazenamento do usuário para salvar os dados do usuário.
  • Sem pop-ups ou modais. Impedimos que a ação mostre janelas ou pop-ups. Também não é recomendável usar outros elementos da IU de navegação padrão que você costuma encontrar em apps da Web, como teclados e paginação.

Elabore sua conversa

Primeiro, você precisa criar a conversa da sua Ação. As experiências da tela interativa ainda são focadas em voz. Por isso, é importante que a conversa oriente o usuário pela ação de maneira eficaz. Pense em uma ação que usa a tela interativa como uma conversa com recursos visuais úteis. Para mais informações sobre como criar conversas, consulte as diretrizes de design de conversas do Google.

Diretrizes

Para ter a melhor experiência do usuário, você deve:

  • Siga o processo de criação de conversas e as práticas recomendadas. As diretrizes de criação de conversas do Google descrevem as práticas recomendadas. Isso significa que, entre outras coisas, você precisa:

    • Verifique se a experiência da ação funciona bem para conversas
    • Criar um perfil de marca
    • Solucionar erros na conversa
    • Experimente uma experiência somente de voz antes de descobrir como ela ficaria em uma tela.

  • Tente oferecer os mesmos recursos por toque e voz. Se possível, confira se tudo o que você pode fazer tocando na tela também pode fazer com sua voz.

  • Garanta que o caminho crítico pela ação é viável usando a voz. Seus usuários precisam conseguir navegar pelos principais caminhos da sua ação apenas usando voz.

  • Verifique se o usuário consegue usar a ação sem áudio. Em dispositivos móveis, o usuário pode não estar com o áudio ligado. Por esse motivo, considere adicionar transcrições à ação para orientar o usuário.

  • Considere a carga cognitiva. Evite respostas de voz muito longas para reduzir o impacto cognitivo do usuário.

Projetar sua interface

Depois de elaborar a conversa, crie uma interface de usuário para complementá-la. Durante o design, considere como a interação natural do diálogo pode impulsionar a interface visual que você apresenta ao usuário. Se você está projetando para smart displays, consulte as considerações específicas em Projetar para smart displays.

Diretrizes

Para ter a melhor experiência do usuário, você deve:

  • Crie designs responsivos. Confira se os seus designs funcionam nos modos paisagem e retrato, desde smartphones pequenos até telas maiores. Os usuários precisam conseguir ler a interface de cada tipo de plataforma com facilidade.
  • Considere a carga cognitiva. Para evitar sobrecarregar seus usuários, mantenha as informações e o conteúdo que você apresenta na tela organizados, limpos e concisos.
  • Adapte a saída de voz à tela. Seja criativo em como você usa recursos visuais para complementar o áudio. Não escreva o que está sendo dito em voz alta. Quando uma tela está disponível, podemos ser mais concisos com nossa saída de voz do que quando a outra não está.
  • Evite colocar informações ou componentes críticos na parte inferior da tela. Em dispositivos móveis, a transcrição do usuário aparece acima da placa do microfone e pode ter algumas linhas. Embora essa transcrição seja temporária, evite programar conteúdos importantes na parte inferior da tela. Botões semelhantes a ícones de sugestão funcionam bem na parte de baixo da tela, já que a entrada do usuário é uma alternativa ao uso de ícones de sugestão.
  • Trate os erros da conversa de forma visual. Os erros podem ocorrer quando o usuário não responde, se você não os entende ou não fornece fulfillment para o que ele disse. Descubra onde essas solicitações de erro ficam na interface. Pode ser onde você colocar os comandos de tela (como no título) ou algo diferente (como uma área especial de conteúdo que aparece conforme necessário). Consulte Erros nas diretrizes de design de conversas para mais dicas sobre como lidar com erros.

Projetar para smart displays

Embora as diretrizes acima ainda se apliquem, lembre-se de outras considerações ao projetar para smart displays. É tentador tratar smart displays como tablets ao projetar para eles. No entanto, as telas inteligentes são uma categoria de dispositivo completamente diferente e nova por dois motivos:

  • Os smart displays são ativados por voz, e o Google Assistente é o sistema operacional
  • Smart displays são estáticos e, ao contrário de dispositivos móveis, costumam ser colocados na cozinha ou no quarto quando usados em casa

Devido a essas características, os usuários às vezes não estão fisicamente próximos do dispositivo e interagem com os smart displays usando apenas a voz. Os usuários também podem realizar várias tarefas ao usar smart displays. É importante ter em mente esses usos ao projetar para smart displays.

Diretrizes

Para ter a melhor experiência do usuário com smart displays, você deve:

  • Projete com foco em voz. Projetar sua ação de tela interativa para que a voz seja focada em vozes é ainda mais importante para smart displays. Diferentemente do de um dispositivo móvel, o usuário pode estar do outro lado da sala e apenas se comunicando com o smart display por voz. Por esse motivo, nem sempre é possível confiar que o usuário toca no dispositivo para prosseguir com a ação e precisa garantir que eles possam prosseguir na ação usando voz.
  • Faça o design pensando em uma distância de visualização específica. Crie o conteúdo no smart display para que ele possa ser visto à distância. Dependendo do tamanho da sala, a distância típica de visualização de smart displays varia de 1 a 3 metros.
    • Use um tamanho de fonte mínimo de 32 pt para texto principal, como títulos. Use no mínimo 24 pt para texto secundário, como descrições ou parágrafos.
  • Concentre-se em um ponto de contato por vez. Mostre um tipo de informação ou tarefa principal por vez para reduzir a carga de trabalho cognitiva e manter o conteúdo legível à distância. Por exemplo, quando os usuários perguntam "Como é o meu dia?", Ele responde com informações sobre a previsão do tempo, agenda, deslocamento diário e notícias. Cada tipo de conteúdo ocupa a tela inteira e é apresentado em sequência, em vez de todos aparecerem de uma só vez na tela.

Recursos

Para mais informações sobre como criar uma ação que usa a tela interativa, consulte os seguintes recursos: