Percepción visual¶

Ejercicio visual-perception-annex.pdf · PDF

Estás en plena pelea contra un jefe. No lees tu vida. Echas un vistazo a una barra de la esquina, ves que es corta y roja, y te bebes una poción. Medio segundo, sin leer, sin cálculos.

Esa esquina de la pantalla es el HUD (heads-up display): la barra de vida, el minimapa, el contador de munición. Funciona porque alguien lo diseñó para un ojo que no tiene tiempo. Un gráfico tiene exactamente el mismo problema. Tu lector le dedica un vistazo, y en ese vistazo el gráfico o responde a la pregunta o lo pierde.

En las Unidades 1 y 2 obtuviste los datos y los limpiaste. Ahora tienes games_clean: 26,685 juegos de Steam, ordenados y fiables. Esta unidad es la última etapa del ciclo de vida de los datos: representar. Antes de dibujar un solo gráfico, necesitas saber cómo lee uno el ojo.

Qué aprenderás

Nombrar cuatro atributos preatentivos (color, tamaño, posición, forma) y usar uno para que un valor destaque
Explicar por qué una barra se lee mejor que un sector de un gráfico de sectores, con el ranking de Cleveland y McGill (1984)
Usar el color para significar algo, nunca como decoración
Construir una jerarquía visual: decidir qué ve primero el lector
Aplicar la idea de data-ink de Tufte (1983) y nombrar qué borrar de un gráfico sobrecargado
Desactivar la trampa: por qué "un buen gráfico es un gráfico bonito" es falso

Cuenta los sietes¶

Prueba esto antes de seguir leyendo. ¿Cuántos sietes hay en la primera cuadrícula? Cuéntalos y fíjate en cuánto tardas.

Dos copias de la misma cuadrícula de 90 dígitos. En la primera todos los dígitos son negros. En la segunda los seis sietes están en índigo y en negrita y el resto en gris.

Ahora mira la segunda cuadrícula. La respuesta es 6, y la tenías antes de decidir contar.

Los datos no cambiaron. Los dígitos son los mismos, en los mismos sitios. Cambió una propiedad visual, y tus ojos hicieron el trabajo solos.

Un atributo preatentivo es una propiedad visual que el ojo detecta automáticamente, de un solo vistazo, antes de que le prestes atención consciente.

¿Cuánto dura "un solo vistazo"? Los investigadores de la visión usan un umbral de unos 200 a 250 milisegundos, un cuarto de segundo. Es menos tiempo del que tu ojo necesita para empezar a moverse hacia otro punto, así que lo que detectas en esa ventana lo detectaste sin buscar.

El efecto tiene nombre: pop-out (destacar). Los sietes saltaron a la vista desde la cuadrícula.

Hay muchos atributos preatentivos. Estos son los cuatro que usarás toda la unidad, cada uno ya trabajando en tu HUD:

Atributo	En el HUD	En un gráfico
Color	El punto enemigo es rojo sobre un minimapa gris	Una barra resaltada entre barras grises
Tamaño / longitud	La barra de vida se acorta	Longitud de una barra, tamaño de un punto
Posición	Dónde está el punto en el minimapa	Altura de un punto en un eje
Forma	Un triángulo marca el objetivo	Marcadores distintos para series distintas

Cuidado: el pop-out funciona con una sola cosa a la vez

Imagina otra vez la cuadrícula, pero con cada dígito de un color distinto. Nada destaca. Los sietes sobresalían porque eran la excepción. Si lo resaltas todo, no has resaltado nada.

La posición gana al ángulo¶

Un gráfico convierte números en algo que puedes ver. Esa traducción se llama codificación: este número se convierte en una longitud, aquel en un ángulo, otro en un tono de color.

No todas las codificaciones son iguales. Aquí tienes cinco tipos de Pokémon de la tabla de clase pokemon, dibujados dos veces. ¿Qué tipo tiene más Pokémon? ¿Y cuál tiene menos?

Los mismos cinco recuentos de Pokémon por tipo primario dibujados como un gráfico de sectores con cinco sectores parecidos y como cinco barras. Las barras muestran bug 79, electric 61, fire 59, psychic 64 y rock 65.

