Fluxogramas para Interfaces Conversacionais
Como fazer o planejamento de um Chatbot através de Fluxogramas
Durante o planejamento de uma Interface Conversacional, torna-se necessário o design de algum Wireframe para o Chatbot, assim como se faz para Websites ou Aplicativos. Ou seja, é preciso de algum documento que descreva de maneira direta e simples o funcionamento geral do Chatbot, facilitando o seu planejamento e desenvolvimento.
Existem diversas maneiras de fazer isso, inclusive através de ferramentas exclusivas para Chatbots como o BotSociety. Mas, em grande parte dos casos, acaba-se utilizando os bons e velhos fluxogramas. Eles são excelentes para o planejamento de Conversas, criando fluxos para o usuário seguir durante sua experiência.
Porém, pouco se utiliza estruturas ou metodologias para a criação desses fluxogramas, muitas vezes re-inventando a roda. Nesse texto, vou lhe apresentar os símbolos padronizados pela ISO (Organização Internacional de Normalização) para a construção de fluxogramas, demonstrando como eles podem ser aplicados no contexto de Interfaces Conversacionais.
Ferramentas para Começar
Antes de começar, aqui está uma lista de algumas ferramentas para elaboração de fluxogramas (contend os símbolos da ISO):
- Draw.io
- ConceptDraw Diagram
- Microsoft Visio
- Gliffy
- Smartdraw
- Cacoo
- Creately
Está com uma ferramenta em mão? Então vamos lá!
1- Terminação
Esse símbolo, representado por um oval ou um retângulo arredondado, representa o início ou fim de um processo.
Nos Chatbots, ele pode representar a maneira que os usuários começam a conversa, como:
- O Botão "Começar" dos Chatbots do Messenger
- A chamada de uma Google Action, como "Ok Google, Falar com Monster Loja"
- Uma chamada "\start" nos bots do Slack ou Telegram
Esse símbolo pode também representar o fim do diálogo com bot, como o retorno de uma Google Action para o Assistente geral.
2- Processo
No fluxograma, as operações que alteram dados são chamadas de processos, representados por um retângulo.
No design de Interfaces Conversacionais, estes processos são as trocas de mensagens (intents) gerais. Você pode colocar escrito no símbolo a mensagem completa à ser dita pelo bot, ou senão escrever somente o nome daquela interação, escrevendo a mensagem em outro documento.
3- Decisão
O diamante representa alguma decisão à ser tomada no fluxo.
Na representação de conversas, ele representa alguma pergunta ou ação que levará o diálogo para caminhos diferentes.
4- Exibição
Muitas vezes, também é necessário representar a exibição de alguma informação adicional, seja ela para ler, ouvir ou visualizar. Para isso, existe o símbolo de Exibição.
Em um Chatbot, você pode usar ele para detalhar algum conteúdo rico à ser apresentado, como carrosséis no Messenger ou Cards Visuais no Google Assistant:
6- Anotações
Para indicar informações adicionais sobre um passo do fluxo, pode-se usar o símbolo de anotações, representado por um retângulo aberto conectado por uma linha:
Você pode usar ele para descrever, por exemplo:
- Itens de um carrossel
- Sugestões (Chips do Google Assistant, Quick Replies do Messenger…)
- Algum funcionamento diferenciado de um processo
7- Entrada Manual
Quando se deseja que o usuário insira manualmente alguma informação, utiliza-se um quadrilátero um uma rampa em cima, como se fosse a visão do lado de um teclado:
No chatbot, podemos usar esse símbolo para representar, por exemplo, alguma entidade ou valor que o usuário deve digitar, podendo ser usado depois através de uma variável.
8- Acesso à Dados
Quando se deseja mostrar que um processo faz uso de alguma informação armazenada, temos algumas opções:
Caso a informação esteja em uma variável salva dentro do próprio sistema, usamos o símbolo do Dado Armazenado:
Senão, se a informação vier de um Banco de Dados, pode-se utilizar o símbolo adequado:
9- Entrada e Saída
Durante o fluxo de um Chatbot, muitas vezes é necessário trocar informações com ambientes externos, como fazer solicitações à APIs ou enviar dados para a criação de uma planilha.
Para isso, se utiliza o paralelograma de entrada e saída:
Na imagem acima, o paralelograma descreve que assim que o usuário confirmar uma compra, deve ser chamado uma API para processar ela.
10- Conector
Para facilitar a visualização de um fluxo, principalmente quando este se torna muito grande, você pode começar a utilizar conectores (representado por um círculo com uma LETRA dentro):
No exemplo acima, se o usuário não desejar comprar mais nada, uma mensagem de obrigado será enviada. Em seguida, através do conector "F",o bot irá esperar o usuário escrever qualquer outra coisa (any), direcionado-o para uma mensagem de "Bem Vindo Novamente" quando detectado.
11- Conector para Outra Página
Mas, se o fluxo ficar ainda maior, pode-se tornar necessário o uso de conectores para outra página.
No exemplo acima, o fluxo de "vender" está na página Vendas. Assim, fica claro qual é o caminho principal do diálogo e torna-se mais organizado o planejamento.
Conclusão
Através destes conceitos, foi possível construir o seguinte diagrama para um Chatbot no Facebook Messenger:
Assim, podemos fazer o uso de símbolos padronizados para qualquer fluxo de uma Interface Conversacional.
Existem diversos outros símbolos que podem ser usados. Você pode encontrar seus desenhos e descrições aqui , podendo utilizá-los nos próximos projetos.
Agora, caso queira tornar esse fluxograma em um chatbot de verdade, dê uma olhada nesse artigo ou o seguinte vídeo onde abordo o desenvolvimento de Chatbots através do Dialogflow! Ele é uma ferramenta extremamente poderosa e customizável, perfeita para criar a melhor experiência possível.
