Fluxogramas: Materialize e Comunique Suas Ideias e Processos

Este blogpost será dedicado ao uso de uma ferramenta considerada indispensável para todos os projetos da nossa empresa: o fluxograma. É a forma com a qual conseguimos materializar uma ideia de processo ou serviço que será transformado ou gerado em uma plataforma digital. Além de ser uma forma eficaz de comunicação com todos os profissionais e stakeholders do projeto, mesmo que eles estejam remotos.

Fluxograma é uma representação gráfica, ou diagrama, de um processo. É uma ilustração de etapas ou ações, que acontecem em sequência, utilizando símbolos tidos como universais. Ou seja, são reconhecidos e interpretados de forma semelhante por pessoas que utilizam esta ferramenta em variados contextos.

Seu uso mais abrangente é o de mapeamento de processos, onde organizações podem representar operações para entender como a empresa está caminhando e fazer o repasse dessas informações entre seus funcionários. Mas diversas áreas do mercado usam esta ferramenta para encadear atividades, fluxos, boas práticas, perpetuação de cultura e jornadas de serviços.

Na esfera do desenvolvimento de produtos digitais, temos diversas aplicações de fluxogramas, variações que foram sendo adaptadas para cada contexto e para se adequarem às evoluções dos métodos de trabalho. Vamos falar a seguir sobre algumas das variações mais utilizadas por designers e profissionais de UX: flowchart, task flow e user flow (a ser destrinchado em subtipos).

Flowchart

"Flowchart" é a tradução em inglês para fluxograma, e é o termo é mais utilizado na comunidade, especialmente se você quiser procurar este conteúdo na Internet. É a forma mais básica de mapear processos.

A forma gráfica para a descrição de ações encadeadas mais conhecida é a simbologia BPMN (Business Process Model and Notation).

O BPMN trouxe símbolos gráficos que muitos profissionais utilizam, ou fazem releitura, em diversos fluxogramas para anotar o que é uma ação, qual a próxima ação, onde há um nó de decisão, e onde o fluxo inicia e termina. Quanto mais se usa esses símbolos, mais isto se torna prático, pois tendemos a garantir que as pessoas entendam a leitura do diagrama por associação, sem necessariamente entender de mapeamento de processos.

O flowchart da imagem acima foi montado de forma simples (não tão detalhada) para exemplificar a estrutura geral de um mapeamento de processos, neste caso com dois atores; mostrando quem começa, o que cada um é responsável por e a dependência das ações entre ambos.

Diferente do exemplo, o mapeamento deve ser bem detalhado, informando todas as opções e possibilidades, responsáveis pelas ações, mídia de comunicação e integrações. Dessa forma, alguém que nunca foi agente de um processo pode ler e ser capaz de reproduzi-lo.

Abaixo ilustramos alguns símbolos mais comuns do BPMN utilizados neste exemplo de flowchart, e que serão usados nas imagens subsequentes deste post.

Saiba também sobre ULM, linguagem utilizada por engenheiros de software para para a elaboração da estrutura de projetos, onde você pode perceber a replicação e/ou releitura dos símbolos do BPMN.

Task Flow

Geralmente é um recorte de um processo mais complexo que traz para primeiro plano uma tarefa específica, podendo trazer mais detalhes de uma determinada ação.

Como exemplo temos a imagem abaixo com um fluxo (simplificado para ilustrar) de redefinir senha, descrevendo as etapas da tarefa para que um usuário web, que esqueceu sua senha, possa escolher uma nova.

Não é necessário usar da simbologia BPMN, mas desta forma garantimos que você, que está lendo este post e viu sobre esta notação, possa, de forma mais fácil, ler este fluxo e compreendê-lo. Ou seja, é interessante que dentro da mesma organização e do mesmo contexto, seja usada uma notação padronizada.

User Flow

Aqui já estamos entrando em fluxogramas mais direcionados ao desenvolvimento de produtos digitais.

O user flow (fluxo de usuário) é bastante utilizado por UX e product designers, e mapeia todo o processo de circunstâncias e decisões que influenciam em como alguém alcança o seu objetivo na web ou em plataformas digitais. Serve para visualizar o caminho completo do usuário por toda a solução criada.

Em linhas gerais, o fluxo de usuário é um flowchart + forma diferente de materialização das etapas/ações. Nós vamos falar um pouco sobre estas formas de materialização a seguir.

Wireflow

flowchart + wireframes

É a utilização do diagrama de mapeamento de processos, mas no lugar da caixa de atividade, que receberia a descrição de uma ação, vem um wireframe em algum nível de fidelidade.

São bons para ilustrar em especial fluxos estáticos, com informações de regra de negócio, integrações, detalhamento de mensageria, documentação atrelada, entre outros. O Nielsen Norman Group tem um artigo bem legal sobre wireflows, que indicamos a leitura.

Wireflow 1.

