English speaker? See the translated article:

Resumo

Fluxo de usuário (User Flow) é uma técnica que te permite mapear todo fluxo de telas do seu site ou aplicativo de forma rápida. Essa técnica funciona bem para alinhar os caminhos e ações que o usuário pode fazer junto com os membros do time.

O ideal é que esses diagramas sejam feitos antes de desenhar protótipos como wireframes ou mockups.

O que são fluxos de usuário?

Antes de começar a desenhar telas para seu novo site ou aplicativo, é interessante conhecer seus usuários e definir o objetivo do seu produto digital.

Alguns exemplos de objetivos podem ser o cliente entrar em contato no seu site institucional, comprar um produto no na sua loja virtual ou assinar um serviço na sua plataforma.

Esses dois aspectos são os ingredientes para fazer bons fluxos de usuário. Basicamente esse diagrama te ajuda a desenhar o caminho que seus usuários terão que percorrer para chegar no objetivo do seu negócio e obter o valor que procuram.

Fluxos são feitos de várias pequenas interações. Cada tela oferece algumas possibilidades e o usuário escolhe uma delas.

O exemplo abaixo mostra como a 37 Signals usa o conceito de fluxos de usuário em seus projetos. Na parte de cima é descrito o que o usuário vê e logo abaixo é descrito o que o usuário faz. A seta indica a passagem de tela e conecta os pontos do fluxo.

Exemplo de Fluxo de usuário (User Flow)

Vale lembrar que nem sempre seus usuários entram por apenas um lugar no fluxo e nem sempre eles decidem chegar até o final logo de primeira.

Por causa disso é importante mapear os possíveis pontos de entrada como:

  • Busca orgânica: O usuário vem pelo Google, depois de pesquisar certas palavras chave.
  • Busca paga: O cliente chega através de uma propaganda feita pelo Google Adwords.
  • Redes sociais: O usuário entra no seu site pelo Facebook, Twitter, LinkedIn.
  • E-mail: Um cliente trazido por um e-mail marketing ou um email transacional.
  • Sites de notícias: Um visitante que chega por meio de uma notícia de algum blog ou portal.
  • Link direto: Um cliente antigo que já decorou o link direto de acesso.

Como fazer fluxos de usuário?

Para fazer fluxos de usuário, você pode começar desenhando apenas lápis e papel. Depois que chegar numa versão mais estruturada, você pode usar ferramentas como o Sketch, Axure ou o Google Draw para documentar melhor o fluxo e compartilhar com seu time.

Veja o fluxo de login abaixo para analisar um exemplo um pouco mais complexo:

Exemplo de fluxo de usuário

Exemplo de Fluxo de usuário (User Flow)

Note que neste exemplo, existem algumas notações a mais:

  • Use a linha pontilhada: Quando uma tela tiver mais de uma ação possível
  • Não preencha a parte de baixo: Caso uma tela não tenha uma ação
  • Use mais setas de ligação: Quando uma ação leve a mais de uma tela

Vale lembrar que esses fluxos servem mais para mapear o fluxo inicial. Então não vale a pena se apegar, porque eles serão naturalmente substituídos por wireframes, mockups ou pelo próprio site/aplicativo desenvolvido.

Faça seu próprio fluxo de usuário (user flow)

Preparamos um Template em Sketch para você poder fazer o seus próprios fluxos de usuários de forma rápida:

Template de fluxo de usuário (user flow)

Baixe no link:

Concluindo…

Criar fluxos de usuário é uma forma rápida de mapear os principais pontos de contato entre seu cliente e seu produto ou serviço.

Eles são úteis para alinhar o time sobre o objetivo do negócio e para guiar o desenvolvimento das telas e funcionalidades.

Apesar da utilidade, os fluxos de usuário acabam sendo abandonados depois de um tempo, e isso é natural. Mas é sempre bom lembrar dessa técnica quando alguma parte do fluxo precisar de alterações.


Você já usou fluxo de usuário (User Flow) em seus projetos? Deixe o seu comentário abaixo!
Achou o conteúdo interessante?
Compartilhe nas suas redes sociais!

7bits

Na 7bits, nós criamos valor através do design. Fazemos entrevistas, protótipos, testes de usabilidade, sempre com o objetivo de criar a melhor experiência.

Gabriel Sa e Farias

Written by

Designer de Produto na Kenoby e Fundador da 7bits (https://7bits.cc), uma consultoria especializada UX/UI design.

7bits

7bits

Na 7bits, nós criamos valor através do design. Fazemos entrevistas, protótipos, testes de usabilidade, sempre com o objetivo de criar a melhor experiência.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade