6 Ferramentas para Prototipação e Desenho de Fluxogramas de Chatbots e Voicebots

design conversacional Jan 24, 2022

Conheça algumas das principais ferramentas de prototipação e desenho de fluxogramas do mercado e os diferentes casos de uso

Existem diversas ferramentas no mercado que podem te ajudar a criar um protótipo conversacional de um chatbot ou voicebot. Entre outras coisas, os protótipos são artefatos poderosos que ajudam times e as partes interessadas na criação e desenvolvimento do projeto como um todo, também ajuda a validar hipóteses, realizar testes e até mesmo coletar feedbacks reais de pessoas usuárias. Por isso, escolher a ferramenta certa pode ser um desafio para você ou para o seu time. 

Pensando nisso, resolvemos criar uma pequena lista com algumas dicas e sugestões para ajudar você a iniciar o seu próximo protótipo conversacional. E antes da gente começar, é importante dizer que a melhor ferramenta é aquela que atende a sua necessidade e corresponde ao nível de conhecimento do seu time. 

Por que criar um protótipo conversacional (chatbots ou voicebots)?

De forma resumida: os protótipos nos ajudam a aprender mais sobre o que será desenvolvido, sem ter nenhum gasto com desenvolvimento envolvido. É um artefato que permite que times e partes interessadas testem e validem suas hipóteses sem a necessidade de criar um produto real.

Algo que soa complexo, mas quando colocado em prática fica mais fácil de entender. Para explicar de outra forma, imagine duas situações:

  • Produção de filmes e séries: depois que o roteiro é escrito, é comum grandes estúdios de cinemas contratarem artistas para desenharem as cenas e o desenvolvimento da história em quadrinhos, também conhecidos como storyboard. Isso ajuda a produção a visualizar melhor o desenvolvimento da história, como evoluir a história e também os detalhes técnicos nos enquadramentos das cenas;
  • Construção de prédios ou edifícios: ainda na fase de desenho, é comum times de engenharia e arquitetura criarem maquetes para dar ideia de dimensão do que será construído, bem como visualizar o projeto por diferentes ângulos. Isso ajuda o time a ter noções sobre estética, volume, escala e outros elementos físicos do projeto como um todo.

Agora, imagine fazer um filme sem storyboard. Ou construir um prédio sem uma maquete. Difícil não? Esse mesmo problema pode ser evitado em projetos conversacionais através do uso de protótipos, pois além de dar visibilidade do que será colocado no produto final, também ajuda o time a ir moldando o produto conforme a ideia inicial e ciclos de aprendizagem e feedbacks. 

O melhor de tudo é que através dos protótipos é possível o time ir aprendendo mais sobre o caso de uso e da percepção de todas as partes interessadas: a de quem desenvolve o produto e de quem vai usar o produto (pessoa usuária). 

O que é um protótipo conversacional? E como funciona?

Para explicar o que é e como funciona, é interessante você conhecer um pouco mais sobre o experimento do Mágico de Oz (que responde muito bem às duas perguntas), apelidado de MOZ. De forma resumida e sem querer dar spoilers, esse experimento recebeu o nome baseado no Filme Mágico de Oz e também compartilha a ideia de que há alguém atrás das cortinas puxando as alavancas para fazer a "mágica acontecer".

De acordo com colegas do time de Design Conversacional do Google, o MOZ é "uma maneira de testar um protótipo sem realmente desenvolver o software. É usado para avaliar a funcionalidade de um design, sua capacidade de atender às metas das pessoas usuárias e melhorar a experiência (UX) em geral." E concluem com a ideia de que "os experimentos [do tipo MOZ] devem ser parecidos com a experiência real, mas em vez de software, há uma pessoa (“mágico”) simulando como a persona (pessoa usuária final) se comportaria em produção. Os participantes podem ou não saber que estão interagindo com o mágico por trás da cortina."

Em outras palavras, um protótipo conversacional é um artefato que simula um produto conversacional. Pode ser feito através de uma plataforma de prototipação ou até mesmo com duas pessoas conversando através de algum aplicativo de mensagem, como o WhatsApp. 

