Dashboards que se entienden: jerarquía de KPIs y visualización de datos con criterio

Hace unos meses, el gerente de un grupo de restauración de la costa nos enseñó el panel que le había montado su proveedor de TPV. Tenía treinta y dos gráficos. Ventas por hora, por camarero, por familia de producto, por mesa, por método de pago, tickets medios, comparativas, tartas, velocímetros. Le pregunté qué miraba cada mañana. «Las ventas de ayer frente al mismo día del año pasado, y si alguno de los tres locales va mal». Para encontrar esas dos respuestas tenía que recorrer cuatro pantallas.

Me pasa a menudo con los dashboards: están llenos de datos y vacíos de respuestas. No es un problema de herramienta ni de falta de información, sino de jerarquía. Un panel de control es, ante todo, una interfaz para decidir, y como cualquier interfaz tiene que ordenar la atención de quien lo mira.

En esta guía repasamos cómo diseñamos dashboards en el estudio: cómo elegir los indicadores, cómo darles contexto, cómo ordenarlos en pantalla y cómo presentarlos para que se entiendan en pocos segundos.

01Qué es un dashboard (y qué pregunta tiene que responder)

Stephen Few, uno de los autores de referencia en este campo, definió el dashboard en Information Dashboard Design como una presentación visual de la información más importante para alcanzar uno o varios objetivos, reunida en una sola pantalla para poder vigilarla de un vistazo. Cada parte de esa definición es un criterio de diseño: lo más importante (no todo), para un objetivo (no para todos), en una pantalla (no en cuatro) y de un vistazo (no tras un análisis).

En la práctica, distinguimos tres tipos de dashboard, porque cada uno pide un diseño distinto:

El error de concepto más común es mezclar los tres en una sola pantalla. Lo que funciona es diseñar una vista principal pensada para una persona y una pregunta, y dejar el análisis para vistas de detalle a las que se llega desde ella.

02Elegir los KPIs: menos indicadores, mejor elegidos

Todo dashboard empieza con una conversación, no con un gráfico. En nuestros proyectos solemos hacer una sesión corta con las personas que lo van a usar y les pedimos que completen esta frase: «Cada mañana necesito saber si…». Las respuestas suelen señalar de tres a siete indicadores. Esos son los candidatos a KPI.

Un KPI (indicador clave de rendimiento) es una métrica ligada a un objetivo y con un valor de referencia. «Visitas a la web» es una métrica. «Solicitudes de presupuesto este mes frente al objetivo de 40» es un KPI. Para filtrar, aplicamos tres preguntas a cada candidato:

1. 01¿Cambia alguna decisión? Si el número sube o baja y nadie haría nada distinto, no es un KPI, es curiosidad.
2. 02¿Tiene una referencia? Un objetivo, el mismo periodo del año anterior, la media de las últimas semanas. Sin referencia, el número no dice si es bueno o malo.
3. 03¿Lo entiende quien lo mira? Si hace falta explicar cómo se calcula cada vez, conviene renombrarlo o simplificarlo.

Las métricas que no superan el filtro no desaparecen: pasan a un segundo nivel, a una vista de detalle o a un informe. El dashboard principal se queda con lo esencial y gana en claridad.

03Contexto: un número solo no dice nada

«Ventas de ayer: 4.820 €». ¿Es mucho? ¿Es poco? Sin contexto, el número obliga a recordar o a calcular. Con contexto, se entiende al instante. Cada KPI de un dashboard necesita, como mínimo, una comparación. Las más útiles son:

• →Frente a un objetivo: 4.820 € de 5.500 € previstos (88 %).
• →Frente al periodo anterior: +6 % respecto al martes pasado.
• →Frente al mismo periodo del año anterior: útil en negocios estacionales como los de la Costa del Sol, donde comparar mayo con abril engaña.
• →Frente a la tendencia: una pequeña línea (sparkline) con los últimos 30 días que muestra si el número va al alza o a la baja.

Anatomía de una tarjeta de KPI

