Lecciones UI para creativos

“Beber hasta 25 tazas de café al día ‘no es tan malo’ para el corazón como se pensaba”, leí en la noticia que además explicaba que en el estudio se descartaron las personas que consumían más de 25 tazas.

Aluciné. ¡Hay personas que van a más de 1 café/hora al día, y eso contando que por la noche se levantan cada hora a tomar otra taza!

Me hizo pensar en una visualización interesante para todas las personas que toman café.

Pero el artículo por sí solo no valía para una buena visualización, porque fusilaba un factor fundamental para crear una buen storytelling visual: el contexto.

25 tazas de café americano puede que no sean tan perjudiciales. Pero como sean de café espresso italiano, ingresas en el hospital antes de llegar a la núm. 10.

Una buena historia visual tiene unos componentes claros: El contexto, datos usables… entre otros.

Precisamente de esto trata el podcast de hoy para que crees buenos diseños basados en datos.

Así harás visualizaciones usables con un buen storytelling que capte al usuario, y no le deje dudas como todas las que me dejó la noticia a mí.

¿Empezamos?

En el episodio de hoy hablaremos de cómo diseñar con datos para crear visualizaciones atractivas para los usuarios en todos los sentidos, y no sólo el estético.

Como veremos a lo largo del episodio, se trata de hacer visualizaciones usables que conecten con el usuario y le aporten. Y para hablar de ello he divido el podcast de hoy en 2 partes:

1. Los 3 compontes que deben tener tus visualizaciones para crear un buen storytelling visual.
2. Ampliación del concepto de los datos usables:  veremos cómo encaja la usabilidad de los datos dentro de conseguir una buena historia y cómo conseguir crear las visualizaciones usables  con la metodología DCU.

1. El arte del storytelling en los datos

En el episodio 18, titulado “Convierte tus diseños en storytelling”, ya hablamos de cómo cambian los diseños cuando se aplica el arte del storytelling en ellos.

Tal y como vimos, los diseños adquieren fuerza y conexión con el usuario, consiguen memorabilidad en él, y mejora en general toda la experiencia de usuario en la web o app cuando se aplica el storytelling a ellos.

En los datos, el storytelling vuelve a tener un papel fundamental. No se trata de dar datos a mansalva al usuario y decirle “Ale, ahí los tienes, ¡piensa ahora de qué te sirven!”.

Factor 1: La pregunta

Una forma muy conveniente de dar con la historia que contienen tus datos para el público objetivo es plantearse la pregunta que se quiere responder ese público.

Si te fijas, muchas visualizaciones empiezan incluso con una pregunta como título o en la introducción. No es trivial. Es la pregunta que el autor de la visualización ha querido responder y que atrae a ese público objetivo.

Además, el empezar con una pregunta orienta al espectador hacia el tema y contexto en el que los datos son significativos.

Pese a lo útil que es hacer la pregunta explícita al espectador, también puede estar de forma implícita. La cosa es que siempre haya esta pregunta, que en realidad no es más que plantearse qué quiere o necesita realmente el usuario y cómo se lo plantea él, para respondérselo en su propio idioma.

De nuevo, esto es básico y fundamental tanto al presentar datos en infografías y visualizaciones, como al diseñar una web o app.

Así pues, la pregunta será el primer factor a considerar para crear una buena visualización.

Factor 2: El contexto

Además de la pregunta, implícita o explícita, lo que no puede fallar nunca es un contexto claro. Este es el segundo factor para una buena visualización de datos.

Con contexto me refiero a la información que se da al usuario para responderle preguntas como:

• Qué datos estoy mirando?
• A qué marco de tiempo pertenecen estos datos?
• Qué eventos notables o variables influyeron en los datos?

Ejemplo de pregunta y contexto

El caso de la calculadora para los billetes de TMB del episodio 26 es un claro ejemplo de visualización que cumple estos requisitos.

En ese capítulo os explicaba que tras el cambio de tarifas y billetes, Transports Metropolitans de Barcelona (TMB) sólo daba a los usuarios tablas con los precios según el número de zonas que el usuario debe atravesar en su viaje.

Viendo esa información el usuario de TMB debía tomar calculadora, lápiz y papel y empezar a hacer cálculos para determinar qué billete le convenía más.

Dada la poca usabilidad de esos datos decidí crear una visualización que facilitara la vida a los usuarios a la hora de comprar el billete. A partir de ahí el tema fue creciendo hasta convertirse en una herramienta completa para calcular el billete que le salía más a cuenta al usuario.

Yo empecé con una pregunta: ¿Qué es lo que realmente interesa a los usuarios de estos datos de TMB? Lo cual me llevó a la pregunta que debía responder la visualización: ¿Qué billete te sale más a cuenta? 

