Fluxograma de usuário para uma tarefa no seu app ou site
Mapeie as telas e ações pelas quais o usuário passa para concluir uma tarefa, com verificação de login, estados de erro e caminhos de volta, e todo ramo terminando em algum lugar.
Um fluxograma de uma única tarefa do usuário, do ponto de entrada, passando pelas suas telas, ações e condições, até cada ponto de sucesso ou saída. Telas e verificações do sistema são desenhadas de formas diferentes. Confira cada ramo, caminho de volta e estado de erro com o seu design.
Agendamento de aula de yoga com verificação de login e ramo de lista de espera
Ponto de entrada
O usuário toca em Agendar aula na tela inicial do app do Águas Calmas Yoga
Telas e ações em ordem
Tela - Lista de aulas
Ação - toca em uma aula
Tela - Detalhes da aula
Ação - toca em Agendar
Tela - Pagamento
Ação - paga com o cartão salvo
Tela - Agendamento confirmado
Condições e para onde vai cada resposta
Logado? Não → tela de login, depois volta para Detalhes da aula. Sim → Agendar
Aula lotada? Sim → tela de lista de espera. Não → Pagamento
Pontos de sucesso e de saída
Agendamento confirmado; Entrou na lista de espera; Desistiu no pagamento
Notação ou destaque
Fim de sucesso em verde, fins de desistência e erro em cinza
Checkout com limite de novas tentativas de pagamento, caminho de volta e nomes de tela longos
Ponto de entrada
Cliente que já comprou antes abre o carrinho pelo e-mail de lembrete no celular
Telas e ações em ordem
Tela - Carrinho com itens salvos e previsão de entrega
Ação - toca em Finalizar compra
Tela - Endereço de entrega e escolha do horário de entrega
Ação - escolhe um horário
Tela - Pagamento com cartões salvos e opção de novo cartão
Ação - toca em Pagar
Tela - Confirmação do pedido com link de rastreio
Condições e para onde vai cada resposta
Endereço ainda válido? Não → tela Editar endereço, depois volta para Endereço de entrega. Sim → escolha do horário
Pagamento aprovado? Sim → Confirmação do pedido. Não → tela Pagamento recusado, tentar de novo (até duas novas tentativas, depois tela Fale com o suporte)
Usuário toca em Voltar no Pagamento → volta para Endereço de entrega com o horário mantido
Pontos de sucesso e de saída
Pedido feito; Encaminhado para Fale com o suporte após pagamentos recusados; Saiu do fluxo em qualquer tela
Notação ou destaque
Em branco
Verifica se o loop de novas tentativas para depois de duas tentativas e sai para Fale com o suporte, se o caminho de volta retorna à tela certa e se os nomes de tela longos são mantidos inteiros.
A mesma tarefa, três caminhos
Escolha um caminho para começar.
01
Caminho feliz primeiro
A rota principal de sucesso desenhada em linha reta, com cada alternativa saindo dela, para uma revisão rápida com as partes interessadas.
02
Estados de erro e casos-limite
A mesma tarefa com cada falha, nova tentativa e beco sem saída visível, para planejar testes de QA ou revisar o design.
03
Usuários novos e recorrentes
Duas rotas de entrada que se juntam em uma tela comum, para tarefas em que cadastro e login se separam antes do fluxo principal.
O que o modelo mantém
O que não muda.
01
Telas e ações separadas
As telas são caixas e as ações rotulam as passagens entre elas, então o fluxograma se lê como um passo a passo.
02
Todo ramo tem saída
Cada caminho termina em uma saída listada ou volta a uma tela anterior, com um rótulo explicando por quê.
03
Os nomes das suas telas
Os nomes batem com os que você usa nos arquivos de design e nos tickets.
Como usar
Dos seus dados ao resultado.
01
Escolha uma tarefa e o ponto de entrada
Agendar uma aula, redefinir a senha, finalizar uma compra. Uma tarefa por fluxograma mantém a leitura fácil.
02
Liste telas e ações em ordem
Comece cada linha com Tela ou Ação, para o fluxograma diferenciar lugares do que o usuário faz.
03
Inclua as condições
Escreva cada verificação como pergunta e diga para onde vai cada resposta, incluindo caminhos de volta e de nova tentativa.
04
Liste todas as saídas e revise no Vizify
Fins de sucesso, desistência e erro. Nada roda até você enviar o briefing.
05
Confira cada ramo com o seu design
Siga cada caminho até uma saída e confirme que os nomes das telas batem com os seus wireframes.
Limites do resultado
O que conferir antes de usar.
O fluxograma mostra o fluxo, não as telas em si. Wireframes, textos de interface e layouts não são desenhados.
O Vizify não testa o seu app nem encontra casos-limite que faltam. Ele aponta ramos sem destino, não caminhos que você não mencionou.
Uma tarefa por fluxograma. Várias tarefas no mesmo diagrama logo ficam difíceis de acompanhar.
O layout é automático. As opções de exportação são as que o App do Vizify oferece para o diagrama.
DúvidasQual a diferença entre um fluxograma de usuário e um wireframe?+
O fluxograma de usuário mostra a ordem das telas e decisões de uma tarefa. O wireframe mostra como é uma tela. Use o fluxo para combinar o caminho antes de desenhar as telas.
Como mostro que o usuário pode voltar?+
Inclua uma linha como "Usuário toca em Voltar no Pagamento → volta para Endereço de entrega". Ela vira uma seta com rótulo apontando para a tela anterior.
Este modelo de fluxo de usuário serve para site além de app?+
Sim. As telas podem ser páginas, modais ou etapas de um formulário. Use os nomes que a sua equipe já usa para o fluxograma bater com os tickets.
E se eu não souber o que acontece depois de um erro?+
Deixe a dúvida no briefing. O Vizify pergunta para onde o ramo deve ir em vez de inventar uma tela de erro, o que deixa a lacuna fácil de levar para a equipe.
Continue explorando
Ferramentas, modelos de IA e outros modelos relacionados.