Este mapeamento acima (wireflow 1) usou wireframes de baixa fidelidade (estrutura geral da tela) e seguiu uma notação conservadora de fluxograma, semelhante ao BPMN. Contém anotações, ações e integrações com mensageria via e-mail.

Wireflow 2.

O wireflow 2 também conta com wireframes que apresentam uma visão ampla da estrutura da página, com anotações de conteúdo e envio de e-mail. Entretanto, sua notação é mais livre não usando símbolos de início e fim de fluxo, nem o conhecido losango para nó de decisão.

Wireflow 3.

O paper prototype, exemplificado no wireflow 3, também pode ser utilizado para montar um fluxograma, e é um dos meus favoritos para validar a ideia, a interação e experiência com os stakeholders. É rápido para produzir e detalhar, e fácil de discutir e adaptar presencialmente com o cliente e usuários.

IX Flow

flowchart + wireframes ou telas + interações

O IX flow mostra além do fluxo de tarefas pelo caminho da solução. Mostra da ação de uma tarefa, o que leva aquela tarefa a ser executada, o que acontece ao executar a tarefa e o feedback desta interação. Então, a partir das telas interconectadas, você pode adicionar o como, ou por qual elemento a ação é iniciada; o que o usuário vai ver/ouvir/sentir ao realizar a ação; o que a interface vai fazer em seguida, seu comportamento, e se aquela ação é recorrente ou não, por exemplo.

Na imagem acima, temos um user flow com telas em alta fidelidade, mostrando um fluxo específico entre dois usuários distintos, e qual componente leva à próxima ação. Mas além disso temos detalhado o que cada componente gera e retorna: como o usuário aciona a ação (swipe, toque, clique), qual o feedback (tem carregamento, tem um pop-up, tem transição, muda de tela), e se esta tela tem alguma alteração recorrente por tempo ou atualização.

Tem um blogpost muito bacana (An Introduction to Interaction Flows) que mostra, além do que é um IX Flow, como você pode incorporar ao fluxograma o famework de Dan Safer com os 4 elementos derivados da microinteração: trigger (gatilho), feedback, rules (regras), e loops/modes (repetições e/ou versões). Desta forma você pode detalhar ainda mais seu user flow com como exatamente aquele elemento vai funcionar e pra onde ele vai te levar. Recomendamos a leitura.

Speech Bubble Flow

Uma forma de incrementar fluxos

Os fluxogramas, num geral, são objetivos e lógicos. Uma forma de humanizar os fluxos e centrar no usuário é por meio do speech bubble flow (fluxo com balões de pensamento em tradução livre). Ele é efetivo para focar nos pensamentos e necessidades do usuário; mantendo o vínculo com as personas criadas no início do projeto (é uma forma, inclusive, de evoluí-las).

Independente da forma como o fluxograma é materializado, você pode incorporar os pensamentos das personas em cada ação. O que levou este usuário a entrar no site? A procurar por um conteúdo específico? A realizar uma pesquisa? A comprar um produto?

Bônus: Journey Map

Não é tecnicamente um fluxograma. Sua notação é diferenciada, não há descrição de ações, nem detalhamento de integrações, e trata de uma persona específica. Entretanto descreve uma linha de ação de um agente em um processo geralmente linear.

O Journey Map (mapa da jornada do usuário) foca na experiência do usuário e nos seus sentimentos. Tenta detectar pain points (momentos de dor) ou momentos de satisfação durante uma jornada definida. Pode tratar várias possibilidades de solução, ajudando a escolher ou ajustar um produto para uma melhor experiência.

Tem uma leitura sobre diferenças entre user flow e journey maps que achamos bem legal, apesar de não concordarmos necessariamente com tudo.

Fluxogramas servem para a gestão do conhecimento, handoff entre áreas e equipes, ajuda com processos de co-criação e validação com clientes e stakeholders. Percebemos, trabalhando com diversos profissionais, que mesmo de forma rápida e informal, todos esboçam soluções e processos em fluxogramas. É uma forma de tirar a ideia do papel e materializar um fluxo de pensamento. Acreditamos que esta seja a serventia mais valiosa desta ferramenta: sair dos "e se" que ficam ruminando na cabeça e visualizar possibilidades de soluções até chegar a uma conclusão.

Este blogpost é apenas um apanhado geral para mostrar algumas formas de utilização da ferramenta de fluxograma. Recomendamos as leituras colocadas ao longo do post e, quando for usar a ferramenta, não fique presoem notação ou se as tarefas e etapas já estão na ordem correta. Deixe fluir, teste materiais e plataformas, veja como a ferramenta pode te ajudar e não ser apenas um framework de trabalho.

Se virar um método de trabalho (tomara que sim!), recomendamos que deixe o mais coerente possível para a linguagem e cultura do local em que você trabalha e passe o conhecimento para frente. Com o uso contínuo dos colaboradores, você pode conseguir padronizar e tornar o uso do fluxograma parte do dia a dia de trabalho da organização.