Lo siguiente fue dar un contexto a los datos. En el título de la barra superior ya indico que es una calculadora de billete TMB para el tarifario 2020, indicando así también el marco de tiempo de los datos.

Si un usuario necesita más información, el ítem de menú “Qué es esto?” abre un modal con más contexto.

Factor 3: Visualización de datos

Una vez tienes la pregunta y el contexto claros, llega el momento de trabajar en cómo visualizar los datos. Puede ser que utilices tipos de gráficos existentes, o que crees una ilustración, o que crees un nuevo tipo de gráfico para esos datos.

Ejemplo de visualización de datos en el ejemplo

En el caso de la calculadora, por ejemplo, utilicé unas clásicas gráficas de barras y líneas muestran la información de forma visual para el usuario. Estas gráficas van acompañadas de unos cuadros que resumen la información más relevante para el usuario sobre el billete más conveniente para él.

Por cierto, la selección de gráficos clásicos no fue porque sí. Mi objetivo era que la visualización fuera lo más rápida y efectiva para el usuario. Los tipos de gráficas utilizadas daban la información perfectamente y además son tipos de gráficos muy extendidos, y por tanto, muy familiares para todo el mundo. Así el usuairo no tiene que dedicar ni un segundo a entender cómo funcinan y puede centrar dese de el seugndo cero toda su actiivdad cerebral en los datos que se le proporcionan.

Storytelling visual para visualizaciones usables de  datos

En fin, siempre que tengamos datos es fundamental ir a buscar esa historia que queremos explicar, o en la que el usuario se convierte en el héroe o heroína protagonista.

Para conseguir la historia, necesitaremos los elementos:

Pregunta + Contexto + Visualización de datos = historia

Por cierto, si queréis saber más sobre la calculadora de TMB o incluso usarla, podréis hacerlo desde el episodio 26.

2. Cómo enfocar los datos para convertirlos en visualizaciones usables de datos con Diseño Centrado en el Usuario (DCU)

En el episodio anterior comenté que la arquitectura de información es el primer paso para poder presentar la información en un sitio web.

La razón por la que es el primer paso es sencilla: si queremos crear una web para dar una información o contenidos a los clientes potenciales que la visiten, lo primero será organizar, clasificar y estructurar esos contenidos para que los usuarios puedan satisfacer sus objetivos con el mínimo esfuerzo posible.

Usabilidad de datos: No me hagas pensar

Como ves, el «Don’t make me think» de Steve Krug es una ley de oro que se aplica continuamente tanto en diseño de webs, apps como en visualizaciones.

Para quienes no conozcáis aún a Steve Krug, es el autor del libro titulado precisamente “No me hagas pensar”. Se trata de un libro que se ha convertido en un clásico para los diseñadores de User Interface y expertos en usabilidad. Así que te recomiendo que le eches un vistazo si no lo has leído todavía.

Si te gustaría leer el libro, puedes conseguir un ejemplar a través de mi web, en el post de este episodio, el 27, en lecciones UI para creativos. Si lo adquieres a través de mi web, el libro vale lo mismo para ti, pero estarás apoyando a este podcast sin pagar nada extra. De esta manera, ayudarás a mantener este proyecto vivo.

Metodlogía DCU en los datos para crear visualizaciones usables

Volviendo al tema de los datos, para conseguir que los datos que queremos dar al usuario puedan satisfacer sus objetivos con el mínimo esfuerzo posible, es muy conveniente la metodología de Diseño Centrado en el Usuario (DCU). Ya hablamos de ella en el episodio 12  ¿Crearé lo que el usuario realmente necesita con Design Sprint?. 

Así que hoy no me centraré tanto en explicar esta metodología, sino en ver que no sólo sirve para diseñar los contenidos en una web o app. En realidad, es una muy buena herramienta para enfocar cómo ofrecer los datos que a menudo se dan en forma de tablas o con visualizaciones que no dicen nada al usuario.

La razón por la que DCU nos ayudará con este tema es que esta metodología busca dar respuesta a los usuarios y satisfacer sus necesidades creando productos web en los que los procesos y tareas que tenga que hacer el usuario sean fáciles, intuitivos y estén enfocados en la consecución de los objetivos del usuario.

Así pues, podemos tomar esta metodología y aplicarla a los datos para conseguir que las visualizaciones usables (e infografías): fáciles, intuitivas y enfocadas en responder lo que necesita el usuario (lo que busca).

Para ello lo primero será tomar los datos que tenemos y determinar quién es nuestra audiencia y qué objetivos tiene con esos datos.

Al plantearnos tanto la audiencia como sus objetivos, podremos valorar qué se pregunta ante esos datos, qué le interesa entonces realmente de ellos, y cómo le es más conveniente usarlos y digerirlos.

Posibles conclusiones de diseño de datos usables con DCU

