studein.
com
Módulo 2
Principios de visualización de datos
Narración de datos es a la vez un arte y una ciencia. La parte artística se refiere a la estructura
de la historia y los elementos narrativos que unen los datos y los componentes visuales,
mientras que la parte científica de la narración de datos se refiere a los principios fundamentales
del diseño y la percepción visual y su aplicación. Este curso se ocupa en gran medida de la
construcción de historias de datos a través de paneles e informes. Se ocupa principalmente del
aspecto científico de la narración de datos. Estas formas de presentación de datos proporcionan
una flexibilidad narrativa limitada debido a la naturaleza dinámica de los datos que
representan. A medida que los datos cambian con el tiempo, los conocimientos que transmiten
y la historia que cuentan cambiarán en consecuencia. Esto dificulta la incorporación de una
narrativa rígida. Por lo tanto, mucho énfasis se pone en elementos de diseño como los tipos de
gráficos, colores y diseño, que constituyen los pilares de la narración a través de datos, en lugar
de en los elementos narrativos.
Este capítulo presenta varios principios rectores y aspectos de diseño clave a considerar al crear
visualizaciones de datos. Cubriremos conceptos fundamentales como la simplicidad del diseño,
principios de percepción visual, organización del contenido y precisión de la información. Estos
principios forman la base de cualquier diseño visual decente. El color juega un papel muy
importante en el diseño visual y afecta en gran medida cómo se perciben los elementos
visuales. Profundizaremos en varios aspectos de la elección de los esquemas de color correctos
según los casos de uso específicos y las necesidades de la audiencia.
En este capítulo, cubriremos los siguientes temas principales:
• Comprender los principios fundamentales del diseño
• Repasando los principios Gestalt de la percepción visual.
• Usar el color sabiamente
studein.com
Comprender los principios fundamentales del
diseño
Bien elaborado yLos paneles de control eficaces se basan en las bases del diseño y la
percepción visual que se han explorado y estudiado durante siglos. En la actualidad, Edward
Tufte y Stephen Few son reconocidos como pioneros y los principales expertos más notables
de la visualización de datos moderna. A través de su prolífico trabajo, han dilucidado las
muchas complejidades de visualizar datos e información de manera efectiva. En esta sección,
revisaremos los siguientes principios y pautas fundamentales que forman la base de cualquier
buen panel:
• Simplicidad de diseño
• Organizando el diseño
• Exactitud de la información presentada.
Simplicidad de diseño
El único más importante principio rector para construir cualquier representación visual de datos
es simple. Lograr la simplicidad implica principalmente eliminar todas las distracciones de los
datos que se van a representar. En palabras de Edward Tufte, se trata de evitar los gráficos
basura. Los gráficos basura o tinta sin datos son cualquier cosa que no represente datos o
información. También puede tomar la forma de datos redundantes. Muchos colores,
efectos tridimensionales ( 3-D ), líneas de cuadrícula oscuras y mucho más. Los gráficos
basura interfieren con el consumo efectivo de información. El resto de esta sección presenta
algunos ejemplos comunes de gráficos basura y cómo se pueden minimizar de manera efectiva.
La siguiente captura de pantalla muestra dos variaciones de un gráfico de barras que representa
el precio unitario promedio para cada categoría de producto. El color degradado y el color
texturizado de las barras en los dos gráficos respectivamente distraen y no agregan ninguna
información al gráfico:
studein.com
Figura 2.1 – Gráficos de barras con usos de color que distraen
Utilice colores sólidos para representar datos y evitar el uso de efectos extraños en un intento
de hacer un gráfico más atractivo visualmente. Lo mismo se aplica a las texturas y patrones de
fondo, como se muestra en la siguiente captura de pantalla:
Figura 2.2 – Gráficos con fondos que distraen
Las imágenes de fondo de los gráficos resultan ser aún más dañinas para la vista, lo que hace
mucho más difícil leer y comprender los datos, como es el caso aquí:
studein.com
Figura 2.3 – Gráfico con uso ineficaz de imágenes
Si bien las imágenes relevantes y hermosas suelen captar la atención de los usuarios y parece
una buena idea incluirlas, un gráfico o un panel no es el lugar adecuado para ellas. ellos distraen
alejar a los usuarios de los objetivos del gráfico y poner en peligro su utilidad. Utilice colores
sólidos neutros como fondos, o ninguno en absoluto. Este ejemplo en particular muestra un caso
especialmente malo de uso de imágenes, donde la imagen no agrega ningún valor
informativo. Si bien el gráfico quizás pueda mejorarse de otras maneras, como una mejor
elección de colores, etiquetas, etc., las imágenes como fondo del gráfico rara vez agregan valor.
Dicho esto, las imágenes pueden ayudar a contar historias cuando se usan de manera justa. Los
logotipos a menudo se incluyen en los paneles con fines de marca, mientras que los íconos
significativos y relevantes agregan valor al permitir una interpretación más fácil y aumentar el
atractivo visual. Las pictografías también son un buen ejemplo de cómo mostrar datos como
imágenes. Sin embargo, sólo son eficaces para una pequeña cantidad de datos. La siguiente
captura de pantalla muestra íconos de imágenes masculinas y femeninas (obtenidos de free-
vectors.net bajo la licencia Attribution 4.0 International (CC BY
4.0) https://creativecommons.org/licenses/by/4.0/) que agregan contexto a los gráficos de
anillos y un pictograma que representa la calificación de rendimiento con imágenes de estrellas
(imagen de rawpixel.com ):
studein.com
Figura 2.4 – Uso significativo y atractivo de las imágenes
¿Qué pasa con las líneas de cuadrícula? ¿Son realmente basura gráfica? Las líneas de
cuadrícula colocadas con criterio ayudan a los usuarios a interpretar los gráficos fácilmente. Si
hay demasiadas líneas o barras en un gráfico, agregar líneas de cuadrícula puede saturar aún
más el gráfico. Las líneas de cuadrícula gruesas y de colores oscuros definitivamente son
ruidosas y se consideran tinta sin datos. Agregar una gran cantidad de líneas de cuadrícula
también contribuye a que los gráficos sean basura. Utilice líneas más claras y finas con
moderación para permitir al usuario leer el gráfico sin dificultad, teniendo cuidado de no
saturarlo. La siguiente captura de pantalla muestra un gráfico de líneas.con líneas de cuadrícula
que distraen la atencióna la izquierda y un gráfico con líneas de cuadrícula útiles y sin énfasis a
la derecha:
Figura 2.5 – Utilice líneas de cuadrícula en los gráficos con moderación y sin interferir
La simplicidad también implica mostrar o codificar sólo la información suficiente y nada más. A
menudo resulta tentador para un desarrollador de paneles incorporar todos los diferentes
análisis y detalles que los usuarios pueden encontrar útiles en el panel y hacerlo completo. Esta
tendencia conduce a la ineficiencia y dificulta que los usuarios alcancen sus objetivos desde el
tablero. Si los usuarios necesitan examinar las numerosas imágenes y detalles proporcionados
en el panel para obtener respuestas a sus preguntas básicas, el panel no es lo suficientemente
studein.com
simple. Es un caso de Demasiada Información ( TMI ). Un elemento visual (y, por lo tanto, un
panel de control) debe contener la cantidad adecuada de detalles y precisión para cumplir los
objetivos de los usuarios objetivo. El panel que se muestra en la siguiente captura de pantalla
intenta proporcionar información sobre muchos aspectos de Google Ads: campañas, tipos de
anuncios, palabras clave de búsqueda, dispositivos, canales publicitarios, tipos de activos y
más. El nivel de detalle varía y tiene un aspecto desordenado:
Figura 2.6 – Panel que muestra demasiada información
Proporcionar adecuado etiquetas y contexto son clave para que un panel sea fácilmente
legible. Esto incluye elementos como títulos, anotaciones, leyendas, unidades de medida y
más. La coherencia en el estilo y el tamaño de la fuente, la posición de la leyenda, las unidades
de medida y la precisión numérica es un factor clave para lograr la simplicidad en el
diseño. Tener elementos consistentes en el tablero supone una menor carga cognitiva para los
usuarios, ya que no tienen que procesar cada elemento de manera diferente.
Eliminar, ocultar y restar importancia a los detalles de los datos menos importantes es tan
esencial como resaltar los elementos de datos más importantes. Un tablero donde todo está
resaltado es aquel en el que nada destaca. La forma en que se organizan los diversos
elementos de un gráfico o panel también afecta la eficacia y el significado del gráfico. El diseño
studein.com
debe servir a la forma en que los humanos percibimos visualmente la información de forma
natural.
Organizando el diseño
El ojo humano normalmente sigue el camino de Z mientras consume información
visualmente. En este patrón, escaneamos el contenido desde la parte superior izquierda hasta
la parte superior derecha y luego miramos el contenido en diagonal hasta la parte inferior
izquierda y continuamos hasta la parte inferior derecha. Es importante organizar el contenido
de manera que respalde el flujo natural de los movimientos oculares. Tenga esto en cuenta al
diseñar el diseño del tablero para que pueda cumplir sus objetivos de manera más
efectiva. Debes colocar la información más importante en la parte superior izquierda y la menos
importante en la parte inferior derecha. Es más efectivo colocar indicadores clave de
desempeño ( KPI ) yotras métricas clave en la parte superior del panel, seguidas de gráficos
relevantes que explican estas métricas clave y brindan el contexto necesario para interpretar
las métricas adecuadamente.
Organizar filtros en un panel o en un informe es un desafío interesante. En general, todos los
controles de filtro que se aplican a todo el informe o página deben mostrarse juntos en una sola
área. Puede estar hacia la derecha de la página o en la parte superior, pero se debe tener
cuidado de no obstruir la legibilidad de los datos reales por parte de los usuarios y tampoco de
ocupar demasiado espacio destacado del tablero.
Ocasionalmente, cuando un filtro en particular se aplica solo a un gráfico específico o a un grupo
de gráficos, se puede colocar cerca de esos gráficos y usar espacios como bordes o sombreado
de fondo para indicar que estos filtros y gráficos asociados pertenecen a un solo grupo. Ésta es
una aplicación del principio Gestalt de cercamiento. La Figura 5.26 en el Capítulo 5, Diseñador
de informes de Looker Studio , ilustra esta idea.
Otro aspecto importante del diseño de un panel o informe es colocar juntos gráficos y elementos
relevantes, no solo filtros y gráficos asociados, sino también diferentes gráficos que representan
la misma métrica o explican el mismo fenómeno. Además, si la misma leyenda se aplica a varios
gráficos, puede mostrarla solo una vez y colocarla de tal manera que pueda usarse para
interpretar esos múltiples gráficos fácilmente sin tener que mirar hacia adelante y hacia
atrás. Éste es el principio Gestalt de proximidad en juego. El diseño también está influenciado
principalmente por la narrativa y la historia que se cuenta en el panel o el informe.
studein.com
Al organizar gráficos horizontal o verticalmente, asegúrese de alinear los ejes para brindar una
apariencia consistente y limpia. Esto facilita la comparación de diferentes gráficos. Sin relación
con el diseño, el uso de la misma escala para diferentes gráficos que representan la misma
métrica o una similar permite una comparación precisa y más sencilla. En algunos casos, sin
embargo, puede no ser razonable tener todos los gráficos configurados en la misma escala. Por
ejemplo, los ingresos por ventas en Canadá pueden oscilar entre 500.000 y 10 millones de
dólares, mientras que en Japón podrían oscilar entre 10.000 y 50.000 dólares. Supongamos
que los está visualizando como gráficos separados en el mismo panel y no desea que los
usuarios hagan comparaciones directas. En tales situaciones, trate de no colocarlos en el lienzo
cerca uno del otro para desalentar la comparación directa. Además, etiquete claramente los ejes
y asegúrese de que la información se transmita de una manera visualmente comprensible.
Exactitud de la información presentada.
El objetivo principal de una visualización de datos o un panel de control es mostrar información
de forma precisa y significativa. No debe inducir a error a los usuarios a percibir la información
de forma incorrecta ni a sacar conclusiones inexactas. Todos los principios de diseño que
hemos analizado en esta sección hasta ahora solo deben aprovecharse para cumplir este
propósito final; por ejemplo, simplificar el tablero no debe quitarle su significado o claridad
previstos. Otras formas técnicamente correctas pero indeseables de implementar estos
principios que afectan la precisión general incluyen, entre otras, las siguientes:
• Destacar elementos erróneos, que pueden dar lugar a interpretaciones incorrectas.
• Agrupar elementos inapropiados o incohesivos, que pueden contar una historia
totalmente diferente a la prevista.
• No elegir el tipo correcto de gráfico, lo que hace que los usuarios interpreten los datos
incorrectamente
La siguiente sección examina los principios clásicos de la teoría Gestalt y los atributos del
procesamiento pre atento que explican las diversas tendencias de la visión humana y cómo se
relacionan con la visualización de datos.
studein.com
Repasando los principios Gestalt de la
percepción visual.
Gestalt significa un todo o forma organizada. Este conjunto de principios fue desarrollado por
el alemán psicólogos en la década de 1920 para describir cómo los humanos perciben e
interpretan visualmente el mundo que los rodea. Desde entonces, estos principios se han
convertido en la base de todo el trabajo de diseño, desde sitios web, logotipos, plataformas de
aprendizaje electrónico, mapas, anuncios y más, hasta visualizaciones de datos. La siguiente
captura de pantalla enumera los principios clave de Gestalt que ayudan a diseñar
visualizaciones de datos que tengan el sentido más intuitivo:
Figura 2.7 – Principios Gestalt de la percepción visual
Lo haremos Revise cada uno de estos principios y cómo se pueden aplicar a las visualizaciones
de datos en el resto de esta sección.
studein.com
Proximidad
El principio de proximidad postula que tendemos a percibir los elementos que están colocados
cerca unos de otros como pertenecientes a un solo grupo. En la siguiente captura de pantalla,
podemos ver tres grupos de círculos según la distancia relativa entre los círculos:
Figura 2.8 – Principio Gestalt de proximidad
En el caso de un tablero, la forma en que se utilizan los espacios en blanco para organizar varios
gráficos indica qué gráficos o elementos están relacionados. Esto permite a los usuarios leer e
interpretar ciertos elementos visuales juntos.
El principio de proximidad también se puede utilizar dentro de una única visualización. Podemos
observar tres grupos de puntos de datos en el diagrama de dispersión que se muestra en la
siguiente captura de pantalla en función de su proximidad o falta de ella:
Figura 2.9 – Principio de proximidad en juego en un diagrama de dispersión
studein.com
En el gráfico de líneas que se muestra en la siguiente captura de pantalla, la ubicación de las
etiquetas cerca de las líneas respectivas indica claramente qué línea representa qué país. Esto
elimina la necesidad de una leyenda separada y ayuda a reducir el desorden:
Figura 2.10 – Utilizando el principio de proximidad con etiquetas
Otro ejemplo que demuestra la utilidad del principio de proximidad es el gráfico de barras
agrupadas que se muestra en la siguiente captura de pantalla. Si la intención es comparar
fácilmente las ventas entre diferentes productos para cada país, agrupar los países no es una
representación adecuada, ya que los usuarios deben comparar las barras que están muy
espaciadas entre sí:
Figura 2.11 – Gráfico de barras agrupadas que no facilita la comparación de ventas entre
diferentes productos para cada país
studein.com
En cambio, por agrupar diferentes trimestres como se muestra en la siguiente captura de
pantalla, resulta más fácil para el usuario comparar las ventas entre trimestres de cada país. Por
lo tanto, es importante comprender cómo se deben interpretar los datos y diseñar la imagen en
consecuencia:
Figura 2.12 – Agrupación adecuada para permitir una comparación más fácil de las ventas entre
diferentes productos para cada país
El principio de proximidad anima a colocar cerca unos de otros elementos que están
relacionados entre sí o aquellos que deben interpretarse juntos.
Semejanza
Percibimos elementos visuales que son similares entre sí como relacionados. El principio de
similitud dice que los elementos que comparten atributos como color, forma, tamaño, etc., se
consideran pertenecientes a un grupo. En la siguiente captura de pantalla, identificamos
principalmente dos grupos de círculos según su color:
Figura 2.13 – Principio Gestalt de similitud por color
De la misma manera, los siguientes elementos se reconocen como dos grupos diferentes:
círculos y triángulos, según la forma compartida:
studein.com
Figura 2.14 – Principio Gestalt de similitud por forma
El principio de similitud es crucial para representar datos visualmente y dependemos en gran
medida de él. Una aplicación común es el uso de leyendas. En función del color compartido,
interpretamos lo que representan los elementos de un gráfico. Puedes ver un ejemplo de esto
aquí:
Figura 2.15 – Uso del color para identificar datos relacionados en un diagrama de dispersión
En la captura de pantalla anterior, el principio de similitud se aplica mediante el uso de color
compartido de dos maneras: para percibir dos grupos de puntos e identificar que los puntos
azules pertenecen a la región Este y los naranjas a la región Oeste , con la ayuda de la leyenda.
studein.com
Continuidad
El principio de continuidad dice que seguimos formas, curvas y líneas continuas para dar sentido
a los datos. En la siguiente captura de pantalla, los círculos colocados a lo largo de la curva
suave se perciben como relacionados en comparación con otros círculos aleatorios:
Figura 2.16 – Principio de continuidad Gestalt
Al diseñar gráficos, el principio de continuidad se manifiesta de múltiples maneras. Nos permite
ver una línea continua incluso cuando hay espacios debido a datos faltantes en lugar de tratar
esas dos líneas discontinuas como separadas. La siguiente captura de pantalla ilustra este
fenómeno:
Figura 2.17 – Principio de continuidad en juego con datos faltantes
Otro en el lugar donde podemos utilizar el principio de continuidad es en los gráficos de
barras. El gráfico de la izquierda en la siguiente captura de pantalla no es fácil de interpretar
porque los productos están ordenados alfabéticamente y las barras no siguen un camino
fluido. Por otro lado, el gráfico de la derecha está ordenado por la longitud de las barras, lo que
da como resultado un patrón continuo y lo hace mucho más legible:
studein.com
Figura 2.18 – Aplicación del principio de continuidad al gráfico de barras con clasificación
El principio de continuidad nos permite percibir elementos que están dispuestos a lo largo de
una línea o curva como relacionados entre sí o como parte del mismo grupo.
Cierre
El principio en el concepto de cierre establece que tendemos a percibir formas y figuras
familiares como un todo, aunque estén rotas y tengan espacios. En la siguiente captura de
pantalla percibimos las formas como una estrella y un círculo, aunque no están completas:
Figura 2.19 – Principio Gestalt de cierre
Una común forma en que aplicamos el principio de cierre al diseño de gráficos es permitiendo
a los usuarios ver los dos ejes del gráfico y percibir el límite completo del gráfico. Esto elimina
la necesidad de utilizar bordes explícitos y otros aspectos que dan como resultado una
apariencia desordenada. Puedes ver un ejemplo de esto aquí:
studein.com
Figura 2.20 – Aplicación del principio de cierre con ejes abiertos
La captura de pantalla anterior muestra un gráfico con dos líneas de eje que nos permiten
discernir el límite completo del gráfico, a pesar de representar solo un límite parcial. Muchas
herramientas de visualización proporcionan este comportamiento de forma predeterminada y no
encierran el gráfico por todos lados. Esto ayuda a proporcionar una apariencia ordenada.
Recinto
El principio de cercamiento dice que identificamos aquellos elementos encerrados por un límite
como pertenecientes a un grupo. En la siguiente captura de pantalla, consideramos que los
círculos encerrados por la forma están relacionados:
Figura 2.21 – Principio Gestalt del cerramiento
studein.com
En el siguiente ejemplo del panel, el conjunto de métricas de KPI están encerrados dentro de
un cuadro gris y deben percibirse como relacionados y representar un grupo:
Figura 2.22 – Uso del principio de encerramiento en un tablero para agrupar métricas de KPI
relacionadas
Dentro de un gráfico, podemos incluir ciertos puntos de datos para que el usuario los trate como
un grupo o incluso dirija su atención a esos elementos, como se ilustra aquí:
Figura 2.23 – Uso del principio de encerramiento dentro de un gráfico
El gráfico anterior muestra el monto de ventas de clientes nuevos y habituales en diferentes
meses del año. Se lleva a cabo una campaña de promoción de ventas durante los meses
de abril a junio , dirigida a nuevos clientes. Destacar estos meses en el gráfico ayuda a dirigir
la atención del usuario para comprender el impacto de la promoción.
Conectividad
Vemos elementos que están conectados como relacionados en lugar de elementos que están
desconectados. Este principio de conectividad se puede ilustrar en la sencilla captura de
studein.com
pantalla que aparece a continuación, que muestra dos instancias de la colección de círculos
donde están conectados de dos maneras diferentes: vertical y horizontalmente:
Figura 2.24 – Principio Gestalt de conectividad
Vemos tres y dos grupos de círculos respectivamente, según cómo están conectados. En la
siguiente captura de pantalla, el gráfico de líneas de la izquierda muestra la ley de conectividad
donde, en virtud de la línea conectada, los puntos se interpretan como relacionados entre sí. Por
el contrario, los puntos de datos en el diagrama de dispersión de la derecha no expresan
ninguna conexión:
Figura 2.25 – Sólo los puntos que están conectados entre sí parecen estar relacionados
En el gráfico que se muestra en la siguiente captura de pantalla, la anotación de texto está
conectada al punto de datos para indicar que la anotación se aplica solo a este punto de datos
específico. Este es otro ejemplo del uso del principio de conectividad en el diseño de objetos
visuales de datos:
studein.com
Figura 2.26 – Uso del principio de conexión con anotaciones
Conectividad generalmente ejerce una mayor influencia en la percepción que la proximidad o la
similitud. Significa que los elementos que están conectados entre sí se perciben como un grupo,
incluso si son igualmente cercanos a otros elementos o similares en color o forma a otros.
Prägnanz
Nosotros discutimos la importancia de la simplicidad al diseñar paneles y elementos visuales en
la primera sección del capítulo. La teoría de la Gestalt también enfatiza la simplicidad a través
del principio de prägnanz, que significa concisión o simplicidad. Dice que el cerebro humano
tiende a ver e interpretar patrones y objetos complejos y ambiguos de la forma más simple
posible. Necesitamos diseñar cosas de la forma más simple que pueda transmitir la información
para no imponer una carga cognitiva indebida a los usuarios.
En la siguiente captura de pantalla, es probable que veamos dos círculos superpuestos en cada
caso, en lugar de un montón de curvas o formas separadas juntas:
studein.com
Figura 2.27 – Principio Gestalt de prägnanz
En el caso de las visualizaciones de datos, el principio de prägnanz toma la forma de ordenar
las barras y columnas o representar líneas de tiempo de izquierda a derecha en lugar de en
orden inverso, o incluso agregar una línea de tendencia a un gráfico de series de tiempo para
proporcionar una visualización más simple. intuitivo y más lógico representación de la
información. La figura 2.18 , según el principio de continuidad, muestra cómo un gráfico de
barras ordenado apropiadamente es más fácil de leer que de otra manera. En este ejemplo,
ambos principios dictan la misma representación:
Figura 2.28 – Las líneas de tendencia proporcionan una presentación más sencilla de datos de
series de tiempo
El gráfico de líneas que se muestra en la captura de pantalla anterior muestra la aplicación del
principio de prägnanz mediante el uso de líneas de tendencia y el orden natural del eje temporal
de izquierda a derecha.
Figura y suelo
En el principio de figura y fondo describe que vemos las cosas como una figura en primer plano
o en segundo plano. Podemos utilizar esta tendencia a colocar elementos importantes y útiles
en primer plano y poner elementos menos importantes o de apoyo en segundo plano. Esto
ayuda a guiar la atención de los usuarios hacia la información clave. Es esencial crear una
distinción clara entre la figura y el fondo a través de suficiente contraste y otros aspectos como
el enfoque (desenfocar las cosas en el fondo al difuminarlas, difuminarlas o teñirlas), el tamaño
(hacer que los elementos en primer plano sean más grandes en tamaño en comparación con
los del fondo), etc. La imagen clásica del jarrón de Rubin que se muestra en la siguiente captura
de pantalla es un ejemplo de ilusión visual que se produce cuando un elemento puede ser una
studein.com
figura o un fondo. Si bien esta relación desestabilizada entre figura y fondo puede tener su
aplicación, las formas de diseño en las que hay poca distinción entre el primer plano y el fondo
generalmente deben evitarse en las visualizaciones de datos:
Figura 2.29 – Jarrón de Rubin con relación figura-fondo desestabilizada
Un buen ejemplo de este principio en juego en los gráficos es un mapa de burbujas geográfico
en el que el mapa forma el fondo y las burbujas forman el primer plano, como se ilustra aquí:
Figura 2.30 – El mapa de burbujas geográficas proporciona un ejemplo de una relación estable
entre figura y fondo.
studein.com
Cuando utilice fondos de gráficos o temas de tablero con fondos poco claros, elija los colores
con cuidado para lograr suficiente contraste para que los elementos del primer plano puedan
identificarse clara e inequívocamente. Puedes ver un ejemplo de esto aquí:
Figura 2.31 – Utilizando el principio de figura-fondo con contraste
En la captura de pantalla anterior, el gráfico de la izquierda es una mala elección de diseño, ya
que genera mayor fatiga ocular y, por lo tanto, es más difícil de leer.
Punto focal
Finalmente, en el principio de punto focal establece que los elementos que destacan de los
demás son más notorios que el resto. Podemos utilizar propiedades distintivas como color,
forma, tamaño, orientación, etc. para crear puntos focales y captar la atención del usuario. En
la siguiente captura de pantalla, se utilizan dos propiedades (color y forma) para crear un punto
focal:
Figura 2.32 – Principio Gestalt del punto focal
studein.com
Este principio se basa en el fenómeno de procesamiento preatentivo en la visión humana a
través del cual los humanos procesan la información de manera subconsciente y
automática. Algunos de los atributos que ayudan con el procesamiento previo a la atención,
como los identifica Colin Ware en su libro Visualización de información: percepción para el
diseño , incluyen tono, intensidad, longitud, ancho, curvatura, orientación, forma, tamaño,
marcas agregadas, agrupación espacial, dos posicionamiento dimensional ( 2D ),
desenfoque, recinto y movimiento (parpadeo o movimiento). Puedes ver una ilustración de estos
atributos aquí:
studein.com
Figura 2.33 – Atributos preatentos
De estos atributos, sólo algunos (como la longitud y la posición 2D) pueden codificar bien
información cuantitativa; algunos otros (como la intensidad, el ancho de la línea, el tamaño, el
desenfoque y el parpadeo) pueden codificar información cuantitativa limitada, y otros (como la
forma, el tono, etc.) no codifican ninguna información cuantitativa.
Los gráficos de visualización de datos utilizan varios atributos de atención previa para
representar datos. Por ejemplo, un gráfico de barras o columnas utiliza la longitud para permitir
a los usuarios identificar rápidamente los valores más grandes y más pequeños. El uso judicial
del color ayuda a resaltar elementos apropiados a los que los usuarios deben prestar
atención. Considere el siguiente ejemplo donde, como parte del informe de evaluación del
desempeño de Cartier, el gráfico de columnas utiliza un color distintivo para resaltar las cifras
de ventas de Cartier. Esto dirige la atención de los usuarios inmediatamente a su desempeño
de ventas en relación con sus pares:
Figura 2.34 – Uso del tono como atributo de procesamiento previo a la atención en un gráfico
de barras
en un tablero un gráfico, estos atributos de color, tamaño, posición, etc. también se pueden usar
con elementos textuales como anotaciones, números de KPI, actualizaciones importantes,
instrucciones y más. Por ejemplo, en un objeto visual de tarjeta, el valor del período actual se
studein.com
muestra en un tamaño de fuente más grande y el número comparativo con el período anterior
se muestra en un tamaño más pequeño, como se muestra a continuación:
Figura 2.35 – Ejemplo de uso de atributos preatentivos de color, tamaño y posición para dirigir
la atención de los usuarios de manera adecuada
Mostrar notas ocasionales sobre la calidad de los datos, la latencia de los datos u otra
información pertinente en el tablero usando un tono brillante o un ícono en una posición
destacada garantiza que los usuarios no se pierdan esta información importante. Puedes ver un
ejemplo de esto aquí:
Figura 2.36: Panel que muestra una nota importante en la parte superior junto con un ícono
En la captura de pantalla anterior muestra la parte superior de un panel con una nota importante
sobre datos de ventas faltantes o incompletos. La nota va acompañada de un icono relevante
en un color brillante para captar la atención del usuario.
Usar el color sabiamente
Color es quizás el atributo de procesamiento previo a la atención más importante que nos ayuda
a centrarnos y distinguir diferentes elementos fácilmente. Por otro lado, al elegir mal los colores,
ocultamos o distraemos a los usuarios del propósito de lo visual. En esta sección iremos sobre
algunas de las mejores prácticas para utilizar el color de forma eficaz.
studein.com
Utilice menos colores distintos
Teniendo demasiados colores distintos en una imagen o en un tablero pueden causar tensión
innecesaria en los ojos. Nada destaca realmente entre una mezcla de colores dispares y resulta
difícil procesar la información. Tres es una buena cantidad de colores que se pueden utilizar en
un tablero. Puede incluir hasta un par de colores adicionales que estén relacionados o en el
mismo espectro que los colores principales. La Figura 1.7 en el Capítulo 1 , Introducción a la
narración de datos , es un buen ejemplo del uso de menos colores en un tablero. El mismo
tablero que usa varios colores diferentes parece ruidoso, como se muestra en la siguiente
captura de pantalla:
Figura 2.37 – Panel de ejemplo que utiliza demasiados colores
Siguiendo la misma idea, no uses el color sin sentido. En el gráfico de barras que se muestra
en la siguiente captura de pantalla, diferentes productos se representan en diferentes colores,
studein.com
pero el color no proporciona ninguna información adicional. De hecho, distrae mucho y dificulta
que los usuarios lean el gráfico:
Figura 2.38 – Gráfico de barras con una aplicación de color sin sentido
Debe ser muy deliberado al elegir los colores de sus visualizaciones para brindar la
mejor experiencia de usuario ( UX ).
Elija una paleta de colores y un esquema apropiados
Puede que elija temas y una paleta de colores que estén disponibles en muchas herramientas
visuales o cree los suyos propios en función de los colores del logotipo de la empresa, los
colores del sitio web u otras necesidades específicas. Un tema de informe claro versus oscuro
es la primera opción para hacer. Cada uno tiene su propio atractivo y beneficios. Un fondo claro
funciona mejor cuando hay mucho texto para mostrar, ya que las investigaciones indican que
leemos texto oscuro sobre un fondo claro de manera más eficiente que viceversa ( Nielsen
Norman Group : https://www.nngroup.com/articles/dark- modo/ ). Un tema claro también le
permite utilizar una gama más amplia de colores que un tema oscuro. Por otro lado, los temas
oscuros lucen más estilosos y elegantes. Los fondos oscuros funcionan mejor cuando el diseño
es minimalista. También debería considerar si su informe pudiera imprimirse; en este caso, un
tema claro ahorrará mucha tinta en la impresora. Ya sea un fondo claro u oscuro, elija colores
que proporcionen un buen contraste. Con temas oscuros, elija colores más claros y no
saturados para una mejor legibilidad. Los colores utilizados para los elementos gráficos que no
son datos en el tablero, como texto, formas y líneas, deben ser mínimos, no intrusivos (a menos
studein.com
que estén específicamente destinados a llamar la atención) y proporcionar suficiente
contraste. Hay varios comprobadores de contraste de color disponibles en la web que le ayudan
a probar el contraste del fondo y el primer plano (los siete principales comprobadores y
analizadores de contraste de color gratuitos: https://axesslab.com/top-color-contrast-
checkers/). El resto de la sección analiza los colores que se utilizarán para los datos.
Utilizar una combinación de colores monocromática con una gama de matices y tonos distintos
y ampliarla con un único color de contraste es una estrategia común y eficaz. Esto no sólo ayuda
a reducir la sobrecarga cognitiva al apegarse principalmente a variaciones de un solo color, sino
que también permite enfatizar y resaltar con el uso del color de contraste. Puedes ver un ejemplo
de esto aquí:
Figura 2.39 – Esquema de color monocromático con un color de contraste único opcional
Aprovechar un solo color brillante con moderación para resaltar y enfatizar lo necesario es una
estrategia de diseño muy útil que da como resultado un tablero más limpio y potente que dirige
eficientemente la atención de los usuarios a la información más destacada.
En visualizaciones individuales, dependiendo del tipo de datos que intente representar, puede
elegir esquemas de color secuenciales, divergentes o cualitativos. Una combinación de colores
secuencial suele ser de naturaleza monocromática, es decir, basada en un solo color. Comienza
con el color principal o matiz de origen y continúa con intensidad decreciente. Puedes ver un
ejemplo de esto aquí:
Figura 2.40 – Color secuencial para representar datos cuantitativos
Por el contrario, en el esquema de color divergente es policromático. Utiliza dos colores distintos
en cada extremo del espectro, pasando de un tono a otro a otro intermedio en los niveles más
bajos de intensidad. Se puede usar un tono adicional en medio del esquema de color divergente
studein.com
para representar tres rangos diferentes de valores en lugar de solo los dos extremos, como se
muestra aquí:
Figura 2.41 – Esquema de color divergente con dos (a la izquierda) y tres (a la derecha) tonos
para enfatizar los valores extremos en ambos extremos del continuo
La información cuantitativa, ya sea discreta o continua, se representa mejor mediante esquemas
secuenciales o divergentes. Una paleta divergente ayuda a enfatizar los extremos y debe usarse
cuando hay un punto de pivote claro y significativo en el valor métrico que se representa. Puede
ser cero para métricas como ganancias (ganancias o pérdidas) y tasa de crecimiento
(crecimiento positivo o crecimiento negativo), o un punto de referencia como el nivel de pobreza,
el valor objetivo, la mediana, el promedio, etc. Una combinación de colores divergente también
permite a los usuarios ver más diferencias en los datos.
Una paleta secuencial es útil para mostrar la variación en una métrica sin un punto medio
significativo. Los ejemplos incluyen métricas como el monto de ventas y el número de usuarios,
que van desde los valores más bajos hasta los más altos, y no existe un valor central bien
definido donde el cambio de tono sea significativo. Las paletas secuenciales son más intuitivas
de leer ya que los valores más altos y más bajos se pueden discernir fácilmente. Las paletas
divergentes, por otro lado, a menudo requieren una clave para que los usuarios comprendan
qué colores representan valores más deseables y menos deseables. Una aplicación común del
uso de un esquema de color divergente para representar datos es un mapa de calor donde se
utilizan dos tonos distintos para indicar fenómenos fríos y calientes respectivamente.
Para codificar información cualitativa como productos, categorías, regiones, etc., debe utilizar
un esquema de color categórico, que pueda abarcar todo el espectro de tonos o solo un
subconjunto de ellos. Aquí se proporciona un ejemplo de paleta categórica:
Figura 2.42 – Esquema de colores categóricos para representar datos cualitativos
desordenados
studein.com
Para datos cualitativos ordinales como el nivel de riesgo (bajo, medio, alto) o el nivel de acuerdo
en la escala Likert (muy en desacuerdo a muy de acuerdo), etc., un esquema monocromático
como el que se muestra a continuación se adapta mejor. De manera similar a los valores
continuos, la claridad u oscuridad del color puede indicar la posición ordinal del valor cualitativo:
Figura 2.43 – Esquema de colores monocromáticos para representar datos cualitativos
ordinales
Surge un problema interesante cuando se intenta utilizar el color para representar una gran
cantidad de categorías. Por un lado, introduce mucho ruido en el gráfico. Por otro lado, si el
número de categorías excede el número de colores distintos disponibles en la paleta, los colores
se reutilizan. Esto introduce conflicto y confusión. A menudo, este problema se puede abordar
de las siguientes maneras:
• Limite la cantidad de categorías que se mostrarán en el gráfico filtrando solo las
categorías clave que interesan a los usuarios (por ejemplo, las cinco principales).
• Identifique de tres a cinco valores de dimensiones clave y agrupe todos los valores
menos importantes restantes en un grupo Otros . Puede aplicar un color apagado al
grupo Otro para restarle énfasis.
• Escoge untipo de gráfico diferente para que las categoríasNo es necesario representarlo
mediante un color (por ejemplo, utilizando un gráfico de barras en lugar de un gráfico de
anillos).
Utilice el color de forma coherente en todo el tablero
Usa siempre lo mismo color para la misma dimensión o valor métrico en todo el tablero. No
hacerlo da como resultado una UX muy pobre. El uso del color de manera consistente alivia la
studein.com
carga de los usuarios y les permite comprender e interpretar los gráficos más rápidamente. El
uso de diferentes colores para el mismo atributo en diferentes gráficos requiere que los usuarios
decodifiquen la codificación de colores de cada gráfico por separado. Aplicar color de forma
conflictiva añade complejidad adicional y confunde al usuario. Por ejemplo, en el gráfico que se
muestra en la siguiente captura de pantalla, los dos colores azul y naranja se usan de manera
inconsistente para los países Países Bajos e Irlanda . Esto no es deseable y perjudica la
eficacia del panel de control:
Figura 2.44 – Uso conflictivo del color en los gráficos
Algunos colores tienen un significado natural y es un buen augurio para nosotros usarlos de una
manera que se alinee con los significados asociados. Quizás la codificación más utilizada son
los colores del semáforo para los KPI y otras métricas: verde para representar lo bueno (un valor
positivo o un aumento), rojo para representar lo malo (un valor negativo o una disminución) y
(espaciado opcionalmente) amarillo. para representar cautela respecto de valores que deben
ser vigilados. El uso de estos colores de una manera que desafíe esta asociación natural da
como resultado una experiencia de usuario deficiente.
En el siguiente en la captura de pantalla, la tarjeta visual de la izquierda muestra la tasa de
cambio negativa apropiadamente en rojo. Sin embargo, la imagen de la derecha muestra una
tasa de cambio negativa en las ventas con un color verde, lo cual es contradictorio:
Figura 2.45 – Uso del color de forma contraria a la intuición
De manera similar, al elegir una combinación de colores divergente, especialmente en mapas
de calor, elija adecuadamente los colores cálidos y fríos. Seleccione colores cálidos como rojo,
studein.com
naranja y amarillo para representar fenómenos calientes como una mayor actividad de los
usuarios, mayores ventas, un mayor número de problemas, etc., y colores fríos como azul, verde
y morado para indicar fenómenos fríos como como menor actividad, menores ventas y menor
número de emisiones respectivamente. Puedes ver un ejemplo de esto aquí:
Figura 2.46 – Mapa de calor con colores cálidos y fríos
En el mapa de calor en la captura de pantalla anterior representa fenómenos de frío y calor
utilizando un esquema de color divergente apropiado.
Una gran advertencia al usar y confiar en los colores verde versus rojo para mostrar patrones
deseables e indeseables es que no todos pueden distinguir estos colores entre sí. Esto se puede
mitigar de una o más maneras, de la siguiente manera:
studein.com
• Evite por completo el uso de rojo y verde juntos en las visualizaciones. El uso de colores
alternativos requerirá una clave o leyenda para que los usuarios comprendan lo que
significan los colores.
• Utilice íconos como flechas y otras señales visuales además del color o en lugar del
color para indicar lo bueno y lo malo.
• Usa diferentes intensidades para los colores rojo y verde, cuando se usan juntos. Esto
permite a las personas con ceguera roja y verde diferenciarlos bien, ya que la deficiencia
en la visión de los colores se debe principalmente a no identificar ciertos tonos, más que
sus intensidades.
Considere esquemas de color inclusivos
Por último, pero no menos importante, elige esquemas de color que sean aptos para daltónicos
para que puedan ser universalmente accesibles. Esto es especialmente importante para
contenido ampliamente distribuido. El daltonismo es mucho más frecuente de lo que pensamos:
afecta aproximadamente al 4,5% de toda la población. Hay muchos tipos diferentes de
daltonismo, el más común es el daltonismo, que afecta a casi el 99% de la población
daltónica. Este tipo de deficiencia en la visión de los colores ( CVD ) toma varias formas:
aquellos que no pueden ver el color rojo en absoluto (protanopía), aquellos que pueden
identificar solo algunos tonos de rojo (protanomalía), aquellos que no pueden ver el color verde
en absoluto (deuteranopía) y aquellos que pueden identificar solo algunos tonos. de verde
(deuteranomalía). Si bien todavía podemos elegir ciertos tonos de rojo o verde y hacer que las
personas con ECV rojo-verde distingan entre los dos, no todos ven esos colores como rojo y
verde. El azul es generalmente un color seguro y se usa ampliamente en visualizaciones de
datos. Elija y cree paletas de colores seguras para daltónicos con cuidado. Todas las
herramientas de visualización de datos e informes proporcionan paletas aptas para
daltónicos.para que elijas. Hay herramientas disponibles, como la proporcionada por David
Nichols en https://davidmathlogic.com/colorblind/ , que pueden ayudarle a comprender cómo las
personas con ECV realmente ven diferentes colores y a crear sus propias paletas adaptadas a
los daltónicos. Algún contraste de colorLas damas ( Analizador de contraste de
color ( CCA ) https://www.tpgi.com/color-contrast-checker/ ) también determinan cómo el
contraste de color puede afectar a las personas con ECV.
studein.com
Resumen
La narración de datos es una hábil combinación de representación narrativa y visual. En este
módulo, aprendimos sobre los principios de diseño que forman la base para crear
visualizaciones de datos efectivas y convincentes. Estos principios están arraigados en la
naturaleza de la visión y percepción humana. Revisamos los principios de la percepción visual
de la Gestalt, antiguos, pero aún muy aplicables, y analizamos tres temas principales que guían
la narración de datos en este capítulo.
Entendimos que la simplicidad es el sello distintivo de una gran historia de datos. Mantener las
cosas simples y directas y eliminar todo el ruido y las distracciones del diseño son clave para
una excelente experiencia de usuario. Yendo más allá, aprendimos que es importante organizar
el diseño del tablero para presentar una imagen coherente y que se ajuste a la narrativa prevista.
Por encima de todo, el objetivo principal debe ser representar los datos con precisión. Un panel
de control bien diseñado con información incorrecta no sólo será ineficaz sino también
perjudicial al conducir a conocimientos y decisiones incorrectos.
El color es un elemento de diseño importante que necesita una aplicación
cuidadosa. Examinamos algunas pautas sobre cómo usarlo apropiadamente en imágenes de
datos, así como en todo el tablero. Aprendimos sobre varios esquemas de color y sus
aplicaciones. El siguiente capítulo analiza cómo elegir los tipos de visualización correctos y los
errores comunes que se deben evitar al diseñar visualizaciones.
