Blueprint de servicio

Qué ve el cliente y qué ocurre detrás.

Definición

Un blueprint de servicio reparte las acciones de un servicio en cuatro carriles —acciones del cliente, contacto visible, contacto no visible y procesos de soporte— sobre un mismo reloj. La línea de visibilidad separa lo que el cliente ve de lo que no, y la pieza mide qué parte de las esperas del cliente transcurre por debajo de ella. Se usa para rediseñar servicios: atención, altas, reparaciones.

Editar con tus datos SVG Spec JSON

El cliente no espera al perito: espera a que alguien le asigne uno

Datos: group · label · start · value · end · category
Buena para: Localizar en qué carril, visible o no, nacen las esperas del cliente.
Evítala cuando: Cuando no se han medido los tiempos: la pieza necesita el minuto de inicio y la duración o el final de cada acción.
Se lee bien: Entre 4 y 12 elementos; dibuja hasta 12
Datos que faltan: Omite el valor ausente y lo declara aparte.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`group`	string	El carril. Vocabulario CERRADO de cuatro: «Acciones del cliente» (cliente), «Contacto visible» (frontstage), «Contacto no visible» (backstage) y «Procesos de soporte» (soporte). Un valor fuera de esa lista falla: las tres fronteras del plano sólo existen entre estos carriles.
`label`	string	Lo que se hace. Es el rótulo de la fila, escrito para leerlo.
`start`	number	Minuto del reloj del servicio en que empieza la acción. El reloj es RELATIVO al inicio del servicio, no una fecha: con marcas absolutas, réstalas antes.
`value` · opcional	number	Duración de la acción. Hace falta ésta o «end»; con ninguna de las dos, falla.
`end` · opcional	number	Minuto en que termina, como alternativa a la duración.
`category` · opcional	string	Qué clase de tiempo es: «Actividad» (accion), «Espera» (espera) o «Punto de fallo» (fallo). Ausente ⇒ actividad. Las esperas se DECLARAN: un hueco en el carril del cliente también puede ser que se fuera a por un café.

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é: service-blueprint: 14 acciones en 4 carriles no caben en 325 px de alto útil: los nombres de carril y las 3 fronteras ocupan 152 px fijos y cada acción se queda. 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

¿Hay tiempos medidos de cada acción?

Si sólo se quiere enseñar quién hace qué, sin reloj, el proceso en carriles basta.

Sí: quédate con blueprint de servicio

No: usa Proceso en carriles

¿Importa lo que el cliente no ve?

Si el foco es la vivencia del cliente en cada etapa, el mapa de experiencia la recorre.

Sí: quédate con blueprint de servicio

No: usa Mapa de experiencia

¿Es un servicio con el cliente presente?

Si es un proceso interno de producción, el mapa de flujo de valor mide esperas y tiempos de proceso.

Sí: quédate con blueprint de servicio

No: usa Mapa de flujo de valor

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('service-blueprint');
spec.data.rows = misFilas; // group, label, start
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Por qué no detecta las esperas sola?

Porque un hueco en el carril del cliente puede ser cualquier cosa. Las esperas se declaran en la columna de clase de tiempo; la que nadie declara no se dibuja.

¿Qué carriles admite?

Cuatro, con nombre cerrado: acciones del cliente, contacto visible, contacto no visible y procesos de soporte. Otro valor hace que la pieza se niegue a dibujar.

¿El reloj es una fecha?

No: son minutos desde el inicio del servicio. Con horas absolutas, hay que restar antes el inicio.

¿Qué hace si faltan datos?

Omite el valor ausente y lo declara aparte.

¿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 «cómo funciona algo»

Guía para elegir: cómo funciona algo →