Mapa de historias de usuario
Funciones ordenadas por recorrido y entrega.
Definición
Un mapa de historias de usuario ordena las actividades del recorrido del usuario en columnas y corta en filas las entregas en que se construye cada historia. Se lee de izquierda a derecha para seguir el recorrido y de arriba abajo para ver qué entra en cada entrega. Se usa para planificar un producto por cortes que se puedan usar de punta a punta.
- Datos
- category · group · label · value
- Buena para
- Ver si cada entrega cubre el recorrido entero o deja actividades sin ninguna historia.
- Evítala cuando
- Cuando hay que decir cuándo se entrega: el mapa ordena por cortes, no por fechas.
- Se lee bien
- Entre 3 y 22 elementos; dibuja hasta 22
- Datos que faltan
- Se niega a dibujar y dice qué valor falta.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
category | string | La ACTIVIDAD del recorrido: la columna del espinazo. El orden de las columnas es el de PRIMERA APARICIÓN en el fichero, porque ese orden es el recorrido del usuario — escribe las filas en el orden en que se hacen las cosas, no alfabéticamente. |
group | string | La ENTREGA en la que se construye la historia: el corte horizontal. También en orden de primera aparición, que es la secuencia de entregas. Sin este corte no hay mapa de historias, hay una lista de tareas agrupadas por actividad. |
label | string | El enunciado de la HISTORIA: el texto de la tarjeta. Una fila por historia. |
value · opcional | number | La ESTIMACIÓN de la historia, en puntos. Opcional, pero o está en TODAS las filas o en ninguna: media tabla estimada dibujaría unas tarjetas proporcionales y otras invisibles. Sin ella todas las tarjetas miden lo mismo y el mapa cuenta historias, y la lámina lo escribe. |
Tamaños
Ancha por necesidad
Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.
A menos de 480 px el motor se niega y explica por qué: user-story-map: 5 actividades no caben en 321 px de ancho útil: a cada tarjeta le quedan 40.2 px por dentro y un enunciado necesita 56. Sube dimensions.width a
. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.
Cuándo usarla
Tres preguntas antes de elegirla
¿Planificas por cortes de entrega y no por fechas?
Si importan las fechas y las duraciones, hace falta un cronograma.
Sí: quédate con mapa de historias de usuario
No: usa Diagrama de Gantt
¿Las historias se ordenan por el recorrido del usuario?
Si solo hay que priorizar una lista por valor y coste, una matriz impacto-esfuerzo es más directa.
Sí: quédate con mapa de historias de usuario
No: usa Matriz impacto-esfuerzo
¿La pregunta es qué se construye?
Si importa la experiencia del cliente etapa a etapa, conviene el recorrido del cliente.
Sí: quédate con mapa de historias de usuario
No: usa Recorrido del cliente en flujo
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('user-story-map');
spec.data.rows = misFilas; // category, group, label
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Qué significa el alto de una tarjeta?
Su estimación en puntos. Es opcional, pero tiene que estar en todas las historias o en ninguna.
¿Qué es el hueco marcado en el espinazo?
Una actividad que una entrega deja sin ninguna historia: esa entrega no se puede recorrer de punta a punta.
¿En qué orden van actividades y entregas?
En el orden en que aparecen por primera vez en el fichero, que es el del recorrido y el de las entregas.
¿Qué hace si faltan datos?
Se niega a dibujar y dice qué valor falta.
¿Cómo se ve en el móvil?
A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.
Relacionadas
Otras formas de responder «partes de un todo»
Anidamiento conceptualconceptos contenidos unos dentro de otros
Gráfico de anilloreparto de un total en pocas partes
Matriz de puntosresultados de casos individuales en cuadrícula
Descomposición DuPontdescomponer el ROE en sus factores
Gráfico de carámbanosjerarquía y pesos en bloques por niveles
Árbol con sangríasjerarquía detallada con su valor