Principios de diseño para los gráficos informativos

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.