Tais protótipos variam no tipo de fidelidade e comportamento em relação a interface que estão "simulando", podendo ser de:  

  • Alta fidelidade: são protótipos muito parecidos com a interface final. Às vezes nem dá para dizer que é um protótipo, mas ainda apresentam algumas limitações, sejam técnicas ou visuais. Geralmente, esse tipo de protótipo é muito bom para ter uma validação da interação em si, como por exemplo, a fluidez e dinâmica da conversa.
  • Média fidelidade: são parecidos, mas facilmente percebemos que é uma versão adaptada da interface final. Esse tipo de protótipo faz o meio termo entre o de alta e baixa fidelidade;
  • Baixa fidelidade: geralmente são apenas fluxogramas ou esqueletos que indicam como a conversa em si vai acontecer. Oferecem uma ideia geral do conteúdo e do fluxo da conversa como um todo, mas não se assemelham muito com a interface final. Esse tipo de protótipo é muito bom para validar o fluxo e o conteúdo da conversa;

Dependendo da familiaridade com interfaces conversacionais do time, às vezes um fluxograma, que é um desenho parecido com um mapa mental, já ajuda o time a entender melhor como a conversa irá se desenvolver e alguns comportamentos da interface.  Já o protótipo em si é uma evolução mais interativa de um fluxograma. Tem muito assunto que podemos explorar nesse ponto, por isso, vamos falar mais sobre eles em outros artigos aqui do blog.

O que considerar na hora de escolher uma ferramenta de prototipação?

Antes de começar a criar um protótipo, é importante que você entenda a ferramenta de prototipação que você está considerando utilizar e as condições do seu time. Entre outras coisas, os benefícios, as limitações, a flexibilidade tecnológica, etc. Dessa forma, você consegue alinhar as expectativas do time em relação ao uso da plataforma, bem como as oportunidades do uso da ferramenta. 

Alguns pontos importantes que você precisa refletir:

  • Viabilidade técnica: é necessário ter algum conhecimento técnico para a criação do protótipo? A ferramenta tem algum detalhe técnico crucial para a criação deste protótipo
  • Necessidade de colaboração: outras pessoas vão ter acesso ao protótipo? Elas vão apenas testar ou criar o protótipo em tempo real?
  • Validações a serem realizadas: que tipo de testes vamos conduzir nos nossos experimentos? Vamos precisar fazer alguma coleta de dados? 
  • Flexibilidade tecnológica: o time vai conseguir ou ter facilidade em utilizar a ferramenta que está sendo considerada?
  • Benefícios da plataforma: o que essa ferramenta tem que as outras não tem?
  • Tipo de protótipo: que tipo de protótipo o projeto precisa? Um de alta, média ou baixa fidelidade? 

Ferramentas utilizar para criar um protótipo de um chatbot ou voicebot

Agora, chegou a hora de listar algumas plataformas que você pode considerar no seu conjunto de ferramentas. Para facilitar o entendimento de cada uma delas, vamos considerar alguns dos pontos importantes apresentados anteriormente para você (viabilidade técnica, necessidade de colaboração, validação a ser realizada, flexibilidade, etc). A intenção não é listar a melhor plataforma, apenas compartilhar algumas dicas e informações.

Draw.io 🔗

Draw.io é uma ferramenta dedicada ao desenho de processos. A ferramenta é muito conhecida por profissionais da área e é muito utilizada para a criação de fluxogramas, que eventualmente, são incorporados em um protótipo. De uma forma muito simples através da ferramenta é possível validar os fluxos, conteúdos e até integrações com APIs.

Aspectos a serem considerados sobre essa ferramenta:

  • O que faz: criação de fluxogramas e documentações;
  • Necessidade de colaboração: a ferramenta permite a colaboração com outras pessoas de forma limitada; para projetos grandes ou complexos, ou funcionalidades mais elaboradas (ex: comentários) talvez não atenda muito bem; 
  • Flexibilidade tecnológica: apresenta uma curva de aprendizado baixa, com poucos cliques é possível iniciar o desenho de um fluxograma; é interessante ter noções de desenho de processos para tirar melhor proveito da plataforma;
  • Tipo de protótipo: a ferramenta permite desenho de fluxogramas de baixa fidelidade
  • Benefícios: é rápido e faz o que promete. Draw IO é uma boa ferramenta para iniciar uma conversa sobre um projeto;
  • Link para acessar a ferramenta: https://draw.io/ 

Miro 🔗

