Visualización de datos para diseñadores: cómo hacer gráficos que de verdad comuniquen
Una guía de diseñador en activo sobre visualización de datos. Selección de gráficos, color, jerarquía, accesibilidad y los principios que convierten los datos en un gráfico que un usuario real puede leer en tres segundos.
La mayoría de los dashboards de producto son ruido. Doce gráficos, seis paletas de color, ninguna jerarquía clara y un usuario que tiene que estudiar cada uno para averiguar qué está midiendo. El equipo lo llamó "data-driven" y lo lanzó. El usuario lo llama confuso y lo ignora.
Este paper es la versión de trabajo. Los tipos de gráfico que de verdad comunican, las reglas de color que aguantan a tamaños pequeños, las decisiones de jerarquía que permiten entender los datos en tres segundos y los mínimos de accesibilidad que mantienen el trabajo usable. Sin tutoriales de D3, sin galerías de gráficos, solo la disciplina de diseño de la dataviz dentro de un producto real.
Qué es realmente la dataviz
La visualización de datos es la codificación visual de números en formas que el ojo puede comparar más rápido de lo que el cerebro lee texto. Un gráfico de barras convierte una columna de números en rectángulos cuyas alturas el ojo compara al instante. Un gráfico de líneas convierte una serie temporal en una pendiente que el ojo lee como una historia. La codificación es todo el trabajo.
Un mal gráfico es aquel donde la codificación pelea contra los datos. Un gráfico circular con once porciones no codifica nada que el ojo pueda comparar. Un gráfico de barras 3D codifica los datos y luego deforma la codificación por postureo visual. Un gráfico de líneas con doble eje codifica dos historias como si fueran una. Cada uno es un fallo de diseño, no un fallo de matemáticas.
El desglose de diseño de jerarquía visual explica cómo lee el ojo una página estática. La dataviz es jerarquía aplicada a números.
Por qué importa el diseño de dataviz en producto
La mayoría de las superficies de producto tienen una o dos piezas de información por pantalla. Un dashboard tiene decenas. Sin disciplina de diseño, un dashboard se convierte en un muro de señales en competencia donde el usuario no encuentra lo que importa.
La dataviz también falla de forma distinta al resto del diseño. Un botón del color equivocado es feo. Un gráfico del tipo equivocado es engañoso. El usuario toma una decisión basada en lo que cree que dice el gráfico y el gráfico decía otra cosa. El coste de un gráfico engañoso es una decisión equivocada, no solo una mala estética.
En 2026, cada superficie de producto tiene más datos que hace cinco años. Las funciones de IA exponen la confianza del modelo, métricas de uso, desgloses de costes. Las superficies de analítica son tablas y gráficos por todas partes. Los diseñadores que saben construir sistemas de dataviz ya son críticos para cualquier producto más complejo que una app de propósito único.
Elige el gráfico que encaje con la pregunta
La selección del gráfico es el 80% del trabajo de dataviz. Si eliges el gráfico equivocado, ningún pulido lo salva. Si eliges el correcto, el diseño casi se completa solo.
Las cinco familias de gráficos que cubren la mayor parte del trabajo de producto
La mayor parte de la dataviz de producto vive dentro de cinco familias de gráficos. Domínalas y más del 90% del trabajo de dashboards se vuelve rutina.
| Pregunta que se hace el usuario | Tipo de gráfico |
|---|---|
| ¿Cómo se compara este número con otros de una categoría? | Gráfico de barras |
| ¿Cómo cambia este número con el tiempo? | Gráfico de líneas |
| ¿Cuál es el desglose de un todo? | Barras apiladas o treemap (casi nunca un gráfico circular) |
| ¿Cómo se relacionan dos variables? | Diagrama de dispersión |
| ¿Cuál es la distribución de los valores? | Histograma o diagrama de caja |
Si el gráfico en pantalla no encaja con uno de estos, probablemente el usuario no sabe qué pregunta responde. Cambia el gráfico para que encaje con la pregunta o cambia la pregunta que se está haciendo.
Cuándo usar un solo número
El gráfico más infrautilizado en el diseño de producto es no usar ningún gráfico. Un único número grande con una etiqueta y una comparación ("Ingresos: 124.500 $, un 12% más que el mes pasado") comunica más que la mayoría de los dashboards con doce gráficos.
Usa un solo número cuando:
- Al usuario solo le importa el último valor, no la tendencia
- La tendencia está implícita en el contexto de comparación
- El espacio en pantalla es limitado (móvil, barra lateral, barra de estado)
El peso visual de un solo número con tipografía en negrita y una etiqueta clara es enorme. La mayoría de los dashboards mejorarían si la mitad de los gráficos se sustituyeran por números sueltos.
Cuándo usar small multiples
Los small multiples son una cuadrícula del mismo tipo de gráfico repetido para distintas categorías. Úsalos cuando el usuario necesita comparar patrones entre muchos elementos, no los valores absolutos.
Una cuadrícula de 12 sparklines con los ingresos por región se escanea más rápido que un único gráfico con 12 líneas cruzándose. El ojo lee cada región por separado y luego compara las formas a lo largo de la cuadrícula. La técnica viene de Edward Tufte y sigue infrautilizada en los dashboards de producto.
El tope ronda los 16 a 20 small multiples por vista. Más allá, el ojo no puede compararlos todos y la cuadrícula se convierte en papel pintado.
Gráficos que casi nunca funcionan en producto
Algunos tipos de gráfico persisten porque lucen impresionantes en una captura. Casi nunca comunican bien en un producto real. Recórtalos cuando los veas.
Gráficos circulares con más de tres porciones. El ojo no puede comparar ángulos con precisión pasadas tres o cuatro cuñas. Usa en su lugar una barra apilada o un treemap. Los gráficos circulares funcionan para proporciones de dos porciones (sí/no, encendido/apagado) y casi nada más.
Gráficos de barras 3D. La tercera dimensión distorsiona la codificación. La barra de delante parece más grande de lo que es, la de atrás parece más pequeña. Usa siempre 2D.
Gráficos de líneas con doble eje. Dos ejes y en un mismo gráfico sugieren que las dos líneas deberían compararse, pero la comparación no tiene sentido porque cada eje está en una escala distinta. El usuario lee una correlación que no existe. Divídelo en dos gráficos o usa valores indexados en un solo eje.
Gráficos de anillo con una etiqueta dentro. Los gráficos de anillo son gráficos circulares con esfuerzo extra. La etiqueta del interior suele duplicar información que ya está en pantalla. Usa en su lugar un único número más un pequeño gráfico de barras.
Nubes de palabras. Parecen datos y no comunican nada. El tamaño de la palabra se correlaciona vagamente con la frecuencia, el ojo no puede comparar tamaños con precisión y las palabras largas parecen más grandes porque tienen más píxeles. Fuera a la vista.
Gráficos de radar. Útiles para comparaciones muy específicas (valoraciones multidimensionales en la misma escala), casi siempre mal usados para comparaciones generales. El ojo no puede comparar áreas de polígonos irregulares. Si el gráfico no es para un caso de uso concreto y conocido, usa un gráfico de barras.
El color en la dataviz
El color en la dataviz no es decoración. Es parte de la codificación. Una mala elección de color puede convertir un gráfico claro en uno engañoso.
Los tres usos del color
Cada color de un gráfico hace uno de tres trabajos:
El color categórico distingue categorías discretas sin orden. Cada región, cada producto, cada segmento de clientes recibe un tono distinto. Usa una paleta de 6 a 8 tonos distintos. Pasados 8, el ojo empieza a confundir colores parecidos y la codificación falla.
El color secuencial muestra valores ordenados a lo largo de una sola dimensión. De claro a oscuro, de baja saturación a alta. Usa una rampa de un solo tono, no varias. Las paletas secuenciales comunican magnitud mediante el valor, no el tono.
El color divergente muestra valores que van de negativo a positivo alrededor de un punto medio con significado. De rojo a blanco a azul es el ejemplo clásico. El punto medio debe ser un cero o umbral real, no una comodidad visual.
Mezclar los tres mata el gráfico. Una paleta categórica usada para codificar magnitud es ilegible. Una paleta secuencial usada para codificar categorías confunde. Elige la correcta para los datos.
El desglose de teoría del color para diseñadores cubre los principios de color más amplios. El glosario de paleta de color explica cómo se estructuran las paletas.
Reglas de color que sobreviven a tamaños pequeños
La mayor parte del color de los gráficos falla en los tamaños pequeños donde los gráficos viven de verdad en las UIs de producto. Un sparkline de 60 píxeles no tiene espacio visual para renderizar ocho colores categóricos con claridad.
Cinco reglas que aguantan:
- No uses más de 6 colores categóricos por gráfico. Pasados seis, el ojo se rinde.
- Reserva un color de acento para el destacado. La línea o barra que el usuario debe mirar primero recibe el color de marca o un tono de alto contraste. Todo lo demás va atenuado.
- Atenúa los datos secundarios. Fondos, líneas de cuadrícula y etiquetas de ejes al 40 a 60% de opacidad. Datos en primer plano a plena saturación. El contraste es la jerarquía.
- Prueba en monocromo. Convierte el gráfico a escala de grises y comprueba que la jerarquía se sigue leyendo. Si el gráfico solo funciona en color, el color está haciendo demasiado trabajo.
- Prueba en modo oscuro. La mayoría de los gráficos de producto deben funcionar sobre fondos claros y oscuros. El mismo tono suele verse demasiado saturado en oscuro y demasiado lavado en claro. Construye una paleta emparejada por modo.
El desglose de diseño de modo oscuro cubre la disciplina más amplia del modo oscuro. Los gráficos son una de las piezas más difíciles de acertar en modo oscuro.
El daltonismo no es un nicho
Cerca del 8% de los hombres y el 0,5% de las mujeres tienen alguna forma de deficiencia de visión del color. La mayoría de las paletas categóricas que a un diseñador le parecen bien se vuelven ilegibles para estos usuarios.
La solución es no codificar nunca la información solo con color. Combina el color con forma, posición, etiqueta o patrón. Un gráfico de líneas con tres líneas de color debería tener además etiquetas directas en cada línea. Un gráfico de barras debería tener etiquetas de valor en las barras que el usuario necesita comparar.
Prueba las paletas con simuladores de daltonismo. El fallo más común es que el rojo y el verde sean indistinguibles para usuarios con deuteranopia. Usa azul y naranja como pareja categórica, ya que ambos funcionan con las deficiencias de visión del color más comunes.
El desglose de contraste de color accesible cubre los mínimos de contraste. El glosario de ratio de contraste explica cómo se mide el contraste.
Jerarquía en un gráfico
Todo gráfico tiene una jerarquía. El ojo del usuario debe aterrizar primero en los datos, segundo en las etiquetas, tercero en las líneas de cuadrícula y los ejes. La mayoría de los gráficos de producto invierten esto y el usuario tiene que esforzarse para encontrar los datos.
Qué enfatizar, qué atenuar
Los datos son el héroe. Barras, líneas y puntos reciben el mayor peso visual. Opacidad completa, saturación completa, color de marca o de acento donde corresponda.
Las etiquetas y títulos son el reparto de apoyo. Lo bastante fuertes para leerse, no tanto como para competir con los datos. Normalmente del 50 al 70% del peso visual de los datos.
Las líneas de cuadrícula, las líneas de ejes y las marcas son el escenario. Visibles solo cuando el usuario las busca. Normalmente del 20 al 40% del peso visual de las etiquetas.
La mayoría de los gráficos de producto salen con las líneas de cuadrícula a plena fuerza porque es el valor por defecto en todas las librerías de gráficos. La solución es un único override de CSS que atenúa las líneas de cuadrícula y el gráfico pasa de inmediato de parecer plantilla a parecer diseñado.
El etiquetado directo gana a las leyendas
Una leyenda al lado de un gráfico obliga al ojo del usuario a jugar al ping-pong entre la leyenda y los datos. Las etiquetas directas en cada línea, barra o segmento dejan que el usuario lea el gráfico de una pasada.
El etiquetado directo es más difícil de implementar y las librerías de gráficos no lo soportan bien. Constrúyelo igualmente. Un gráfico de líneas con tres líneas etiquetadas en el extremo derecho es drásticamente más legible que el mismo gráfico con una leyenda en la esquina.
La excepción es cuando hay demasiadas series para que quepan etiquetas directas. En ese caso, usa una leyenda interactiva. Pasar el cursor o tocar un elemento de la leyenda resalta esa serie en el gráfico y atenúa el resto.
La regla de los tres segundos
Todo gráfico en un producto debería responder a su pregunta en tres segundos. Si el usuario tiene que estudiar el gráfico, el diseño ha fallado.
Cómo probar la regla de los tres segundos
Enseña el gráfico a alguien que no haya visto el dashboard antes. Pregunta "¿qué te dice este gráfico?". Cronometra la respuesta.
Si la respuesta llega en menos de tres segundos, el gráfico funciona. Si tarda más, busca qué los está frenando. Normalmente es una de estas:
- El tipo de gráfico no encaja con la pregunta
- La jerarquía está invertida (líneas de cuadrícula más ruidosas que los datos)
- La leyenda fuerza el ping-pong visual
- La codificación de color no está clara
- El gráfico tiene demasiadas series
Arregla el fallo, vuelve a probar. Un dashboard donde cada gráfico pasa la prueba de los tres segundos es un dashboard que un usuario puede usar de verdad.
Cuándo no aplica la regla de los tres segundos
Las herramientas de analítica exploratoria (herramientas de BI, notebooks de ciencia de datos) son distintas. El usuario no echa un vistazo, investiga. Quiere cada variable, cada dimensión, cada filtro. Tres segundos se convierten en tres minutos y está bien.
El error es construir un dashboard de producto con la disciplina de una herramienta de BI. El usuario de producto no está investigando. Está comprobando. Tres segundos es el presupuesto.
Interacción en la dataviz
Los gráficos en las UIs de producto son interactivos. Hover para tooltips, clic para filtrar, brush para hacer zoom. Las interacciones necesitan un diseño tan deliberado como la codificación estática.
Diseño de tooltips
Los tooltips en los gráficos responden a la pregunta "¿cuál es el valor exacto de este punto?". La mayoría de las librerías de gráficos usan por defecto un tooltip que muestra todas las series a la vez, lo que se convierte en un muro de texto al pasar el cursor.
Mejores valores por defecto:
- Un tooltip por serie, no todas las series. Pasa el cursor por la línea que te importa y ve el valor de esa línea. Pasarlo por el fondo del gráfico no muestra nada.
- Los tooltips incluyen la unidad. "1.240 $" y no "1240".
- Los tooltips muestran contexto de comparación donde sea útil. "1.240 $ (+8% vs la semana pasada)" convierte el tooltip en una historia.
- Los tooltips nunca tapan los datos. Colócalos encima o debajo del cursor según la proximidad al borde del gráfico.
Filtrado y brushing
Los gráficos que admiten manipulación directa se sienten receptivos de una forma que no logran los gráficos que necesitan un panel de filtros aparte. Seleccionar con brush un rango de fechas en el eje x para hacer zoom, hacer clic en una categoría de la leyenda para aislarla, arrastrar una línea de umbral para filtrar filas. Cada una requiere trabajo de ingeniería que se paga en confianza del usuario.
El riesgo es la sobreingeniería. Un gráfico que necesita cinco interacciones para ser útil es un gráfico que debería dividirse en varios gráficos más simples. Cada interacción es un coste cognitivo.
El glosario de divulgación progresiva cubre el principio más amplio. Los gráficos pueden aprovecharlo bien ocultando los controles avanzados hasta que el usuario demuestre intención.
Fallos de dataviz que vigilar
Cada auditoría de dashboards encuentra los mismos fallos. Si el producto sale con cualquiera de estos, la capa de dataviz está saboteando el resto del producto.
Ejes y truncados que exageran el cambio. Un gráfico de barras con un eje y que empieza en 95 en lugar de cero convierte un cambio del 2% en un precipicio visual. Usa ejes de rango completo salvo que haya una razón clara para no hacerlo, y etiqueta cualquier truncamiento de forma explícita.
Gráficos de barras sin línea base en cero. La longitud de la barra es la codificación. Si la barra no empieza en cero, la codificación miente. Esto no es negociable en gráficos de barras. Los gráficos de líneas pueden usar ejes truncados cuando muestran un rango pequeño a lo largo del tiempo.
Tipos de gráfico incoherentes en un mismo dashboard. Dos gráficos de barras con orientaciones distintas, dos gráficos de líneas con rangos de eje distintos, un gráfico circular junto a una barra apilada mostrando los mismos datos. Elige el tipo de gráfico que encaja con cada pregunta, pero haz que el tratamiento visual sea coherente en todo el dashboard.
Gráficos que tardan más en cargar que el resto de la página. Un dashboard que pinta el layout en 200 ms y los gráficos en 2 segundos parece roto. Construye estados skeleton para cada gráfico. Carga con lazy-load los gráficos que están bajo el pliegue. Haz streaming de los datos en lugar de esperar a la carga completa.
Gráficos que ignoran la marca. Un dashboard que usa los colores por defecto de la librería de gráficos parece una plantilla. La paleta del gráfico debería derivarse del sistema de color de la marca, con ajustes de accesibilidad y legibilidad a tamaño pequeño. No lances nunca a producción un dashboard con la paleta por defecto de Chart.js o Recharts.
El desglose de paleta de color de marca cubre la disciplina de color de marca más amplia. Las paletas de dataviz se derivan, no se inventan.
Dataviz en las condiciones de 2026
Tres cambios han transformado cómo se diseña la dataviz. El trabajo tiene que adaptarse.
La IA genera gráficos en segundos. Herramientas como ChatGPT y Claude pueden generar un gráfico a partir de datos en bruto con un solo prompt. El riesgo es que los diseñadores dejen de pensar en la selección del gráfico porque la IA elige uno. La IA casi siempre elige un tipo de gráfico genérico que no encaja con la pregunta real. Usa la IA para primeros borradores y luego refactoriza según la pregunta que se hace el usuario.
Los datos en tiempo real son lo normal. Los dashboards ahora hacen streaming de datos en vivo en lugar de refrescarse cada 60 segundos. La implicación de diseño es que el movimiento también necesita diseño. Los gráficos en vivo que parpadean en cada actualización son inutilizables. La interpolación suave entre puntos de datos y un indicador claro de "en vivo" son lo mínimo.
Los dashboards móviles son habituales. Un dashboard diseñado solo para escritorio es un dashboard que pierde la mayor parte del uso de fin de semana y de viaje. Los gráficos en móvil necesitan decisiones distintas: a menudo tipos de gráfico más simples, menos series, layouts más altos que hacen scroll en lugar de cuadrículas que se comprimen.
El desglose de diseño responsive cubre la disciplina responsive más amplia. La dataviz es una de las capas más difíciles de hacer realmente responsive.
FAQ
¿Qué tipo de gráfico debería usar?
Haz coincidir el gráfico con la pregunta que se hace el usuario. Comparar valores entre categorías: gráfico de barras. Mostrar cambio en el tiempo: gráfico de líneas. Mostrar partes de un todo: barras apiladas o treemap (casi nunca un gráfico circular). Mostrar relaciones entre dos variables: diagrama de dispersión. Mostrar distribución: histograma o diagrama de caja. Si el gráfico en pantalla no encaja con uno de estos, el usuario no sabe qué pregunta responde.
¿Cuándo debería evitar los gráficos circulares?
Casi siempre. Los gráficos circulares funcionan con dos o tres porciones donde la proporción es toda la historia (sí/no, encendido/apagado, divisiones binarias simples). Pasadas tres porciones, el ojo no puede comparar ángulos con precisión y el gráfico se convierte en decoración. Usa en su lugar una barra apilada horizontal o un treemap.
¿Cuántos colores debería usar un gráfico?
Seis colores categóricos como máximo, más un acento para la serie destacada. Pasados seis, el ojo empieza a confundir tonos parecidos y la codificación falla. Para datos secuenciales (de bajo a alto), usa una rampa de un solo tono de claro a oscuro. Para datos divergentes (de negativo a positivo), usa una rampa de dos tonos alrededor de un punto medio con significado.
¿Cómo hago accesibles los gráficos?
No codifiques nunca la información solo con color. Combina el color con forma, posición, etiqueta o patrón. Prueba las paletas con simuladores de daltonismo (la deuteranopia es la más común). Cumple los mínimos de contraste de WCAG entre los elementos del gráfico y el fondo. Ofrece etiquetas directas en lugar de referencias solo en leyenda siempre que sea posible. Añade nombres accesibles a los componentes del gráfico para lectores de pantalla.
¿Qué es la regla de los tres segundos para gráficos?
Todo gráfico de un dashboard de producto debería responder a su pregunta en tres segundos o menos cuando se muestra a un usuario nuevo. Si el usuario tiene que estudiar el gráfico, el diseño ha fallado. Pruébalo mostrando el gráfico a alguien que no haya visto el dashboard y midiendo cuánto tarda en resumir lo que dice. Cualquier cosa por encima de tres segundos significa que el gráfico necesita simplificarse.
¿Debería usar una librería de gráficos o construir algo a medida?
Usa una librería de gráficos para primeros borradores y prototipos. La mayoría de los gráficos de producción en UIs de producto se benefician de capas personalizadas sobre la librería para corregir los valores por defecto: líneas de cuadrícula atenuadas, etiquetas directas, paletas de color de marca, tooltips a medida. La dataviz totalmente a medida con D3 o canvas solo se justifica cuando el tipo de gráfico es tan inusual que ninguna librería lo soporta.
La dataviz es diseño, no decoración
Un dashboard con dataviz disciplinada se siente como un producto que respeta el tiempo del usuario. Un dashboard sin ella se siente como un muro de decoración que casualmente contiene números. La distancia entre ambos es pequeña, y el único camino hacia el primero es la disciplina de diseño aplicada a la selección de gráficos, el color, la jerarquía y la interacción.
Elige el gráfico que encaje con la pregunta. Atenúa las líneas de cuadrícula, resalta los datos. Usa el color como codificación, no como decoración. Prueba contra la regla de los tres segundos. Prueba contra el daltonismo. Prueba en móvil y en modo oscuro.
El producto que lanza dataviz disciplinada se percibe serio. El producto que lanza la salida por defecto de una librería de gráficos se percibe como una plantilla. Los usuarios notan la diferencia incluso cuando no saben articular por qué.
Si quieres un equipo que construya sistemas de dataviz junto con el resto de la UI del producto, contrata a Brainy. Los gráficos como parte de primera clase del sistema de diseño, en cada proyecto.
Lecturas relacionadas
- Diseño de jerarquía visual
- Teoría del color para diseñadores
- Diseño de modo oscuro
- Contraste de color accesible
Want a dashboard or product UI where the data actually communicates? Brainy ships data-heavy interfaces with chart systems built in, not bolted on after the fact.
Get Started
