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 até mesmo 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 (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.
Exemplo prático: Fluxo de usuário (User Flow)
Fizemos um fluxo do usuário para o projeto da My Beach Tennis. Para facilitar o compartilhamento com o cliente, usamos o próprio Google Draw.
Para usar o exemplo de fluxo acima, é só ir em “Arquivo” e “Fazer uma cópia”.
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!