En el gráfico de sectores probablemente encontraste bug, y luego te quedaste atascado. ¿Es fire más pequeño que electric? Los sectores son 59 y 61, y tu ojo no los distingue. En las barras lo ves al instante, incluso sin los números encima.

Esto no es una opinión. En 1984 dos estadísticos, William Cleveland y Robert McGill, publicaron el artículo Graphical Perception en el Journal of the American Statistical Association. Enseñaron gráficos sencillos a la gente, le pidieron que juzgara los valores y midieron los errores. Después ordenaron las codificaciones, de la que la gente lee con más exactitud a la que lee peor:

Rango	Qué compara el ojo	Gráfico que lo usa
1	Posición sobre una escala común	Gráfico de barras, gráfico de líneas, diagrama de dispersión
2	Posición en escalas no alineadas	Gráficos pequeños uno al lado de otro
3	Longitud, dirección, ángulo	Barras apiladas, sectores
4	Área	Burbujas
5	Volumen, curvatura	Gráficos 3D
6	Sombreado, saturación del color	Mapa de calor

Cuanto más arriba en la tabla, más precisa es la lectura. Las barras están en el rango 1: todas arrancan de la misma línea, así que solo comparas dónde acaban. Un gráfico de sectores te pide comparar ángulos, rango 3.

Así que el gráfico de barras es tu respuesta por defecto. Un gráfico de sectores tiene que ganarse su sitio, y en Sectores, mapa de calor y otros verás exactamente cuándo lo hace.

Por qué el HUD usa una barra

Tu vida es una barra, no un gráfico de sectores ni un tono de rojo ligeramente distinto. El ranking lo explica: el extremo de una barra sobre una escala fija es una posición, rango 1, y un tono es rango 6. En una pelea quieres la codificación que se lee más rápido y con menos errores.

El color significa algo¶

El color es la herramienta de pop-out más potente que tienes. Precisamente por eso no debes malgastarlo.

El color tiene tres trabajos honestos:

Trabajo	Qué dice	Ejemplo
Resaltar	"Mira aquí primero"	Una barra índigo entre barras grises
Categoría	"Estos pertenecen a grupos distintos"	Un color por serie en un gráfico de líneas
Estado	"Esto está bien, esto está mal"	Verde si se cumple el objetivo, rojo si está por debajo

La decoración no es un trabajo. Si cada barra tiene un color vivo distinto "para darle alegría", los colores no dicen nada, y aun así el lector intenta averiguar qué significan.

Cuidado: nunca dependas solo del rojo frente al verde

Alrededor de 1 de cada 12 hombres y 1 de cada 200 mujeres tienen una deficiencia de visión del color, y la mayoría confunde el rojo y el verde. Si la única diferencia entre "bien" y "mal" es el color, esos lectores no ven ninguna diferencia. Añade una segunda señal: una etiqueta, un icono, una posición.

Jerarquía visual¶

La jerarquía visual es el orden en que el ojo recorre una imagen: qué ve primero, segundo y tercero.

En un gráfico el ojo sigue un camino predecible: el título, luego la marca más grande o más coloreada, luego el resto. Ese camino lo controlas tú.

Decide qué debe verse primero y hazlo lo más grande o lo único con color. Todo lo demás se calla: gris, fino, pequeño.

Ordenar es jerarquía gratis. Mira las mismas cinco barras, primero en el orden en que las devuelve la base de datos y luego ordenadas:

Orden alfabéticoOrdenado por valor

%%{init: {"themeVariables": {"xyChart": {"plotColorPalette": "#4051b5"}}}}%%
xychart-beta
    title "Juegos de Steam por tramo de precio"
    x-axis ["15 to 30", "30 or more", "5 to 15", "Free", "Under 5"]
    y-axis "Juegos" 0 --> 12000
    bar [2367, 565, 9046, 3094, 11613]

%%{init: {"themeVariables": {"xyChart": {"plotColorPalette": "#4051b5"}}}}%%
xychart-beta
    title "Juegos de Steam por tramo de precio"
    x-axis ["Under 5", "5 to 15", "Free", "15 to 30", "30 or more"]
    y-axis "Juegos" 0 --> 12000
    bar [11613, 9046, 3094, 2367, 565]