Miro é uma plataforma de colaboração do tipo quadro branco (solução whiteboarding). Nela, times têm acesso a um canvas e podem realizar diversas sessões de ideações com post-its virtuais e outros componentes que facilitam a troca de informações. Miro também é utilizado para desenho de fluxogramas e até mesmo documentação de projetos conversacionais. Oferece uma experiência mais fluida que o Draw.IO, mas apesar de ter foco é diferente também é possível fazer validação do fluxo, conteúdos e etc.

Aspectos a serem considerados sobre essa ferramenta:

  • O que faz: criação de fluxogramas e documentações;
  • Necessidade de colaboração: a ferramenta foi feita para facilitar a colaboração entre as pessoas, oferece diversos templates e algumas funcionalidades que facilitam o desenho de fluxogramas; 
  • Flexibilidade tecnológica: apresenta uma curva de aprendizado baixa, com poucos cliques é possível iniciar o desenho de um fluxograma; 
  • Tipo de protótipo: a ferramenta permite desenho de fluxogramas de baixa fidelidade, mas com uma interface mais fluida e intuitiva;
  • Benefícios: é rápido e faz o que promete. O Miro, além de ser uma boa ferramenta para iniciar uma conversa sobre um projeto, também pode ser uma ótima aliada na colaboração rápida e remota de projetos;
  • Link para acessar a ferramenta: https://miro.com/ 

Figma 🔗

Figma é uma ferramenta de desenho de interfaces, como sites e apps, que pode ser utilizada na documentação e prototipação de interfaces conversacionais. Embora a parte de prototipação para interfaces conversacionais não seja muito recomendada, o Figma permite desenhar exemplos e fluxogramas muito detalhados e muito próximos do visual da interface que estamos simulando. Se tiver curiosidade para saber como fica, existe um Chatbot Design Kit no Figma público para download.

Aspectos a serem considerados sobre essa ferramenta:

  • O que faz: desenho de fluxogramas, documentações e também criação de protótipos (porém não recomendamos);
  • Necessidade de colaboração: é uma ótima ferramenta para colaborar com outras pessoas e manter a documentação em dia. O Figma tem várias funcionalidades que facilitam e favorecem a colaboração remota;
  • Flexibilidade tecnológica: tem uma curva de aprendizado baixa, mas pode ficar complexa de acordo com o desenho; oferece uma dinâmica muito parecida com outras ferramentas do tipo "quadro branco" (whiteboarding), como o Miro ou Mural
  • Tipo de protótipo: o Figma permite você criar um fluxograma com alta fidelidade visual do que será implementado, não recomendaria o uso dessa ferramenta para criar um protótipo funcional;
  • Benefícios: o Figma também tem um outro produto chamado FigJam que é um pouco mais simples e pode funcionar como o Miro; o Figma é muito bom para criar versões da documentação e criar documentações com alta fidelidade visual do que será implementado;
  • Link para acessar a ferramenta: https://www.figma.com/  

Adobe XD 🔗

Similar ao Figma, Adobe XD é uma ferramenta de desenho de interfaces, como Apps e sites, que também pode ser utilizada na documentação e prototipação de interfaces conversacionais. Diferente do Figma, o Adobe XD tem uma funcionalidade dedicada a voz, que além de documentar, permite criar protótipos de voz, como por exemplo uma Alexa Skill.

Aspectos a serem considerados sobre essa ferramenta:

  • O que faz: desenho de fluxogramas, documentações e também criação de protótipos para voz e dispositivos multimodais;
  • Necessidade de colaboração: é uma ótima ferramenta para colaborar com outras pessoas e manter a documentação em dia. Contudo, é necessária uma assinatura da Adobe;
  • Flexibilidade tecnológica: tem uma curva de aprendizado baixa, mas pode ficar complexa de acordo com o desenho; 
  • Tipo de protótipo: a ferramenta permite criar um protótipo de voz de alta e média fidelidade;
  • Benefícios: tem uma funcionalidade dedicada a prototipação de voz, bem como é uma ferramenta consolidada (feito pela Adobe) no mercado; também oferece vários outras funcionalidades que aceleram o trabalho de quem desenha a interface
  • Link para acessar a ferramenta: https://www.adobe.com/br/products/xd 

Botsociety 🔗

Botsociety é uma ferramenta de prototipação dedicada às interfaces conversacionais. Suporta chat, voz e dispositivos multimodais. Os protótipos também podem ser utilizados para coletar dados para serem incorporados em modelos de IA, como Rasa ou DialogFlow.

Aspectos a serem considerados sobre essa ferramenta:

  • O que faz: desenho de fluxogramas, documentações e também criação de protótipos de chat,  voz e dispositivos multimodais;
  • Necessidade de colaboração: é uma ótima ferramenta para colaborar com outras pessoas e documentar fluxos; É possível utilizar a ferramenta gratuitamente com alguns limites, todo o potencial é desbloqueado mediante assinatura;
  • Flexibilidade tecnológica: tem uma curva de aprendizado média para o que é feito na plataforma e fora dela; a coleta de dados orgânicos para serem usados em modelos de IA é um exemplo de uma tarefa que pode ser mais complexa;
  • Tipo de protótipo: a ferramenta permite protótipos de alta e média fidelidade, mas são limitadas ao site da ferramenta; em outras palavras, você precisa testar em algum browser; 
  • Benefícios: é possível exportar um vídeo da interação, bem como fazer download do fluxo como um todo; a ferramenta é otimizada para o processo de desenho, revisão e criação de conversas oferecendo diversas funcionalidades;
  • Link para acessar a ferramenta: https://botsociety.io/

Voiceflow 🔗

Muito parecido com o Botsociety, o VoiceFlow é uma ferramenta que inicialmente foi desenvolvida para o desenho de interfaces conversacionais de fala/voz, mas atualmente também permite a criação de chatbots.  Essa ferramenta, além de criar protótipos, também permite "colocar a solução em produção", o famoso "Go live!".

Aspectos a serem considerados sobre essa ferramenta:

  • O que faz: desenho de fluxogramas, documentações e também criação de protótipos de chat,  voz e dispositivos multimodais;
  • Necessidade de colaboração: é uma ótima ferramenta para colaborar com outras pessoas e documentar fluxos; Assim como o Botsociety, também é possível utilizar a ferramenta gratuitamente com alguns limites, todo o potencial é desbloqueado mediante assinatura;
  • Flexibilidade tecnológica: tem uma curva de aprendizado média e por permitir realizar mais coisas e até mesmo integrações. Esse tipo de ação pode tornar o uso complexo;
  • Tipo de protótipo: a ferramenta permite protótipos de alta fidelidade; como tem a facilidade de publicar nos canais, muitas vezes o protótipo é reaproveitado como solução; 
  • Benefícios: publicar direto no canal com poucos cliques, além de poder realizar integrações extras são alguns dos vários benefícios;
  • Link para acessar a ferramenta: https://www.voiceflow.com/ 

Conclusão

Algumas ferramentas, como o Botsociety e Voiceflow, podem ir mais longe caso o time tenha um conhecimento técnico de desenvolvimento e integrações. Já as outras, dão flexibilidade para você desenhar rapidamente a sua ideia em um quadro branco.

Então, lembre-se: a melhor ferramenta é aquela que ajuda você a comunicar a sua ideia e a evoluir o desenvolvimento do projeto como um todo, se apenas uma ferramenta como o Miro ou post-its já for  o suficiente, você já está indo no caminho certo.

Como disse o personagem Tio Ben do Homem-Aranha: "Com grandes poderes vêm grandes responsabilidades". Cada ferramenta tem o seu poder especial, cabe a gente escolher qual é a melhor de acordo com a nossa necessidade e flexibilidade tecnológica. 

No Curso de Design Conversacional, temos um módulo específico sobre prototipação no qual utilizamos algumas dessas ferramentas na prática e provavelmente você vai ouvir falar de algumas dessas em algum momento. 

Que tal compartilhar esse artigo para alguém ou se inscrever na nossa newsletter? Segue a gente para ficar por dentro de novos conteúdos!

 


 

Caio Calado

Caio é co-fundador da Arara School e Designer Conversacional. Atua no mercado conversacional desde 2016 e com experiências aqui no Brasil e fora. Tem interesse por Comunidades, UX Design, UX Writing, Facilitação e Criação de serviços e produtos digitais.

Mais artigos

Desrobotizando os Bots

Narrativas Conversacionais

Acessibilidade às pessoas usuárias no design conversacional

Se inscreva na nossa newsletter ✉️

Assine nossa newsletter e receba novos conteúdos por e-mail a cada duas semanas