Diagramas de fluxo de usuário e wireframes de site, com downloads SVG grátis
Fluxos de usuário e wireframes
Exemplos de diagrama de fluxo de usuário + kit de wireframes de site (SVG grátis) | We.Inc
O que é um fluxo de usuário, oito fluxos prontos para cadastro, checkout, agendamento e mais, e wireframes simples para página inicial, de preços e de contato. Baixe cada um em SVG para abrir no Figma.
Um fluxo de usuário é o caminho que uma pessoa percorre no seu site para concluir uma tarefa, desenhado como telas, ações e decisões ligadas por setas. Um wireframe é um esboço simples do layout de uma tela. Mapeie o fluxo primeiro e depois faça o wireframe de cada tela dele. Abaixo estão oito fluxos comuns e três wireframes para baixar em SVG.
Formas usadas nos fluxos
Forma
Significa
Pílula arredondada (azul)
Onde o fluxo começa
Caixa quadrada
Uma página ou tela
Caixa cinza
Algo que a pessoa faz, como preencher um formulário
Losango
Uma decisão ou verificação que pode falhar
Pílula arredondada (verde)
O objetivo foi alcançado
Cada fluxo tem um único objetivo e o menor número de passos para chegar a ele, com a falha mais comum desenhada como um laço tracejado. Use-os como ponto de partida para o seu próprio site e depois faça o wireframe das telas por onde eles passam.
Escreva o objetivo em uma linha, por exemplo: um novo visitante agenda o primeiro horário.
Liste cada tela e ação do ponto de entrada até o objetivo. Não pule as chatas, como confirmar um e-mail.
Marque cada ponto em que algo pode dar errado, como um cartão recusado ou um horário já ocupado, e decida para onde a pessoa vai em seguida.
Conte os passos e corte os que não ajudam a pessoa a chegar ao objetivo.
Faça o wireframe de cada tela do fluxo, decidindo o que vai onde antes de escolher cores ou fontes.
Comece de onde as pessoas realmente chegam. Muitos visitantes caem em uma página de produto ou do blog vindos da busca, não na sua página inicial.
Mantenha os wireframes cinza de propósito. Cor e imagens reais atraem comentários sobre estilo quando você quer comentários sobre estrutura.
Todo losango de decisão precisa de um caminho de volta. Um pagamento recusado que termina num beco sem saída perde a venda.
Teste um fluxo com cinco pessoas antes de construí-lo. Ver onde elas hesitam revela a maioria dos problemas.
Perguntas frequentes
Qual é a diferença entre fluxo de usuário e jornada do usuário?
Um fluxo de usuário mapeia as telas e os passos de uma tarefa no seu site. A jornada do usuário é mais ampla: cobre o que alguém pensa, sente e faz antes, durante e depois de usar o seu produto, muitas vezes em vários canais. Fluxos servem para projetar telas; jornadas servem para entender pessoas.
Como abrir esses SVGs no Figma?
Baixe o arquivo e arraste para um canvas do Figma, ou abra no navegador, copie e cole. O Figma transforma as formas e os textos em camadas editáveis que você pode reestilizar e ampliar.
Quão detalhado deve ser um wireframe?
O suficiente para mostrar o que há na tela e em que ordem: navegação, títulos, imagens, formulários e botões. Deixe de fora o texto exato, as cores e as fontes. Se as pessoas começarem a discutir o tom de azul, está detalhado demais.
Preciso de um software especial para fluxos de usuário?
Não. Papel e caneta servem para uma primeira versão. Ferramentas de diagrama ajudam quando você quer compartilhar, editar ou guardar os fluxos junto com os designs, e arquivos SVG simples como estes funcionam na maioria delas.
Por que mapear o fluxo antes das páginas
Páginas desenhadas uma de cada vez costumam funcionar sozinhas e falhar juntas. A página de preços fica ótima, mas não tem um próximo passo claro; o formulário de cadastro pede coisas que o checkout pede de novo. Desenhar o fluxo primeiro mostra cada passagem entre telas, que é onde a maioria das pessoas desiste.
Um fluxo também deixa visível o custo de cada passo extra. Quando um agendamento ocupa nove caixas no papel, fica óbvio quais podem ser unidas.
Do wireframe à página real
Quando a ordem do conteúdo está definida, o wireframe vira o briefing do design real. Cada bloco cinza se torna uma seção com título e texto, e os rótulos nos cantos viram os nomes de seção que você usa com a sua equipe ou com o seu criador de sites.
Cadastro
Um visitante cria uma conta e chega à primeira tela útil.
Visitante chega à página inicial
Clica em Começar grátis
Formulário de cadastro: e-mail e senha
E-mail já usado?
Sim: entrar
Link de confirmação do e-mail
Tela de boas-vindas com a primeira tarefa
Checkout
Um cliente paga pelo que está no carrinho.
Carrinho
Checkout: contato e entrega
Escolher a opção de frete
Dados de pagamento
Pagamento aprovado?
Não: tentar de novo
Confirmação do pedido e e-mail
Agendamento
Um novo cliente agenda o primeiro horário.
Página do serviço
Escolher serviço e profissional
Calendário de horários livres
Horário ainda livre?
Não: escolher de novo
Formulário de dados de contato
Agendamento confirmado, adicionado à agenda
Redefinição de senha
Um membro que esqueceu a senha volta a entrar.
Página de login
Clica em Esqueci a senha
Informa o e-mail
Abre o link de redefinição do e-mail
Link ainda válido?
Não: enviar de novo
Define a nova senha
Conectado
Pedido de contato
Um potencial cliente envia uma pergunta e sabe quando esperar resposta.
Qualquer página
Página de contato
Preenche nome, e-mail, mensagem
Campos válidos?
Não: mostrar erros
Mensagem de agradecimento com prazo de resposta
Inscrição na newsletter
Um leitor se inscreve e confirma.
Post do blog
Caixa de inscrição no fim do post
Página Confira sua caixa de entrada
Clica no link de confirmação
E-mail de boas-vindas e página de arquivo
Da busca ao produto
Um cliente encontra um produto pela caixa de busca.
Qualquer página
Digita na busca
Página de resultados com filtros
Encontrou algo?
Não: sugestões
Página do produto
Adicionado ao carrinho
Pedido de orçamento
Um cliente local pede o preço de um serviço.
Página da área de atendimento
Botão Pedir orçamento
Formulário curto: tipo de serviço, CEP, fotos
Dentro da área de atendimento?
Não: sugerir parceiro
Confirmação com horário de retorno
Página inicial
Diga o que você faz, prove e aponte um próximo passo.
Navegação
Hero: título, frase, botão principal
Logos ou provas
Três benefícios
Como funciona
Depoimentos
Chamada final para ação
Rodapé
Página de preços
Deixe as pessoas compararem planos e escolherem um sem precisar falar com você.
Navegação
Título e seletor mensal ou anual
Cards dos planos
Tabela comparativa de recursos
Perguntas frequentes sobre preços
Rodapé
Página de contato
Facilite o contato e deixe claro quando você vai responder.
Navegação
Título e prazo de resposta
Formulário de contato
Mapa ou foto
Endereço, telefone, horários
Rodapé
Oito exemplos de fluxo de usuário
Cada fluxo tem um único objetivo. A linha laranja tracejada é a forma mais comum de um passo falhar e para onde a pessoa vai em seguida.
Kit de wireframes
Três wireframes de baixo detalhe para as páginas de que a maioria dos sites precisa. Os rótulos em cada bloco dão nome à seção.