UX Design

Entendendo User Flow

O User Flow, ou fluxo de usuário, é uma ferramenta fundamental para designers e profissionais de UX. Neste artigo, vamos explorar mais a fundo o seu significado e como criá-lo de forma simples.

Então vamos lá… o que é um user flow?

User flow é o caminho que o usuário poderá seguir e os passos que ele vai tomar para realizar uma ação. Por exemplo, em determinado aplicativo o objetivo é que o cliente compre X produto. Entre a ação de abrir o aplicativo e confirmar a compra, existirão diversas interações e possibilidades dentro da tela. Esse caminho deve ser pensado e testado para entender como o usuário se move pela interface. O ideal é que esses fluxos sejam feitos antes dos Wireframes.

Além dos fluxos convencionais, para pessoas como eu, que sentem a necessidade de algo mais visual, o Wireflow pode ser uma ótima opção. Esse tipo de diagrama junta os possíveis caminhos que o cliente vai percorrer (o fluxo) com os Wireframes. Mesmo utilizando telas muito simples, acredito que seja possível ter uma noção maior da construção visual do projeto.

Ok, mas como fazer um user flow?

Você poderá fazer com lápis e papel ou usar alguns sites e programas como Figma, Whimsical, Sketch, Google Draw, Adobe XD, entre outros. Existem alguns passos que podem ajudar nessa construção:

Entenda o usuário

O primeiro passo é entender o usuário, suas necessidades e comportamentos. Assim, ficará mais fácil criar uma experiência de uso eficiente e intuitiva. Nesse passo, você pode fazer pesquisas, criar personas e uma síntese das informações coletadas.

Identifique objetivos

Após conhecer bem para quem você está projetando, chega o momento de identificar objetivos e metas que você quer que o usuário cumpra, como comprar um produto, completar uma transferência bancária ou salvar uma informação.

É importante entender por onde o usuário entra (loja de apps, tela de cadastro, etc), o objetivo final do fluxo e quais são as ações possíveis de serem tomadas nessa jornada. Entenda quais dificuldades ele pode enfrentar, quais pontos estão confusos e quais os caminhos diferentes que podem ser tomados para uma mesma ação.

Deixe visual

Depois de escolher o objetivo, é interessante listar os pontos de interação e os passos que o usuário poderá tomar. Assim, ficará mais fácil de passar para o esboço visual.

Dentro de um diagrama de fluxo de usuário, existem algumas formas que você poderá utilizar para representar ações, decisões e processos.

Forma oval: Normalmente indicam pontos de começo e fim do fluxo.

Retângulo: Os retângulos representam páginas ou telas.

Diamante: Indicam decisões que o usuário vai fazer no caminho.

Seta (conector): Determinam o fluxo do diagrama e pode seguir diferentes direções.

• Uma dica no uso desses conectores é utilizar diferentes cores ou outra estilização no mesmo projeto, dependendo do objetivo ou tipo de navegação. Isso ajuda a tornar o diagrama menos poluído e mais compreensível. Nesse caso, também é interessante dar uma explicação do que cada tipo de conector representa.

Esse é um exemplo simplificado de um User Flow utilizando todos esses elementos:

O exemplo acima mostra um possível fluxo para compra de produtos em um site.

Conclusão

Como designer, fui percebendo cada vez mais a importância de criar diagramas de User Flow no começo dos meus projetos. Com essa ferramenta é possível entender e visualizar melhor o produto como um todo, além de ficar mais fácil de mostrar para o time o que vem sendo feito e tomar decisões em grupo.

Existem muitos sites e programas que ajudam na hora de fazer um diagrama de fluxo do usuário, um dos meus preferidos é o Whimsical, que já vem com alguns elementos prontos de interface e é muito simples de usar. Mas é importante lembrar que o user flow é uma ferramenta flexível que pode ser adaptada às necessidades específicas de cada projeto. No fim, cada um vai achando o formato que acha melhor de trabalhar. O importante é praticar e testar!

Referências

https://creately.com/blog/pt/diagrama/como-fazer-um-diagrama-de-fluxo-do-usuario/

https://userguiding.com/pt-br/blog/diagrama-de-fluxo-do-usuario/

https://medium.com/7bits/fluxo-de-usuário-user-flow-o-que-é-como-fazer-79d965872534