Principios de diseĂąo para los grĂĄficos informativos Taller la estructura narrativa de los datos
Mtra. Nora Morales Zaragoza 21 de junio 2016
“Contar historias” con los datos “Los humanos hemos recopilando datos durante gran parte de nuestra existencia, estos datos se mantienen en nuestro cerebro a manera de memorias o comportamientos aprendidos, con el tiempo hemos desarrollado formas de compartir estos recuerdos con los demás, a través del lenguaje y la escritura. Esta capacidad de comunicar las ideas, es lo que cambió todo”. Dino Citrano (2014).
Podcast #35 Datastori.es Alberto Cairo es Profesor de Información Gráfica y visualización en la Facultad de Comunicación de la Universidad de Miami y es asesor de la Maestría de Arte,Tecnología y Comunicación en la Universidad de Carolina del Norte (UNC). Robert Kosara es profesor en la UNC Charlotte, y creador de Tableau Software. También dirige un blog en la visualización en http://eagereyes.org/. Su investigación se centra en la visualización de datos.
“Narrar con datos” “Una historia es la transferencia de información a través del uso de los cinco elementos específicos: escenario, trama, personajes, conflicto y el tema. Todas las historias tienen que contener cada uno de los cinco. Retire uno, y usted tiene algún otro tipo de escritura”. Dino Citrano
http://www.czechcrime.org/
Registramos la informaciรณn y como la comunicamos
http://zago2010rgb.wordpress.com/
¿De qué tipo de historia estamos hablando? Las técnicas narrativas del periodismo y los principios del diseño gráfico, pueden ser aplicadas para la comunicación de la ciencia, particularmente a través del uso de gráficos. Sin embargo existe cierto rechazo por la comunidad científica si esto se puede hacer
Producción gráfico Informativo Productores Consumidores
Realidad 1er nivel de codificación
Datos Info. desestructurada
Evaluación, interpretación, reflexión, memorización
2do nivel de codificación
Información
Info. estructurada
Recolección, tratamiento y 1er nivel de codificación
Conocimiento
Adquisición y puesta en común con la memoria y las experiencias previas al usuario
Sabiduría
Visualización de datos La base de la creación de una visualización es la expresión formal, es decir el uso de un gráfico (pictograma, diagrama, ilustración, ícono, mapa o gráfica) que comunique la información y se basa en decisiones como: el formato, el uso del color, la tipografía, así como en la capacidad de anticipar lo que el cerebro de la audiencia interpretará cuando se relacione con el desplegado informativo.
El gráfico informaJvo El gráfico o recurso informaJvo se refiere a la forma en que se presentan los datos:
Cuando creamos una gráfica estadísJca, o de barras, un diagrama de pie, un mapa, un esquema o una tabla. Le damos a los datos una forma tangible que el cerebro humano interpreta y entiende fácilmente. La forma que se elige para mostrar cierta información, Jene que ver con la función que se desea comunicar a la audiencia Alberto Cairo
Affordance (habilitar)
El tĂŠrmino se refiere a las propiedades percibidas de un objeto que determinan cĂłmo debe usarse o pude usarse y para quĂŠ sirve.
Don Norman
Los seres humanos somos una especie visual anticipar lo que el cerebro va a hacer
Técnicas narrativas (de sentido común) 1) Organizar la info en una secuencia 2) Mostrar relaciones de causa y efecto 3) Poner la información en distintos niveles o capas para proporcionar mayor reflexión o profundidad 4) Definir una ESTRUCTURA Básica
No sólo se trata de dar una explicación de la causa y efecto, sino de pensar que te lleva a entender un concepto.
Trazar un camino
Historia o un relato Es una descripciรณn de algo que estรก pasando que contiene una forma de sensaciรณn o drama. (Will se Storrve 2014) La comunicaciรณn siempre
afectada por el contexto en el que Narrativa
ocurre.
Una explicaciรณn de una causa y un efecto.
Ejercicio #2 Piensa en la Ăşltima pelĂcula que viste y trata de contarla a tus compaĂąeros en 5 minutos.
¿Cómo construyeron el RELATO? PRINCIPIO Comienzo
CONFLICTO
SOLUCIÓN
IMPLICACIONES
SECUENCIA + DRAMA = HISTORIA
Objetividad vs. Subjetividad La objetividad es mito, es imposible removernos de lo que hacemos Hay que asumir que siempre tendremos un punto de vista personal (sesgo) y hay que hacerlo lo mĂĄs explĂcito posible.
Exponer las visualizaciones A veces se necesita una actuaciรณn para comunicarla
https://youtu.be/hVimVzgtD6w
¿Porqué necesitamos de una narrativa? que muestren lo importante (texto) • Anotaciones Marcadores de los puntos clave (gráficos, color) en el documento (Wayfinding), • Orientación como encuentra su camino hay una secuencia lógica aspectos emocionales o seductores • Considerar de la audiencia. Si deseas ampliar el alcance (involucrar a más personas) que interpreten y exploren los datos, entonces debes…
• Conocer a la AUDIENCIA y el CONTEXTO
El visualizador de informaciĂłn debe guiar a las personas a travĂŠs de los datos complejos, definir las tareas que quiere hacer y saber interpretar informaciĂłn cualitativa y cuantitativa.
Abelson, R. P. (1995). Statistics as principled argument. Hillsdale, N.J: L. Erlbaum Associates.
Consejos para el visualizador • Hacer una lista • Cuando explicas estadística no abras la colección de datos • piensa en un encabezado • Presenta claramente la información a la audiencia tanto general como específica • Caracterizar como se va a ver el DATO en relación con la naturaleza de una colección de datos (que es difícil de verbalizar) • Quieres introducir nueva información que es diferente (INSIGHT)
Periodismo de datos
• • • • • •
Intro ¿Qué es PD? El armado del equipo Estudios de caso Obtener Datos - acceso a info pública - datos abiertos - aspectos legales Comprender los Datos - saber leer la info - herramientas Transmitir datos (CH) - Presentar datos en notas - Aplicaciones con datos - visualización de datos - Participación de la comunidad
Estructura Narrativa
Anotación
• Destacar lo relevante
Narrativa
• Orientación del relato / publico
Historia o Relato
• Introduces factor de drama o tensión • agregas motivaciones humanas
Proliferación del término Los autores concluyen que • Hay un potencial significativo de una historia en términos de visualización de datos. • Se tiene que anticipar secuencia y orientación en el documento • Al presentar la información hay que comentarla como si fuera en persona. • Considerar el factor “Relevancia”
Exposiciรณn vs Exploraciรณn
Cómo crear una representación visual eficiente Cuando uno se encuentra con un problema de visualización es difícil saber que hacer y por donde empezar.
Qué Porqué Cómo
Modelo Anidado
Modelo anidado Tamara Munzner
La Situación
Cuál es la temática principal de mi cartel Cuál es su objetivo principal Quien es mi audiencia ¿Qué tipo de información poseo? ¿Como se representa la información? ¿Por qué es relevante la información? ¿Cómo comunicar esa información a la audiencia?
Los 6 enfoques que responde Preguntas 1. Quién y cuál Se relaciona a objetos, personas y roles de la escena (competidores, clientes y productos)
2. Cuanto Retos de medición y cantidad. Tenemos suficiente de “x”; ¿cuánto necesitamos para continuar? ¿Cuántos insumos necesito para lograr la tarea?
3. Cuándo Se relaciona con tiempo y calendarización
4. Dónde Se relaciona con dirección hacia donde vamos y como se relacionan las cosas
5. Cómo Cómo influyen las partes de problema entre sí
6. Por qué Ver el todo y darle sentido
Abstracciรณn de la tarea Incluye la transformaciรณn del dato en algo significativo, resumir, verlo en conjunto. El nivel de abstracciรณn que voy a usar.
Qué tarea cognitiva debe realizar mi audiencia
Quiero que mi audiencia…. • • • • •
Identifique Clasifique Compare Siga una secuencia Conecte y relacione
Marx Roser
¿Qué preguntas le contestará el gráfico?
• Que régimen político es el más popular • Cual es el régimen que mas abunda • Cual es el régimen mas débil • De que países no hay datos?
El estilo de representación se refiere a la interpretación en un nivel de iconicidad realista o abstracto.
La versatilidad de moverse dentro de la escala o “niveles de iconicidad” es clave para lograr compenetrarnos con la audiencia Representaciones de alta iconicidad o realistas (retrato) hacia las representaciones abstractas (caricatura/pictograma). Scott. McCloud 2006
Tipo de informaciรณn y su representaciรณn
Ejemplo
Grado de complejidad SCVIA.pdf
C
M
Y
CM
MY
CY
CMY
K
1
10/16/13
7:45 AM
Las decisiones de diseĂąo Maneras de codificar visualmente el mensaje considerado caracterĂsticas perceptibles humanas
Decisiones
La creación de una ifografía conlleva una serie de decisiones en cuanto a la expresión formal y el contenido de la pieza: • Formato, orientación, tamaño • Posición espacial, • tipografía • color • arreglo de elementos Con el fin de anticipar lo que el cerebro del observador interpretará cuando se relacione con el desplegado informativo.
El tamaĂąo y formato
La retĂcula Es una cuadrĂcula o red de lineas que se colocan generalmente de forma vertical u horizontal a una distancia uniforme o gradual y sirven para guiar a la mano y al ojo mientras se trabaja el cartel (boceto) o para alinear los elementos con respecto a otros en el desplegado informativo.
La retĂcula Una buena retĂcula ayuda a experimentar una variedad en la escala y el posicionamiento de elementos en vez de dejarlo en un juicio arbitrario.
La retĂcula
Ejercicio hacer 5 retĂculas del documento.
Tipografía Gutemberg, tipos móviles en metal en 1450 Letra “textura” común en los manuscritos alemanes constaba de 288 caracteres (gótica)
cuerpo
En los tipos móviles el tamaño de de la letra se medía en puntos y correspondía a cuerpo de la misma. era la distancia entre base altura
de la letra.
Tipografía Anatomía de la letra Para profundizar sobre el uso de tipografía en el diseño necesario familiarizarnos con su anatomía. terminal alt. mayusculas
brazo
ojo
cuello
descendente
ojal
anillo
línea media eje línea base alineación inferior
Eje o Axis (del latin axis) línea geométrico o el punto de rotación del caracter. El ángulo del eje corresponde con el ángulo de la herramienta de escritura con la cual fué trazado un estrecha relación con la modulación del trazo, por ello algunos caracteres tienen mayor contraste que otros. Modulación de trazo Es el efecto generado por el movimiento de la mano con un cálamo pincel o pluma. Se caracteriza por ser rítmica, basada gruesos, con distintos grados de aplicación.
arco
patín
cintura
versalitas
transversal
ascendente
alineación superior alt. mayusculas línea base transversa
apertura
hombro
alineación superior alt. mayusculas
talón asta ondulada
remate o terminal
altura de x línea base alineación inferior cola
barra
pilastra
espina
anillo de conjunción barra de conjunción
Familias tipográficas
Humanista Las letras romanas del siglo XV y XVI que
Futura Transicional Tambien conocida como “sin patin” la vertical similar a la versión con patines
Wilhelm klingspor-Gothic
el movimiento de las manos. Mientras que las Transicionales y Modernas tienen un trazo más abstracto y menos orgánico.
Moderna Nótese el contraste de línea entre transversal grueso y delgado, y axis vertical.
y un trazo más vertical que las humanistas.
Egipcia o Cuadrada Introducida en el siglo XIX para carteles publicitarios de trazos gruesos y decorativos.
Gill Sans
de cada fuente en cuanto a su manufactura. Las letras Humanistas, aquellas que estan
Transicional
Helvetica
Clarendon
a las fuentes común desde en el siglo XIX, surgió cuando los impresores descubrieron
Bodoni
Baskerville
Sabon
Tipógrafos y estudiosos no acaban de ponerse de acuerdo sobre cómo denominar los diferentes estilos en tipografía. En algunos casos, las diferencias entre caracteres son obvias, pero otras son más sutiles.
Humanista sin patin Estas fuentes, se volviéron comunes en el sigloXX, notése el remate de la “a” y la
Geometrica sin patin Algunas fuentes sin patin estan compuestas porformasgeométricas.
Gotica Letra formal de Europa septentrional adaptada par los tipos de impresión del s. XV.
Patín Las fuentes con patines o “serif” parten de la terminación causada por la caligrafía y su evolución los ha llevado a elementos geométricos independientes que pueden ser libremente ajustados.
cuadrangular antigüo
Egypto Heavy
clásico
latino o cuneiforme
toscano
Uso de negritas Este texto es una prueba para mostrar como una tipografía redonda puede interactuar con su versión negrita de modo de que esta última ofrece un contraste adecuado para resaltar palabras, frases o parágrafos dentro de un texto. Este texto es una prueba para mostrar como una tipografía redonda puede interactuar con su versión negrita de modo de que esta última ofrece un contraste adecuado para resaltar palabras. Georgia diseñada por Mattew Carter 1996
Uso de italicas Este texto es una prueba para mostrar como una tipografía redonda puede interactuar con su versión negrita de modo de que esta última ofrece un contraste adecuado para resaltar palabras, frases o parágrafos dentro de un texto. Este texto es una prueba para mostrar como una tipografía redonda puede interactuar con su versión negrita de modo de que esta última ofrece un contraste adecuado para resaltar palabras. Georgia
Uso de itálicas Este texto es una prueba para mostrar como una tipografía redonda puede interactuar con su versión negrita de modo de que esta última ofrece un contraste adecuado para resaltar palabras, frases o parágrafos dentro de un texto. Este texto es una prueba para mostrar como una tipografía redonda puede interactuar con su versión negrita de modo de que esta última ofrece un contraste adecuado para resaltar palabras. Georgia
Crimen tipográfico proporcionalmente al cuerpo de texto y el espacio entre letras. Distorcionar digitalmente esta proporción para crear letras expandidas o angostas es un crimen.
Meta Bold diseñada por Erik Spiekermann 1991 45pt 320% expandida
Meta Bold Condensada diseñada por Erik Spiekermann 1991 35% forzada
Justificado De todos modos creemos oportuno recordar en las claras palabras del propio autor: Esta es una cita, es decir un texto extraído deuna publicación que es preciso citar con las palabras exactas, pues el autor lo ha dicho de una forma precisa. Por lo general no hay que abusar de las citas en una publicación, y es recomendable que no se extiendan mucho. Los espacios de separación y sangría de este tipo de párrafos deben ser decididos con sensibilidad y con buen criterio. La página es
Crimen tipográfico De todos modos creemos oportuno recordar en las claras palabras del propio autor: Esta es una cita, es decir un texto extraído de una publicación que es preciso citar con las palabras exactas, pues el autor lo ha dicho de una forma precisa. Por lo general no hay que abusar de las citas en una publicación, y es recomendable que no se extiendan mucho. Los espacios de separación y sangría de este tipo de párrafos deben ser decididos con sensibilidad y con buen criterio. La página es
Movimientos sacádicos 1
2
Para descubrir cómo leemos es preciso 3 5 4 detenernos y ser concientes de nuestros 6 8 7 propios movimientos sacádicos, pero 9 10 12 11 éso es algo bastante difícil pues los me13 15 14 16 canismos sutiles de la lectura, que impli17 19 18 20 can una coordinación minuciosa entre el órgano visual y una buena parte del cerebro que dirige esta operación, son muy sofisticados y evolucionados…
Orden de los signos Sgeún un etsduio de una uivenrsdiad ignlsea, no ipmotra el odren en el que las ltears etsán ersciats, la úicna csoa ipormtnate es que la pmrirea y la útlima ltera esétn ecsritas en la psiocóin cocrrtea. El rsteo peuden estar ttaolmntee mal y aun pordás lerelo sin pobrleams. Etso es pquore no lemeos cada ltera por sí msima snio la paalbra cmoo un tdoo.
Georgia
Interlinea La interlínea es la cantidad de espacio vertical entre renglones de texto, puesto que la tipografía pede ser tipógrafos introducían líneas de plomo entre los renglones que formaban. Si no hubiese espacio entre renglones se decía que el párrafo era sólido. En el extremo opuesto, al texto que se le otorga demasiado espacio entre líneas también es difícil de leer.
Legibilidad y lecturabilidad por su forma y el marco cultural del lector.
ción con otros elementos de composición y cómo la usamos en una página o desplegado en pantalla.
Por ejemplo una fuente bien diseñada, usada de forma incorrecta tendrá buen nivel de legibilidad pero una lecturabilidad mala. Myriad Pro
La lecturabilidad de una fuente esta íntimamente relacionada con otros elementos visuales del diseño como (líneas, fondos y color) que en con junti debe reflejar cierto significado para la au Bradley
Texto o display La tipografía utilizada para componer texto continuo (por ejempo en un párrafo) se utiliza en cuerpos pequeños, por lo que sus formas deben ser abiertas, con trazos resistentes y formas sólidas. En cambio los textos no continuos como títulos, encabezados, o subtítulos deben utilizar tipos de “display” que son más compactos, elegantes o decorativos. Aunque, en pariencia ambos grupos son similares, su efecto es diferente.
Un ejemplo comparativo de diseño de tipos de texto y de display. Nótese el caracter de display tiene imprimiera en pequeño tamaño.
Caslon, Carol Twombly 1990 basada en el tipo de William Calon.
Atributos precognitivos Claves visuales que nos ayudan a determinar rรกpidamente que vale la pena mirar y que no. Proximidad: Nuestros ojos asumen que los objetos espacialmente cercanos se relacionan entre si.
Atributos precognitivos
Orientaciรณn: Nuestros ojos distinguen de forma intentanea entre una orientaciรณn vertical y otra horizontal. Misma que se complica con diferentes รกngulos a los 90ยบ
Atributos precognitivos Talla o tamaño: Nuestros ojos perciben diferencias de tamaño sin ningún esfuerzo
Atributos precognitivos Direcciรณn o destino: Perciben movimiento sin tener que pensar mucho
Atributos precognitivos
Forma: Nuestros ojos notan diferencias en las figuras sobretodo en las geomĂŠtricas bĂĄsicas.
Atributos precognitivos
Sombreado: Detectan diferencias en el sombreado como una manera de distinguir entre arriba y abajo
Color Color: Nuestros ojos inmediatamente notan diferencias en color y asumen agrupamientos basados en este criterio
CĂrculo cromĂĄtico
Primarios: puros no se pueden mezclar
Primarios
Secundarios
Terciarios
Complementarios
Anรกlogos
Paleta de colores
http://colorschemedesigner.com/
Hacerlo en la computadora a. Resumen b. Introducción c. Metodología d. Resultados e. Tablas f. Imágenes g. Gráficas h. Discusión o argumento i. Conclusión j. Recomendaciones k. Referencias
La comunicación siempre se ve afectada por el contexto en el que ocurre.
El Mantra de la bĂşsqueda visual informaciĂłn
Panorama general Acercamiento y filtros Detalles a demanda
Prinicpios generales 1.- Trabajar con contenido relevante 2.- Enfocarse en los puntos importantes 3.- Mostrar el contexto y evitar ser demasiado abstracto 4.- Cierto grado de reiteración asegura que la audiencia entienda el valor de la visualización 5.- Mantener un equilibrio entre complejidad funcional (menos complejidad mayor espacio en vez de menor espacio mayor complejidad) 6.- Considerar la regla del “7”. Las personas a concentrarse en mas de 7 codificaciones a la vez (color, formas, partes) 7.- Explicar con pasión el contenido la escala y los valores deben de tener coherencia en el sistema.
Preguntas clave
¿Qué tipo de información poseen? ¿Como se representa la información? ¿Por qué es importante la información? ¿Cómo se comunica esa información a la audiencia?
Características
Funcional que cada gráfico cumpla con su tarea. Atractiva no olvidar que debe ser agradable Relevante (insightful) invita al descubrimiento de información no trivial, compleja, profunda. Interesante cambia punto de vista
Gracias norismo@gmail.com
Bibliografía Acaso, M; (2009) El lenguaje Visual Editorial Bolsillo Paidós. Bertin, Jaques and de Gruyter, Netze; “Graphische Semiologie Diagramme.” Karten Walter; 1974. Cairo, A. (2011) El Arte Funcional, Infografía y visualización de datos. Madrid: Alamut. Garland, Ken; “Mr Beck’s Underground Map - a history by González, C. (2001) Apuntes acerca de la representación. Instituto de Investigaciones Filiológicas UNAM, México. Manovich, Lev. What is a Visualization: MIT Press 2001. Malamed. C. (2009). Visual Language for Designers: Principles for creating graphics that People Understand. Massachusetts: Rockport Publishers McCloud, Scott (1993) Understanding Comics The Invisible Art. Harper Collins Publishers N.Y. Mijksenaar, Paul; “Visual Function - An Introduction to Information Design.” 010 Publishers. 1997. Roam, Dan., (2009) The Back of the Napkin: Solving Problems and Selling Ideas with Pictures. New York: Penguin Books. Schiver, Karen A. Dynamics in document design; Ed. Wiley Computer Publishing, New York, 1997. ISBN: 0471-30636-3. Strothotte Christine y Thomas. (1997) Seeing Between the Pixels Pictures in Interactive Systems. Springer-Verlag Berlin, Alemania. Shedroff, Nathan; “Experience Design.” New Riders; 0- 7357-1078-3. 2001. Tufte, R. Edward; “The Visual Display of Quantitive Information.”Graphics Press, 1983. Ken Garland.” Capital Transport, 185414 168 6. 1998. Card,K. Stuart, Mackinlay, D. Jock and Shneiderman Ben;“Readings in Information Visualization - Using Vision to think.” Morgan Kaufmann; 1-55860-533-9. 1999. Ware Colin. (2008) Visual thinking for design. Elsevier Morgan Kaufman MA; E.U.A McCloud S.