Skip to content

10 Mejores prácticas de visualización de datos para la Web

La visualización de datos se ha convertido rápidamente en un estándar para la difusión de información en la web. Se utiliza en una amplia gama de industrias, desde la inteligencia empresarial hasta el periodismo, para ayudarnos a comprender y comunicar los conocimientos de los datos.

Nuestros cerebros están preparados para procesar la información que se presenta visualmente, lo que nos facilita mucho más la comprensión de los datos visualizados en cuadros y gráficos que los datos listados en tablas y hojas de cálculo. Una gran visualización de datos debe aprovechar estas fortalezas del sistema visual humano para mostrar los datos de manera que puedan ser fácilmente absorbidos y comprendidos. Debe tener en cuenta lo que sabemos sobre el procesamiento visual para mejorar y facilitar la experiencia de los espectadores con los datos.

Con tantas herramientas y marcos de trabajo disponibles para construir estos gráficos, es hora de volver a lo básico. ¿Qué hace que las visualizaciones de datos sean efectivas? ¿Qué principios rectores debemos seguir al diseñar con datos?

Las siguientes mejores prácticas le ayudarán a diseñar experiencias de datos ricas y perspicaces.

1. Diseño para una audiencia específica

La visualización se utiliza para revelar patrones, proporcionar contexto y describir relaciones dentro de los datos. Aunque una diseñadora no tiene influencia sobre los patrones y las relaciones dentro de un conjunto dado de datos, puede elegir cuántos datos desea mostrar y qué contexto proporcionar, en función de las necesidades de la audiencia. Después de todo, al igual que con cualquier otro producto, una visualización no tiene sentido si su espectador no puede utilizarla.

Las visualizaciones para principiantes deben ser estructuradas, sin ambigüedades y atractivas. Deberían explicar directamente, en palabras, qué es lo que los espectadores deberían sacar de los datos.

Las visualizaciones para audiencias expertas, por otro lado, pueden mostrar una visión más granular de los datos para permitir la exploración y el descubrimiento guiados por el lector. Los detalles y la densidad de los datos deben primar sobre la simplicidad y la claridad.

2. Usar (pero no confiar en) la interactividad para facilitar la exploración

He aquí una cifra aleccionadora: sólo entre el 10 y el 15% de los visitantes a las visualizaciones interactivas en el sitio web del New York Times realmente hacen clic en los botones. El equipo de gráficos del New York Times produce algunos de los mejores trabajos en el negocio, y casi nadie interactúa con ellos.

El equipo de gráficos del New York Times produce algunos de los mejores trabajos en el negocio, y casi nadie interactúa con ellos.

Lo que esto sugiere sobre el diseño de visualización interactiva es que no podemos confiar en la interacción para construir la comprensión. Los datos clave no deben ocultarse detrás de los elementos interactivos, sino que deben estar disponibles sin interacción.

Sin embargo, la interacción es excelente para permitir la integración de datos adicionales (que de otro modo podrían ser excluidos), para permitir a los espectadores interesados explorar un conjunto de datos más profundamente. Nathan Yau de Flowing Data ha acaparado el mercado en este estilo de visualización interactiva, como se ve en sus gráficos sobre las causas de muerte y la esperanza de vida.

Alternativamente, la interacción puede ser usada como un gancho; un captador de atención que hace que su audiencia invierta personalmente en el proyecto antes de que puedan navegar lejos, muy lejos. Echa un vistazo a esta juguetona pieza sobre escritura y cultura de Quartz. La pieza comienza pidiendo a los lectores que simplemente dibujen un círculo, antes de continuar con un análisis del dibujo de formas culturales que incluya algunas visualizaciones simples, pero efectivas.

De manera similar, The Pudding lanzó recientemente una visualización interactiva para enseñar a los lectores sobre la paradoja del cumpleaños. Mientras que la mayoría de los no estadísticos probablemente encuentran la paradoja del cumpleaños, un problema estándar en la teoría de la probabilidad, bastante seca y poco intuitiva, esta visualización la hace parecer francamente fascinante. La forma en que el creador incorpora las interacciones de los usuarios recientes hace que toda la experiencia sea bastante reconocible.

