Lecciones UI para creativos

“Es un cañonazo” sería la nueva versión del tradicional “Es un Adonis”. Este personaje resultó ser uno de esos hombres guapos y sexys que te cortan el aliento con sólo encontrartelo de cara.

La historia de Adonis es tortuosa y amarga, muy en la línea de la mitología griega. Su madre, Mirra, no adoraba a Afrodita. La diosa la castigó haciendo que se enamorase de su propio padre, hasta el punto de ingeniárselas con engaños para conseguir acostarse con él durante varios días.

Cuando el padre lo descubrió, intentó matarla. Ella, embarazada de Adonis, escapó y los dioses la convirtieron en un arbusto, el Arrayán.

Como toda buena historia mitológica, aún tiene un giro más. Cuando el arbusto se partió y de ahí nació Adonis.

Su belleza era tal que ya desde bebé llamaba la atención. Afrodita lo llevó inicialmente a que lo cuidase Perséfone. Cuando Afrodita quiso recuperar al joven para ella, Perséfone se negó.

La historia va de mal en peor a partir de ahí. Pero, ¿cómo podía ser que un mortal llevara de cabeza de tal manera a las dos diosas?

El secreto: su belleza.

¿Te imaginas crear visualizaciones que ofrezcan tal belleza e impacto en la audiencia? E incluso poder aplicarlo al diseño de webs y apps.

Para poder hacerlo, en el episodio de esta semana hablaremos de cómo conseguir esa deseada belleza en las visualizaciones.

PS: Respecto a Adonis, si aún no sabes su historia, también veremos al final cómo acaba 😉

¿Empezamos?

A veces ves una visualización o infografía, y tienes ese efecto de “wow”. Lo mismo pasa con muchas webs y apps. No me refiero sólo al efecto inicial nada más verla. Si no a que incluso cuando sigues leyendo, explorándola y navegando por ella, sigues con esa sensación.

A mí me hace plantearme: ¿Qué hay en ese diseño que consigue ese efecto?

Por eso hoy vamos a hablar de qué es la belleza y cómo conseguirla en nuestros diseños. En realidad, lo que os contaré hoy no es algo que haya inventado yo. Está extraído de un libro que leí hace ya algún tiempo llamado “Beautiful Visuaization”, de Julie Steele and Noah Ilinsky.

Ellos hablan en concreto de la belleza en las visualizaciones. Pero tal y como veremos, su definición y aplicación de belleza se puede aplicar a cualquier producto digital que tenga como objetivo informar. Si lo piensas bien, en esta definición entrarían gran parte de las webs e incluso apps.

Por ejemplo, una app para comprar como puede ser la app de Amazon tiene como objetivo comunicar y dar información al cliente para que pueda elegir y comprar. El cliente tiene que poder comparar, contrastar y así llegar a unas conclusiones y comprar.

Si te interesa indagar más sobre el tema de hoy, puedes conseguir aquí un ejemplar del libro «Beautiful visualization”. Como siempre, si adquieres el libro a través de mi post, el libro valdrá lo mismo para tí pero estarás dando tu apoyo a este proyecto, así que yo te estaré muy agradecida por tu ayuda.

Tabla de contenidos

Para hablar del tema de hoy he dividido el episodio en 2 partes:

1. Los 4 elementos son necesarios para conseguir belleza en nuestros productos digitales, según los autores del libro.
2. El 5º factor que yo considero imprescindible que debemos añadir para garantizar una visualización plenamente bella.

La belleza en una visualización, y en cualquier producto digital

Ante la pregunta de qué hace que una visualización, una web o una apps sean bellas , una gran cantidad de personas nos hablarían sobre la estética, algunas personas añadirían incluso el conocido como “factor wow!” que sorprende y deslumbra al espectador o usuario.

Pero en realidad, el factor estético es sólo uno de los aspectos clave a considerar, y también uno de los más subjetivos desde mi punto de vista.

Tal y como nos indica Noah Ilinksky en Beautiful Visualization, deberíamos considerar cuatro factores

Primer factor: Informativa

