Infografía en la vanguardia periodística

Un análisis del estado actual de la infografía periodística, las herramientas y las estrategias de trabajo en los medios de papel, web y móviles a través del proyecto de modernización diagramática en la redacción de EL PAÍS el pasado año.

Publicación: ELPAIS.com

Durante doce meses hemos trabajado en EL PAÍS incorporando en la producción diaria de la redacción nuevas herramientas para visualizar datos y realizar infografías interactivas.

La iniciativa comienza mostrando a la redacción las posibilidades de la visualización de datos a la hora de desarrollar las noticias, enseñando las tipologías de gráficos existentes, para qué utilizarlos y su uso en otras áreas distintas a la de los medios.

Durante ese periodo de tiempo, probamos aplicaciones valorando su utilidad para mostrar información estadística. Estas herramientas las testamos con ‘fuego real’, afrontando noticias de última hora, reportajes a medio plazo y especiales con visualizaciones creadas mediante plataformas online y también con programación interna/externa.

Buscamos la forma de implementar junto al sistema editorial una plataforma que nos sirviera para realizar gráficos y mapas propios, dentro o lo más próximo al sistema editorial.

Al mismo tiempo categorizamos todas las gráficas estadísticas publicadas por el departamento de infografía para ver cuáles se repiten, pueden definirse como ‘recurrentes’ y poder establecer así una mínima representación visual comprensible para ellas.

Si los periodistas cuentan con una herramienta de geolocalización intuitiva (mapa de accidente, suceso, etc), gráficas automáticas de datos periódicos (paro, ipc…) y una plataforma para hacer gráficas sencillas (barras, tartas y líneas), la sección de infografía/multimedia ganará un tiempo muy valioso para centrarse en mostrar su talento e incrementar la calidad y originalidad de su trabajo.


Qué queremos mostrar, cómo queremos hacerlo y con qué herramienta.

Esta es una exposición de los desarrollos visuales con diferentes aplicaciones y desarrollos internos/externos que hemos experimentado en 2016:

  • Geolocalizar información sencilla. Datawrapper. El uso de los mapas en Datawrapper es más sencillo y, aunque su oferta visual es menor, el resultado para piezas a corto plazo es bueno, sobre todo combinándolo con otras gráficas estadísticas (barras y líneas).
  • Geolocalizar información compleja. CARTO. Debemos hacer un trabajo previo de cambio de nombres para ajustarlos al libro de estilo del periódico. El resultado es bastante positivo y, en un año, publicamos cerca de 90 mapas interactivos en los que representar visualmente estudios estadísticos nacionales y mundiales. A pesar de ser responsive, la experiencia de usuario es mejor en Desktop por el extenso grado de precisión (mapas municipales).
  • Geolocalizar información compleja con grandes volúmenes de datos con desarrollo externo. Es el caso de las elecciones generales, en las que recurrimos a desarrolladores externos para cargar los datos de Indra en un mapa municipal en D3js. Nuestros resultados fueron demasiado complejos/pesados para el consumo móvil (grandes mapas en .svg) pero perfecto para consumir en un ordenador y exportar para la edición de papel.
De izquierda a derecha y de menor a mayor complejidad de uso, mapas en Datawrapper (periodistas) CARTO (infografistas y periodistas) y D3js (desarrolladores).
  • Desarrollar historias en las que ocurren hechos en diferentes lugares y momentos. Probamos con CARTO, StorymapJS, y Odyssey. También en noticias de última hora (atentado en París). No deben ser historias muy largas y siempre llevar elementos multimedia asociados.

En el caso del Mapa del Brexit, por ejemplo, la periodista que realizaba el reportaje desde el tren en el Reino Unido actualizaba el reportaje y, trabajando desde otro tren pero en España, un infografista actualizaba el mapa con el contenido casi a la par, probando que la herramienta es estable.

Narrativa basada en la localización de eventos. De Izquierda a Derecha StorymapJs, CARTO y Oddisey.

En otros casos, la localización se realiza sobre un mapa ficticio (imagen recreada), como por ejemplo en el de Juego de Tronos. Todos estos ejercicios tienen en común que la información se trabaja en una hoja de datos desde el principio, separando cada campo de contenido.

Mapa en Adobe Illustrator y Photoshop. Hoja de datos en Hojas de cálculo de Google y montaje en TimelineJS. ¿Dónde dejamos a cada personaje de ‘Juego de tronos’?
  • Desarrollar visualizaciones estadísticas combinadas: Utilizamos Tableau, y aunque el resultado es bueno, la plataforma no se integra del todo bien con el sistema editorial ni es responsive, lo que limita su uso. Sirve para realizar estáticos con los resultados. También probamos en estos momentos con Quadrigam para ver su potencial en gráficas combinadas.
  • Contar historias que se desarrollan en el tiempo. Utilizamos timelines externos (TimelineJs) e internos, implementados por equipo de diseño y desarrollo de ELPAÍS. Como es el caso de La catarsis del PSOE. En estos desarrollos es vital una edición fotográfica de calidad).
