Fluxogramas de UX: conheça os principais e suas aplicações
descubra o que são e veja como utilizar User Flows, Wireflows, Interaction Flows e Sitemaps.
Publicado em 24 de fevereiro de 2022
Para quem tem pressa: fluxogramas são esquemas visuais para ilustrar o funcionamento de um sistema, como o UX, em que o usuário transita pelas etapas de uma tarefa. São ferramentas que auxiliam o profissional de UX na documentação do projeto.
Muito complicado? Vamos simplificar!
Ok, o projeto já está em andamento. Após as etapas de pesquisa e exploração, você compilou as descobertas e criou personas que servirão de base para o que será projetado.
Com o que foi descoberto e solicitado pelos entrevistados, é irresistível a tentação de desenhar telas, mockups, microinterações e animações. E mesmo que isso seja útil nas etapas futuras do projeto, não preencherá as lacunas de planejamento da solução totalmente.
Como a solução se encaixa no dia a dia do usuário? Em que situações vai interagir ou recorrer a ela? Quais tarefas o usuário precisa cumprir e o nível de complexidade delas? Que etapas são necessárias? Quais as condições ideais para o sucesso? Como reduzir a complexidade?
Para poupar recursos e esforços desnecessários, é fundamental preencher essas lacunas, mantendo o usuário no centro do planejamento. Confira como responder a essas perguntas usando alguns dos principais fluxogramas de UX.
Glossário
User Journey Map (Mapa de Jornada do Usuário)
Foca nos pontos de interação de um usuário com uma marca ou serviço durante a jornada, para atingir determinado objetivo. Indica motivações, obstáculos, pontos de dor e de satisfação em cada fase.
É, portanto, direcionado a mapear a experiência do usuário, sem detalhar especificações do sistema. Exibe também etapas não restritas ao sistema desenvolvido, como as que antecedem o primeiro contato com a marca.
Por exemplo, um usuário da Amazon gostaria de comprar um livro. Antes de acessar o site e chegar à tela do produto, executou várias ações:
- sentiu a necessidade inicial para comprar o livro;
- leu resenhas e críticas;
- pesquisou em uma ou mais lojas ou sites, usando, provavelmente, o smartphone;
- comparou preços e condições de pagamento e entrega.
Tomada uma decisão, acessou o site da Amazon para encontrar novamente o livro, adicioná-lo ao carrinho e concluir a compra.
Depois, recebeu a confirmação do pedido, acompanhou a entrega pelo site e recebeu o produto embalado.
Ao mapear a jornada do usuário, você identifica as motivações para iniciar cada etapa, as frustrações e os obstáculos, bem como pontos propícios para trazer surpresas positivas à experiência dele.
A partir daqui, o uso do mapa depende dos objetivos do projeto ou das descobertas feitas. Poderiam ser:
- melhorias nas etapas de pesquisa pelo produto, otimizando mecanismos de busca, anúncios, taxonomia do site, filtros, entre outros;
- melhorias de usabilidade na página do produto;
- revisão da comunicação no site, e-mail e notificações para fornecer transparência durante a entrega da mercadoria;
- lançamento de uma nova funcionalidade para suprir uma demanda específica da jornada.
User Flow (Fluxograma do Usuário)
O Fluxograma do Usuário ou User Flow (como vou tratar daqui para frente) é diferente do Mapa de Jornada do Usuário. Isso porque não apenas explica as etapas para cumprir uma ou mais tarefas em um sistema definido, mas também exibe em detalhes o modelo de navegação, a relação entre as telas percorridas, os inputs do usuário, as condições para seguir e os resultados obtidos.
É útil principalmente nas etapas de Arquitetura de Informação e Design de Interação em um projeto de UX, quando há definições mais detalhadas dos seguintes itens:
- necessidades dos usuários;
- objetivos de negócios;
- especificações funcionais
- requisitos de conteúdo.
Dessa forma, normalmente é projetado após as fases de exploração e descoberta, ou seja, depois do Mapa de Jornada do Usuário. Lógico, isso pode variar de projeto para projeto. Também pode ser utilizado para comunicação com stakeholders e desenvolvedores.
Importante reforçar que o Fluxograma do Usuário não se trata de um Sitemap (mapa estático com a relação hierárquica entre telas de um sistema ou site).
Existem diferentes tipos de Fluxograma do Usuário, variando em nível de detalhamento visual e estrutural.
Jesse James Garrett (autor de Elementos da Experiência do Usuário) criou um vocabulário visual para facilitar e padronizar a documentação de fluxogramas de UX. Ele deixou claro o que são no sistema itens, como páginas, condições, tarefas, elementos comuns, pontos de continuidade etc.
Por esse vocabulário, é possível desenhar sistemas complexos e quebrá-los em partes menores, de acordo com as tarefas realizadas pelo usuário.
É uma documentação mais robusta, porém mais “ortodoxa” e técnica, menos apelativa visualmente e requer uma certa curva de aprendizado ou uso de legendas para ser compreendida pelos clientes e os desenvolvedores.
Na minha avaliação, tende a cair em desuso, dando espaço para outras formas de documentação, consultadas com mais frequência (como wireframes comentados e protótipos).
Pessoalmente, utilizo esse fluxograma no início do projeto (mas com menos detalhes), como ferramenta para me guiar com relação ao que precisa ser desenhado e a questões que precisam ser respondidas.
É um processo de idas e vindas entre desenhar wireframes, consultar e adaptar User Flows, até que os evoluo para as duas variações mais comuns: Wireflows e Interaction Flows.
Wireflows
Ao mesmo tempo em que o User Flow é bastante detalhado em condições, decisões, idas e vindas e erros, ele é muito abstrato na camada visual, pois não exibe nem relaciona os “nós” do fluxograma às telas a que se referem.
Conforme proposto pela Nielsen Norman Group (https://www.nngroup.com/articles/wireflows/), uma alternativa a isso são “Wireflows“, que consistem em uma combinação de wireframes com User Flows.
Nesse caso, é possível acessar os benefícios do User Flow, mas com as referências visuais de que carece. Em vez de mostrar retângulos, são exibidos telas e modais que compõem a solução para aquela tarefa.
Deixam de expor linhas conectadas a quadrados e triângulos, para exibir a conexão entre um determinado botão pressionado e a tela aberta em consequência disso.
Além de serem mais precisos e fáceis de ler, Wireflows são utilizados em sessão de planejamento em conjunto, em que se pode colaborar com outras pessoas para desenhar o fluxo do usuário pelas telas do sistema.
Interaction Flows
Se Wireflows são User Flows detalhados, Interaction Flows são o próximo nível.
Os diferenciais dos Interaction Flows (ou IX Flows) são principalmente a camada extra de informações que exibem:
- anotações;
- descrições;
- gestos básicos de interação (rolagem, dois toques, swipe etc.).
É comum ver Interaction Flows criados com o layout final, e não com Wireframes. Tudo depende da finalidade do documento.
Por exemplo, em etapas preliminares de definição de Design de Interface e Design de Navegação, não faz sentido exibir o layout final, pois esse não é o foco. Já para uma documentação para desenvolvedores, apresentar o layout final pode ser útil.
Bônus: Sitemap (Mapa do Site)
Como já expliquei, o Sitemap não pode ser classificado como fluxograma, porque não exibe um fluxo de informações ou tarefas, e sim as relações hierárquicas entre as principais telas ou páginas de um sistema, site ou aplicativo.
A ferramenta de UX é utilizada principalmente nas tarefas de Arquitetura de Informação, pois fornece uma visão clara e ampla das principais áreas do sistema planejado. É usada para definição de taxonomia por agrupamento de conteúdo relacionado.
Sitemaps organizam o conteúdo de um sistema, mas não exibem a forma como usuários interagem com ele ou realizam as tarefas por esse recurso. É, portanto, uma ferramenta relacionada ao planejamento, à estruturação e à definição de conteúdo.
O Sitemap pode ser exibido no sistema pela hierarquia de menus para acesso a páginas de conteúdo ou de produto. Assim, ajuda o usuário a iniciar a navegação ou a encontrar um item específico ao utilizar a solução.
Conclusão e recomendações
- Fluxogramas de UX são documentações criadas pelo responsável pelo planejamento da área de UX.
- São úteis em diversas etapas de um projeto.
- Não são documentações estáticas: podem evoluir conforme o andamento do projeto.
- No caso de User Flows, a principal função é ilustrar o caminho percorrido pelo usuário ao realizar uma tarefa em um sistema.
- Essas documentações precisam ser utilizadas. Caso não forem compreensíveis ou nem trouxerem as informações necessárias, caem em desuso e resultam em esforço desperdiçado.
- Cuide para que sejam exibidas somente as informações necessárias.
- Procure focar na tarefa principal por fluxograma, de modo a simplificar o desenho e a legibilidade.
Agora, você já conhece os principais fluxogramas de UX. Que tal usá-los em seu próximo projeto?
Desenvolva a sua carreira em UX
A Awari é uma plataforma completa com mentorias individuais, cursos com aulas ao vivo e suporte de carreira.
Conheça nossa trilha de Design e confira os nossos cursos de UX e UI Design com jornada personalizada e materiais complementares desenvolvidos por especialistas no mercado.