Mismos datos, mismo tipo de gráfico. En la versión ordenada, la respuesta a "¿cuál es el tramo más grande?" es lo primero de la izquierda, y el ranking se lee sin comparar barras una a una.

Cuidado: el orden alfabético no es neutro

El alfabético es el orden que nadie pidió. Pone 15 to 30 primero solo porque el carácter 1 va antes que F y U. Ordena por valor, o por el orden natural de la categoría (de más barato a más caro) cuando lo tiene.

Data-ink: borra lo que no muestra datos¶

En 1983 el estadístico estadounidense Edward Tufte publicó The Visual Display of Quantitative Information. Su regla más citada tiene cinco palabras: "Above all else show the data" (por encima de todo, muestra los datos).

El data-ink ratio (proporción de tinta de datos) es la parte de la tinta de un gráfico que muestra datos. El resto es tinta que podría borrarse sin perder un solo número.

Tufte puso nombre a la tinta inútil: chartjunk (basura gráfica). Los sospechosos habituales:

Chartjunk	Por qué se va
Efectos 3D y sombras	No muestran datos, y el volumen es el rango 5 de la tabla de Cleveland y McGill
Líneas de cuadrícula gruesas	Compiten con las barras por la atención
Imágenes de fondo	El ojo lee la imagen antes que los datos
Una leyenda para una sola serie	El título o el eje pueden decirlo
Un color distinto por barra	Color sin significado

Cuidado: data-ink no significa borrarlo todo

Borra la tinta que no muestra datos. Las etiquetas de los ejes, las unidades y un título claro llevan significado: se quedan. Un gráfico sin título ni etiquetas no es minimalista, es un acertijo.

Cuidado: un buen gráfico no es un gráfico bonito

Un HUD con fuegos artificiales alrededor de la barra de vida te hace morir. Un buen gráfico es aquel en el que el lector encuentra la respuesta en segundos. Lo bonito viene después, nunca en su lugar.

Critica un gráfico con cuatro preguntas¶

Aquí tienes un gráfico construido a partir de games_clean: el número de juegos publicados cada año, como gráfico de sectores. Míralo un momento antes de seguir leyendo.

pie
    title Juegos por año de lanzamiento
    "2004" : 53
    "2005" : 58
    "2006" : 112
    "2007" : 143
    "2008" : 183
    "2009" : 334
    "2010" : 340
    "2011" : 364
    "2012" : 426
    "2013" : 556
    "2014" : 1352
    "2015" : 2544
    "2016" : 4503
    "2017" : 6871
    "2018" : 8845

Todo gráfico que hagas o con el que te cruces a partir de ahora recibe las mismas cuatro preguntas:

Pregunta	Una buena respuesta para este gráfico de sectores
¿Qué veo primero? ¿Es lo que importa?	Un arcoíris. No: los colores no llevan significado
¿Qué pregunta responde este gráfico?	No está claro. Probablemente "¿cómo cambiaron los lanzamientos con el tiempo?"
¿Qué regla se salta?	Ángulo en lugar de posición. El tiempo tiene un orden y un círculo no. Quince colores
¿Qué tinta puedo borrar?	La leyenda (etiqueta el eje en su lugar) y los colores

Ahora los mismos 15 números con las reglas aplicadas: posición en lugar de ángulo, años de izquierda a derecha, un solo color.

%%{init: {"themeVariables": {"xyChart": {"plotColorPalette": "#4051b5"}}}}%%
xychart-beta
    title "Juegos publicados en Steam por año"
    x-axis ["2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"]
    y-axis "Juegos" 0 --> 9000
    bar [53, 58, 112, 143, 183, 334, 340, 364, 426, 556, 1352, 2544, 4503, 6871, 8845]

¿Qué puedes leer ahora que el gráfico de sectores escondía? La explosión a partir de 2013: 556 juegos en 2013, 8,845 en 2018. El gráfico de sectores llevaba esa historia dentro y no tenía forma de contarla.

Pruébalo: tu primer gráfico¶

Hora de construir uno. La pregunta: ¿cuántos juegos de Steam hay en cada tramo de precio? Necesitas la tabla games_clean de la Unidad 2 (consulta Recursos si necesitas los datos otra vez).

