Template de User Flow para UX (Fluxo do Usuário)
Ajude equipes de produtos e UX a melhorar a experiência do usuário a partir do uso de um template de user flow. Crie condições para soluções criativas.
Sobre o template de User Flow
Um diagrama de user flow é um processo de mapeamento visual, organizado a partir de um passo a passo bem definido, que descreve o que um usuário faz para concluir uma tarefa ou um objetivo dentro do seu produto.
A diagramação do fluxo de usuário pode ajudar a interpretar a qualidade ou a experiência do caminho que um usuário escolhe percorrer dentro da sua solução. O fluxo também pode revelar quantos passos são dados pelos usuários para concluir uma tarefa e quais caminhos eles decidem seguir ao interagir com seu produto ou serviço para resolver um ponto de dor.
Embora este tipo de diagrama se concentre em como um usuário se move através de um determinado produto, em um template para screen flow (fluxo de tela) você verá um layout de página estilo wireframe na forma de um fluxograma.
Continue lendo para saber mais sobre User Flows ou conheça todas as funcionalidades da Miro para escrever histórias de usuários.
O que é um User Flow no UX?
Um diagrama de User Flow ajuda equipes de produto e UX a mapear o caminho lógico que um usuário deve seguir ao interagir com um sistema. Como uma ferramenta visual, o fluxo de usuário mostra a relação entre a funcionalidade de um site ou aplicativo, possíveis ações que um usuário pode tomar, e o resultado delas.
Os principais elementos de um User Flow são:
Um início e ponto final: isso deixa claro onde o fluxo começa ou termina
Processo ou ação: mostra quais etapas o usuário realiza, como “login” e “compra”
Pontos de decisão: mostra quando um usuário tem que fazer uma escolha
Setas/flechas: mostram onde o usuário está indo com base nas decisões tomadas
Experimente criar um User Flow se seu time estiver tentando avaliar ou melhorar a experiência do usuário, ou ampliar as taxas de conversão do cliente.
O processo pode te ajudar a manter o comportamento do seu usuário em mente ao criar melhores caminhos para levá-lo a concluir o objetivo comercial desejado, como a realização de uma compra, a inscrição em newsletter ou optar por uma avaliação gratuita.
Quando usar um template de User Flow?
Os diagramas de User Flow podem ajudá-lo a:
Criar interfaces intuitivas: seu fluxo parece fácil de percorrer, eficiente de usar e intuitivo para o usuário?
Decidir se sua interface existente é adequada para o propósito: o que está funcionando, não está funcionando ou precisa ser melhorado? O fluxo parece perfeito e faz sentido?
Apresentar seu fluxo de produto para equipes internas ou clientes: seu time de design poderá ver o que seu cliente diz ou faz durante o processo de compra, inscrição ou login. Os clientes têm uma visão geral, passo a passo, para se alinhar à sua visão?
Ao criar ou recriar um User Flow, pergunte a si mesmo e à seu time:
O que o usuário está tentando fazer?
O que é importante para o usuário e o que dará a ele confiança para continuar?
Quais informações extras o usuário precisará para concluir o que deseja fazer dentro do seu sistema?
Quais são as barreiras do usuário para realizar a tarefa?
Um mapa de fluxo de usuário pode ajudar designers e outros profissionais do time, a permanecerem centrados no usuário e em busca de melhorias que vão otimizar a experiência que eles vivem com a sua empresa.
Como designer, você pode usar o modelo de User Flow da Miro para decidir como irá projetar páginas ou telas, em seu site ou aplicativo, e reorganizar o conteúdo e as tarefas de navegação a serem incluídas.
Crie seu próprio User Flow
Mapear o seu próprio fluxo de usuário é fácil. A ferramenta de lousa digital da Miro é a tela perfeita para criar o seu template de User Flow e compartilhar com a sua equipe. Comece selecionando o template de fluxo de usuário e siga as etapas para criar o seu:
Decida sobre seus objetivos de negócios e os objetivos de seus usuários.
Descubra onde você quer que seus usuários cheguem. Nessa etapa será necessário conhecer mais sobre o caminho percorrido por seus clientes. Use um mapa de jornada do cliente para criar uma visão compartilhada sobre esse trajeto. Cada membro do time pode se beneficiar ao compreender melhor quais são os sentimentos de seus clientes em cada ponto de contato com seu produto ou serviço. Se colocar no lugar de quem usa o seu sistema (seus clientes) vai te ajudar a construir todas as etapas do processo de fluxo de usuário.
Descubra como os visitantes encontram seu site.
Eles estão encontrando seu produto ou serviço através do tráfego direto, pesquisa orgânica, publicidade paga, mídias sociais, links de referência ou e-mails? Esses pontos serão o início do seu diagrama de User Flow, dependendo do que você descobrir.
Descubra as informações que seus usuários precisam e quando precisam.
Você converte usuários quando oferece a eles as informações certas no momento certo. Então, considere o que seu cliente deseja em cada ponto de contato e qual é a satisfação dele com experiência que está vivendo atualmente Engajamento – por exemplo, uma interação de chatbot – é uma métrica de sucesso potencial. Não se trata apenas de levar o usuário a uma compra final.
Mapeie seu User Flow.
Você pode editar as formas e setas existentes em nosso template de User Flow considerando as informações que coletou ao cumprir as etapas anteriores. Depois que seu cliente descobre seu primeiro ponto de contato, o que eles fazem em seguida? Quantos passos até que eles concluam uma tarefa? Use o modelo de User Flow básico disponível na Miro para começar a desenhar o seu próprio. Altere os pontos de contato, desistências, e as direções das linhas de conexão para se adaptarem melhor ao seu diagrama de fluxo de usuário.
Obtenha feedback de seu time.
Convide seu time, clientes e outras partes interessadas para visualizar o seu board da Miro com o novo fluxo. Você pode optar por permitir comentários que podem ser inserido por meio de notas adesivas ou @menções. Dentro da lousa digital da Miro, também é possível fazer uma videochamada e designar alguém de seu time para fazer as anotações sobre o que foi discutido em reunião. Uma vez que você tenha feedbacks suficientes de seu time, faça os ajustes necessários.
Compartilhe com outras partes interessadas, como alguns clientes, e continue fazendo as otimizações conforme necessário.
Seu User Flow mudará ao longo do tempo à medida que as atitudes e motivações de seus clientes evoluem. Continue atento ao caminho que os usuários percorrem dentro do seu sistema e adapte de acordo com as informações que coletar. Permaneça centrado no usuário.
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 para a abordagem Working Backwards
Ideal para:
Desk Research, Strategic Planning, Product Management
A Amazon foi pioneira no método Working Backwards, que pode ser traduzido como “trabalhando de trás para frente”. O modelo é ideal para criar novos produtos, baseados em um dos princípios-chave da empresa: o foco no consumidor. Working backwards é uma metodologia para pensar em um produto sem um roadmap detalhado, invertendo a lógica do processo de criação de produtos. Seu time inverte a lógica do processo de criação. Ou seja, começa com uma imagem do que o cliente quer e só depois cria o produto, fazendo o lançamento de uma maneira que realmente atenda aos consumidores. O método requer que qualquer pessoa com uma nova ideia de produto ou recurso articule seu objetivo da maneira mais clara possível. Se a apresentação de ideias impressionar a liderança, a próxima etapa é mapear o que o time precisa para chegar ao lançamento do produto ou recurso.
Modelo para Matriz BCG
Ideal para:
Planejamento Estratégico
Alguns produtos são “vacas-leiteiras” que geram lucros robustos. Outros são “abacaxis” que mal se equilibram. Outros ainda são “estrelas” ou “pontos de interrogação”. A matriz BCG mostrará a você o que é cada um, examinando os produtos em seu portfólio e te ajudando a fazer perguntas difíceis sobre eles, como: isso vai estimular o crescimento dos negócios? Será que ele vai capturar participação de mercado? Vale a pena? Uma matriz BCG trará insights para ajudá-lo a enxergar oportunidades no mercado e saber quais de seus produtos merecem seu investimento.
Modelo para Análise de custo-benefício
Ideal para:
Gerenciamento de Projetos, Planejamento Estratégico, Priorização
O nome praticamente diz tudo, esse framework da metodologia ágil visa ajudá-lo a maximizar a eficiência, potencializando a colaboração entre gerentes de produto e equipes de desenvolvimento. Juntos, vocês podem revisar cada tarefa na agenda do projeto e avaliá-las em termos de custos e benefícios. Dessa forma, você pode priorizar as tarefas com base no retorno do seu investimento. Este modelo é ótimo para times e organizações que desejam fazer um plano estratégico para enfrentar um próximo sprint.
Modelo de Protótipo de Baixa Fidelidade
Ideal para:
Design, Desk Research, Wireframes
Os protótipos de baixa fidelidade funcionam como visualizações iniciais práticas do seu produto ou serviço. Estes protótipos simples compartilham apenas alguns recursos com o produto final. São ideais para testar conceitos amplos e validar ideias. Os protótipos de baixa fidelidade ajudam os times de produto e de UX a estudar a funcionalidade do produto ou serviço com foco na iteração rápida, e nos testes de usuário para projetar os designs futuros. Ao se concentrarem em esboçar e traçar um mapa de conteúdo, menus e fluxo de usuário, os designers e não designers podem participar do processo de design, e de ideação. Em vez de produzir telas interativas vinculadas, os protótipos de baixa fidelidade se concentram em insights sobre as necessidades do usuário, visão do designer e alinhamento dos objetivos das partes interessadas.
Modelo de Brainstorming de Tópicos de Pesquisa
Ideal para:
Desk Research, Brainstorming, Ideation
Criar um tema para um projeto de pesquisa pode ser uma tarefa bastante difícil. Use o Modelo de Brainstorming de Tópicos de Pesquisa para transformar uma ideia geral em algo concreto. Com o Modelo de Brainstorming de Tópicos de Pesquisa, você pode compilar uma lista de ideias gerais que lhe interessam e depois dividi-las em partes componentes. Você pode então transformar essas partes em perguntas que podem ser o foco de um projeto de pesquisa.
Template de wireframe para aplicativos
Ideal para:
Design UX, Wireframes
Vamos começar a criar um aplicativo? Como funcionará? Como será a interação dos usuários com seu app? Não fique somente na imaginação, o wireframe mostra tudo isso para você. A criação de wireframe é uma técnica para criar um layout básico de cada tela. Quando faz um wireframe, idealmente no início do processo, você entende o que cada tela realizará e recebe a adesão de importantes partes interessadas — tudo antes de adicionar o design e o conteúdo, o que economizará tempo e dinheiro. E ao pensar nas coisas em termos de jornada de um usuário, você oferecerá uma experiência mais atraente e bem-sucedida.