Capítulo 2: Reino Unido Gráficos, Fleet Street y la carrera por la suscripción
En el siglo XX, Fleet Street y el área próximo estaban dominadas por la prensa nacional y sus rotativas. Poco queda de la mítica calle que fue hogar del The Times y The Sun. En otros tiempos el periodista buscaba la exclusiva en la calle o mediante la búsqueda de fuentes en un artículo de investigación. En el siglo XXI, las nuevas tecnologías, internet y las redes han puesto sobre la mesa un nuevo modelo de periodista que consume parte de su tiempo delante del monitor, buceando en series de datos en busca de una historia.
Las compañías generadoras de contenidos buscan el talento innovador y el espíritu creativo de sus profesionales para mantenerse en la vanguardia de la industria. Por ello, ya no sólo son necesarios los periodistas, también buscan especialistas en marketing, analistas, diseñadores, ingenieros y nuevos roles que están todavía por definir. Los estudios estadísticos y los gráficos son ahora visibles por suscripción. Se acabaron los gráficos interactivos gratuitos o compartidos en las redes sociales. Son un producto muy valorado por los lectores.
Características de los profesionales
– Alfabetización visual: Prueba clara de alfabetización visual y la capacidad de entregar datos de manera comprensible y convincente. Profundo conocimiento de la teoría detrás de la visualización de datos y el periodismo de datos.
– Capacidad de análisis: Uso de herramientas de análisis de datos, técnicas de obtención de datos y desarrollos interactivos para profundizar en los datos y contar una historia.
– Visualización de datos: Experiencia en el uso de software de visualización para crear contenidos.
– Interactividad: Conocimiento especializado de la experiencia interactiva del usuario con gráficos, cartografías, visualizaciones de datos.
– Multiplataforma: Experiencia trabajando en un entorno de noticias ocupado en múltiples plataformas.
A continuación listamos algunos medios interesantes para conocer mejor el mundo de la visualización informativa en el Reino Unido. Son marcas globales con sedes en las principales capitales mundiales.
Financial Times, profeta de la información económica.
1. Financial Times, The Financial Times Ltd Londres, Reino Unido Con más de 125 años como una de las organizaciones de información y noticias líderes en el mundo. Publica sus propios índices bursátiles con los valores que cotizan en Londres (FTSE, FTSE 250). El diario de las finanzas global tiene una especial sensibilidad por la periodismo de datos, la visualización y la creación de un vocabulario visual compartido con la redacción.
Acceso por subscripción digital: 39 euros al mes (345 euros/año). Subscripción digital + print : 966 euros/año
2. Reuters News Graphics Service, Thomson Reuters Londres, Reino Unido | Nueva York, EEUU Reuters es una agencia de noticias global de información, fundada en Londres hace más de 165 años, con sedes principales en Londres, Nueva York y Singapur. El equipo de gráficos (Reuters News Graphics Service) tiene oficinas en estas sedes. Hay alrededor de 20 miembros en todo el equipo. Cada unidad tiende a centrarse principalmente en su región (dividida en AMERS, EMEA y APAC).
The Economist, portadas para presentar un modelo socioeconómico.
3. The Economist, The Economist Group Londres, Reino Unido La revista semanal de relaciones internacionales, finanzas, ciencia y tecnología ha presentado gráficos y mapas en sus páginas desde hace más de 150 años. Sus gráficos se centran en la estadística política y económica, destacando por su elegancia, limpieza y buen uso del color.
Subscripción digital: 289 euros/año
Referencias: Phil Kenny, Graham Douglas, Helen Atkinson, Adam Meara, Sarah Leo, Martín González, Alex Selby-Boothroyd
4. The British Broadcasting Corporation (BBC) Londres, Reino Unido El canal de noticias público creado en 1932. Hace unos años (2014-15) producían gráficos interactivos con Adobe Flash y librerías de Javascript como D3. En la actualidad realizan piezas de información estadística con librerías de R, como ggplot2, infografías estáticas y animaciones para TV. https://www.bbc.co.uk/news/11628973 Referencias: Chris Ashton
5. The Guardian, The Guardian Media Group (Scott Trust) Londres, Reino Unido El diario liberal tiene una edición en el Reino Unido y dos sitios web internacionales, Guardian Australia (2013) y Guardian US (2011).The Guardian lanzó su Datablog en 2009, el sitio web de referencia de la estadística y los datos periodísticos. Subscripción digital: 282 euros/año
Referencias: Simon Rogers, Cath Levett, Mariana Santos, Alvin Chang, Caelainn Barr, Mona Chalabi, Nick Evershed
Aquí dejo algunas referencias sobre programas y recursos para hacer prototipos de diseño:
(en construcción)
Origami Studio
ORIGAMI STUDIO
Una nueva herramienta para diseñar interfaces modernas, construida y utilizada por diseñadores en Facebook.
Crea prototipos con capas de Sketch y juega con máscaras, sistemas de partículas y cámaras en vivo.
Se puede copiar cualquier cosa de Sketch y pegar las capas nativas en Origami Studio.
Sketch, kit de herramientas de diseño digital.
SKETCH
Sketch es un conjunto de herramientas de diseño digital para transformas sus diseños en prototipos interactivos. Mediante símbolos de trabajo, podemos actualizar fácilmente los elementos de diseño diseño repetidos, desde iconos hasta avatares.
Para Mac, desde $99.
Balsamiq, wireframes con calidad de boceto. BALSAMIQ
Wireframes y prototipado rápido de la estructura de una web o aplicación (‘mockups’). Reproduce la experiencia de dibujar en una pizarra, pero usando una computadora.
Aplicación con versiones para trabajar en la web, en el escritorio o en Google Drive.
UXPin, plataforma de diseño UX. UXPin
Herramientas de diseño web y móvil, prototipos y colaboración en la nube para equipos de trabajo.
Aplicación online de pago desde 9 dólares al mes. A partir de ahí, la suscripción va subiendo según funcionalidades contratadas: Exportar PDF, HTML, PNG, mockups, integración con Sketch y Photoshop, integración con Google Fonts, acceso a la librería de diseño y a la documentación…
INVISION, plataforma de diseño colaborativo. inVISION
Invision Studio: Herramienta en la nube para diseñar pantallas para web y móviles. Plantillas de diseño, prototipos, animaciones, comentarios instantáneos sobre los diseños de trabajo en progreso.
Aplicación con versiones para trabajar en la web, en el escritorio o en Google Drive.
InVision DSM (Design System Manager): Componentes de UX y librerías.
Integración con otras herramientas colaborativas como DropBox, Jira, Slack, Confluence, Teamwork, Trello, Basecamp, Microsoft Teams.
Subscripciones desde coste cero (1 prototipo) hasta 99 euros al mes (equipos de trabajo, sin límite).
Diseño de dashboards estratégicos y tácticos para visualizar datos en tiempo real o desde una base de datos histórica.
¿Qué es un dashboard?
Un dashboard es una representación gráfica personalizada e interactiva de los indicadores que intervienen en la consecución de los objetivos de una empresa, y que está orientada a la toma de decisiones para optimizar la estrategia de la empresa.
Fases de la construcción:
– Análisis de indicadores necesarios y correctos para hacer un seguimiento correcto.
– Wireframe del cuadro de mandos.
– Diseño final del cuadro de mandos con los principales indicadores o KPIs.
– Desarrollo
– Visualización de los indicadores que permiten hacer el seguimiento de los objetivos.
Realización de dashboards para Havas Media Group (2016-2018): Meaningful Brands es un estudio interactivo de Havas Group, de periodicidad bienal, que estudia la calidad de las relaciónes entre consumidores y marcas.
Buscador de datos por países. Havas Media Group.
Diseño de visualización interactiva. Havas Media Group.
Diferentes vistas de visualizaciones. Havas Media Group, 2018
Matriz de indicadores, Havas Media Group, 2018
Realización de dashboards para Airef (2016-2017):
Una plataforma interactiva de difusión de datos para la contribución a la estabilidad presupuestaria y para promover la sostenibilidad de las AAPP.
Autoridad Independiente de Responsabilidad Fiscal.
Entrada a DataLab de Airef.
Observatorio de la deuda de Airef.
Diseño de simuladores de hipotecas o reservas (2016-2017)
Un simulador de hipoteca es una herramienta de cálculo que permite conocer las cifras de las cuotas de préstamo, simulación de la amortización, interés y capital de un préstamo hipotecario solicitado para la compra de vivienda.
Diseño portada para la entrada a un simulador de deuda, 2018
Durante los años 2016 y 2017, asumo la dirección y la planificación del proyecto de transformación digital y de visualización de los estudios de marca Meaningful Brands y Connect (Havas Media Group).
El reto: crear una aplicación web de consumo interno de gráficos y visualización desde cero. La materia prima con la que contábamos eran millones de datos en formato excel.
El proyecto de visualización conduce los estudios de Havas Media Group desde unas herramientas estáticas, con visualizaciones básicas y una respuesta a la demanda muy lenta, hacia una plataforma interactiva integrada en los servidores de la compañía que permite la personalización de las peticiones en tiempo real.
Diagrama de flujo de la aplicación.
Nuestra misión:
• Homogeneizar la entrada y salida de datos
• Mejorar el aspecto de las visualizaciones
• Simplificar la narración visual
• Conseguir una experiencia de usuario e interactividad excelentes.
Meaningful Brands
Meaningful Brands es el primer estudio que conecta el valor de una marca con su aportación al bienestar individual y social. En el contexto tecnológico actual, donde el consumidor es participativo y crítico en parte a través de canales como social media y pueden hundir una marca o derribar un gobierno, es crítico entender bien cuál es el impacto que las marcas tienen en la calidad de vida.
Por ello, a través de esta aplicación, los usuarios pueden consultar el estudio de cada país y descargarse todo tipo de informes en formato Power Point, imágenes en PDF o jpeg o guardar cada una de las consultas realizadas.
El estudio se ha realizado en más de 34 países y aglutina a más de 1.000 marcas comerciales.
Havas Media Connect
Connect es un estudio para medir y comparar los niveles de influencia y asociación que guardan las marcas de un país o región. Estos estudios sirven para hacer recomendaciones estratégicas a los clientes respeto a puntos de contacto potentes y sustentados para cada una de sus campañas
Havas Media Connect también esclarece la asociación que hace el consumidor entre los puntos de contacto y las marcas. Esto ayuda a entender si una marca tiene algún territorio mediático bien definido, y a cuantificar las oportunidades que tiene la marca en términos de inversión y desarrollo de nuevos puntos de contacto.
Connect cuenta con una amplia base de datos en la nueva aplicación que permite un entendimiento claro de la dinámica de los medios según una categoría, un país, y un target específico.
El reto fue crear una aplicación web de gráficos y visualización desde cero con miles de datos en formato excel.
Desde unos datos en Excel a una aplicación web interactiva
La aplicación interactiva para web recoge toda la información correspondiente al estudio Meaningful Brands y Connect 2017 de Havas Media Group. Junto con la empresa de inteligencia de localización Abacus Consulting Technologies, se ha realizado una optimización de la base de datos del estudio y una aplicación web con detallados gráficos interactivos sobre los cambios significativos tanto en industrias, sub-industrias y marcas.
Arquitectura del proyecto.
Datos estructurados en plantillas de Excel
Transformación de los datos en archivos CSV
Los archivos CSV (del inglés comma-separated values) son un tipo de documento en formato abierto sencillo para representar datos en forma de tabla, en las que las columnas se separan por comas (o punto y coma en donde la coma es el separador decimal: Argentina, España, Brasil…) y las filas por saltos de línea.
Lectura, manipulación y análisis de datos con R
Con un fichero de texto (.csv) podemos hacer maravillas en el mundo de la analítica web. Ya que con los medios adecuados podemos consultar los números que tenemos en nuestra base de datos de forma escalable, flexible y rápida.
Ejemplo de datos estructurados en formato JSON.
Proceso de prototipado de la aplicación
En labores de diseño y usabilidad web, realicé un prototipado personalizado de dos aplicaciones: una para Meaningful Brands y otra para Connect.
Primeros prototipos de la aplicación.
Primero se hicieron los primeros sketch o bocetos en papel de la futura aplicación y la navegación entre distintas pantallas.
Los wireframes son una representación estática de lo que será la plataforma web.
Después elaboramos multitud de versiones de los wireframes y los mockups, que contienen información adicional en cada una de las pantallas: disposición de los botones, contenidos, llamadas a la acción, movimientos tipo dentro de la navegación entre pantallas.
En general, los wirefames y mockups permiten visualizar la línea gráfica, la estructura de la información, el contenido y avanza las funcionalidades del proyecto. Se trata de una representación estática, se entrega y aprueba en formato de imagen.
Realización de prototipos para web.
Primeros desarrollos web de la aplicación
Una vez aprobados los wireframes, se pasó a su desarrollo para web, tabletas y móviles. En esta ocasión, el desarrollo se realizó con AngularJS, una arquitectura de trabajo realizada con el lenguaje JavaScript para el desarrollo de aplicaciones.
El selector principal de datos
Las aplicaciones basadas en AngularJS logran mayor fluidez en experiencia de usuario ya que la comunicación entre el cliente y el servidor se realiza de manera transparente para el usuario. La sensación es que nunca abandona la página (mayor rapidez en la carga de datos).
El menú de visualizaciones y un ejemplo de matriz.
Principales ventajas de AngularJS:
2-Way-data-binding (vinculación de datos en dos direcciones): AngularJS esta continuamente observando los cambios que suceden tanto en la Vista, así como en el Modelo y sincroniza datos entre estos.
Directivas: Las directivas permiten crear nuestros propios elementos HTML y manipular el DOM.
Vistas y Rutas: podemos agregar un solo elemento HTML (contenedor) dentro de un solo archivo HTML, y dentro de éste poder renderizar cada página que tenga que mostrarse, sin tener que recargar la URL.
Filtros: Los filtros apoyan a la vista a la hora de presentar los datos realizando transformaciones sobre ellos. Tiene un mecanismo para filtrar vistas basadas en variables de ámbito scope (por ejemplo, al buscar), sin la necesidad de escribir muchos códigos extra.
Soporta ‘routing’ y ‘deep linking’: El routing permite la interacción con la URL del navegador. Es muy importante para la experiencia del usuario, si se están construyendo aplicaciones de una sóla página.
Promesas (Promises): Tiene una implementación interna de especificación Promises/A+. Promises es una alternativa popular para callbacks cuando se está trabajando con las respuestas del servidor.
Animación: Dispone de un programa que incluye herramientas para crear animaciones fácilmente.
Prototipos y wireframes de visualizaciones
La aplicación comenzó siendo una plataforma para visualizar datos; por ello, las visualizaciones fueron analizadas y prototipadas de forma exclusiva.
Un wireframe es una herramienta de visualización para la presentación de propuestas de diseños de una página web. El wireframe debe ser capaz de explicar fácilmente cómo los usuarios interactúan con el sitio web y saber si estamos en el camino correcto.
Algunas tareas que destacamos de los prototipos:
Creación de un libro de estilo de visualizaciones (tipografías, colores, tipos de gráficos…).
Estudio y realización de los wireframes de los selectores de marcas y su repercusión en las visualizaciones.
Estudios de las proporciones y posiciones de los elementos gráficos que componen cada visualización o la información ofrecida por las distintas descripciones emergentes o ‘tooltips’ integradas en la aplicación.
Wireframe de los selectores de las visualizaciones.
Proporciones y colores de algunos elementos gráficos.
Una vez que las visualizaciones han sido aprobadas en formato estático por el cliente, se realiza un nuevo wireframe con las visualizaciones integradas en la aplicación web. Todo proyecto interactivo debe estar validado en formato estático antes de comenzar su desarrollo.
Ejemplo de visualización
El desarrollo web de las visualizaciones
Las visualizaciones fueron desarrolladas por Beatriz Martínez experta en la librería de javascript D3, gráficos vectoriales en SVG y el lenguaje de estilos CSS.
Algunos tipos de visualizaciones que se incluyen en la plataforma
D3 es una excelente herramienta escrita por Mike Bostock para desplegar datos dentro de páginas web. Algunos ejemplos de gráficos realizados:
– Gráficos de línea
– Herramientas de matrices
– Gráficos de burbujas
– Histogramas
– Rankings de barras
– Mapas de posicionamiento
– Visualizaciones de araña
– Diagramas de procesos de decisión de compra
– Tablas dinámicas de datos
Visualizaciones interactivas realizadas con D3
Algunas ventajas de la librería D3.js
Esta librería se basa en funciones predefinidas escritas en lenguaje javaScript que mejoran la selección de elementos, permiten crear y personalizar elementos SVG y añadir efectos como transiciones o tooltips. Tiene una gran capacidad para manipular grandes volúmenes de datos y vincularlos a dichos elementos para lograr crear gráficos de gran riqueza.
Flexibilidad: sólo la imaginación puede limitar lo que se puede hacer con la librería
Buena integración y facilidad de depuración
Librería modular
Manipulación del DOM dirigida por los datos
Permite un gran control sobre el resultado visual final
Crear elementos SVG (formas, líneas, axes)
Facilidad para crear escalas
Animaciones e interacciones de última generación
Transiciones y efectos visuales
D3.js es una herramienta ideal tanto para gráficos sencillos de barras o líneas, hasta complejos gráficos relacionales o visualizaciones con mapas.
Informes en formato PowerPoint desde la aplicación
El usuario puede descargar informe específicos sobre un país en formato Microsoft Power Point. Todos los informes parten de una plantilla única. Cuando el usuario selecciona el ámbito geográfico del informe, automáticamente se genera el informe y se descarga en su ordenador.
Wireframe del módulo para exportar informes en formato PowerPoint
Informe que se descarga desde la aplicación personalizado según el país escogido.
También se ofrece al usuario la posibilidad de descargar el informe en formato Microsoft Excel; es decir, los números tabulados en bruto.
Desde la propia plataforma se pueden exportar informe en formato Excel o Power Point.
Descargas de imágenes
La aplicación permite, una vez seleccionada una visualización, exportarla en varios formatos o guardarla en un carrito de la compra personalizado.
Formatos de descarga de las visualizaciones seleccionadas en la web.
Los formatos en los que se pueden descargar las imágenes son PNG, PPTx (Microsoft PowerPoint) y XLS (Microsoft Excel).
Módulo de administración de usuarios
El proyecto incluye un módulo de administración de los usuarios de la aplicación. Cada perfil de usuarios tiene sus correspondientes permisos para entrar en la aplicación.
El módulo de administración de usuarios y sus permisos.
El módulo de administración incluye las funciones básicas para gestionar una base de datos de usuarios (crear, listar, actualizar y borrar).
Los administradores pueden crear, ver, actualizar y borrar usuarios desde la plataforma.
Gestión del proyecto
La gestión y comunicación del proyecto con el cliente se realizó a través de la herramienta online de colaboración Basecamp.
Basecamp, herramienta online para colaborar con clientes.
En cuanto a la gestión de incidencias, se realizó a través del gestor Mantis Bug Tracker.
Mantis Bug Tracker es un software que constituye una solución completa para gestionar tareas en un equipo de trabajo