Paso	Haz esto en Superset	Deberías ver
1	Charts, luego + Chart. En Choose a dataset elige `games_clean`; en Choose chart type elige Bar Chart. Pulsa Create new chart	Un editor de gráficos vacío
2	En la pestaña Data, arrastra `price_band` a X-axis. En Metrics elige `COUNT()`. Pulsa Create chart*	Cinco barras en orden alfabético, `15 to 30` la primera
3	X-Axis Sort By: elige `COUNT()`. Desmarca X-Axis Sort Ascending. Pulsa Update chart*	Barras de la más alta a la más baja
4	Save (arriba a la derecha). Chart name: `UT3 · Games by price band`. Save	El gráfico aparece en la lista de Charts

Empieza el nombre de cada gráfico de esta unidad con UT3 ·. En la Unidad 4 buscarás ese prefijo para construir un cuadro de mando (dashboard).

El gráfico debe mostrar lo que devuelve esta consulta en SQL Lab:

SELECT price_band, COUNT(*) AS n,
       ROUND(100.0 * COUNT(*) / SUM(COUNT(*)) OVER (), 1) AS pct
FROM games_clean GROUP BY price_band ORDER BY n DESC;

`price_band`	Juegos (altura de la barra)	Proporción
`Under 5`	11,613	43.5 %
`5 to 15`	9,046	33.9 %
`Free`	3,094	11.6 %
`15 to 30`	2,367	8.9 %
`30 or more`	565	2.1 %

Cuando pasas el ratón por encima de una barra, el cuadro redondea el número (11.6k). La cifra exacta está en Results, debajo del gráfico.

Si algo no se ve bien

games_clean no está en la lista de datasets. La tabla existe pero Superset aún no tiene un dataset para ella. Ve a Datasets, + Dataset, elige la base de datos Dades classe, el esquema public, la tabla games_clean, y créalo. Luego empieza otra vez desde el paso 1.
Una sola barra con 26,685. price_band no se soltó en X-axis. Arrástralo ahí.
Barras de muchos colores con una leyenda. Hay una columna en Dimensions. Quítala con la ×.

Ve más allá: cambia la pregunta

Cambia Metrics a AVG(price) y actualiza el gráfico (no guardes esta versión). La barra más alta es ahora 30 or more. Los datos son los mismos; la pregunta pasó de "¿cuántos juegos?" a "¿cuánto cuestan?". Un gráfico siempre responde a una pregunta, así que ten siempre claro a cuál.

Ideas clave¶

Los atributos preatentivos (color, tamaño, posición, forma) se detectan de un vistazo, en menos de un cuarto de segundo aproximadamente. El pop-out solo funciona cuando lo resaltado es la excepción.
Cleveland y McGill (1984) ordenaron las codificaciones: la posición sobre una escala común es la que se lee con más exactitud; el ángulo, el área, el volumen y el sombreado de color vienen después. Las barras son lo habitual; un gráfico de sectores debe ganarse su sitio.
El color tiene tres trabajos honestos: resaltar, categoría, estado. Nunca decoración, y nunca solo rojo frente a verde.
Jerarquía visual: decide qué debe verse primero y hazlo lo más grande o lo único con color. Ordenar las barras por valor es jerarquía gratis.
Data-ink ratio (Tufte, 1983): borra el chartjunk, la tinta que no muestra datos. Los títulos y las etiquetas de los ejes no son basura.
Un buen gráfico es aquel en el que el lector encuentra la respuesta en segundos. Usa las cuatro preguntas de crítica con cada gráfico, empezando por los tuyos.

Comprobación rápida¶

1. En la cuadrícula de dígitos, ¿por qué pudiste contar los sietes al instante la segunda vez?

Había menos dígitos en la segunda cuadrícula
El color es un atributo preatentivo: el ojo lo detecta antes de la atención consciente
Habías memorizado dónde estaban los sietes
El área del lenguaje del cerebro lee más rápido el texto en negrita que el normal

Los dígitos eran idénticos. Cambió una propiedad visual, y el color es un atributo preatentivo: el sistema visual lo capta de un solo vistazo, en menos de unos 250 milisegundos. Ese efecto se llama pop-out.

