Fluxogramas Conversacionais: o que são e como desenhar um?

design conversacional Feb 14, 2022

Fluxogramas são diagramas ou representações visuais de um processo. Já um fluxograma conversacional, é um artefato que indica como fluxos de conversas, de chatbots ou voicebots, vão acontecer de uma forma estruturada e visual. 

De forma resumida: profissionais utilizam esse artefato para documentar e comunicar com outras pessoas e partes interessadas no projeto. A partir de um fluxograma simples, é possível identificar obstáculos, oportunidades e até evoluir para um projeto complexo. 

Neste artigo, vamos listar algumas dicas e possibilidades para o uso de fluxogramas em projetos conversacionais. Além de falar sobre o por que usar um fluxograma, também vamos compartilhar ferramentas e dicas para desenhar um. Então, se você quer saber como desenhar seu primeiro fluxograma, só ler até o final deste artigo!

Por que usar um fluxograma conversacional?

Ao mesmo tempo que um fluxograma é uma das ferramentas mais simples para se iniciar um projeto conversacional, ela também pode ser uma das mais poderosas em relação a processo de ideação, validação e até mesmo documentação. 

O objetivo do fluxograma conversacional é criar uma representação visual de como será a conversa e as suas possíveis ramificações. Se, por exemplo, o projeto conversacional for um chatbot para um ecommerce, precisamos entender como um simples "Começar" pode levar até o "sua compra foi concluída".

Em linhas gerais, alguns dos principais motivos que levam times e profissionais a utilizarem fluxogramas nos projetos são: 

  • Baixo esforço: pode ser desde um mapa mental até um desenho de um processo mais elaborado: um quadro em branco e um post-its podem ser um ponto de partida;
  • Visibilidade: de uma forma estruturada, é possível ter uma representação gráfica das ideias de dos possíveis fluxos conversacionais  ("rumos") que uma conversa pode tomar;
  • Colaboração: qualquer pessoa pode colaborar ou influenciar no desenho dele. A maioria das ferramentas online favorecem esse tipo de colaboração, se for algo offline, um simples post-it ou quadro branco pode ajudar a desenhar um fluxo.

Em outras palavras: é rápido criar um fluxograma, fácil de revisar e simples de se colaborar. Contudo, dependendo da forma como é desenhado e do nível de detalhe que o projeto precisa, o fluxograma pode rapidamente se tornar uma ferramenta complexa.

Por isso, é importante ter um alinhamento prévio sobre o uso desse artefato e como desenhar um. Não existe jeito certo ou errado, mas temos algumas convenções e normas que são utilizadas no mercado para facilitar a comunicação e desenhos de projetos assim. 

Além de ajudar na visualização dos fluxos, entendimento de cada etapa da conversa e até mesmo alinhamento técnico, os fluxogramas conversacionais podem ajudar:

  • Em sessões de brainstorming ou validação com outras pessoas e partes interessadas;
  • Na estruturação da conversa, seja a nível macro ou micro;
  • No mapeamento de novas conversas, podendo ser novos fluxos ou até mesmo possíveis fluxos de reparo;
  • Numa melhor estruturação da conversa e da jornada conversacional;
  • Alinhamento técnico sobre necessidades de APIs ou outras integrações;
  • Mapear oportunidades de melhorias;
  • E mais!

Vamos falar mais sobre esse ponto em breve, mas é comum o fluxograma conversacional ser desenhado de duas formas:

  • Fluxo macro: é um desenho com fluxo de abstração alto, ou seja, é necessário apenas desenhar cada estágio (passo a passo) das possíveis ramificações ou fluxos conversacionais.
  • Fluxo micro: como evolução do fluxo macro, é um fluxo mais detalhado onde é possível trabalhar o conteúdo e outros elementos que vão estar presentes na conversa final.

Se liga: em ambos os casos, os fluxogramas conversacionais são representações de alto nível de um projeto conversacional. Eles são muito importantes na fase de pré-projeto ou no processo de ideação de novos fluxos. Também podem ter outros nomes como HLD, ou High-Level Design, mas é comum profissionais da área chamarem apenas de "fluxos" ou "fluxogramas".

Além disso, o fluxograma sozinho não é sinônimo de projeto completo. Portanto é necessário o uso de outros artefatos e documentos para guiar no processo de desenho conversacional. Vamos explorar mais sobre esses artefatos em outros artigos no nosso blog

Como desenhar um fluxograma conversacional?

Para desenhar um fluxograma conversacional, é necessário que você utilize um pequeno conjunto de elementos visuais que possam indicar o seu uso e significado dentro do fluxo. Dessa forma, as pessoas do seu time e outras partes interessadas podem rapidamente interpretar o projeto ou o desenho sem muitas perguntas. 