De esta manera, nos encontramos en situaciones que lo que antes se presentaba como una tabla, ahora debe presentarse como una tabla con opción de filtros, búsqueda y otros parámetros de configuración para mostrarla.

O puede ser que veamos que la tabla no tiene sentido y que sea mejor una infografía o unos gráficos comparativos. O incluso puede ser que haya que ofrecer al usuario una visualización o herramienta interactiva para introducir o modificar datos.. Un ejemplo de este último caso sería precisamente el de la calculadora de billetes TMB que hablábamos antes.

Hay que tener en cuenta en este punto que a la hora de mostrar los datos una característica clave será la cantidad. Por ejemplo, si disponemos de tres productos similares pero cada uno con un precio distinto y cada uno siendo una mejora respecto al anterior, la típica tabla de precios cumple ya con los requisitos del usuario.

El usuario podrá ver el nombre del producto, las características claves de qué incluye cada uno, y finalmente podrá ver el precio y comparar. La información no es compleja y sólo hay tres productos.

Pero la cosa se complica cuando no son 3 elementos a comparar sino 100 o miles. Y aún es peor cuando las características dependen del usuario y pueden variar en cada caso.

Es para este último tipo de datos para el que utilizar la metodología DCU y ser fiel a responder a la gran pregunta será básico y fundamental para conseguir una buena experiencia para el usuario, y para conseguir que ese mar de datos sean realmente útiles para él.

Aplicando el proceso DCU para datos

De forma concreta, ante unos datos complejos, que pueden ser en grandes cantidades y/o configurables, podemos seguir estas 5 fases para determinar cómo mostrarlos:

1. Determina el contexto de uso: identifica quién va a estar interesado en esos datos, a quién le sirven, y analiza tanto para qué los utilizará como el cómo lo hará.
2. Especifica los requisitos que deberá cumplir la visualización o infografía. En este caso deberás contemplar:
   1. Objetivos y necesidades del usuario
   2. Necesidades y objetivos del cliente que te contrata para la visualización o infografía.
   3. Condicionantes y oportunidades del equipo de desarrollo. Si lo que quieres hacer es una visualización interactiva o automatizada, deberás considerar con qué conocimientos cuentas para hacerlo o con qué equipo técnico dispones o puedes disponer. En el mundo real puedes encontrarte fácilmente con limitaciones técnicas por parte del equipo de desarrolladores. O todo lo contrario, puede ser que cuentes con un equipo técnico que controle varias librerías para la visualización de datos, y te pueda aportar ideas y caminos a explorar. Así que es conveniente sentarse con ellos para determinar qué quieres hacer y ver cómo lo pueden implementar.
3. Arquitectura de información: deberemos organizar y estructurar los datos que vamos a mostrar, filtrar y eliminar según su prioridad o necesidad, etc.
4. Llegamos por fin al punto que podemos ponernos manos a la obra a diseñar la solución, basada en el trabajo y conclusiones de las fases anteriores.
5. Evalúa la solución creada. Es imprescindible hacerlo para validar las soluciones de diseño que hayamos hecho y valorar objetivamente si estas satisfacen los requisitos en el contexto de uso analizado.

Y de esta manera, con este proceso en 5 fases, conseguiremos crear visualizaciones usables y útiles para el usuario al presentarle los datos desde su prisma. Es la única manera de poder responder a sus preguntas.

Este proceso es mi propuesta a nivel esquemático y básico. Siéntete libre de tomarlo, probarlo y modificarlo tanto como quieras si te va mejor añadir ciertos aspectos en algún punto. Mi objetivo, como siempre, es facilitarte herramientas que puedan serte útiles y ayudarte en tu trabajo.

Conclusiones

Hoy hemos seguido hablando de conseguir crear datos que realmente hablen al usuario y le respondan lo que él o ella necesita saber, creando visualizaciones usables.

Además, hemos añadido el factor importante del storytelling, clave para conseguir que los datos tengan mayor impacto en el usuario y sean más útiles también para él.

Espero que hayas disfrutado y lo puedas poner ya en práctica en tus trabajos futuros consiguiendo visualizaciones usables de impacto. Y ahora, sólo decirte que muchas gracias por escucharme. Si te ha gustado y te ha parecido interesante este podcast, puedes subscribirte a mi newsletter en maria-pascual.es para no perderte los próximos capítulos y poder acceder al material e información exclusiva para mis suscriptores.

A través de la página de contacto también podrás contactarme si quieres que hablemos de un proyecto web o app que quieres realizar y para el cual te gustaría contar conmigo.

Y con esto me despido. Te espero en el episodio de la semana que viene con más herramientas, estrategias, metodologías y sistemas para proyectos y negocios User Interface que te ayuden cada vez a empoderarte más y más, y llegar más y más lejos.