2. Un compañero da a cada una de las doce barras de un gráfico un color vivo distinto. ¿Qué pasa con el pop-out?

Se vuelve doce veces más fuerte
Solo funciona para la barra más alta
Desaparece: ya nada es la excepción
Pasa del color a la forma

El pop-out funciona con una sola cosa a la vez. Una marca destaca porque se diferencia de todo lo que la rodea. Doce colores son doce cosas gritando, y el color usado así es decoración, que no es uno de sus tres trabajos.

3. Según Cleveland y McGill (1984), ¿qué codificación leen las personas con más exactitud?

El ángulo, como en un sector
El área, como en una burbuja
La saturación del color, como en un mapa de calor
La posición sobre una escala común, como en un gráfico de barras

La posición sobre una escala común es el rango 1. El ángulo comparte el rango 3, el área es el rango 4 y el sombreado o la saturación del color es el rango 6. Por eso dos barras de 59 y 61 son fáciles de ordenar y dos sectores no.

4. ¿Qué es el data-ink ratio?

El número de colores dividido por el número de barras
La parte de la tinta de un gráfico que muestra datos
La cantidad de tinta que necesita una impresora para un gráfico
La proporción entre el tamaño del título y el de las etiquetas de los ejes

Edward Tufte (1983): "Above all else show the data." La tinta que no muestra datos es chartjunk (efectos 3D, líneas de cuadrícula gruesas, imágenes de fondo) y puede borrarse. Cuanto mayor es la proporción, más limpio es el gráfico.

5. ¿Cuál de estas cosas deberías conservar al limpiar un gráfico sobrecargado?

La sombra 3D bajo cada barra
La foto de fondo de un mando de videojuegos
Las etiquetas de los ejes y el título
La leyenda que repite el nombre de la única serie

Data-ink no significa "borrarlo todo". Las etiquetas de los ejes, las unidades y el título llevan significado, así que se quedan. Las otras tres no muestran datos: son chartjunk.

6. Superset dibuja tus barras en el orden 15 to 30, 30 or more, 5 to 15, Free, Under 5. ¿Cuál es el problema?

La consulta está mal: faltan algunos tramos
Ninguno: el orden alfabético es la opción neutra
Es orden alfabético, que no da jerarquía al gráfico; ordena por valor en su lugar
Los gráficos de barras no pueden mostrar más de tres categorías

El orden alfabético es un orden que nadie pidió. Ordenar por COUNT(*), de la más alta a la más baja, pone la respuesta donde cae primero el ojo. Eso es jerarquía visual gratis.

7. Un panel muestra el estado de un servidor con un punto verde para 'OK' y uno rojo para 'caído', y nada más. ¿Por qué es un riesgo?

El verde y el rojo tienen muy poco contraste con un fondo blanco
Alrededor de 1 de cada 12 hombres tiene una deficiencia de visión del color, sobre todo rojo-verde, y no distingue los dos estados
Los puntos son una forma, y la forma no es un atributo preatentivo
El estado no es uno de los trabajos honestos del color

El estado sí es un trabajo honesto del color, pero nunca solo el color. Alrededor de 1 de cada 12 hombres y 1 de cada 200 mujeres confunden colores, sobre todo el rojo y el verde. Añade una segunda señal: las palabras "OK" y "Caído", o un icono.

8. Un amigo te enseña un gráfico donde cada barra tiene un color vivo distinto y una sombra 3D. Elige los dos consejos que respalda esta página.

Usa un solo color para todas las barras y uno distinto únicamente para la barra que importa
Quita la sombra 3D: no muestra datos, y el volumen se lee peor que la posición
Conviértelo en un gráfico de sectores para que los colores tengan sentido
Añade una imagen de fondo para que el gráfico sea más fácil de recordar

El primero es pop-out: el color funciona cuando marca la excepción. El segundo es Tufte (chartjunk) más Cleveland y McGill (el volumen es el rango 5, la posición es el rango 1). Un gráfico de sectores cambiaría la posición por el ángulo, y una imagen de fondo es más chartjunk.

Ya sabes qué capta el ojo en medio segundo. A continuación, los dos gráficos que más vas a usar y la pregunta que decide entre ellos: Gráficos de barras y de líneas.