Atualmente, é muito comum o uso da simbologia de Modelagens de Processos de Negócio ou BPMN (Business Process Model and Notation). Em linhas gerais, essa simbologia é composta por:

  • Mapeamento de processos: qual é o output ou objetivo do processo que está sendo desenhado? Quais são as tarefas e outras áreas relacionadas para o início e fim do processo?
  • Objetos de fluxo: são elementos gráficos que indicam o comportamento do processo, podendo desde indicar uma ação como também uma decisão em algum ponto.
  • Objetos de conexão: são conectores e indicam o fluxo da conversa. Todas as setas precisam indicar/apontar a próxima caixa para dar clareza ao andamento da conversa.

Algumas ferramentas já apresentam um conjunto de elementos que podem ser utilizados no processo de desenho de um fluxograma conversacional, em alguns outros casos, é necessário uma adaptação que não atrapalhe a comunicação do time. 

Como isso se parece na prática? De forma simplificada, um fluxograma conversacional macro desenhado no FigJam para "uma compra de um café em uma cafeteria" se parece com:

Neste exemplo, temos a seguinte representação visual:

  • Retângulos arredondados representando o início e fim do processo ("pedido de um café mocha)"
  • Conexões da esquerda para a direita que simbolizam os possíveis caminhos, sendo as conexões diretas o caminho feliz e as pontilhadas possíveis ramificações
  • Um losango representado ponto de decisão ("Primeira vez no café?")
  • Retângulos que representam estágios da conversa ("Apresentação Menu")

O mesmo fluxo com anotações e rascunhos de diálogos de conversas se parece com:

Dica: é muito comum designers conversacionais ou pessoas da área de conteúdo utilizarem fluxogramas como um documento de rascunho. Como é algo que atualizado sem muito esforço, muitas vezes o fluxograma é usado em sessões de brainstorming (ideações), onde esse pessoal aproveita esse artefato para validar primeiro a estrutura base da conversa (fluxo macro) para então, começar a trabalhar no conteúdo (fluxo micro). 

Quais ferramentas para desenhar um fluxograma conversacional? 

Em um outro artigo, compartilhamos 6 ferramentas para prototipação e desenho de fluxogramas de chatbots e voicebots.

Para fins de exemplo, criamos o mesmo fluxo macro ("comprar um mocha em uma cafeteria") em 3 ferramentas diferentes para você analisar e conferir as diferenças em cada plataforma. O objetivo desse artigo não é de limitar ou dizer como você deve criar um fluxograma usando uma ferramenta específic, mas sim apresentar opções e diferentes formas de se criar um.

Fluxograma desenhado no FigJam (link para visualizar o fluxo):

Fluxograma desenhado no Draw.io (link para visualizar o fluxo):

Fluxograma desenhado no Miro (link para visualizar o fluxo):

É importante lembrar que os exemplos listados neste artigo são apenas rascunhos de fluxos macros. É apenas uma ideia do "passo a passo" de uma determinada conversa. Portanto, dependendo do caso, podemos desenhar fluxogramas mais elaborados e com mais informações e com mais elementos visuais, como por exemplo quick-replies, botões, carrosséis, requisições de API, etc. Nesses casos, vale alinhar com o time o que cada símbolo representa para não causar confusão, combinado?

Boas práticas para desenhar um fluxograma conversacional

O fluxograma conversacional nada mais é do que uma representação visual de todos os estágios de uma conversa que uma pessoa usuária pode ter com uma interface conversacional. Este artefato pode ajudar o time a entender melhor o rumo que uma conversa pode ter em diferentes cenários, e é amplamente utilizado em quase todas as etapas de criação de um projeto conversacional.

Como toda experiência digital, é interessante que quem for desenhar o fluxograma tenha conhecimento prévio do contexto do projeto, tanto as necessidades de negócio quanto algumas das possíveis limitações técnicas que podem aparecer no meio do caminho. 

Para ajudar você a desenhar um fluxograma, separamos algumas boas práticas:

  1. Desenhe com contexto do projeto em mente
  2. Defina uma coleção de elementos e símbolos para a construção do fluxograma
  3. Priorize as principais jornadas (fluxo feliz), mas não esqueça dos fluxos de reparos 
  4. Teste o seu fluxograma e evolua com os feedbacks

1. Desenhe com contexto do projeto em mente

Antes de começar a desenhar o fluxograma, é importante entender o porque vamos desenhar essa experiência. Nesse sentido, certifique-se se você tem todos os ingredientes necessários para iniciar o seu processo de ideação. 

Algumas perguntas que precisam ser respondidas antes de iniciar o desenho: 

  • Qual é o propósito desse fluxograma?
  • Qual ou quais são as necessidades de negócio ou resultados esperados?
  • Que tipo de experiência estamos tentando criar? 
  • O que as pessoas que vão conversar com essa interface (seja chatbot ou voicebot) estão desejando fazer? O que elas precisam para completar a sua jornada?
  • Quais são os serviços e integrações disponíveis para esse projeto?
  • Qual é o canal ou interface que vamos utilizar? É uma interface de voz ou chat? Quais são os componentes de interface disponíveis?

Por mais que seja natural a motivação de se criar uma experiência incrível, precisamos ter em mente as necessidades de negócio e as limitações técnicas que temos no projeto. Afinal, uma está responsável por bancar o desenvolvimento do projeto e a segunda de dar sustentação a toda a mágica. 

2. Defina uma coleção de elementos e símbolos para a construção do fluxograma

Uma vez que você entende o contexto, agora é hora de pensar em algumas possibilidades que você tem para desenhar o fluxograma.

Em linhas gerais, o seu fluxograma pode ter pelo menos uma representação visual para:

  • Estágios da conversa
  • Diálogos, seja da pessoa ou da interface
  • Conectores diretos, indiretos e dependência 
  • Pontos de decisão
  • Componentes da interface (ex: botões, quick-replies, imagens, vídeos, etc)
  • Integrações e outras requisições de API;
  • Marcadores de processos ou integrações internas (ex: trackers relacionados aos indicadores estratégicos do projeto ou marcadores para intents);
  • Ações ou processos que a interface realizou durante a conversa (ex: tocou uma trilha sonora);
  • Anotações ou outros meios de se comunicar dentro do projeto;

Por ser uma representação visual, você pode combinar com o seu time as formas, cores e até peso das linhas (mais grossa, mais fina ou pontilhada) para indicar esses elementos. Se você quiser ver um exemplo mais detalhado de uma documentação e uma coleção de componentes, existe um Chatbot Design Kit disponível publicamente para o Figma.

Se liga: seu fluxograma não precisa ter todos esses elementos, listamos apenas algumas sugestões. Tendo uma forma simples de representar os estágios, diálogos, conexões, ponto de decisão e requisições de API já são o suficiente para iniciar um projeto.

3. Priorize as principais jornadas (fluxo feliz), mas não esqueça dos fluxos de reparos 

As primeira versões do seu fluxograma precisa contemplar os principais casos de uso do seu projeto, contudo, é um erro comum não pensar nas estratégias e tratativas de erro para quando a conversa toma um rumo não esperado. 

Nesse sentido, é importante você conhecer dois tipos de fluxos ou ramificações comum em fluxogramas: 

  • Caminho ou fluxo feliz: fluxos desenhados considerando que toda a interação irá acontecer perfeitamente e a conversa irá para o caminho que estamos imaginando;
  • Caminho ou fluxo de reparo: são fluxos desenhados para dar suporte aos fluxos principais (caminho feliz) em caso de erros ou necessidade de reparo.  

Dependendo do tempo e da complexidade para desenho do seu fluxograma, você pode pensar em fluxos de reparo de forma macro (um ou dois fluxos genéricos) ou micro (um ou dois fluxos contextuais a ramificação). 

Não é o foco desse artigo, mas é interessante você pensar em estratégias para fluxos de reparo no seu projeto. Em uma das aulas do curso de design conversacional da Arara School, falo que "boas mensagens de erro garantem a saúde da experiência, pois são uma oportunidade para educar as pessoas. Quando mal projetadas, colocam em risco toda a experiência e a volta de pessoas usuárias." Portanto, um bom design conversacional também inclui um bom design para fluxos de reparo.

4. Teste o seu fluxograma e evolua com os feedbacks

Essa dica é bem direto ao ponto: leia para si e para outras pessoas o seu fluxo, teste e verifique a dinâmica da sua conversa. Parece meio óbvio, mas você aprende muita coisa sobre a dinâmica do seu fluxograma se você testar com outras pessoas e até mesmo ler em voz alta. 

Nesse sentido, existe um exercício poderoso e muito simples de ser feito em qualquer cenário que se chama o Mágico de Oz (MOZ). De forma resumida, o MOZ é uma maneira rápida, barata e simples de testar um protótipo sem necessariamente precisar desenvolver ou criar algo "real" ou "funcional". 

Podemos explorar esse experimento com mais detalhes em um outro artigo, mas de forma resumida: enquanto você estiver desenhando o seu fluxograma, você pode convidar outras pessoas para ir conversando ou lendo o seu fluxo em voz alta.

Na medida que você for desenhando ou melhorando o seu fluxo, você pode ir atualizando o fluxograma em tempo real ou deixando anotações para que tais melhorias sejam incorporadas no projeto. Você pode fazer isso de uma forma estruturada (lendo todo o conteúdo da conversa) ou de uma forma mais informal (apenas seguindo o passo a passo temático do fluxograma) para ver que rumo a conversa vai tomar. Fica a dica para você experimentar! 

Conclusão

É um momento muito mágico para iniciar o desenho do fluxograma de um projeto conversacional. Afinal, dias depois certamente ele estará funcionando e as pessoas vão estar conversando literalmente com suas ideias.

No curso de Design Conversacional da Arara School, abordamos a ideia de construção de fluxos e de caminhos felizes / reparos nos módulos de Fundamentos, UX Writing e Conteúdos, e Prototipação. O desenho de fluxogramas seguido de um bom processo de escrita e prototipação podem ajudar a criar um bom projeto conversacional. 

Espero que esse artigo apresente a você diferentes ângulos desse poderoso artefato e que você possa utilizar ele no seu próximo projeto. Se você quiser ficar por dentro de mais novidades e outros artigos, confira nosso blog e se inscreva na nossa newsletter.

 


 

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