Ambos ejemplos interactivos funcionan porque permiten al espectador participar en los datos, sin requerir interacción para su comprensión.

3. Usar la Saliencia Visual para Enfocar la Atención y Guiar la Experiencia

La prominencia visual, la característica que hace que un elemento visual destaque sobre su entorno, es una poderosa herramienta en la visualización de datos. Puede ser utilizado para guiar la atención del usuario hacia la información más importante en una visualización, para ayudar a prevenir la sobrecarga de información. Al utilizar la saliencia visual para resaltar algunos detalles y suprimir otros, podemos hacer que nuestros diseños sean más claros y fáciles de entender.

Unas pocas variables visuales -color y tamaño, principalmente- son nuestras claves para crear y controlar la prominencia visual.

Los esquemas de color son la clave para una buena visualización de datos porque el color, como todos sabemos, es particularmente bueno para romper el camuflaje. Podemos usar colores cálidos y altamente saturados para resaltar los puntos clave de los datos, y aplicar colores fríos y desaturados para empujar la información menos importante hacia el fondo.

El tamaño también se explica por sí mismo. Los elementos grandes requieren más atención que los pequeños, así que amplíe los elementos que le gustaría que los espectadores leyeran primero, y reduzca el texto y los elementos que son menos pertinentes.

4. Usar posición y longitud para codificar información cuantitativa y usar color para codificar información categórica

El conocido trabajo de Cleveland y McGill sobre visualización de información investigó la efectividad de las codificaciones visuales (es decir, el mapeo de las dimensiones de los datos a las propiedades visuales). En sus hallazgos, clasificaron diferentes tipos de codificación visual de acuerdo con la precisión con la que los percibimos, lo que nos dio esta lista (simplificada):

  1. Posición a lo largo de una escala común
  2. Longitud
  3. Ángulo
  4. Área
  5. Color

Lo que esto sugiere para el diseño de visualización de datos es que nuestra primera opción para mostrar información cuantitativa debería ser codificar los datos por posición (como se ve en el gráfico de dispersión clásico y en el gráfico de barras). A diferencia de las codificaciones en ángulo (como los gráficos circulares) o en área (como los gráficos de burbujas), las codificaciones en posición ayudan a los espectadores a realizar comparaciones más precisas en menos tiempo.

Esto no quiere decir, sin embargo, que todas las visualizaciones deben ser gráficos de barras o gráficos de dispersión. Es una buena idea tener en cuenta estos fundamentos a la hora de explorar nuevas y excitantes formas de visualizar los datos.

Lo que realmente quiero enfatizar aquí es que el color no debe ser usado para codificar información cuantitativa, y en su lugar puede ser usado para codificar información categórica. Es decir, podemos usar el color para mostrar que diferentes bits de datos pertenecen a diferentes categorías.

5. Hacer que los elementos estructurales como las marcas de verificación y los ejes sean claros pero discretos

Ya sea que usted apoye o no el enfoque extremo de Edward Tufte hacia el minimalismo en el diseño, hágase un favor y elimine el desorden visual de sus gráficos. Haga que sus datos brillen creando un contraste visual entre los elementos de datos y los que no lo son, como lo ha hecho Nadieh Bremer en su galardonada visualización de las horas de nacimiento en Estados Unidos.

Elimine cualquier elemento estructural (como fondos, líneas y bordes) que no funcione para aclarar los datos. Atenuar elementos estructurales esenciales (como ejes, cuadrículas y marcas de verificación) que de otro modo competirían con sus datos para obtener atención. Rejillas de estilo en gris claro con un peso máximo de 0,5 pt, y ejes de estilo en negro o gris con un peso máximo de 1 pt.

6. Etiquete directamente los puntos de datos

