Un manual interactivo
Lo que he aprendido sobre percepción, visualización, composición y narrativa para diseñar dashboards que se entiendan.
Por Borja MoraData Analyst Junior · Power BI
Empieza a leerRecorrido, escala: 10 capítulos · unos 20 minutos
Antes de empezar, un dashboard
Este es un dashboard de ventas.
Tómate un segundo.
¿Qué te está diciendo?
Un dashboard puede estar lleno de datos y seguir sin contar nada.
El problema no siempre es tener demasiados datos. A veces, el problema es que todos quieren llamar la atención al mismo tiempo.
Primero quito lo que compite con el mensaje.
Después decido qué merece realmente la atención.
Y entonces aparece algo importante: sé dónde mirar.
Un dashboard no está terminado cuando los datos están dentro.
Está terminado cuando se entiende.
Al principio pensaba que un buen dashboard era, sobre todo, una cuestión de visuales.
Elegir bien los gráficos.
Ordenar los elementos.
Conseguir que todo tuviera buena pinta.
Con el tiempo he ido cambiando de idea.
Ahora, antes de abrir Power BI, intento responder otras preguntas:
quién va a mirar el informe,
qué necesita entender,
qué quiero que vea primero,
y qué debería poder hacer después.
Este manual reúne lo que he ido aprendiendo sobre Data Storytelling y cómo intento llevarlo a la práctica.
No son reglas universales.
Algunas ideas vienen de la investigación sobre percepción y visualización; otras son reglas prácticas que me ayudan a diseñar; y otras forman parte de mi propia forma de trabajar.
El mapa
Contexto → percepción → limpieza → atención → visual → composición → texto → narrativa → acción
Capítulo 01 · Fundamentos
Cuando exploro, todavía estoy buscando.
60 puntos: ventas mensuales de cinco canales. Todo tiene el mismo peso porque todavía no sé qué importa.
Pruebo variables, busco patrones, sigo pistas.
Cuando explico, la pregunta ya es otra.
Ahora tengo que decidir qué merece la atención de otra persona.
Los datos no han cambiado. La intención sí.
Explorar me ayuda a descubrir. Explicar me obliga a decidir qué merece la atención de otra persona.
Mi marco de trabajo
No es una fórmula exacta. Es la forma en la que reviso un informe antes de darlo por terminado. Las tres capas tienen que funcionar juntas: si una falla, el informe pierde fuerza.
Datos + significado + claridad.
Capítulo 02 · Contexto
Necesitamos un dashboard de ventas.
Empieza casi siempre igual.
“Necesitamos un dashboard de ventas.”
Bien. Pero todavía no es una pregunta.
¿Quién va a leerlo?
¿Qué necesita entender o decidir?
¿Qué datos puedo utilizar para demostrarlo?
La petición era un dashboard.
La pregunta real es otra.
Ventas por canal, en miles de euros
Antes de diseñar, intento encontrar una frase.
Ventas Q4 por canal
Correcto. Pero le deja todo el trabajo a quien lo lee.
El canal online ya concentra la mayor parte del crecimiento.
El gráfico cambia muy poco. La interpretación cambia mucho.
Otra prueba que me funciona: imaginar que tengo tres minutos y ninguna pantalla.
Lo que sobrevive a esos tres minutos probablemente merece estar en la historia.
Audiencia
La misma pregunta no se diseña igual para todos.
Antes de diseñar un informe, necesito saber quién lo va a utilizar y qué necesita entender.
Y hay otra pregunta que a veces se me olvida: ¿dónde lo va a consultar?
No es lo mismo un comité mensual frente a una pantalla grande, donde probablemente solo se lean los primeros KPIs, que consultar el informe desde el móvil entre dos reuniones.
El marco
Antes del gráfico, está la pregunta.
Primero entiendo qué quiero responder. Después, qué necesita saber el lector. Y solo entonces decido cómo voy a representarlo.
¿Qué tengo?
Tipo de dato, variables y granularidad.
¿Qué necesita hacer el lector?
Comparar, localizar, detectar, entender…
¿Cómo lo voy a representar?
La codificación visual que mejor resuelve esa tarea.
WHAT → WHY → HOW
Primero la pregunta. Después la representación.
Capítulo 03 · Percepción
Preatentivos
Señales que el cerebro procesa antes de la atención consciente.
Son la palanca nº 1 para dirigir la mirada. Pruébalo: cuenta los 5.
Pruébalo: pulsa cualquier cuadrado y conviértelo en el protagonista.
El tamaño también crea jerarquía.
La posición también cuenta una historia.
Primero, orden: lo alineado se lee como un sistema.
Después, prioridad: el protagonista va donde empieza la lectura.
En una pantalla occidental suele ser arriba a la izquierda. Es una tendencia, no una ley: una señal fuerte puede atraer la mirada a cualquier sitio.
La memoria de trabajo es limitada.
No intento que el lector procese una cantidad infinita de información al mismo tiempo.
Por eso agrupo.
Simplifico. Y establezco prioridades.
La investigación habla de unos pocos “bloques” a la vez, con mucha variación según la tarea. Yo no lo uso como un número mágico: lo uso como recordatorio de que el lector no puede con todo.
Memoria
Tres memorias, tres reglas de diseño
Atraer y retener la atención del público es un problema de memoria. Trabajamos con tres almacenes encadenados, y cada uno impone una regla de diseño.
| Memoria | Qué hace | Qué te obliga a hacer |
|---|---|---|
| Icónica | Detecta al instante color, forma, tamaño, orientación y movimiento. | Marcar lo importante antes de que el lector «lea». |
| Corto plazo | Retiene solo 3–4 elementos. Con 5 colores y 10 leyendas, abandona. | Agrupar, etiquetar y simplificar. Nunca superar su límite. |
| Largo plazo | Guarda patrones, reconocimiento y significado. | Anclar con imágenes, metáforas y conexión. Texto + imagen = más recuerdo. |
El ojo encuentra patrones rápidamente. Comparar dos valores concretos ya es otra historia.
Una base común ya reduce el trabajo: ahora comparo longitudes, no posiciones sueltas.
Y si la diferencia es el mensaje, la dibujo. Así nadie tiene que calcularla.
Gestalt
Veinte puntos, sin relación aparente.
Lo que está cerca parece del mismo grupo.
Lo que se parece, también. Aquí leo columnas aunque la distancia sea la misma.
Un fondo compartido crea un grupo más fuerte que la distancia.
Y una línea une más que cualquier otra cosa.
Una buena composición puede explicar una relación antes de que aparezca una palabra.
El método
Tres pasos para dirigir la mirada
¿Para qué sirve todo esto? Para dos cosas: dirigir la atención y crear una jerarquía visual. Un gráfico sin estas señales obliga al cerebro a trabajar más: aumenta la carga cognitiva, baja la comprensión y el mensaje se diluye.
En resumen
Lo que hace el cerebro
Capítulo 04 · Reducir el ruido
Vuelve el dashboard del principio. El mismo. Esta vez, paso a paso.
Así estaba.
Primero, elimino lo que decora pero no ayuda a leer.
Sombras, bordes, cabeceras de color, iconos.
Después reviso lo que está compitiendo con el dato.
La retícula se queda solo donde ayuda a leer un valor.
El color también puede convertirse en ruido.
Diez colores. Ninguno significaba nada.
Y si solo necesito destacar una cosa, no necesito diez colores.
Las etiquetas pueden vivir junto al dato.
Los decimales tampoco tienen que demostrar que existen.
221.450,00 € → 221 k€
Lo secundario puede seguir estando. Solo tiene que pesar menos.
No he quitado información.
He quitado trabajo.
Herramienta
Elige un elemento de un dashboard y mira qué pregunta le hago.
| Pregunta | Acción |
|---|---|
| ¿Lo quito y nada cambia? | Eliminar |
| ¿Solo queda más bonito? | Eliminar |
| ¿Obliga a trabajar sin necesidad? | Simplificar |
| ¿Compite con el protagonista? | Atenuar |
| ¿Ayuda a entender? | Conservar |
| ¿Genera confusión? | Cambiar |
Cuando hay demasiado detalle, busco una estructura antes de eliminar información.
Veinte subcategorías. Se puede leer, pero cuesta.
Cuatro familias. La primera lectura cabe en un vistazo.
Y el detalle vuelve a estar disponible cuando alguien lo pide.
En Power BI: una jerarquía con drill-down, o una página de detalle.
La primera lectura puede ser simple sin perder la segunda capa.
Capítulo 05 · Dirigir la atención
Primero, no destaco nada.
Después decido qué importa.
El color la hace visible.
El tamaño puede reforzar la jerarquía.
La posición puede decirte dónde empezar.
Y una anotación puede explicar por qué merece la pena mirar.
Recursos visuales
¿Qué estimula cada recurso?
Cada recurso le dice algo al cerebro del lector, lo quiera yo o no. Por eso no uso ninguno sin motivo.
Color
No uso el color para decorar el informe. Lo uso cuando quiero destacar un dato, diferenciar algo o dirigir la atención.
Categorías distintas, sin orden. Pocas, y con tonos bien separados.
De menos a más. Un solo tono que gana intensidad.
Dos direcciones desde un punto neutro que significa algo: el cero, el objetivo.
Accesibilidad del color
El color puede ayudar muchísimo, pero no debería ser la única señal.
Si quito el color, quiero que la historia siga funcionando.
La regla del 10 %
Intento que solo una pequeña parte del gráfico lleve el énfasis principal.
No porque exista un 10 % mágico.
Porque cuando todo destaca, el énfasis deja de funcionar.
Jerarquía visual
Tres niveles. Cada uno, en su sitio.
| Nivel | Dónde |
|---|---|
| Importante | Arriba a la izquierda · grande, en color |
| Secundario | Centro · tamaño medio, neutro |
| Complementario | Al final · pequeño, en gris |
Capítulo 06 · Elegir el visual
Antes de seguir, una pregunta
Quiero comparar las ventas de cinco regiones. ¿Qué gráfico elegirías?
¿Qué quieres que vea?
Anatomía de un KPI
Una tarjeta KPI tiene que responder en un vistazo a tres preguntas: cuánto, hacia dónde y frente a qué.
Fíjate en la fila: dos deltas bajan y dos suben, y el color no sigue al signo. Si lo siguiera, alguien celebraría una rotación que sube. Por eso separo dirección y juicio, y la flecha sigue ahí cuando el color no se ve.
Dos detalles más: cuando el KPI ya es un porcentaje, la variación va en puntos (pp), no en %. Y la referencia es explícita, como pide IBCS: año anterior, plan o previsión, pero siempre dicho en la tarjeta.
Catálogo
Los visuales que uso en Power BI, y la pregunta que resuelve cada uno.
Son los de PBI Mockup Creator, dibujados con la paleta de este manual: violeta para lo que importa, grises para el contexto y rojo solo cuando algo resta.
Recetas por área
Una plantilla no sustituye a la pregunta. Pero evita empezar desde un lienzo en blanco.
Cada receta sigue siendo una hipótesis: si la pregunta de este cuadro de mando es otra, gana la pregunta.
Experimentos
Cinco formas de que un gráfico diga algo distinto de lo que dicen los datos.
La visualización correcta no solo depende del dato. Depende de la tarea.
Capítulo 07 · Componer como diseñador
Un lienzo vacío.
Primero creo una estructura.
Después coloco la gran idea.
Después, la métrica que merece verse primero.
Después, el visual que explica por qué.
El detalle puede venir después.
Y los elementos que interactúan deben parecer relacionados.
Ahora alineo.
Distribuyo.
Y escondo la retícula.
La retícula desaparece. El orden permanece.
Sistema de 8 puntos
8 · 16 · 24
No existe un espaciado mágico. A mí me ayuda trabajar con un sistema que mantenga un ritmo constante: todas las distancias son múltiplos de 8.
distancia medida en px
Espacio en blanco
El espacio vacío no está vacío. Separa, agrupa y da énfasis.
Lienzos
Antes de colocar nada, elijo dónde se va a leer.
Zonas
Un dashboard se lee por capas: contexto, métricas, mensaje y detalle.
Lo que no cabe no desaparece: baja a un tooltip o a una página de drill-through, donde lo busca quien lo necesita.
Proporciones
Cada zona tiene un peso. El alto se reparte en proporción.
Primero resto lo fijo: margen, header y separaciones. Lo que queda se reparte entre KPIs, Zona A y Zona B según su peso. Mi punto de partida es 2 · 5 · 3: una fila de KPIs contenida, el mensaje con la mitad del espacio y el detalle con el resto.
Patrones de lectura
El plano no cambia. Cambia el recorrido que espero de la mirada.
Son tendencias, no leyes. Un color o un tamaño fuerte rompe cualquier patrón; por eso primero coloco y después compruebo por dónde entra la mirada.
Gestalt aplicada al lienzo
En el capítulo 03 vimos cómo agrupa la mirada. Aquí, cómo se comprueba en un dashboard.
Son los cinco principios que diagnostica PBI Mockup Creator mientras diseñas. Cada uno, bien y mal aplicado sobre el mismo plano.
Lo que está cerca se percibe como un grupo.
Qué es. El cerebro agrupa lo que está más cerca, aunque no haya ninguna otra conexión visual.
En un dashboard. La separación entre zonas decide qué bloques se leen como una unidad. Si cambia de un sitio a otro, el lector agrupa lo que no debe y la historia se rompe.
Entre bloques del mismo nivel, de 8 a 20 px y siempre la misma. Si quiero separar dos grupos, les doy más aire a propósito. Por debajo de 8, todo parece un bloque; por encima de 28, piezas sueltas.
Lo más grande y lo primero se lee antes.
Qué es. No leemos todo con la misma atención: el tamaño, la posición y el peso visual crean un orden de lectura.
En un dashboard. Si la Zona B ocupa más que la A, el ojo llega al detalle antes que al mensaje, y la decisión se toma sobre el dato equivocado.
Recorrido: contexto → métricas → análisis. La Zona A, como mínimo el 85 % del alto de la B. Header siempre que lo lea dirección o alguien de fuera.
Lo que se parece, se percibe como de la misma familia.
Qué es. Misma forma, color, tamaño o textura hacen que dos elementos parezcan del mismo grupo, aunque estén separados.
En un dashboard. Si KPIs y gráficos tienen el mismo aspecto, el ojo no distingue seguimiento de análisis. La semejanza es la gramática del dashboard: lo que juega el mismo papel, se ve igual.
Hasta 6 KPIs por fila y hasta 3 visuales por zona. El mismo radio de esquina en todas las tarjetas.
El ojo completa formas y necesita espacio para respirar.
Qué es. Tendemos a completar formas incompletas y a leer el espacio en blanco como el borde de los objetos. El espacio negativo no está vacío: es estructura.
En un dashboard. Márgenes y separaciones crean ese espacio. Si falta, el dashboard parece saturado aunque tenga pocos datos. Si sobra, parece incompleto.
Entre un 20 y un 40 % del lienzo libre, y al menos 16 px de margen en los cuatro lados.
El contenido tiene que despegarse del fondo sin esfuerzo.
Qué es. Separamos automáticamente lo que vemos como objeto (la figura) de lo que vemos como fondo, continuo y sin límites.
En un dashboard. Si las tarjetas tienen el mismo fondo que el lienzo, los datos desaparecen. El contraste entre tarjeta y lienzo, o un borde suave, es lo que hace visible cada pieza.
Fondo del lienzo distinto del de las tarjetas. Si la diferencia es pequeña, un borde suave.
Checklist de orden visual
Antes de dar un layout por bueno, repaso cinco cosas.
Si una falla, vuelvo al lienzo.
Números de partida
No hay números mágicos. Pero cuando reviso un layout, estos rangos me sirven para empezar.
Son reglas prácticas de mi trabajo en Power BI, no evidencia científica. Y encajan con el sistema de 8: 24 px de margen y 16 px de separación cumplen todas.
Herramienta
PBI Mockup Creator
Los planos de esta página salen de una herramienta que construí para diseñar un dashboard antes de abrir Power BI. Parte de la audiencia y de la decisión, propone el layout y comprueba estos rangos mientras mueves las piezas: proximidad, jerarquía, semejanza, espacio en blanco y figura-fondo.
Capítulo 08 · El texto
Ventas Q4 por canal
El canal online ya concentra la mayor parte del crecimiento
El gráfico casi no cambia. Cada panel pasa a decir lo que muestra.
El título no tiene que describir el gráfico. Puede orientar la lectura.
Solo el gráfico. Algo pasa a mitad de camino, pero tienes que buscarlo.
Un punto violeta: aquí.
Una línea que conecta el dato con su explicación.
Y la frase que el lector habría tenido que deducir.
Una buena anotación me ahorra una inferencia al lector.
Etiquetas directas
Cuanto menos tenga que viajar la mirada, mejor.
Títulos dinámicos en Power BI
El texto también puede reaccionar al contexto.
La técnica está en DAX. La idea está en otra parte: que el mensaje siga siendo específico cuando cambia el contexto.
Titulo = "Las ventas de " & SELECTEDVALUE(Region[Nombre]) & " caen un " & FORMAT([Var% YoY], "0%") & " frente al año pasado"
En producción añadiría un caso para cuando la variación es positiva o no hay una sola región seleccionada.
Microcopy
Un botón no necesita explicar el universo. Solo necesita dejar claro qué va a pasar.
Capítulo 09 · Construir la historia
Eso es todo lo que necesitabas saber primero.
Primero necesito saber dónde estamos.
Después necesito descubrir qué está pasando realmente.
Y entonces aparece algo que cambia la lectura.
La historia termina cuando puedo explicar qué significa y qué podemos hacer con ello.
Ingresos de clientes activos · próximos 3 años
Si reducimos a la mitad las bajas de los primeros 90 días: +1,8 M€
La comparación convierte una recomendación abstracta en algo que puedo ver.
Antes de montar el relato
Las cuatro preguntas
Lo que intento no olvidar
Siete reglas
Validar antes de publicar
Cuatro lecturas del mismo dashboard
Bing · Bang · Bongo
La misma idea, al principio, durante y al final.
“Hoy vamos a ver por qué el abandono nos cuesta 2,4 M€.”
La historia: situación, datos, giro, recomendación.
“Hemos visto que la mayor parte del riesgo se concentra antes de los 90 días.”
En Power BI
La narrativa también puede convertirse en navegación.
Capítulo 10 · Juntar las piezas
El mismo dashboard. Esta vez, completamente vacío.
Un lienzo en blanco.
Antes de dibujar nada, trazo la retícula.
Después, el plano: qué va en cada caja y cuánto espacio merece.
El visual principal se lleva más de la mitad del ancho. La acción tiene su caja reservada desde el principio.
Empiezo por la pregunta.
Elijo el visual que mejor resuelve la tarea.
La pregunta es “qué canal”: comparar. Barras.
Quito lo que sobra.
Decido qué merece atención.
Compongo la página.
Cada pieza ocupa la caja que le reservé en el plano.
Escribo el título que explica la idea.
El plano desaparece. El orden se queda.
Anoto lo que quiero que nadie tenga que descubrir por su cuenta.
Y construyo el recorrido.
Esto ya no es un conjunto de gráficos.
Ahora hay una historia.
Prueba de cierre
Leo únicamente los títulos.
Si entiendo la historia sin mirar los gráficos, el dashboard está cerca de terminar.
Si no, todavía tengo trabajo.
Galería
10 problemas que quiero aprender a detectar más rápido.
Arrastra la línea (o usa las flechas del teclado) para comparar antes y después.
Dos dashboards bien construidos
No necesito que todo compita. Necesito que cada elemento sepa qué papel juega.
Desde mayo, casi dos de cada tres bajas llegan antes del día 90
Una buena pantalla debería llevarme del qué al porqué y terminar en qué hacemos con ello.
Accesibilidad
Elige una prueba. Todas se aplican sobre el mismo dashboard.
En la práctica
Lo que he contado aquí, aplicado a piezas reales de Power BI.
Son capturas de posts que he compartido en LinkedIn. Las he puesto en grises a propósito: si la historia se sigue leyendo sin color, el color está haciendo su trabajo y no otro. Arrastra la línea (o usa las flechas del teclado) para ver entrar el color.
Una tabla de 150 clientes es un mar de números. Lo que la hace legible no es la tabla, es lo que la rodea: un buscador que filtra por cliente, sector, segmento o país, un subtítulo que dice cuántos clientes estoy viendo y el color reservado solo para las desviaciones (▲ verde, ▼ rojo). En grises, el resto se apaga y lo único que sigue llamando la atención son esas señales.
Es el KPI del apartado de anatomía, con vida propia: la cifra grande, el año anterior al lado, el delta abajo (+9,17 % vs PY) y unas columnas donde un mes se separa del resto. Las dos cajas de la izquierda dejan cambiar la métrica y contra qué se compara, así que el usuario explora sin perderse. El delta es lo único con color: la comparación es lo que convierte un número en una noticia.
Dos productos comparados año a año y, a la derecha, el zoom al año seleccionado por trimestres. Es la regla de ir de lo general a lo concreto resuelta en una sola pantalla: la vista anual dice quién gana, el detalle trimestral dice cuándo. Encima del gráfico, una frase que se reescribe con el año elegido para que nadie tenga que deducir la conclusión.
Cuatro productos, cuatro miniaturas con la misma escala. Cada una lleva su propio delta (▲ o ▼), su peso sobre el total y solo dos puntos etiquetados: 2024 y 2025. Es un slope chart repetido en small multiples: el ojo compara pendientes sin leer ejes. En grises, la dirección la sigue contando la forma de la línea, no el color.
El título es la pregunta («¿Qué meses superaron el objetivo?») y la línea del objetivo se mueve con un control para que cada quien pruebe su umbral. El post va de un problema concreto: un valor extremo puede aplastar la escala y hacer que el resto parezca plano, y un zoom visual bien construido lo evita sin esconder el dato. Es el mismo criterio que la galería de «así se hace bien».
Dieciséis años de columnas y solo el periodo elegido en violeta intenso; el resto queda en un tono pálido como contexto. Entre las columnas de los extremos aparece la variación (21,92 %), calculada para ese rango y no para otro. Es foco y contexto en su forma más simple: se ve todo, se lee una cosa.
Los datos de estas capturas son de ejemplo. Más publicaciones en la sección Comunidad del portfolio →
El dashboard final.
Me alejo un poco.
Un poco más.
¿Te has fijado en que esta página ha hecho exactamente lo que te estaba explicando?
Aquí eliminamos ruido. Aquí dirigimos la atención. Aquí cambiamos la representación. Aquí usamos jerarquía. Aquí anotamos el dato. Aquí construimos una historia.
Las he usado como respaldo conceptual, no como texto: todo lo que aparece aquí está escrito con mis palabras. Distingo en cada caso entre evidencia, regla práctica y criterio personal.
Todos los datos de esta página son sintéticos y se han creado para el ejemplo.