User flow: o mapa do sucesso para o UX Design

O User Flow, ou Fluxo do Usuário, corresponde ao caminho percorrido dentro de um produto digital para realizar uma compra ou escutar música, por exemplo. Mapear este trajeto é importante para criar experiências incríveis e projetar uma interface eficiente, atendendo as expectativas do seu cliente. Saiba mais neste post.

Giovana Schnorr Vendramini

Giovana Schnorr Vendramini

July 01, 2021 | leitura de 5 minutos

design

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.

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: Representados 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.

Referências:
- Site Map e User Flow: Quais as diferenças e quando usar cada um
- Fluxo de Usuário: O que é? Como fazer?
- Fluxogramas: materialize e comunique suas ideias e processos
- Notação BPMN: a mais usada para modelar processos
- What are User Flows
- Complete Guide to User Flows - Your map to UX success
- How to create a User Flow
- What is a User Flow: Everything you need to know
- User Flow Diagram
Giovana Schnorr Vendramini
Giovana Schnorr Vendramini

UX/UI Designer | Adoro divagar sobre os mais diversos assuntos. Sou fascinada por design, cultura geek, viagens e não saio de casa sem meus fones de ouvido.

LinkedIn