Todos los que hemos asistido a algún festival musical sabemos que la organización del tiempo es la clave para aprovechar al máximo el evento y lograr ver tantos artistas posibles ya que en muchas ocasiones hay que correr de un escenario a otro para poder disfrutar de grupos que estén tocando simultáneamente. Pero qué pasa cuando el mismo festival falla en proporcionarle al público las herramientas gráficas necesarias para tener esta organización?
Como diseñadora, siempre estoy en busca de nuevas formas de ejemplificarle a personas fuera de mi industria las amplias aplicaciones del diseño más allá de “hacer las cosas bonitas”. Esto sin mencionar la conversación obligatoria en donde muchos asumen que diseño es arte o cuando una opinión sobre un “buen diseño” gira meramente en lo — subjetivamente — estético.
Es por eso que me emociona mucho cuando encuentro un Caso de Estudio en donde los usuarios pueden identificar claramente las fallas del Diseño a nivel funcionalidad. Este atributo intrínseco cuando es aplicado correctamente, es imperceptible. Por lo contrario, cuando un diseño carece de funcionalidad, es imposible no notarlo.
Es aquí cuando el debate se pone interesante entre los usuarios y diseñadores ya que el verdadero impacto de lo que es realmente un “buen diseño” es evidente.
Dentro de uno de mis Casos de Estudio favoritos para ejemplificar este punto se encuentra el horario del festival musical Corona Capital en su edición 2019.
Sólo para darles un poco de contexto, este evento es considerado como uno de los festivales más importantes de toda Latinoamérica, reuniendo a más de 40 artistas de talla internacional en su última edición y en 2017 entrando a la lista de los festivales con más boletos vendidos, junto con otros grandes como Coachella y Lallopalooza Brasil.
Podrás pensar que un evento así de prestigioso viene acompañado con un diseño a la altura, pero no fue el caso en el ámbito de Data Visualization en su décima edición. Las imágenes oficiales que usaron para mostrar los horarios de los artistas durante los 2 días del festival, crearon confusión ante el público por ser difíciles de interpretar.
A continuación, presento las imágenes que se difundieron en la página oficial y redes sociales del evento y expongo a detalle los errores visuales del diseño.
Textura
Este es el zoom in del día 1 del evento. La imagen izquierda es la oficial, con una textura cargada como fondo, haciendo difícil la lectura. En la imagen derecha removí el fondo para fines prácticos de la explicación.
Como primera impresión, el horario es bastante difícil de navegar debido a la mala elección del uso de un patrón con textura tan cargada como fondo. Esto dificulta la lectura ya que, en vez de ayudar a resaltar la información, hace que se mezcle con el fondo y genera un ruido visual a la hora de crear conexiones entre el escenario, el grupo y la hora en el que se presenta.
El consejo es optar por un fondo liso de un color claro o una textura que no sea tan protagónica para darle espacio a lo verdaderamente importante en la imagen, la información.
Como usuario, seguimos con nuestra navegación visual para determinar cuál va a ser nuestra agenda en el festival. Así es como vamos enfocando la mirada en las cajas de texto con los grupos que nos interesan y comenzamos a formar en nuestra cabeza una idea del horario que debemos seguir.
Pero mientras lo vamos haciendo podemos notar que este ejercicio se vuelve particularmente difícil con la imagen y eso es debido a los siguientes errores de funcionalidad.
Con fines prácticos removí la textura del fondo para facilitar la lectura de las siguientes explicaciones.
Proporción
Aquí se pueden identificar las inconsistentes proporciones de lo que representan como “10 minutos”.
Una de las fallas más considerables de este diseño es la falta de uso en las proporciones de los elementos. En la imagen posterior, señalé el horario final de la banda Phosphorescent (línea verde) y el principio del grupo Sales(línea morada) e Inhaler (línea rosa). Cada marca está separada por 10 minutos de diferencia, sin embargo, visualmente esto no está representado de una manera concisa ya que las cajas de texto tienen notorias distancias con tamaños irregulares (marcas verticales rojas).
Un error visual así puede llegar a confundir al usuario al hacerlo creer que una presentación empieza a una hora equivocada, estropeando el plan mental que se creó para la agenda del día en el festival. El diseño aquí falla en su misión de presentar la información de forma clara y fácil de consumir.
Segundo ejemplo de como la Proporción no está siendo respetada en el diseño.
Si aislamos las cajas de texto con los grupos, podemos identificar que los tamaños tanto de ancho y alto no son consistentes. El diseño en este caso no respeta las proporciones. Podemos ver cómo el grupo Shaed y el Pip Blom, que aunque sus presentaciones están marcadas con una misma duración de 30 minutos, no son del mismo tamaño. De igual caso con Bad Suns y Miami Horror, con una duración de 40 minutos. En el caso de Alice Merton, con un show de 50 minutos, podemos ver un considerable aumento de tamaño en la altura de la caja, pero dicha proporción no es respetada a lo largo del diseño.
El consejo es que, si se va a usar el “tamaño” como herramienta para identificación de tiempo, se deben mantener las proporciones dentro de todo el diseño. De lo contrario la representación de este elemento no va a significar nada porque no se están usando los mismos parámetros en todo.
Jerarquía
El escenario Corona Light está representado más pequeño en el diseño, aunque este es el escenario principal. Más importante que el de Doritos, Levi’s y Seat que tienen un mayor tamaño visual en el horario.
Hay una frase que me gusta mucho que dice “Si todo es importante, nada es importante”. La tengo siempre en mente a la hora de diseñar como recordatorio al uso de diferenciación en jerarquías.
Hay varias herramientas visuales para hacer esta distinción. Mediante el color, tamaño, posición, en tipografía está el grosor del texto, uso de mayúsculas, etc. Todas estas herramientas facilitan la lectura e interpretación visual.
Este diseño en específico carece de esto ya que nos presenta del mismo tamaño y todo en mayúsculas el nombre de la banda y el horario a presentarse en la caja de texto así como los horarios desglosados del lado izquierdo. Aquí falla en marcar esa distinción, y no guía al usuario dentro de su navegación visual a interpretar la información de manera sencilla.
Otra falla de jerarquía se encuentra en los nombres de los escenarios, donde se puede ver que sus tamaños no representan visualmente su nivel de importancia ya que el escenario Corona y Corona Light eran los principales y más importantes pero en el diseño no se ve reflejado esto a comparación de los otros.
Al emplear las herramientas de distinción de jerarquía, facilita la lectura e identificación de los elementos más importantes en este diseño.
Color
Usar la misma gama de colores, dificulta la lectura y distinción. Sobretodo en medio impresos.
La falla en el elemento del color, aunque es notable en formato digital, tiene una mayor prominencia en su representación impresa. Debido a que las cajas de texto se encuentran dentro de la misma gama de colores, se dificulta su distinción. Esto además de la tonalidad del fondo que habíamos estado omitiendo para fines prácticos de este artículo.
El consejo en este diseño es tener una mejor elección de colores opuestos cuando sean necesarios y complementarios para detalles sutiles.
Layout
El área verde representa los espacios mal aprovechados del diseño.
Cuando un diseño está cargado de información, el uso y buena distribución de espacios se vuelve clave. Esto para lograr que todos los datos quepan en el área de trabajo y que al mismo tiempo puedan ser legibles al usuario. Aquí entra el diseño del layout, donde cada espacio debe ser aprovechado al máximo.
En la imagen superior marcado con verde, se puede ver como el diseño carece de un buen layout ya que se desperdicia mucha área de trabajo en los lados del logotipo y en el área del horario. Con una buena arquitectura, se pudo haber aprovechado mejor el espacio y así poder incrementar el tamaño de la tipografía o inclusive para experimentar con las jerarquías.
Los elementos que están de más al no ser necesarios, crean basura visual y contribuyen al espacio mal aprovechado.
El consejo es que aunque los espacios en blanco y aire son esenciales para lograr un balance con la información, hay que ser muy consientes de cómo empleamos ambos para aprovechar al máximo el área.
Texto
El área verde representa el texto que puede tener una mejora y hacer la lectura más eficiente.
Para este punto ya escaneamos la imagen e identificamos diferentes errores visuales dentro del diseño. Detalles gráficos que si los modificamos un poco pueden ayudar enormemente a la lectura y comprensión de la información. Pero aún queda una herramienta más que nos puede ayudar a transmitir mejor nuestro mensaje, y esta el copy o texto creativo.
Tomemos por ejemplo el horario a la izquierda (marcado en verde). Este elemento se vuelve inútil al no tener un vínculo visual con las cajas de texto en la derecha. En vez de ayudarnos a interpretar mejor el mensaje, hace que el usuario tenga que visualizar una línea horizontal hasta conectar con alguna caja de texto —que ya de por sí tienen proporciones erróneas — .
Este ejercicio se vuelve doblemente complicado con las bandas del escenario Seat (morado) porque son las más alejadas de las horas. Para cuando tu navegación visual llega a estas bandas, seguramente ya habrás perdido la relación visual exacta con el horario, lo cual hace que regreses tu mirada a este primer punto.
Esto sin mencionar las dificultades que presenta tener un fondo tan saturado como el del diseño oficial. La clave está en evitar cualquier elemento que no otorgue algún beneficio al diseño, pero mantener los suficientes para representar el mensaje de forma efectiva.
Mi consejo es incluir el desglose de las horas del lado derecho también, para ayudar al usuario a hacer una relación más rápida. Otro consejo es incluir el día de la semana del horario que estás viendo. Para el usuario siempre será más fácil hacer la identificación por el día semanal (sábado) que el día numérico (16). Recordemos que nuestro trabajo es facilitarle la lectura al usuario.
La respuesta del público
Propuesta de la versión corregida del horario, diseñada por un usuario en Twitter.
Como resultado a la confusión creada por esta mala representación del horario, estuvieron circulando en línea diferentes versiones del horario, pero corregidas por el mismo público. Estas versiones alternas, aunque también tienen áreas de oportunidad, son bastante más legibles y precisas que el diseño original.
La versión mostrada en la parte superior, fue creada por un usuario de Twitter. Este diseño cuenta con las proporciones corregidas y distinción en la tipografía y jerarquía de las cajas de texto. También podemos observar que se empleó “Sábado” y “Domingo” para diferenciar un horario de otro, en contraste con la versión original que utiliza “Noviembre 16” y “Noviembre 17”.
El error aquí es del festival Corona Capital, al hacer que el usuario tenga que trabajar en algo que debería de recibir por sentado de parte de la marca.
Lo optimo es que cada elemento visual esté diseñado para facilitar la organización y lectura del público, proyectando el mensaje deseado de la forma más eficiente posible.
Mi propuesta
Del lado izquierdo se encuentra la imagen oficial original. El lado derecho es mi propuesta del diseño con las observaciones aplicadas.
Para criticar, también hay que proponer, es por eso que este Caso de Estudio no estaría completo sin mi representación corregida del diseño (imagen superior del lado derecho).
Para mi propuesta respeté la esencia del diseño original ya que es la identidad oficial del festival, pero hice unas pequeñas modificaciones para facilitar la lectura y comprensión de la información. Recordemos que la meta final del diseño es informar de la forma más eficiente y clara al usuario.
Tomé en cuenta todos los detalles previamente mencionados en cuanto a
Textura: Se incluyó de manera sutil en la esquina superior derecha, en colores menos prominentes para no intervenir con la lectura del texto
Proporción: El tamaño de la altura de las cajas de texto corresponden con la duración de cada grupo. El tamaño de lo ancho es consistente a lo largo de todo el diseño
Jerarquía: El tratamiento tipográfico que se empleó va de acuerdo a la jerarquía de la información, creando una clara distinción de tamaños para proporcionar diferenciación de jerarquías
Color: Aunque respeté los colores bases del diseño original, modifiqué un poco las tonalidades y el color del fondo para ayudar a resaltar la información del horario
Layout: La distribución de la información está más equilibrada. Teniendo suficiente aire y espacios en blanco pero, al mismo tiempo haciendo buen uso del área de trabajo, logrando incrementar el tamaño de ciertos elementos clave
Texto: Incluí el día (Sábado) en la parte superior para una identificación más rápida, el desglose del horario del lado derecho para facilitar la lectura y eliminé el copy mostrando las “medias horas” (2:30, 3:30, 4:30) para tener un diseño más limpio. En su lugar, incluí líneas punteadas cruzando el desglose del horario del lado izquierdo al derecho para hacer más fácil la navegación visual
En conjunto, si aplicamos las modificaciones de los detalles mencionados, crearíamos un “buen diseño”es decir, uno mucho más eficiente.
Conclusión
Data Visualization es la representación de la información de una manera fácil de entender y que proporcione valor al usuario, diseñada específicamente para ayudarnos a hacer un mejor uso de la información.
De este Caso de Estudio podemos concluir la importancia de Data Visualization, el uso de buenas prácticas en diseño y cómo es que el conjunto de diversas herramientas visuales pueden ayudar al público a tener una mejor experiencia a la hora de leer e interpretar el horario de su festival favorito. Porque como mencioné al principio, la buena organización de tiempo es clave para aprovechar al máximo el evento y lograr ver tantos artistas posibles.
También, espero haber proporcionado puntos importantes para que la próxima vez que se enfrenten a un debate sobre si un diseño es “bueno” o no, puedan basar sus argumentos desde el lado funcional y no tanto del estético.
Para finalizar, les dejo una frase muy certera del gurú de Data Viz, que recomiendo tener siempre en mente a la hora de diseñar y ejercer una opinión sobre diseño.
“Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space.”
― Edward R. Tufte, The Visual Display of Quantitative Information