Editar el contenido textual en una hoja de datos de google facilita la ordenación de ideas y la estructura narrativa.
  • Desarrollar gráficas estadísticas simples: Datawrapper. Muy útil para los periodistas, fácil de utilizar –y sencillo de enseñar– tanto en la carga de datos como en las visualizaciones. Nos sirve para actualizar rápidamente en la web sondeos electorales y realizar gráficos periódicos del tipo IPC, paro registrado...
Con herramientas intuitivas de visualización, los periodistas pueden realizar sencillas gráficas estadísticas. Es vital que el interface de usuario de dichas herramientas sea intuitivo y que la subida de datos (hojas de cálculo de Google, Excel, CSV, etc) sea sencilla.
  • Representar árboles de relaciones entre elementos de una trama. Para ello trabajamos con Onodo.org. Observamos que las relaciones complejas son demasiado densas, dificultando la interacción, pero muestran, a golpe de vista, la estructura de organizaciones y relaciones. Tiene una gran utilidad como gráfico de ‘cocina interna’ con el que descubrir posibles temas que son difíciles de ver en una hoja de datos.
Árbol de relaciones para mostrar las empresas de una compañía y sus áreas de negocios.
  • Crear Animaciones para redes sociales y noticias. Utilizamos Adobe Illustrator, Animate y Photoshop para realizar videográficos sencillos para su distribución en redes sociales y gifs animados (tanto para redes como para las propias piezas informativas). Necesita de práctica para controlar los tiempos de lectura, tamaño de los cuerpos, longitud de líneas, música, estructura narrativa, etc. Además debemos elegir entre un formato 1x1 para RRSS o HDV 720 para la edición online.
Animaciones para RRSS
  • Publicar historias complejas basadas en múltiples datos. Combinación de herramientas. Utilizando conjuntamente gráficas estadísticas sencillas (barras, líneas, treemaps…, información geolocalizada en mapas ya sea interactiva o estática, líneas de tiempo, árboles de relaciones… acompañando al desarrollo textual de la historia. Estas diferentes combinaciones de aplicaciones: Datawrapper + Carto + illustrator, Animate + Datawrapper, etc nos proporcionan, hoy en día, una excelente batería de recursos visuales que ayudan a la comprensión de historias informativas. Es importante no saturar al lector, conseguir una armonía de elementos textual/infográficos.
Planteamiento de reportajes alternando información textual con gráficas estadísticas, mapas y diagramas utilizando diferentes aplicaciones: Fallecidos en San Fermín, Juegos Paralímpicos, Lesiones de Messi, Empresas de Trump.
  • Crear Interactivos con animaciones. Requieren un poco más de conocimiento técnico a la hora de combinar herramientas de diseño (illustrator/photoshop) con otras de edición rápida Adobe Edge, Hype. En cualquier caso, las complementamos con una versión estática para que la información sea accesible desde todos los dispositivos. A pesar de ser escalables, para que fuesen totalmente responsive requieren hacer dos versiones. En móvil, la mejor opción es la estática o una simple animación.
Interactivo en html5 con vídeos, listas de música, enlaces a hemeroteca y fotogalerías. A la derecha, versión estática en torre para redes sociales (Edge/Illustrator/photoshop)
  • Visualizar datos de manera interactiva. Programación en D3js. Son pocas, por ahora, y definitivamente más correctas, las visualizaciones de datos programadas desde los equipos de diseño y desarrollo del periódico. Solo para afrontar proyectos a medio/largo plazo. Es el caso del mapa electoral de EEUU, Resumen del año o The New arrivals. Requieren contar con equipos de desarrollo pero es la solución óptima para reportajes a medio y largo plazo.
  • Versión para móviles. La situación más difícil e interesante con la que nos encontramos es cómo desarrollar visualizaciones para su consumo en móvil. Si bien muchas de las gráficas son responsive, nos causan problemas a la hora de implementarlas en el sistema editorial y no ofrecen una experiencia de usuario apropiada. Diseñar el gráfico desde el principio para móvil reduciendo las interacciones al mínimo es una vía de trabajo. Plantear una salida interactiva para desktop y una estática para móvil es otra. En cualquier caso nos queda un fascinante camino por probar, descubrir y recorrer.
Mapa interactivo en html para laptop y versión simplificada estática para móvil.

New media and coming up with new, innovative ideas is what we love. Our job at Prodigioso Volcán is to create and develop new projects. Our areas of expertise are designing web sites, information architecture and defining communication strategies. We like to teach, but most of all we like to learn.

Prodigioso Volcán
SPAIN