Una visualización siempre debe dar acceso a la información, en el sentido que el usuario que la vea e interactúe con ella (si es interactiva) asimila esa información y obtiene un conocimiento.

Este es realmente el factor más importante y decisivo para determinar el éxito general de una visualización. Es por este motivo que será el criterio que deberá liderar el diseño de la visualización.

Se trata, pues, de buscar conseguir el efecto “wow!” en el sentido que el usuario perciba el gran valor a nivel informativo que ha recibido.

En otras palabras, el efecto wow en las visualizaciones a nivel de información se daría cuando el usuario, después de ver y analizar/leer la visualización se quedaría con la sensación de: “wow! Qué interesante! Y está tan claro visto así que parece mentira que no haya pensado antes las conclusiones a las que he llegado con esta visualización!”.

Dado el carácter informativo que debe tener una visualización, podemos decir que una visualización que no lleve al usuario a un conocimiento, ha fallado, independientemente de cómo haya aplicado el resto de factores.

Respecto a cómo debe informar, para conseguir que una infografía o visualización sea efectiva deberemos prestar especial atención a:

1. Los datos a tratar en sí, obviamente.
2. El mensaje que se pretende transmitir, en el caso de que sea una infografía. El tipo de conclusiones que queremos que se puedan obtener, en el caso de una visualización.
3. El contexto de uso de la visualización. Siguiendo con el ejemplo anterior: va a ser una visualización que formará parte de una aplicación para que el gobierno pueda tomar ciertas decisiones? por qué expertos y en qué situación va a ser utilizada?

Segundo factor: diseño novedoso

Para conseguir una visualización bella, debemos ir más allá de dirigir al espectador a través de la información. Es en este sentido donde entra el segundo principio: ofrecer un diseño novedoso.

En el caso de los datos, puede tratarse de dar un aspecto fresco a los datos o darles un formato que mueva más con el usuario y lo anime a seguir leyendo o interaccionar (si la interacción es posible), dando como resultado un nuevo nivel de entendimiento.

Un ejemplo de que la novedad venga por el formato utilizado, sería el de la calculadora que creé para el billete de TMB. Utilicé deliberadamente gráficos tradicionales para la información que quería transmitir de forma gráfica. La novedad radicaba no el formato de gráfico utilizado en sí, si no en utilizar esos formatos tradicionales para mostrar una información que tradicionalmente se muestra en formato tabla. Por tanto, se rompía con el sistema establecido para esos datos y eso era lo novedoso.

En el caso de webs y apps el factor novedoso sería también un factor a considerar para crear una web o app bella, pero en vez de dar ese aspecto fresco o nuevo formato a unos datos, se lo estaríamos dando a una información o mensaje. No importa si es una web sobre una compañía que ofrece unos servicios, o una app para realizar compras o enviar mensajes. Siempre tendremos información o un mensaje/s que esa web o app debe transmitir al usuario.

Un ejemplo real: una visualización muy especial

La infografía A view on Despair, de Studio Terp,  es una infografía con una visualización artística muy interesante. El tema de la infografía es bastante tétrico porque trata sobre el suicidio en Holanda.

Sin embargo, el usuario desconoce el tema inicialmente y se le la visualización se aparece ante él como un bello paisaje vectorial. Después, una breve frase explica al usuario que cada uno de los elementos de ese paisaje representa una persona que se suicidó durante el 2017 en Holanda.

A medida que el usuario sigue leyendo se le informa de la simbología utilizada en la visualización. Después de la visualización inicial, la infografía sigue tratando el tema en profundidad con gráficos sobre diferentes aspectos (suicidios de hombre frente a mujeres, evolución del número de suicidios, relación entre el método elegido y edad de la persona que se suicidó, etc.).

Como puedes ver, esta infografía cumple tanto con el primero como el segundo factor, es profundamente informativa y novedosa.

Qué hacer con los formatos y convenciones establecidas

Un error típico a evitar para conseguir un diseño novedoso es evitar convenciones establecidas a nivel de diseño. Lo que quiero decir es que no debemos caer en el error de intentar reinventar la rueda por que sí, para que se vea novedoso.

