Un diagrama de recorrido del usuario describe los pasos que un usuario realiza para alcanzar un objetivo específico dentro de su aplicación. A diferencia de los diagramas de flujo o diagramas de secuencia centrados en sistemas, los recorridos del usuario se centran en las acciones humanas, las etapas del flujo de trabajo y el seguimiento de la satisfacción del usuario con el tiempo.
Estructura básica de sintaxis
Cada recorrido del usuario comienza con la recorrido declaración, seguida de un título y secciones secuenciales que desglosan la experiencia del usuario.
recorrido
título Ejemplo de recorrido del usuario
sección Nombre de la etapa
Nombre de la tarea: Puntuación: Actor1, Actor2
Referencia de sintaxis
La tabla a continuación desglosa los elementos principales utilizados para construir un mapa de recorrido del usuario en Mermaid.js.
| Componente | Descripción | Ejemplo de sintaxis |
|---|---|---|
| Declaración | Inicializa el renderizador del diagrama de recorrido del usuario. | recorrido |
| Título | Define el encabezado principal o el objetivo del usuario en la parte superior del mapa. | título Flujo de inicio de sesión |
| Sección | Representa una fase o etapa de alto nivel del recorrido del usuario. | sección Fase de descubrimiento |
| Tarea | Una acción específica realizada por el usuario dentro de una sección. | Navegar en la documentación |
| Puntuación de satisfacción | Un número entero del 1 al 5 que representa el placer o la fricción del usuario. | : 4 : (4 de 5) |
| Actores | Lista separada por comas de los roles involucrados en la finalización de la tarea. | Usuario, Sistema |
Plantilla del mundo real: Experiencia de compra en comercio electrónico
Esta plantilla muestra un recorrido completo del usuario que rastrea la experiencia de un cliente al comprar un artículo en línea, rastreando puntos de dolor emocional (puntuaciones bajas) y momentos de placer (puntuaciones altas).
viaje
titulo Recorrido de compra en línea
sección Descubrimiento del producto
Buscar artículo: 4: Usuario
Comparar precios: 3: Usuario
Ver imágenes del producto: 5: Usuario
sección Embudo de compra
Agregar artículo al carrito: 4: Usuario
Crear una cuenta: 2: Usuario, Sistema
Ingresar detalles de envío: 3: Usuario
Procesar tarjeta de crédito: 1: Usuario, Pasarela de pago
sección Post-compra
Recibir confirmación por correo electrónico: 5: Sistema
Rastrear la entrega del paquete: 4: Usuario, Logística
Consejo de sintaxis:Las puntuaciones de satisfacción se codifican automáticamente por color mediante el renderizador. Una puntuación de 1 o 2 destaca la fricción operativa (rojo/naranja), una puntuación de 3 es neutral (amarillo), y las puntuaciones de 4 o 5 representan interacciones fluidas y exitosas (verde).
Concepto avanzado: Recorridos con múltiples actores
En flujos de trabajo complejos, las tareas rara vez son completadas por una sola persona. Mermaid te permite asignar múltiples actores a una sola tarea separando sus nombres con comas. Esto es útil para mostrar dónde una interacción con el cliente requiere soporte de fondo o automatización desde un sistema.
viaje
titulo Ejemplo de soporte con múltiples actores
sección Caso de soporte al cliente
Enviar ticket de problema: 3: Cliente
Asignar ticket al agente: 4: Sistema, Administrador de soporte
Investigar el error técnico: 2: Desarrollador, Prueba de calidad
Resolver el problema y notificar: 5: Administrador de soporte
Errores comunes de sintaxis
Al escribir mapas de recorrido del usuario, pequeños errores de formato pueden hacer que el motor de renderizado genere un error. Ten en cuenta estas tres reglas de formato para asegurarte de que tu diagrama se construya correctamente:
- La regla de dos puntos dobles:Cada línea de tarea debe seguir exactamente la estructura de
Descripción de la tarea: Puntuación: Actor. Olvidar el segundo punto y coma antes de la lista de actores es la razón más común por la que un diagrama de recorrido no carga. - Restricciones de rango de puntuación:Las puntuaciones de satisfacción deben ser un número entero entre 1 y 5. Pasar una puntuación de 0 o un número mayor que 5 romperá los parámetros de diseño.
- Sangría:Aunque Mermaid es flexible con los espacios, mantener tus tareas con sangría bajo sus secciones respectivas hace que tus archivos de texto sin procesar sean mucho más fáciles de leer y mantener a medida que tus funciones del producto crecen.