Criar produtos digitais requer planejamento e foco nos usuários. Parte desse processo é chamado de User Flow, ou Fluxo do Usuário, em português.

Essa ferramenta, bastante utilizada por UX e Product Designers, consiste em mapear o caminho que o usuário vai percorrer e as ações que podem ser feitas na interface de um produto, ajudando a determinar quantas telas serão necessárias, em que ordem devem aparecer as informações e quais componentes precisam estar presentes nas telas.

Esses fluxos são feitos de pequenas interações e cada tela vai oferecer uma série de possibilidades para o usuário escolher. Por isso é importante que esse mapeamento venha antes dos desenhos das telas. Assim, na hora de criarmos os wireframes já temos uma visão geral do fluxo e sabemos as possibilidades de interação, o que funciona e o que não faz sentido aparecer nas telas.

Sitemaps vs. User Flow vs. User Journey

Alguns profissionais de design, principalmente no começo de carreira, confundem o que são Sitemaps, User Flow e User Journey. Os três modelos parecem semelhantes, porém são fluxos com propósitos diferentes.

Como o próprio nome sugere, um Sitemap é o mapa do seu produto onde conseguimos ter uma visão geral do site ou aplicativo em questão. É uma visão macro do que o produto tem a oferecer e com esse fluxo conseguimos entender as possibilidades de telas e o tamanho e a complexidade do produto.

Já o User Flow consiste em mostrar uma rota, onde mapeamos as direções e os caminhos que o usuário irá percorrer de um ponto A até um ponto B. É uma visão micro do produto, permitindo o entendimento do tempo e esforço necessários para o cumprimento das tarefas existentes no fluxo. Esses detalhes fazem com que o usuário chegue ao seu objetivo com eficiência.

O Mapa da Jornada do Usuário, por sua vez, não se trata de um fluxograma como os dois tipos citados acima. Aqui o exercício é focar em uma persona específica com ações e decisões dentro de um processo linear. O objetivo é entender o que o usuário pode fazer, pensar e sentir, assim como quais suas oportunidades. Com isso, detectamos os pontos de dor ou momentos de satisfação do usuário e podemos estabelecer uma experiência de uso mais eficiente.

• *Leia também: Escopo de produto: A importância de um escopo bem definido na criação de produtos*

Construindo um User Flow

Para fazer o User Flow, o primeiro passo obviamente é entender quem é seu usuário, compreendendo suas necessidades e motivações.

Portanto, tenha em mente quais problemas ele gostaria de resolver, que questionamentos ele pode ter sobre o produto e quais informações devem aparecer com facilidade sempre que houver uma interação. Pense em todas as possibilidades de navegação e identifique os caminhos principais.

Com base nos questionamentos acima, agora é hora de colocar a mão na massa! Comece a desenhar o fluxo em uma folha de papel ou em ferramentas digitais como o Miro ou o Figma - que, inclusive, usamos aqui na ateliware.

O segundo passo é escolher os elementos que irão compor esse fluxo e suas representações. Os modelos variam de designer para designer, mas nesse artigo vou apresentar o modelo BPMN (Business Process Model and Notation), que como o próprio nome diz, é um conjunto de padrões gráficos que especificam símbolos usados em diagramas e modelos de processos.

Nesse contexto, cada tipo de interação tem seu símbolo, os principais são:

• A piscina: Representa os processos e participantes do processo;

• As raias:  Representam as raias dentro da piscina que simbolizam os papéis, áreas e responsabilidades no processo;

• Os conectores: Representados por setas que ligam os diferentes elementos entre si;

• As atividades: Representadas por retângulos, são as tarefas e/ou telas do seu fluxo.

• Os eventos: Representados por círculos com bordas, indicam pontos de entrada e saída de um fluxo, ou somente os círculos preenchidos que caracterizam outros eventos da interação, como a chegada de uma mensagem.

• Os gateways: Representados por losangos, caracterizam os desvios do fluxo dependendo das decisões do usuário.

Veja o exemplo abaixo:

Os Fluxos de Usuário são úteis para a “caixa de ferramenta” dos UX designers, ajudando na avaliação e eficiência da usabilidade de um produto.

Outro ponto importante é que esse tipo de fluxograma contribui para que todos os envolvidos no projeto estejam na mesma página, facilitando a comunicação entre stakeholders, desenvolvedores e designers.