Por ejemplo, en el caso de los datos, los formatos, como una gráfico de barras son formatos ya establecidos y interiorizados y comprendidos por el público en general. Es por ello que son accesibles y efectivos. Ahora bien, no sorprenden.

¿Quiere decir eso que los debemos evitar por norma para sorprender?

No, absolutamente no.

Porque la gran virtud de muchos gráficos que son novedosos es que no se hicieron pensando en que el objetivo es que fueran novedosos, si no que se diseñaron para ser efectivos.

Probablemente durante ese proceso de diseño se detectaron limitaciones en los formatos de gráficos tradicionales y extendidos, y ello llevó al diseñador o equipo a pensar cómo superar esas limitaciones.

Por tanto, la novedad fue un resultado o un derivado de la búsqueda por parte del diseñador para conseguir transmitir de forma efectiva unos datos o una nueva visión sobre un tema.

Si creamos un formato nuevo de gráfico, o rompemos con una convención establecida en el diseño de una web, pero lo hacemos sólo por hacer algo diferente, debemos analizar con mucho cuidado las consecuencias.

En el caso de una visualización, por ejemplo, si un nuevo formato no mejora la efectividad en la comprensión de los datos, o peor así, puede incurrir en una pérdida de efectividad, yo recomendaría descartarlo.

De la misma manera que en una web, el romper con un estándar, por ejemplo para el menú, pueda llevar a una peor usabilidad también nos debe hacer descartar ese diseño.

El efecto Novedad en los usuarios/espectadores

Es ese derivado de novedad que, si ha conseguido el objetivo de efectividad, tiene un efecto importante en el espectador o usuario porque:

1. Le comunica de forma más efectiva esos datos. Ayuda pues al usuario a entender los datos y llegar a las conclusiones más rápidamente.
2. Nos gustan las sorpresas agradables en el sentido que que nos ayudan y facilitan las cosas como no habíamos imaginado que podía pasar.

Tercer factor: Eficiente

Una infografía tiene un objetivo claro: un mensaje. Por su parte, una visualización tiene como objetivo el permitir al usuario entender unos datos para crear su propias conclusiones, es decir, su propio mensaje.

En cualquier caso, el acceso a esa información debería ser lo más sencilla y directa posible. Y para ello, no debe sacrificar cualquier complejidad necesaria y relevante.

En este caso deberemos tener en cuenta que más información debería resultar en comunicar más información al lector. Si no aporta más, entonces lo más recomendable sería eliminarla.

Pero incluso en el caso de que añadamos más información, también debemos tener en cuenta el efecto adverso que no nos interesa. Y es que si bien es verdad que damos más información al usuario, también le estamos provocando que necesite más tiempo para leer y procesar esa información, o más tiempo para encontrar la información que le interesa. Por lo tanto, podríamos estar minando la eficiencia de la infografía o de la visualización.

Por último, los datos irrelevantes, es lo mismo que ruido. No aportará nada al usuario y sólo se le interpondrá en su camino de comprender la información apra obtener un conocimeinto o conclusiones.

En este sentido, la infografía comentada anteriormente, «A view on Despair» cumple a nivel de eficiencia. Si bien es verdad la primera visualización con el paisaje no es la manera más rápida y eficiente de percibir la información, la segunda parte está repleta de gráficos que no son novedosos en sí pero que ayudan a poder percibir y comparar los datos de forma efectiva.

Cuarto factor: Estético

El cuarto y último factor establecido por Ilinsky es el del valor estético de la visualización. El hecho de ponerlo el cuarto es completamente intencional porque se trata de que una vez que hemos considerado cómo hacerlo informativo y eficiente, entonces y sólo entonces, nos centraremos en los aspectos estéticos.

En una web o una app también sigues este proceso si lo piensas bien. Sólo cuando has pasado por toda la fase de arquitectura de información, organizando y estructurándola, y has hecho entonces del diagrama de flujo de usuario y los wireframes, pasas entonces a al plano estético y corporativo.

Todo es parte del proceso de diseño, pero sólo en la última parte permites entrar al plano estético. De la misma manera se debe hacer al crear una visualización o una infografía.

Elementos estéticos más allá de la decoración

