Como criamos elementos de interface do usuário de entrada para nossa plataforma de chatbot
Publicados: 2017-01-01Os chatbots, como existem hoje, não têm muitos recursos para entender a linguagem humana natural. E esta é uma das principais razões pelas quais a maioria dos aplicativos de mensagens (Messenger, Kik etc) estão recorrendo a uma mistura de interface gráfica e de texto em suas plataformas de bot – pense em botões, carrosséis, cartões de imagem e não apenas respostas de texto.
Nós, da Tars, estamos usando o navegador como plataforma para construir nossa própria interface de chat para os bots operarem. E isso nos dá total liberdade sobre todos os componentes que temos. Se você já experimentou algum de nossos bots (se não experimentou, primeiro experimente um aqui e aqui), você sabe que apoiamos fortemente a interface gráfica do usuário + abordagem baseada em texto. Como parte desse processo de pensamento, criamos várias entradas de teclado personalizadas em nossa interface front-end para facilitar diferentes interações e situações do usuário.
Messenger, Kik, Telegram são plataformas enormes onde os desenvolvedores estão implantando centenas de bots todos os dias. Ainda sinto que essas plataformas de mensagens não fizeram o suficiente nos componentes front-end para ajudar um boomaker a criar interações de usuário enriquecedoras.
E é por isso que eu queria falar mais sobre como criamos cada interface de usuário personalizada, por que cada uma delas faz sentido e como a falta delas atrapalha as interações do usuário agora.
Aqui vamos nos:
Rolagem de data e hora
Pense em um cenário em que você precisa perguntar a um usuário para quando ele gostaria de marcar a consulta? Pode haver várias maneiras de fornecer a mesma informação.
25 de novembro, 25 de novembro, 25 de novembro, 25/11, 25–11–2016, 25/11/16 — todos eles significam essencialmente o mesmo, mas torna-se difícil para uma máquina entender esses dados.
É por isso que incorporamos um scroller de data e hora onde os usuários podem rolar os mostradores e selecionar a data/hora.

Não vi nenhuma outra plataforma de mensagens fornecer essa interface do usuário até agora e acho que isso é obrigatório se um bot estiver solicitando data ou hora do usuário.
Botões Verticais
Pense nisso como opções de múltipla escolha em uma forma em que você tem um número limitado de coisas para escolher. Tocar nos botões torna a interação mais rápida e também mantém o alcance da conversa limitado.
A abordagem baseada em botões faz sentido quando você precisa escolher entre uma pizza vegetariana e não vegetariana, mas pode não ser a melhor interface do usuário se você tiver 100 apólices de seguro para escolher.
O que mais pode ser feito com botões verticais?
- adicione uma imagem ao lado de cada opção para torná-la mais atraente visualmente.
- você pode deixar o usuário responder a um único toque ou fazê-lo clicar em “Enviar” depois que ele tocar em qualquer uma das opções. Este último ajuda a reconfirmar se o usuário não selecionou a opção específica por engano. Não há como voltar em um fluxo de bate-papo e é por isso que essa personalização faz sentido.
- adicione um menu de informações rápidas a cada opção para fornecer informações detalhadas e melhorar o processo de tomada de decisão.

Nem todo mundo sabe a diferença entre Advance e Basic Facial. Adicionar detalhes sobre o que está incluído e o preço melhora a experiência do usuário.
Mais uma coisa importante a ter em mente ao usar o Button UI é enquadrar sua pergunta da maneira certa. Como Leszek explica em seu artigo aqui, é melhor fazer a pergunta de uma maneira que limite o leque de opções e defina o contexto em vez de fazer uma pergunta muito aberta.

Restringindo a entrada do usuário
Eu sinto que esta é uma das melhores coisas que fizemos em nossa interface de bate-papo. Sempre que fornecemos uma IU de entrada gráfica (botões, carrosséis etc), não permitimos que o usuário digite nada no texto.
Por que fazer isso? Porque um usuário pode digitar qualquer coisa e seu bot não está pronto para isso. Até que você esteja lá, é melhor mantê-lo simples e restrito, em vez de interromper a conversa.
Recomendado para você:
O que fazemos é isso:


Esta é a nossa interface de bate-papo
E isso é o que acontece quando você não tem algo assim:

Este é o Facebook Messenger que não permite entrada de texto restrita quando você tem respostas rápidas
Botão Concluído e Aprovado
Essas são duas nuances muito pequenas que acabamos incorporando porque sempre pensamos nos chatbots com script como uma evolução das formas.
Quando você está enviando através de seu endereço ou dando um feedback detalhado sobre a interface de bate-papo, o comportamento geral é pressionar o botão enviar depois de escrever algumas palavras e a resposta inteira é eventualmente distribuída por 3 a 4 declarações. Com o “botão Concluído”, você pode continuar digitando e pressioná-lo depois de dar a resposta completa.
Se você não tiver essa opção, a próxima mensagem da máquina virá após a primeira instância, resultando em respostas incompletas.

Ter um botão "Concluído" quando tiver que selecionar várias opções ou ter respostas com várias linhas
Também pode haver casos em que um usuário queira pular a pergunta e, para isso, temos um “botão Passar” no lugar do “botão Enviar”. Assim que o usuário começa a digitar, o botão Passar se transforma no botão Enviar.

Não quer dar seu e-mail? Toque em "Pass" para pular a pergunta.
Sugestões de preenchimento automático
É como a funcionalidade de preenchimento automático na pesquisa do Google, onde você começa a digitar e sugere as opções possíveis. Isso se torna particularmente útil quando você tem uma longa lista de opções e botões verticais não são uma opção viável. Pense em uma longa lista de localidades, cidades, modelos de carros etc.

Estrelas e curtidas
Especialmente útil quando você está pedindo feedback ou experiência do usuário e a resposta é de natureza mais qualitativa. E você pode até personalizar os ícones para serem estrelas, curtidas, corações, emoticons.

Cartões de imagem
Isso é útil quando você precisa mostrar várias informações sobre cada item de uma só vez. Pode ser um hambúrguer em um processo de pedido de comida ou uma camisa em um fluxo de compras. Todas as cartas são empilhadas umas contra as outras e você pode rolar para ver todas as opções.
Existem 4 partes desse elemento de interface do usuário — imagem, título, descrição e rodapé. Você pode utilizá-los de maneira diferente, dependendo do que deseja exibir lá.

Caso você queira testar todos esses elementos de interface do usuário de entrada, aqui está o link para um chatbot que o orienta um de cada vez.
Chat sendo uma interface minimalista com apenas bolhas e uma caixa de texto não dá muito escopo. E acredito que teremos que repensar como podemos facilitar uma variedade de interações usando os elementos existentes e adicionando novos à interface de bate-papo.
Adoraria saber se você está brincando com a interface de mensagens e adicionou alguns outros elementos interessantes da GUI?
[Esta postagem de Ish Jindal apareceu pela primeira vez no Medium e foi reproduzida com permissão.]