En la vista principal, los KPIs suelen presentarse en pequeñas tarjetas. La anatomía que mejor nos funciona es esta, de arriba abajo:

• →Etiqueta clara y corta: «Reservas de esta semana».
• →Valor grande, con el formato adecuado: 1.284, no 1284,00.
• →Variación con dirección y signo: «▲ 12 % vs. semana anterior», con texto además de color.
• →Referencia o tendencia: objetivo, barra de progreso o sparkline.

Los valores, redondeados a lo que importa. En un dashboard estratégico, «12,4 k€» se lee mejor que «12.437,86 €». La precisión completa puede vivir en el detalle o en un tooltip. Y siempre, en algún lugar visible, la fecha y hora de la última actualización, porque un dato sin fecha genera dudas.

Clave: un dashboard no informa con números, informa con comparaciones. Cada cifra que aparece en pantalla necesita una referencia que diga si es una buena o una mala noticia.

04Jerarquía en pantalla: lo importante arriba y a la izquierda

Una vez elegidos los indicadores, hay que ordenarlos. Leemos las pantallas de forma bastante predecible: empezamos arriba a la izquierda y recorremos hacia la derecha y hacia abajo. Los estudios de seguimiento ocular del Nielsen Norman Group describen ese patrón en F en páginas de texto, y en interfaces de datos ocurre algo parecido. Eso nos da una estructura natural en tres niveles, como una pirámide invertida:

1. 01Fila superior: los KPIs principales. De cuatro a seis tarjetas que responden a «¿cómo vamos?». El más importante, a la izquierda.
2. 02Zona central: la evolución y las comparaciones. Uno o dos gráficos que explican esos KPIs: la tendencia de ventas, el reparto por local o por canal.
3. 03Zona inferior: el detalle. Tablas, listados o rankings para quien quiere bajar al dato concreto. Aquí aplican los criterios de la guía de diseño de tablas de datos.

El tamaño también comunica jerarquía. El gráfico más relevante puede ocupar dos tercios del ancho y los secundarios repartirse el resto. Una rejilla de 12 columnas facilita estas proporciones y mantiene el orden cuando el panel crece. Y el espacio en blanco entre bloques agrupa: los indicadores que hablan de lo mismo, juntos; los que hablan de otra cosa, separados por algo más de aire.

Los filtros globales (rango de fechas, local, canal) van arriba, en una barra común, y afectan a todo el panel. Si un filtro solo afecta a un gráfico, va pegado a ese gráfico. Esa distinción, que parece evidente, evita muchas lecturas equivocadas.

05Visualizar con criterio: gráficos, color y tipografía

El gráfico adecuado para cada pregunta

La elección del gráfico merece una guía propia, y la tenemos: visualización de datos: elegir el gráfico correcto. Para un dashboard, estas equivalencias resuelven la mayoría de casos:

• →Evolución en el tiempo: líneas, o barras verticales si hay pocos periodos.
• →Comparar categorías: barras horizontales ordenadas de mayor a menor, con la etiqueta a la izquierda.
• →Avance hacia un objetivo: barra de progreso o bullet chart, un formato propuesto por el propio Few que ocupa poco y dice mucho.
• →Parte de un todo: barras apiladas al 100 % o, si son dos o tres partes, una cifra con porcentaje.

Los velocímetros y las tartas con muchas porciones ocupan mucho espacio y comparan mal. Lo que funciona es sustituirlos por barras, que el ojo compara con mucha más precisión porque mide longitudes alineadas en lugar de ángulos.

El color como señal, no como decoración

En un dashboard, el color es la herramienta de jerarquía más potente, y por eso conviene usarlo con mesura. La base del panel, en grises y en un color de marca suave. Los colores de estado (verde, ámbar, rojo) solo donde hay algo que celebrar o que atender. Así, cuando algo aparece en rojo, el ojo va directo.

Dos precauciones de accesibilidad: el color nunca va solo (las variaciones llevan signo y flecha, los estados llevan texto) y los colores de las series se eligen para que se distingan también con daltonismo, que afecta aproximadamente a un 8 % de los hombres. El contraste del texto sobre los fondos, al menos 4,5:1 según WCAG. En la guía de color en diseño web explicamos cómo montar una paleta así con tokens.