Debo destacar que al centrarte en la parte estética de la visualización lo puedes hacer para añadir elementos puramente decorativos o corporativos. Pero Ilinsky nos sugiere que pueden ser una oportunidad para incrementar la utilidad de la visualización. En algunos casos, el tratamiento visual puede codificar de forma redundante información.

Por ejemplo, un valor o clasificación puede ser representado por localización y color, o por etiqueta y medida, o por cualquier otro par de atributos.

Desde mi punto de vista, y mi manera de entender el diseño, para mí el factor funcional es básico. Me cuesta mucho aceptar o imaginar en mis diseños elementos decorativos que aportan poca información o utilidad. Si los hay en algún momento, intento que sean lo menor posible.

La razón es porque, tal y como Ilinksy también dice, la codificación de información redundante (ya sea con color, juegos de tamaños, etc. ayuda al usuario a diferenciar, percibir y aprender de forma más rápida y sencilla.

Otras maneras en las que las elecciones visuales pueden ayudar en el proceso de entendimiento por parte del usuario son:

• Utilizar paletas de colores familiares.
• Utilizar iconos
• Utilizar el layout más conveniente para la información a dar

La subjetividad de la estética en una visualización de datos

Según hemos dicho hasta ahora, el factor estético es sólo uno de los cuatro factores a consdierar para conseguir la belleza en una visualización.

También hemos visto que el más importante es que efuera informativo. Si una visualización o una infografía no es informativa, no es de ningún interés para ninguna audiencia. Tiene que aportar.

Estarás de acuerdo conmigo que del mismo modo pasa con las webs o las apps.

Sin embargo, si una visualización es atractiva visualmente para la audiencia objetivo, les llamará más la atención y estarán más predispuestos inconscientemente a leerla y entenderla. Les entrará por lo ojos.

Así pues, el atractivo visual o belleza de una visualización será fundamental para que los usuarios deseen pararse a entenderla y obtener la información.

Pero, la belleza es en parte subjetiva. ¿cómo podremos analizar cuándo es bella? En realidad, lo ideal será no fijarse sólo en los aspectos estéticos, sino considerarlos en su conjunto con el resto de factores que hemos visto antes.

Existe para ello una herramienta que a mí me parece de gran utilidad, pero que requiere de un episodio entero para poder verla a fondo y ver cómo nos puede servir para nuestras visualizaciones.

Como siempre, podrás trasladarla y adaptarla también para utilizarla en cualquier producto digital que se requiera que sea informativo.

En cualquier caso, en el próximo episodio conoceremos esa herramienta y veremos cómo aplicarla de forma práctica analizando una visualización real.

Mi quinto factor: la usabilidad

Con el quito factor llegamos a la segunda parte del episodio de hoy.

En el caso de las visualizaciones interactivas pasa como con las webs y las apps. Necesitamos una buena usabilidad para conseguir que el usuario tenga una buena experiencia de usuario.

No importa los efectos de interacción o animaciones sorprendentes, ni el «look and feel» espectacular de una web o una si luego el usuario no encuentra lo que desea, o no llega ni a descubrir la mitad de las funcionalidades que dispone.

Seguro que un usuario que pasa por tal experiencia de usuario tan pobre, si le preguntas qué le ha parecido la web o la app, te la tira por la cabeza. Ni de lejos te hablará de su belleza.Lo mismo pasa con las visualizaciones y las infografías.

En realidad la usabilidad está fuertemente vinculada al primer y tercer punto. Para que una visualización sea informativa y eficiente es básico y fundamental que tenga una elevada usabilidad.

En este sentido, si el usuario tiene que ir pensando qué puede hacer y qué no, va a tener problemas para poder llegar al siguiente paso: la información. Y todavía va ser más complicado llegar a los siguientes basados en procesar y comprender esta información.

Por tanto, si el usuario tiene que encararse con problemas de usabilidad, difícilmente va a ser una visualización eficiente. Lejos de una rápida y efectiva asimilación de información, el usuario va a tener que dedicar mucho tiempo a aprender cómo utilizar y leer esa visualización.

Lo mismo pasará como te puedes imaginar con una web o una app.

Tipos de usabilidad en las visualizaciones

En el caso de las visualizaciones puede ser conveniente diferentciar entre dos tipos de usabilidad, tal y como sugiere YUSEF HASSAN-MONTERO, en su tesis a doctor en documentación.

Estos dos tipos serían:

1. Usabildad visual: se trata del grado de facilidad de una representación gráfica para conseguir acciones y operaciones visuales sobre los datos. Por ejemplo, medir el grado de cumplimiento en su papel de representación gráfica de los datos mediante elelmentos gráficos estaría dentro de Usabilidad visual. Es decir, en el caso de la infografía A pair of Despair, la facilidad al a hora de transmitir , permitir comparar, etc. de los elementos de la visualización, estaría dentro dede la ubilaidad.
2. Usabilidad interactiva: el grado de facilidad de uso de los elementos interactivos de la interfaz que tienen como objetivo permitir la manipulación, transformación y exploración de la representación gráfico y los datos representados por ésta. Dentro de la usabilidad interactiva estaría, por ejemplo, localizar visualmente el botón que permite hacer “zoom” o abrir los filtros, representaría una tarea visual secundaria, condicionada por la usabilidad interactiva

En futuros episodios hablaremos más sobe esas usabilidades y cómo medir la usabildad en nuestros proyectos de visualización de datos

Medir la usabilidad de nuestra visualización

Una manera de medir la facilidad de uso de nuestra visualización será considerando estos tres componentes principales:

1. Eficacia, o número de errores que cometen los usuarios en tareas específicas;
2. Eficiencia, o tiempo que emplean para la consecución de dichas tareas;
3. Satisfacción, o usabilidad percibida tras la realización de las tareas.

Lo prometido es deuda: Así acabó Adonis

Por cierto, respecto a Adonis, ante la confrontación entre las dos diosas por la posesión del joven Adonis, Zeus intervino y optó por una vía, que podría tildarse de salomónica, para resolver el conflicto. Según esta, Adonis estaría 4 meses con Afrodita en la Tierra, 4 con Perséfone en el Averno, y 4 meses con quien el desease para que luego pudiera elegir. 

Sin embargo, Afrodita no respetó las reglas de Zeus y sedujo a Adonis cada día, llevando su romance a espaldas de su marido Hefesto, y de su cruel y sanguinario amante Ares. 

Con semejantes marido y amante, la cosa obviamente no podía acabar bien. Adonis era buen cazador y salía a cazar a menudo. En una de estas cacerías, Adonis salió en busca de un enorme jabalí que resultó ser Ares. Se había enterado del romance, y celoso decidió ponerle fin. Así que, en forma de jabalí, luchó contra el joven y lo hirió de muerte.

Perséfone se frotaba las manos ya ante tal situación porque al descender Adonis al inframundo, por fin sería para ella para toda la eternidad. 

Sin embargo, Afrodita no iba a olvidarse de Adonis tan fácilmente. Así que volvió a recurrir a Zeus para pedirle poder estar con su joven amado.

Finalmente, Zeus dio la inmortalidad a Adonis, considerándose un dios gracias a ello, y dictaminó que a partir de ese momento pasaría 6 meses con cada diosa. 

¡Buf! En el caso de Adonis su belleza le llevó a bastantes aventuras y situaciones complicadas en las que el pobre poco tenía a decir. Por suerte, para nuestras visualizaciones no será así. 

Conclusiones

Hoy hemos visto los factores que debe tener una visualización de datos o una infografía para poder considerarla plenamente bella. También os he hablado del 5º factor que yo creo básico y fundamentel considerara en el caso de visualizaciones e infografías a mostrar en pantalla, sobretodo si tienen ya un cierto grado de interactividad.

En los próximos capítulos veremos cómo puedes medir esta belleza y profundizaremos sobre la usabilidad. 

Espero que hayas disfrutado y lo puedas poner ya en práctica muy pronto.

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 a los materiales exclusivos para los suscritos a ella.

Además, compartiendo este podcast en tus redes sociales, puedes ayudar a otros profesionales como tú a los que esta información también les podría ayudar.

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.