El pasado 10 de febrero, ElMundo.es publicó una noticia científica que trataba sobre cómo lograban las pulgas realizar saltos de hasta 2 metros de distancia en un segundo. El caso es que me llamó la atención por la secuencia fotográfica que la acompañaba y que habían hecho los científicos para poder analizar el salto en detalle:
Un buen ejemplo de Diseño de Información ya que:
- Utilizan “pequeños múltiples” para estudiar cada una de las fases del salto. Por “pequeños múltiples” se entiende un conjunto de imágenes presentadas secuencialmente unas al lado de las otras que permiten detectar patrones, variaciones y cambios significativos en un instante o período temporal concreto mediante la comparación de cada una de ellas respecto a las demás. En palabras de Tufte (Envisioning Information, p. 67):
“En el corazón del razonamiento cuantitativo hay una pregunta simple: ¿Comparado con qué? Los diseños de múltiples pequeños, análisis multivariados y de datos, ofrecen una respuesta directa mediante la aplicación de las comparaciones visuales de los cambios, de las diferencias entre los objetos en el ámbito de las alternativas.”
- En el conjunto de múltiples pequeños los científicos utilizan una doble representación para extraer la información:
- Por un lado usan fotografías reales de una pulga saltando. La fotografía es una reproducción muy fiel y aproximada de la realidad. Por mucho detalle que tenga, un dibujo no es capaz de transmitir la misma cantidad de información que una fotografía real del objeto o animal, ni el mismo tipo de información que otro tipo de representación visual,
- Junto a la fotografía dibujan un esquema de las patas de la pulga formado por líneas conectadas por puntos que reproducen sus articulaciones. Deconstruyen así la realidad simplificándola y centrando la atención en el aspecto que desean analizar: el proceso del salto.
Analizando los múltiples pequeños con algo más de detalle llama además la atención su alta densidad informativa:
- En cada uno aparece el tiempo en milisegundos, hasta que comienza y desde que comienza el salto, en la esquina superior izquierda.
- En el primero aparecen los nombres de cada una de las partes de la pata de la pulga (tarso, tibía, femur, etc) junto a la correspondiente línea que la representa.
- En el primero, además del esquema superior con las líneas negras, este aparece nuevamente duplicado en color amarillo y superpuesto directamente sobre el propio cuerpo de la pulga para destacar la anatomía de la pata directamente sobre la foto.
- En los múltiples pequeños, primero, segundo, cuarto y octavo aparece el ángulo del cuerpo de la pulga respecto a la horizontal del suelo en ese momento.
- En el último múltiple pequeño de la esquina inferior derecha se presenta la escala de la pulga.
Mediante el uso del doble recurso de objeto real (imagen) y representación esquemática de la estructura de las patas en cada instante logran comunicar visualmente, de manera extraordinaria, una altísima cantidad de información en un mínimo espacio. En definitiva, un estupendo ejemplo de Diseño de Información de aquellos de los que gusta Edward R. Tufte.
¿Qué más cosas podemos hacer como Diseñadores de Información para facilitar y complementar la comunicación visual y ayudar a los científicos a analizar el proceso del salto?
Una primera acción puede ser separar las fotografías reales de los esquemas de la estructura de las patas y centrarnos en estos últimos:
Alineamos los múltiples pequeños tomando como referencia el punto gris (de partida) de la esquina inferior izquierda de cada uno. Este punto permite hacerse una idea de la distancia recorrida en cada instante del salto:
Quitamos las líneas grises que nos sirven de referencia para alinear ya que cuanta menos “tinta” innecesaria que no aporta ningún valor extra haya en el gráfico, mejor será la visualización de información. Nótese además como en el último múltiple pequeño de la secuencia, dada la gran distancia que salta la pulga respecto al punto de origen, tenemos que alinearlo no en relación al múltiple pequeño de al lado que le tocaría, sino al siguiente de más abajo (dos líneas grises en lugar de una). Ello da una idea intuitiva adicional al observador acerca de la gran distancia que recorre la pulga saltando en un milisegundo:
En éste conjunto de múltiples pequeños se ha optado por individualizar la capa de información de la estructura de la pata y no se ha añadido ningún otro elemento informativo más. No obstante si se desea, se pueden incorporar capas informativas adicionales tales como por ejemplo, la del tiempo:
Tanto el tiempo como el punto gris de referencia para medir la distancia se consideran elementos informativos secundarios por lo que se utiliza un color gris claro para su representación. Con ello se logra que aparezcan más atenuados con el fin de pasar más desapercibidos respecto a la capa que se considera elemento informativo principal: los esquemas de la estructura de la pata de la pulga que van en negro puro.
Asimismo se ha optado por conservar el tiempo en milisegundos expresado en números en lugar de recurrir a algún otro tipo de solución visual gráfica que transmitiese la idea de transcurrir del tiempo (por ejemplo, las manillas de un reloj que pasasen desde la izquierda -tiempo negativo en -40 ms- hacia la derecha -tiempo positivo, + 2ms-). La razón es que en este caso particular los números transmiten de manera más directa e inequívoca el tiempo transcurrido en cada momento dado que los períodos temporales con los que se trabaja son muy pequeños y dado que el número es otro tipo de elemento visual diferente a una línea que transmite un significado distinto: el de cantidad. La línea por el contrario representa (en este caso concreto) un objeto: una parte de un insecto. Desde un punto de vista del Diseño de Información, números y líneas son otras dos capas de información más diferenciadas que están presentes en el gráfico. Por último, otra más si atendemos a una división por formas, son los círculos, diferentes de líneas y números. Su análisis por separado aporta igualmente otro tipo de información interesante sobre la posición de las articulaciones de la pata en cada instante:
La imagen original está en blanco y negro y la representación esquemática en tonos de gris. Un potente recurso adicional que tenemos a nuestro alcance para individualizar los elementos de las patas y compararlos visualmente con mayor facilidad es el uso del color. Para ello asignamos uno para cada parte de la pata con lo que emergen con mayor claridad nuevas comparaciones e información que está implícita en el gráfico pero oculta hasta el momento:
Con color o sin él, trabajar con una parte y eliminar el resto nos permite comparar elementos individuales posibilitando llegar a un grado de análisis más profundo de ser necesario:
En Diseño de Información y en superficies planas como el papel jugamos con dos dimensiones. Cuando algo no cabe a lo alto se puede disponer a lo ancho o si no hay espacio suficiente, combinar ambas disposiciones. En el caso que nos ocupa en el conjunto original, los múltiples pequeños se han dispuesto en dos columnas verticales paralelas de 6 y 4 módulos siendo el patrón de lectura una “N” invertida.
Si el objetivo perseguido o en el que se quisiera incidir fuese poder estudiar la diferencia en cuanto a la distancia horizontal recorrida en cada momento antes y después del salto, una representación vertical sería más óptima ya que todos los múltiples pequeños quedarían alineados a la izquierda respecto al punto gris que sería la referencia para establecer la distancia en cada instante:
No obstante y por el gran espacio en vertical que ocupa, esta representación tiene la desventaja de que no nos permite apreciar el conjunto entero de un sólo vistazo al no caber en pantalla. Las soluciones posibles para este problema son: a) optar por una distribución espacial mixta de los mismos (en el eje X e Y) como se ha hecho en la imagen original utilizando 2 columnas verticales, una al lado de la otra, de 6 y 4 múltiples o b) escalar el tamaño hasta que quepa en el área de visualización (pantalla) o de representación (papel). Para ello deberíamos reducir la imagen hasta una altura de 500 píxeles. La desventaja a cambio de obtener la visión global del conjunto es la perdida de detalle respecto a la representación original -vista completa/análisis particular vs vista reducida/análisis global- (nótese como en el caso de la vista global habría que remarcar más el punto gris poniéndolo en negro puro o aumentando artificialmente su tamaño para que se perciba correctamente, dado que al escalarlo prácticamente no se aprecia):
El escalado es una estrategia que se utiliza en las interfaces de zoom inmersivo. En Visualización de Información nos permite mostrar altísimas cantidades de información dando lugar a visualizaciones bellísimas que pueden poner de manifiesto patrones informativos ocultos que nos ayuden a extraer conocimiento como por ejemplo en…
ésta espectacular visualización del catálogo de Amazon
(leeros el post entero que merece la pena)
Frente a la alineación en vertical de los múltiples pequeños, la alineación en horizontal ofrece una sensación más natural tanto de movimiento como del transcurrir del tiempo al coincidir con nuestro sentido de lectura de izquierda a derecha. Además, mientras que la representación en vertical nos servía para juzgar de manera más óptima la distancia recorrida en el eje X, la representación horizontal nos permite hacer lo propio en cuanto al eje Y (la altura):
Ver imagen ampliada en Flickr
Por último, cuando nos encontramos en un medio líquido como la pantalla de un ordenador o tablet podemos agregar una dimensión extra respecto al papel -un eje Z- para simular la interacción del movimiento de manera mucho más efectiva que mediando el papel. Para ello, “apilamos” unas imagenes encima de las otras y las presentamos secuencialmente. Para descargar el documento pulsar sobre el enlace de más abajo de “Representación esquemática y a continuación seleccionar en Google Docs dentro del menú archivo > Descargar original o utilizar la combinación de teclas Ctrl+S.
Representación esquemática animada de las patas de la pulga en el salto (PDF)
Cuando lo tengáis salvado en vuestro ordenador abrirlo con Adobe Reader y previsualizarlo a pantalla completa (menú Ver > Modo Pantalla Completa o combinación de teclas Ctrl+L). Utilizando a continuación las teclas de Avanzar – Retroceder página podemos simular el movimiento y obtener otro tipo de comparación visual que no da ninguna de las anteriores representaciones planas y estáticas.
Y es que la pantalla y el ordenador nos permiten escapar de la “Tierra plana” del papel.
Bola extra:
Para los que hayáis visto la película Up de Pixar, en los créditos del final, cuando está pasando las páginas del cuaderno de fotos, hay un curioso y llamativo pequeño gran homenaje a Edward R. Tufte. En una esas páginas aparece un conjunto de 3 múltiples pequeños en los que se ve al perro de la película saltando a imagen y semejanza del que aparece en la portada del conocido libro de Tufte “Beatiful Evidence” :)
Bola extra 2:
Y aunque es más difícil de percibir, también en los créditos del final, en los que se van deslizando de arriba a abajo, aparece otro pequeño y algo más oculto mensaje que la gente de Pixar le manda a su compañía madre: Y es que cuando están acabando los créditos en un momento dado se ve el nombre de Walt Disney y a su lado, aparece una pequeña “medalla de explorador” tejida en hilo amarillo/anaranjado (en el lado derecho de la pantalla) en cuyo interior puede verse un bonito hongo nuclear. Casualidad o no, lo que no se puede negar es que en Pixar sentido del humor tienen :)