Tipografía para cifras

Las cifras tabulares (todas del mismo ancho) hacen que los números se alineen y que no «bailen» cuando se actualizan. Un peso medio o semibold para los valores, regular para las etiquetas, y una escala con pocos tamaños: uno grande para los KPIs, uno medio para títulos de gráfico y uno pequeño para ejes y notas.

Edward Tufte hablaba de la proporción entre «tinta de datos» y tinta total: cuanto más del dibujo representa datos y menos decoración (rejillas marcadas, sombras, fondos, efectos 3D), más claro es el gráfico. En dashboards, ese principio se nota enseguida. Líneas de rejilla muy suaves, ejes discretos y etiquetas directas sobre las series en lugar de leyendas lejanas.

06Interacción y estados: del vistazo al detalle

Un dashboard bien diseñado invita a profundizar. Cada KPI puede ser una puerta a su vista de detalle (drill-down): pulsar «Ventas por local» lleva al desglose de ese local. Los tooltips al pasar sobre un gráfico muestran el valor exacto sin saturar la vista general.

También hay que diseñar lo que pasa cuando no hay datos o aún están llegando:

• →Cargando: formas esqueleto con la silueta de cada bloque, para que el panel no salte al rellenarse.
• →Sin datos: un mensaje claro («Aún no hay reservas este mes») en lugar de un gráfico vacío o un cero ambiguo.
• →Datos parciales: una nota cuando el día o el mes no han terminado, para que nadie compare un día a medias con uno completo.

Y en el móvil, el dashboard se convierte en una columna: primero los KPIs, luego un gráfico principal y el resto bajo demanda. Muchas personas de dirección consultan su panel desde el teléfono a primera hora; diseñar esa versión con cariño marca mucha diferencia.

07Ejemplo resuelto: el panel del grupo de restauración

Volvamos al gerente de los treinta y dos gráficos. Así reorganizamos su panel, en pasos que puedes aplicar a cualquier negocio:

1. 01Definimos la pregunta: «¿Cómo fue ayer en cada local y hay algo que atender?».
2. 02Elegimos cinco KPIs: ventas totales, ticket medio, número de comensales, coste de personal sobre ventas y valoración media de reseñas de la semana.
3. 03Les dimos contexto: cada uno frente al mismo día de la semana del año anterior, con sparkline de 30 días.
4. 04Ordenamos la pantalla: KPIs arriba; en el centro, un gráfico de barras horizontales con las ventas de cada local frente a su objetivo; debajo, una tabla con los platos más vendidos y los que menos.
5. 05Usamos el color solo para alertas: un local por debajo del 85 % de su objetivo se marca en ámbar, con texto.
6. 06Dejamos el resto en vistas de detalle: ventas por hora, por camarero y por método de pago siguen ahí, a un clic.

El gerente pasó de recorrer cuatro pantallas a resolver su pregunta antes del primer café. Y lo más interesante: los encargados de cada local empezaron a usar el panel por su cuenta, porque por fin lo entendían.

08Datos al servicio de las personas

Un dashboard es una conversación entre los datos y quien tiene que decidir. Las herramientas para conectarlos son cada vez más potentes, y la IA ya ayuda a detectar anomalías o resumir tendencias, pero la parte que hace que un panel funcione sigue siendo humana: saber qué pregunta importa, qué comparación tiene sentido y qué merece el color rojo. Ese criterio es lo que convierte una pantalla llena de números en una herramienta que se consulta con gusto cada mañana.

En SIMA diseñamos y desarrollamos paneles de control y áreas de gestión a medida dentro de nuestro servicio de desarrollo web y apps con IA, y también ayudamos a ordenar los cuadros de mando de marketing para que hablen el idioma del negocio. Si tienes un panel que nadie mira o unos datos que te gustaría entender mejor, escríbenos y lo vemos juntos.