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 do usuário
Um diagrama de fluxo de usuário (também conhecido como diagrama de fluxo de interação ou de tarefa) é 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.
Criação de diagramas do fluxo do usuário pode ajudar a interpretar a qualidade ou experiência do caminho que um usuário escolhe. O fluxo pode também revelar quantas etapas eles escolheram para completar uma tarefa e quais caminhos decidiram seguir ao interagir com seu produto ou serviço para resolver uma questão.
Enquanto os diagramas de fluxo de usuários focam em como um usuário se movimenta por um produto específico, um Template de Fluxo de Telas 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ários ajudam times de UX e produto a mapear o caminho lógico que um usuário deve seguir ao interagir com um sistema. Como uma ferramenta visual, o diagrama de fluxo do usuário mostra a relação entre a funcionalidade de um site ou app, ações potenciais que um usuário poderia tomar e o resultado das decisões do usuário.
Os principais elementos de um fluxo do usuário são:
Um ponto de partida ou chegada: isso deixa claro onde o fluxo começa ou termina
Processo ou ação: mostra quais etapas o usuário realiza, como "login" ou "compra"
Pontos de decisão: mostra quando um usuário precisa fazer uma escolha
Setas: elas mostram para onde o usuário está indo com base nas decisões tomadas
Experimente um fluxo de usuário se o seu time 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 ajudá-lo a manter seu usuário em mente e identificar o objetivo comercial, como uma compra, inscrição em newsletter ou optar por uma avaliação gratuita.
Quando usar um template de fluxo de usuário
Os diagramas de fluxo do usuário podem ajudar você:
Construa interfaces intuitivas: o seu fluxo parece fácil de navegar, eficiente de usar e intuitivo para o usuário?
Decida se sua interface existente é adequada ao propósito: o que está funcionando, não está funcionando ou precisa de melhorias? O fluxo parece contínuo e faz sentido?
Apresente o fluxo do seu produto para times internos ou clientes: seu time de design pode ver o que seu cliente diz ou faz durante o processo de compra, criar conta ou login? Os clientes podem obter uma visão geral passo a passo para alinhar com a sua visão?
Ao criar — ou recriar — um fluxo de usuário, pergunte a si mesmo e ao seu time:
O que o usuário está tentando fazer?
O que é importante para o usuário e lhe dará confiança para continuar?
Quais 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 do usuário pode ajudar designers (e seus times ou clientes) a se manterem centrados no usuário, mesmo ao mapear processos complexos.
Como designer, você pode usar diagramas de fluxo do usuário para decidir como irá projetar páginas, telas ou superfícies no seu site ou aplicativo e reorganizar quais conteúdos e tarefas de navegação incluir.
Crie seu próprio diagrama de fluxo de usuário
Mapear seu próprio fluxo de usuário é fácil. O espaço de trabalho visual da Miro é o canvas perfeito para criar e compartilhar seu diagrama. Comece selecionando o template de fluxo do usuário, depois siga os passos a seguir para criar o seu próprio:
Decida sobre seus objetivos de negócios e os objetivos dos seus usuários.
Descubra onde você gostaria que seus usuários chegassem. Se você ainda não tem um (ou precisa atualizá-lo), use um mapa de jornada do cliente para criar uma visão compartilhada da experiência do seu cliente. Todos os membros do time podem se beneficiar de um entendimento compartilhado dos sentimentos dos seus clientes em cada ponto de contato potencial com seu produto ou serviço. Construir empatia com o usuário informará cada etapa do seu processo de fluxo do usuário.
Descubra como os visitantes encontram seu site.
Eles estão encontrando seu produto ou serviço por meio de tráfego direto, busca orgânica, publicidade paga, redes sociais, links de referência ou e-mails? Esses pontos serão o início do seu diagrama de fluxo do usuário, dependendo do que você descobrir.
Descubra quais informações seus usuários precisam e quando elas são necessárias.
Usuários convertem quando recebem a informação certa no momento certo, então considere o que seu cliente deseja do seu ponto de contato digital e como ele pode estar se sentindo. Engajamento – por exemplo, uma interação com chatbot – ainda é uma métrica potencial de sucesso – não se trata apenas de levar a uma compra final.
Mapeie seu fluxo do usuário.
Você pode editar as formas e setas existentes do nosso template de fluxo de usuário para acomodar a pesquisa de usuário que você descobriu nas etapas anteriores. Após seu cliente descobrir o primeiro ponto de contato, o que ele faz em seguida? Quantas etapas faltam para eles completarem uma tarefa? Use o fluxo de usuário básico no template para começar a desenhar o seu próprio. Altere os pontos de contato, as saídas e as direções das setas das linhas de conexão para ajustar melhor ao seu diagrama de fluxo de usuários.
Receba feedback do seu time.
Convide seu time, clientes ou stakeholders multifuncionais para visualizar o seu board da Miro. Você pode optar por deixar feedback de forma assíncrona com notas adesivas ou @menções para revisão por pares. Você também pode participar de uma videoconferência no seu board da Miro e designar alguém do seu time para desempenhar a função de anotador. Depois de obter a opinião do time, faça os ajustes conforme necessário.
Compartilhe com outros stakeholders ou clientes e continue reiterando conforme necessário.
O fluxo do usuário mudará ao longo do tempo à medida que as atitudes e motivações dos seus clientes evoluírem. Adapte-se conforme necessário, mantenha o foco 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 de Wireframes de baixa fidelidade
Ideal para:
Pesquisa de mesa, Gerenciamento de produtos, Wireframes
Quando você está projetando um site ou construindo um aplicativo, as primeiras etapas devem ser GRANDES — veja o panorama geral e comunique a grande ideia. Wireframes de baixa fidelidade permitem que você veja e faça isso. Esses layouts preliminares (pense neles como a versão digital de um esboço em um guardanapo) ajudam seus times e stakeholders do projeto a determinar rapidamente se uma reunião de design atende às necessidades dos seus usuários. Nosso template permite que você use facilmente wireframes durante reuniões ou workshops, apresentações e sessões de crítica.
Modelo para criar Mapa do Site
Ideal para:
Flowcharts, Mapping, User Experience
Um mapa do site, também conhecido como sitemap, desenha a estrutura de qualquer página existente ou que ainda será projetada. O fluxograma também pode ajudar seu time a identificar lacunas que servirão de base para a criação de um conteúdo futuro. Ao construir um site, é importante garantir que cada parte do material disponível forneça ao usuário resultados de pesquisa precisos com base nas palavras-chave associadas. Equipes de produto, UX e conteúdo podem usar fluxogramas ou mapas do site para entender tudo o que está presente na plataforma, e assim planejar, adicionar ou reestruturar as informações para melhorar a experiência do usuário.
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 do produto, 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. Usar um protótipo ajuda a economizar dinheiro, identificando obstáculos no início do processo. Os protótipos podem variar, mas geralmente contêm uma série de telas ou quadros de arte conectados por setas ou links.
Modelo de Wireframe para Aplicativo
Ideal para:
Design de UX, Wireframes
Pronto para começar a desenvolver um app? Não apenas imagine como ele funcionará e como os usuários interagirão com ele — deixe um wireframe mostrar para você. Wireframing é uma técnica para criar um layout básico de cada tela. Quando você cria wireframes, idealmente no início do processo, você ganha um entendimento do que cada tela realizará e obtém a adesão 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 atraente e bem-sucedida.