Template de Fluxo de Usuário
Ajude os times de UX e produtos a melhorar a experiência do usuário promovendo condições para soluções criativas.
Sobre o Template de Fluxo de Usuário
Um diagrama de fluxo de usuário (também conhecido como diagrama de interação ou de fluxo de tarefas) é um processo de mapeamento visual passo a passo, descrevendo o que um usuário faz para concluir uma tarefa ou atingir um objetivo por meio do seu produto ou experiência.
Diagramar o fluxo de usuário pode ajudar a interpretar a qualidade ou a experiência do caminho que um usuário escolhe. O fluxo também pode revelar quantos passos eles escolheram para completar uma tarefa e quais caminhos decidiram seguir ao interagir com seu produto ou serviço para resolver um ponto de dor.
Enquanto os diagramas de fluxo de usuário se concentram em como um usuário navega em um produto específico, um Template de Fluxo de Tela apresenta um layout de página estilo wireframe na forma de um fluxograma.
O que é um diagrama de fluxo do usuário?
Diagramas de fluxo de usuário ajudam as equipes de UX e produto a mapear o caminho lógico que um usuário deve seguir ao interagir com um sistema. Como ferramenta visual, o diagrama de fluxo do usuário mostra a relação entre a funcionalidade de um site ou aplicativo, as ações potenciais que um usuário pode realizar e o resultado do que o usuário decide fazer.
Os principais elementos de um fluxo de usuário são:
Um ponto de início ou fim: isso deixa claro onde o fluxo começa ou termina
Processo ou ação: mostra quais passos o usuário dá, como "login" ou "comprar"
Pontos de decisão: indica quando um usuário precisa fazer uma escolha
Setas: elas indicam para onde o usuário está indo com base nas decisões tomadas
Experimente um fluxo de usuário se sua equipe estiver tentando avaliar ou melhorar como a experiência do usuário existente pode levar a melhores taxas de conversão de clientes.
O processo pode ajudar você a manter o usuário em mente e identificar o objetivo de negócios, como uma compra, assinatura de newsletter ou a escolha por uma versão gratuita.
Quando usar um template de fluxo do usuário
Diagramas de fluxo do usuário podem ajudar você a:
Criar interfaces intuitivas: o fluxo parece fácil de transitar, eficiente de usar e intuitivo para o usuário?
Decidir se sua interface atual está adequada ao propósito: o que está funcionando, o que não está ou precisa de melhorias? O fluxo parece fluido e faz sentido?
Apresentar o fluxo de produto para equipes internas ou clientes: sua equipe de design consegue ver o que seu cliente diz ou faz durante o processo de compra, criação de conta ou login? Os clientes podem obter uma visão geral passo-a-passo para alinhar com sua visão?
Ao criar – ou recriar – um fluxo do usuário, pergunte a si mesmo e à sua equipe:
O que o usuário está tentando fazer?
O que é importante para o usuário e irá lhe dar confiança para continuar?
Que informações adicionais o usuário precisará para ter sucesso?
Quais são as hesitações ou barreiras do usuário para realizar a tarefa?
Um mapa de fluxo de usuários pode ajudar os designers (e suas equipes ou clientes) a se manterem centrados no usuário, mesmo ao mapear processos complexos.
Como designer, você pode usar diagramas de fluxo de usuários para decidir como planejará páginas, telas ou superfícies em seu site ou aplicativo e reorganizar quais conteúdos e tarefas de navegação incluir.
Crie seu próprio diagrama de fluxo de usuários
Mapear seu próprio fluxo de usuários é fácil. O espaço de trabalho visual do Miro é a tela perfeita para criar e compartilhar seu diagrama. Comece selecionando o template de fluxo de usuários e, em seguida, siga os passos abaixo para criar o seu:
Decida sobre os objetivos do seu negócio e os objetivos dos seus usuários.
Identifique onde deseja que seus usuários cheguem. Se ainda não tiver um (ou precisar atualizá-lo), use um mapa de jornada do cliente para criar uma visão compartilhada da experiência do cliente. Cada membro do time pode se beneficiar de um entendimento comum sobre os sentimentos dos seus clientes em cada potencial ponto de contato com seu produto ou serviço. Construir empatia com o usuário informará cada etapa do seu processo de fluxo de usuários.
Descubra como os visitantes encontram seu site.
Eles estão encontrando seu produto ou serviço através de tráfego direto, busca orgânica, publicidade paga, mídia social, links de referência ou e-mails? Esses pontos serão o início do seu diagrama de fluxo de usuários, dependendo do que você descobrir.
Descubra quais informações seus usuários precisam e quando precisam delas.
Usuários convertem quando recebem a informação certa no momento certo. Portanto, considere o que seu cliente deseja de seu ponto de contato digital e como ele pode estar se sentindo. O engajamento — por exemplo, uma interação com chatbot — ainda é uma métrica de sucesso potencial, não se trata apenas de levar a uma compra final.
Mapeie seu fluxo de usuários.
Você pode editar as formas e setas existentes no nosso template de fluxo de usuários para acomodar a pesquisa de usuários que você levantou nas etapas anteriores. Após o cliente descobrir seu primeiro ponto de contato, o que ele faz em seguida? Quantas etapas até ele completar uma tarefa? Use o fluxo de usuário básico no template para começar a desenhar seu próprio. Altere pontos de contato, saídas e direções das setas de conexão para ajustar melhor ao seu diagrama de fluxo de usuário.
Obtenha feedback do seu time.
Convide seu time, clientes ou stakeholders multifuncionais para visualizar seu board do Miro. Você pode escolher deixar feedback de forma assíncrona com notas adesivas ou @menções para revisão por pares. Você também pode iniciar uma videoconferência no seu board do Miro e designar alguém do seu time para a função de anotador. Assim que tiver comentários suficientes do time, faça os ajustes necessários.
Compartilhe com outros stakeholders ou clientes e continue reiterando conforme necessário.
Seu fluxo de usuário mudará com o tempo conforme as atitudes e motivações dos seus clientes evoluem. Adapte-se adequadamente, mantenha o foco no usuário.
Perguntas frequentes sobre o Template de Fluxo de Usuário
O que é um exemplo de fluxo de usuário?
Imagine que você está desenvolvendo um site para um evento. Se deseja melhorar sua experiência do usuário, deve mapear todas as etapas necessárias para o registro no evento e compra de ingressos.
Você pode começar acompanhando o fluxo do cliente e onde ele inicia sua jornada para comprar ingressos para o evento. O diagrama de fluxo de usuário ajuda a visualizar de forma imediata como o cliente completará sua compra (o objetivo final do seu site), desde o registro até a página de pagamento.
O que é um exemplo de fluxo do usuário?
Imagine que você está desenvolvendo um site para um evento. Se você deseja melhorar sua experiência do usuário, deve mapear todas as etapas necessárias para a inscrição do evento e compra de ingressos. Você pode começar rastreando seu fluxo de clientes e onde eles começam a jornada para comprar os ingressos do seu evento. O diagrama de fluxo do usuário ajuda você a visualizar de forma rápida como o cliente vai concluir a compra (o objetivo final do seu site), desde o registro até a página de pagamento.
Comece com esse modelo agora mesmo.
Template de Wireframes de baixa fidelidade
Ideal para:
Pesquisa de Mesa, Gerenciamento de produtos, Wireframes
Quando você está projetando um site ou desenvolvendo um aplicativo, as primeiras etapas devem ser GRANDES — visualizando o panorama geral e comunicando a grande ideia. Wireframes de baixa fidelidade te capacitam a ver e fazer. Esses esboços (pense neles como a versão digital de um rabisco em um guardanapo) ajudam seus times e stakeholders do projeto a determinar rapidamente se um design atende às necessidades dos seus usuários. Nosso template permite que você use facilmente wireframes durante reuniões, workshops, apresentações e sessões de crítica.
Template para criar mapa do site
Ideal para:
Fluxogramas, Mapeamento, Experiência do Usuário
Um fluxograma de website, também conhecido como sitemap, mapeia a estrutura e complexidade de qualquer site atual ou futuro. O fluxograma também pode ajudar seu time a identificar lacunas de conhecimento para conteúdo futuro. Ao construir um site, você deve garantir que cada conteúdo ofereça aos usuários resultados de pesquisa precisos com base nas palavras-chave associadas ao seu conteúdo web. Times de produto, UX e conteúdo podem usar fluxogramas ou sitemaps para entender tudo que um site contém e planejar a adição ou reestruturação de conteúdo para melhorar a experiência do usuário no site.
Template de Protótipo
Ideal para:
Design de UX, Design Thinking
Um protótipo é um mockup ao vivo do seu produto que define a estrutura, fluxo de usuário e detalhes de navegação (como botões e menus) sem se comprometer com detalhes finais como design visual. Protótipos permitem simular como um usuário pode vivenciar seu produto ou serviço, mapear contextos de usuários e fluxos de tarefas, criar cenários para entender personas e coletar feedback sobre seu produto. Utilizar um protótipo ajuda a economizar dinheiro ao identificar obstáculos no início do processo. Protótipos podem variar, mas geralmente contêm uma série de telas ou pranchas conectadas por setas ou links.
Template de Wireframe de apps
Ideal para:
Design de UX, Wireframes
Pronto para começar a criar um aplicativo? Não basta imaginar como irá funcionar e como os usuários irão interagir com ele — deixe que um wireframe mostre a você. Wireframing é uma técnica para criar um layout básico de cada tela. Ao criar um wireframe, idealmente no início do processo, você entenderá o que cada tela irá realizar e obterá o comprometimento de stakeholders importantes—tudo isso antes de adicionar o design e o conteúdo, o que economizará tempo e dinheiro. E ao pensar nas coisas em termos da jornada do usuário, você proporcionará uma experiência mais envolvente e bem-sucedida.