Cada elemento visual que codifica algunos datos necesita ser etiquetado, para que el espectador entienda lo que representa. Simple, ¿verdad?

Equivocado. Demasiados diseñadores confían en las leyendas para decir a los lectores qué símbolos o colores representan qué series de datos en sus gráficos. Las leyendas, aunque son fáciles para el diseñador, son duras para el lector. Obligan a los lectores a escanear de un lado a otro entre la leyenda y los datos, lo que supone una carga innecesaria para las memorias de trabajo de los lectores.

Una mejor alternativa es etiquetar las series de datos directamente en el gráfico. A menudo es más un desafío, pero tú eres el diseñador. Su trabajo es hacer el trabajo para que el lector no tenga que hacerlo. En el siguiente ejemplo, Nathan Yau ha hecho el trabajo para evitar el uso de una leyenda, creando una pequeña pantalla interactiva de múltiplos con muchas etiquetas directas.

7. Usar la mensajería y la jerarquía visual para crear un flujo narrativo

Las mejores visualizaciones cuentan historias convincentes. Estas historias surgen de las tendencias, correlaciones o valores atípicos de los datos, y son reforzadas por los elementos que rodean a los datos. Estas historias convierten los datos brutos en información útil.

A primera vista, puede parecer que la visualización de datos se trata de los números, pero una gran historia de datos no puede ser contada sin palabras. La mensajería, con una clara jerarquía visual, puede utilizarse para guiar al lector, paso a paso, a través de los datos.

El título de una visualización, por ejemplo, debe dar comienzo a la narración al establecer explícitamente la perspectiva clave que el lector debe tomar de la visualización. Pequeñas anotaciones dispersas entre los datos pueden servir de apoyo a esa narrativa al llamar la atención sobre los valores atípicos o las tendencias.

Lo que estoy tratando de decir aquí es: ¡Échale una mano al espectador y dile exactamente qué buscar en los datos!

8. Superponer información contextual directamente en el gráfico

Como acabo de mencionar, podemos usar anotaciones en una visualización para ayudar a crear un flujo narrativo. A veces podemos añadir elementos gráficos para que esas anotaciones sean aún más significativas, para conectar esa información a nuestros datos de forma más directa.

Tome este gráfico de Susie Lu, por ejemplo. Las superposiciones “Summer Blockbusters” y “Oscar Season” dan sentido a picos y valles que, de otro modo, podrían parecer aleatorios. Ayudan al espectador a comprender el significado de los datos de una manera más directa que los subtítulos o las anotaciones por sí solos.

9. Diseño para la experiencia móvil

Las visualizaciones estáticas, normalmente publicadas en formatos de imagen de mapa de bits como JPG y PNG, plantean un reto obvio para los espectadores móviles. La belleza de muchas visualizaciones de datos radica en sus detalles visuales -en pequeños puntos de datos y codificaciones sutiles- y muchos de estos detalles se pierden en pequeñas pantallas en formatos estáticos.

Es un buen ejemplo: El complejo trabajo de Accurat Studio sobre los premios Nobel, que tiene un aspecto fabuloso en tamaño completo impreso y en una pantalla de retina de alta resolución, es casi ilegible en un dispositivo móvil.

Para diseñar para la experiencia móvil, construya visualizaciones sensibles con una biblioteca de visualización JavaScript como D3.js o Highcharts, o cree múltiples variaciones de la misma visualización estática para impresión, escritorio y móvil.

10. Equilibrar la complejidad con la claridad para fomentar la comprensión

Todas las mejores prácticas que he mencionado hoy se reducen a una sola cosa: encontrar el equilibrio adecuado entre complejidad y claridad que se ajuste a las necesidades de su audiencia.

Siempre es tentador hacer una visualización exploratoria, sutil y bellamente detallada, pero rara vez es el enfoque más apropiado. Sea considerado al diseñar sus gráficos – permita que el conocimiento y las metas de la audiencia dicten qué y cuántos datos deben ser incluidos, y curatee los datos para contar la historia que usted quiere contar.