Diseño de dashboards:
jerarquía visual,
layout y acción.
Un dashboard técnicamente correcto puede ser completamente inútil si la jerarquía visual no guía al receptor hacia la decisión correcta. El diseño determina si los datos producen acción o producen parálisis — y la diferencia no está en la estética, sino en la estructura.
- Por qué el diseño no es estético sino funcional
- Anatomía de un dashboard: las cuatro zonas
- Jerarquía visual y patrones de lectura
- El límite cognitivo: cuántas métricas por pantalla
- Color en dashboards: paleta funcional
- Tipografía para lectura de datos
- Páginas separadas vs. scroll único
- El checklist de publicación
- Preguntas frecuentes
- Referencias y bibliografía
Por qué el diseño no es estético sino funcional.
El diseño de un dashboard no es una decisión estética posterior al análisis — es parte del análisis mismo. La estructura visual determina qué información recibe atención primero, cuánto tiempo se tarda en extraer la conclusión principal y si la audiencia llega a esa conclusión o construye la suya propia a partir de los datos en la pantalla.
Stephen Few define el dashboard como "una pantalla de información visual diseñada para servir a un propósito específico de monitoreo." La palabra clave es diseñada — no dispuesta aleatoriamente, no construida por acumulación, sino intencionalmente estructurada para que el propósito se cumpla con la menor fricción cognitiva posible. Un dashboard que requiere dos minutos de lectura para producir la misma conclusión que debería producir en diez segundos es un dashboard mal diseñado, independientemente de cuán correctos sean sus datos.
Donald Norman, en The Design of Everyday Things, establece que el buen diseño es aquel que hace el curso de acción correcto obvio. En términos de dashboards: el diseño correcto hace que la métrica que requiere atención sea obvia sin esfuerzo cognitivo, y hace obvia también la acción que esa métrica sugiere. Cuando el dashboard logra esto, deja de ser un documento de reporte y se convierte en una herramienta de decisión.
02 — Anatomía de un dashboardAnatomía de un dashboard: las cuatro zonas.
Un dashboard efectivo se organiza en cuatro zonas con funciones distintas. El orden y la jerarquía de estas zonas no es arbitrario — responde a los patrones de lectura documentados en estudios de eye-tracking y a la lógica del flujo de información de lo general a lo específico.
Zona 0: la barra de contexto y filtros
Los controles de contexto — selector de período, de segmento, de canal o de cuenta — deben estar siempre visibles en la parte superior del dashboard sin necesidad de scroll. Un dashboard donde los filtros están escondidos o requieren interacción para encontrarlos obliga al receptor a operar con el período o el segmento por defecto, lo que frecuentemente no corresponde con la pregunta que está intentando responder.
Zona 1: los KPIs en la fila superior
La primera fila del dashboard contiene los KPIs más importantes — entre tres y cinco — con su valor del período, la variación respecto al período anterior y, si aplica, un indicador visual de estado (verde/amarillo/rojo). Esta zona debe ser legible en menos de diez segundos. Si el receptor necesita más de diez segundos para entender el estado del negocio en esa fila, hay demasiada información o está mal organizada.
Zona 2: el gráfico principal
El gráfico de mayor tamaño en el dashboard — típicamente la evolución temporal del KPI primario — ocupa la zona central izquierda. Es el primer gráfico que el ojo alcanza después de la fila de KPIs, y su función es contextualizar la tendencia: ¿el número de hoy es un pico? ¿Un mínimo histórico? ¿Parte de una tendencia sostenida? Sin este contexto de evolución, los KPIs instantáneos son incompletos.
Zona 3: los desgloses
La zona derecha y la zona inferior del dashboard contienen los desgloses por categoría — canal, dispositivo, campaña, geografía — que permiten diagnosticar qué componente está impulsando o frenando el KPI principal. Esta zona es de segundo nivel: el receptor llega a ella después de establecer el contexto con las zonas 1 y 2, cuando necesita profundizar.
03 — Jerarquía visualJerarquía visual y patrones de lectura.
La jerarquía visual es el sistema de diferenciación que indica al receptor qué elementos son más importantes que otros sin requerir que los lea en orden. Se construye con cinco herramientas: tamaño, peso tipográfico, contraste de color, posición en el espacio y densidad de información.
En el patrón de lectura en F — documentado extensamente en estudios de eye-tracking de Nielsen Norman Group — el ojo recorre el borde superior de izquierda a derecha, baja y recorre nuevamente de izquierda a derecha pero con menor profundidad, y finalmente baja verticalmente por el borde izquierdo. Esto tiene tres implicaciones directas: la información más crítica va en la esquina superior izquierda; los elementos a la izquierda reciben más atención que los elementos equivalentes a la derecha; el contenido de la parte inferior derecha es el menos probable de leerse.
En el patrón en Z, más común en pantallas con menor densidad de texto, el ojo va de la esquina superior izquierda a la superior derecha, luego en diagonal hacia la inferior izquierda, y termina en la inferior derecha. La diagonal es la zona de menor atención. El posicionamiento de elementos en una pantalla de dashboard debería anticipar cuál de estos dos patrones seguirá la audiencia específica — ejecutivos con poco tiempo tienden al patrón Z; analistas que leen en detalle tienden más al F.
04 — El límite cognitivoEl límite cognitivo: cuántas métricas por pantalla.
El número mágico de George Miller — publicado en 1956 en "The Magical Number Seven, Plus or Minus Two" — establece que la memoria de trabajo humana procesa simultáneamente entre cinco y nueve unidades de información. Este límite no se ha invalidado en la investigación posterior; las estimaciones más recientes (Cowan, 2001) lo reducen a cuatro unidades como el límite de la atención simultánea verdadera.
La implicación práctica para dashboards es directa: entre cinco y siete métricas visibles simultáneamente es el rango óptimo para una sola pantalla. Por encima de siete, el receptor tiene que hacer scroll cognitivo entre los elementos — comparar mentalmente valores que no puede ver simultáneamente. Por debajo de tres, el dashboard no provee suficiente contexto para tomar decisiones informadas.
La objeción más frecuente a este límite es que "hay muchas métricas importantes." La respuesta correcta es que la importancia de una métrica no es una propiedad absoluta — depende de la audiencia y el propósito. Para el mismo negocio, el reporte ejecutivo tiene cinco métricas y el reporte del equipo técnico tiene veinte. No son el mismo dashboard — son dos documentos para dos audiencias con dos propósitos distintos, cada uno con su propia jerarquía.
05 — Color en dashboardsColor en dashboards: paleta funcional.
La paleta de color de un dashboard de marketing debería tener cuatro componentes con función semántica definida: un color base neutro (gris, azul oscuro) para la mayoría de los datos sin significado especial; un color de marca para el elemento principal o el KPI más importante; rojo o naranja exclusivamente para métricas bajo target o en estado de alerta; y verde exclusivamente para métricas en o por encima de target.
El sistema de semáforo (verde/amarillo/rojo) funciona porque explota convenciones semánticas profundas — el semáforo, las señales de tráfico, los estados de alarma. Estas convenciones son internacionales y no requieren leyenda. La condición para que funcionen es el uso exclusivo: si el rojo aparece en más del 20% de los elementos, pierde su función de alerta. Un dashboard "todo en rojo" produce ansiedad generalizada en lugar de señalización precisa.
06 — TipografíaTipografía para lectura de datos.
La tipografía en dashboards tiene requerimientos distintos a los de la tipografía en texto largo. Los números grandes en tarjetas de KPI requieren fuentes con cifras tabulares — donde cada dígito ocupa el mismo ancho — para que columnas de números se alineen correctamente. Las fuentes con cifras proporcionales producen desalineación que dificulta la comparación visual de magnitudes.
Para los valores numéricos en tarjetas de KPI, los pesos tipográficos extremos (700–900) con tamaños grandes (32–48px) funcionan mejor que los pesos moderados — el contraste entre el número grande y el contexto tipográfico pequeño (label, delta) crea jerarquía visual inmediata. Para el texto descriptivo — labels, leyendas, notas — los pesos ligeros (300–400) son más legibles en densidades altas de información.
07 — Páginas separadas vs. scroll únicoPáginas separadas vs. scroll único.
La decisión entre múltiples páginas o una sola página con scroll no es una preferencia personal — tiene consecuencias en el comportamiento de uso del dashboard. Los estudios de UX documentan que los elementos más allá del "fold" (la parte visible sin scroll) reciben significativamente menos atención que los elementos visibles de inmediato. En dashboards, esto se traduce en que todo lo que requiere scroll es visto por menos receptores con menos frecuencia.
Usar páginas separadas cuando
El dashboard sirve a audiencias distintas con necesidades distintas — cada página para una audiencia. Hay grupos temáticos claramente diferenciados (SEO, paid search, paid social, email) que tienen métricas diferentes y contextos de interpretación propios. El layout de una sola página requeriría scroll para mostrar toda la información necesaria.
Usar scroll único cuando
El dashboard es suficientemente simple para que la vista principal capture los KPIs más importantes. La narrativa requiere que el receptor vea todos los elementos para establecer conexiones causales entre ellos. La audiencia tiene hábito de scroll y prefiere la continuidad a la navegación por pestañas.
08 — Checklist de publicaciónEl checklist de publicación.
Antes de compartir un dashboard con cliente o dirección, verificar cada uno de estos puntos:
¿Se puede leer el estado en menos de 10 segundos?
Pedir a alguien que no estuvo en el proceso de creación que mire el dashboard por diez segundos y describa lo que aprendió. Si la descripción no captura el estado principal, el diseño necesita revisión.
¿Cada KPI tiene contexto comparativo?
Verificar que cada métrica principal muestra al menos una referencia: variación vs. período anterior, porcentaje de cumplimiento de meta, o indicador de estado semafórico.
¿Los filtros son visibles sin scroll?
Los selectores de período y segmento deben estar accesibles sin scroll desde cualquier página del dashboard. Un receptor que no puede ver qué período está mirando puede llegar a conclusiones incorrectas.
¿La fuente de datos se actualiza automáticamente?
Confirmar que todas las fuentes de datos conectadas están actualizadas y que el refresh automático está configurado. Un dashboard con datos de hace tres días que se presenta como "el estado actual" es peor que no tener dashboard.
¿Es autoexplicativo sin contexto verbal?
El receptor que recibe el link del dashboard sin una reunión de contexto debe poder entenderlo. Si requiere explicación para ser interpretado, necesita más contexto inline — labels más descriptivos, notas, títulos asertivos.
Preguntas frecuentes.
¿Cuántas métricas debería tener un dashboard?
Entre cinco y siete métricas visibles simultáneamente en una sola pantalla es el rango óptimo según el límite de memoria de trabajo documentado por Miller (1956) y refinado por Cowan (2001). Por encima de siete, el receptor tiene que hacer scroll cognitivo entre elementos que no puede ver al mismo tiempo. La solución para más métricas es páginas separadas o una jerarquía de drill-down, no comprimir más información en la misma pantalla.
¿Qué es el patrón de lectura en F o en Z en diseño de dashboards?
Son los patrones de movimiento ocular documentados en estudios de eye-tracking. El patrón en F describe el recorrido de izquierda a derecha en la parte superior, con barridos horizontales progresivamente más cortos hacia abajo. El patrón en Z es más frecuente en páginas con menor densidad de texto: superior-izquierda → superior-derecha → inferior-izquierda → inferior-derecha. La implicación práctica es que la esquina superior izquierda recibe la mayor atención — es donde va la métrica más crítica.
¿Cuándo conviene usar páginas separadas en un dashboard?
Cuando el dashboard sirve a audiencias distintas con necesidades distintas, cuando hay grupos temáticos claramente diferenciados (SEO, paid, email), o cuando una sola página requeriría scroll para ver toda la información relevante. La regla práctica es que todo lo que requiere scroll es visto por menos personas con menos frecuencia. Los elementos más críticos deben ser visibles sin scroll.
¿Cómo hacer un dashboard que el cliente realmente use?
Tres condiciones son necesarias y suficientes: que responda exactamente las preguntas que el cliente se hace con frecuencia (no las que el analista considera importantes), que sea legible en el tiempo de atención real que el cliente le dedica (frecuentemente menos de dos minutos), y que sea confiable — datos siempre actualizados, sin números rotos o vacíos. Un dashboard que falla en cualquiera de estas tres condiciones termina siendo ignorado, independientemente de su sofisticación técnica.
Referencias y bibliografía.
Few, S. (2006). Information Dashboard Design: The Effective Visual Communication of Data. O'Reilly Media. Cap. 3–6.
Norman, D. (2013). The Design of Everyday Things. Revised ed. Basic Books. Cap. 1–2.
Miller, G. A. (1956). "The Magical Number Seven, Plus or Minus Two." Psychological Review, 63(2), 81–97.
Cowan, N. (2001). "The magical number 4 in short-term memory." Behavioral and Brain Sciences, 24(1), 87–114.
Nielsen Norman Group. (2006). F-Shaped Pattern for Reading Web Content. NNGroup Research Report.
Términos del glosario