Um diagrama de Viagem do Usuário descreve os passos que um usuário realiza para alcançar um objetivo específico dentro do seu aplicativo. Diferentemente de fluxogramas ou diagramas de sequência voltados para sistemas, as viagens do usuário focam em ações humanas, estágios do fluxo de trabalho e rastreamento da satisfação do usuário ao longo do tempo.
Estrutura Básica de Sintaxe
Toda viagem do usuário começa com a viagemdeclaração, seguida por um título e seções sequenciais que dividem a experiência do usuário.
viagem
título Viagem do Usuário de Exemplo
seção Nome da Fase
Nome da Tarefa: Pontuação: Ator1, Ator2
Referência de Sintaxe
A tabela abaixo detalha os elementos principais usados para construir um mapa de viagem do usuário no Mermaid.js.
| Componente | Descrição | Exemplo de Sintaxe |
|---|---|---|
| Declaração | Inicializa o renderizador do diagrama de viagem do usuário. | viagem |
| Título | Define o título principal ou o objetivo do usuário no topo do mapa. | título Fluxo de Login |
| Seção | Representa uma fase ou estágio de alto nível da viagem do usuário. | seção Fase de Descoberta |
| Tarefa | Uma ação específica realizada pelo usuário dentro de uma seção. | Navegar pela documentação |
| Pontuação de Satisfação | Um número inteiro de 1 a 5 que mapeia o prazer ou a frustração do usuário. | : 4 : (4 de 5) |
| Atores | Lista separada por vírgulas de papéis envolvidos na conclusão da tarefa. | Usuário, Sistema |
Modelo do Mundo Real: Experiência de Checkout de Comércio Eletrônico
Este modelo demonstra uma jornada completa do usuário, rastreando a experiência de um cliente ao comprar um item online, rastreando pontos de dor emocional (baixos escores) e momentos de prazer (altos escores).
jornada
título Jornada de Compra Online
seção Descoberta do Produto
Pesquisar item: 4: Usuário
Comparar preços: 3: Usuário
Visualizar imagens do produto: 5: Usuário
seção Funil de Checkout
Adicionar item ao carrinho: 4: Usuário
Criar uma conta: 2: Usuário, Sistema
Informar detalhes de entrega: 3: Usuário
Processar cartão de crédito: 1: Usuário, Gateway de Pagamento
seção Pós-compra
Receber confirmação por e-mail: 5: Sistema
Rastrear entrega da encomenda: 4: Usuário, Logística
Dica de Sintaxe:Os escores de satisfação são automaticamente coloridos pelo renderizador. Um escore de 1 ou 2 destaca fricções operacionais (vermelho/laranja), um escore de 3 é neutro (amarelo), e escores de 4 ou 5 representam interações suaves e bem-sucedidas (verde).
Conceito Avançado: Jornadas com Múltiplos Atores
Em fluxos de trabalho complexos, tarefas raramente são concluídas por uma única pessoa. O Mermaid permite atribuir múltiplos atores a uma única tarefa separando seus nomes por vírgulas. Isso é útil para mostrar onde uma interação com o cliente exige suporte de backend ou automação de um sistema.
jornada
título Exemplo de Suporte com Múltiplos Atores
seção Caso de Suporte ao Cliente
Submeter chamado de problema: 3: Cliente
Atribuir chamado a agente: 4: Sistema, Administrador de Suporte
Investigar falha técnica: 2: Desenvolvedor, Testador de Qualidade
Resolver problema e notificar: 5: Administrador de Suporte
Armadilhas Comuns de Sintaxe
Ao escrever mapas de jornada do usuário, pequenos erros de formatação podem fazer com que o motor de renderização gere um erro. Mantenha estas três regras de formatação em mente para garantir que seu diagrama seja construído corretamente:
- A Regra dos Dois Pontos:Cada linha de tarefa deve seguir a estrutura exata de
Descrição da Tarefa: Escore: Atores. Esquecer o segundo ponto e vírgula antes da lista de atores é a razão mais comum para um diagrama de jornada não carregar. - Restrições de Faixa de Escores:Os escores de satisfação devem ser um número inteiro entre 1 e 5. Passar um escore de 0 ou um número maior que 5 quebrará os parâmetros de layout.
- Recuo:Embora o Mermaid seja flexível com espaços, manter suas tarefas recuadas sob suas respectivas seções torna seus arquivos de texto brutos muito mais fáceis de ler e manter à medida que os recursos do seu produto crescem.