¡Buenos y bellos días a todos! Aquí nos encontramos de nuevo por nuestro pequeño y cálido espacio de #BestInMicro! Un pequeño espacio donde les voy contando trucos, secretos y experiencias en maravilloso mundo de la consultoría.
Por hoy vamos a dejar de lado MicroStrategy. Lo cierto es que podemos ser los mejores arquitectos o administradores, pero lo que le da valor a la herramienta es que los usuarios la usen. Para esto, además de tener un sistema óptimo, es de vital importancia que nuestros tableros reflejen la información de la mejor forma posible. Y aquí, a la hora de interpretar lo que se ve, el cerebro actúa de una forma muy peculiar. Es por eso que hoy veremos un poco cómo reaccionamos ante distintos diseños dependiendo colores, formas y distribución de los objetos que presentamos. Señoras y señores, hoy les traigo: Las leyes de la Gestalt.
La Gestalt fue una escuela psicológica que surgió en Alemania a principios del siglo XX. Es un conjunto de principios que analizan la percepción de las composiciones de elementos en el subconsciente.
El término gestalt no tiene traducción precisa al castellano. El foco de esta corriente fue el estudio de la percepción y postuló que las imágenes son percibidas en su totalidad; más como forma o configuración que como mera suma de sus partes.
En síntesis, la Gestalt analizó la manera en que el ojo organiza las experiencias visuales y cómo son interpretadas por el cerebro. No es una teoría del diseño, pero sus conclusiones son relevantes para la comunicación visual, y se utiliza a la hora de hacer cualquier tipo de diseño (ya sea para panfletos, marketing, dashboards, websites.. etc.). Yo hoy lo enfocaré al diseño de tableros, pero aplican las mismas condiciones para UI/UX design, como muy bien nos explica Eliana Gkogka en su blog (de donde utilizo varias imágenes aquí presentes).
Como dijimos antes, los principios de las leyes de la Gestalt parten de la base de cómo se comporta el cerebro a la hora de percibir imágenes. Hay 4 ideas o puntos clave:
1. Emergencia: Las personas tienden a identificar los elementos primero en su forma general delineada. Nuestro cerebro reconoce un objeto simple y bien definido más rápido que uno detallado.
2. Reificación: Las personas pueden reconocer objetos incluso cuando faltan partes de ellos. Nuestro cerebro hace coincidir lo que vemos con patrones familiares almacenados en nuestra memoria y llena los huecos. De ahí que los logos sencillos funcionen tan bien.
3. Multi-estabilidad: La gente puede identificar objetos diferentes de formas ambiguas, obteniendo una forma principal y otra más difícil de ser identificada. Como resultado, una vista se volverá más dominante mientras que la otra será más difícil de ver.
4. Invariabilidad: El ser humano reconoce objetos simples independientemente de su rotación, escala y traslación. Nuestro cerebro percibe objetos desde diferentes perspectivas, a pesar de su apariencia diferente.
Es un poco loco, ¿no? ¿habías caído en estos conceptos antes? Las ilusiones ópticas juegan mucho con estos principios… y las publicidades, ¡ni te cuento!
Entonces, vamos al grano… con ustedes, aquí están, estas son las leyes de la Gestalt.
1. Principio de Semejanza
Los elementos que comparten características visuales similares se perciben más relacionados que los que no comparten características similares.
Al tener figuras o imágenes de características similares (ya sea por color, forma, tamaño, etc), automáticamente el cerebro toma cada elemento individual como parte de un grupo.
De la misma forma, puede tomarse un objeto y destacarlo o enfatizarlo generando una anomalía. Es decir, que se rompe el patrón de similitud con el resto de los objetos.
En la primera imagen, podemos distinguir dos grupos distintos, mientras que, en la segunda, percibimos 3 columnas negras y dos naranjas, en lugar de distintos puntos distribuidos uniformemente.
Aquí hay otro ejemplo un poco más gráfico. En la imagen, el color naranja ayuda a establecer una conexión entre la provincia de Córdoba (Argentina), su superficie y su población en comparación con el resto del país.
El tomar ventaja de este principio a la hora de diseñar un tablero o una aplicación, permite agrupar links, botones de navegación, gráficos e incluso destacar información relevante. Por ejemplo, en la siguiente imagen, sin tener ni una sola palabra o número percibimos fácilmente como están organizados y agrupados los elementos.
2- Continuidad
Cuando leemos un libro, leemos de izquierda a derecha y de arriba hacia abajo. En otras culturas, el orden es distinto. Esto que parece básico, es muy importante al definir el orden o secuencia de los objetos.
Muchos artistas, como van Gogh, juegan con el movimiento estático. En la siguiente imagen, verán que las líneas se cruzan, ¿correcto?
y 
. El cerebro visualiza el movimiento y lo interpreta. Esto hay que considerarlo a lo hora de diseñar dashboards. El movimiento indica evolución, y si no existe relación entre cada una de las figuras, el ojo recibe señales de algo que no existe, creando una unidad entre objetos independientes. 
Los elementos que siguen una línea continua se perciben agrupados. Cuanto más suaves son los segmentos de línea, más los vemos como una forma unificada; nuestra mente prefiere el camino de menor resistencia.
Si miran rápido la imagen de aquí debajo, ¿qué impresión les da? ¿no sienten esa incomodidad de seguir el color o seguir la línea?
A la hora de diseñar un tablero o armar un gráfico o reporte, la disposición lineal de filas y columnas son buenos ejemplos de continuidad. Podemos usarlos en menús y submenús, listas, títulos, selectores, etc.
3- Cierre
Este principio es muy utilizado en iconografía. Como comenté antes, es muy explotado a la hora de crear logos simples. Esta técnica utiliza la tendencia que tenemos a cerrar formas.
Esto sucede ya que las formas cerradas y acabadas son más estables visualmente, lo que hace que tendamos a cerrar y a completar con nuestra imaginación las formas percibidas buscando la mejor organización posible.
Si lo llevamos al diseño, cuando se le presente la cantidad correcta de información, nuestro cerebro sacará conclusiones precipitadas al llenar los vacíos y crear un todo unificado. De esta manera podemos disminuir la cantidad de elementos necesarios para comunicar información, reduciendo la complejidad y haciendo que los diseños sean más atractivos. El cierre puede ayudarnos a minimizar el ruido visual y transmitir un mensaje, reforzando un concepto dentro de un espacio bastante pequeño.
Por ejemplo, en el siguiente grid vemos la diferencia entre poner líneas negras dividiendo las filas y columnas, o dejarlas vacías, dándole lugar a nuestro cerebro a que genere esa separación. Queda mucho más limpio y agradable a la vista, ¿no?
4– Proximidad
Cuando colocamos las figuras y formas, el ojo genera una relación directa entre la distancia de tiempo- espacio que hay entre los objetos.
Podemos utilizar el principio de proximidad en el diseño de dashboards para agrupar información similar, organizar el contenido y ordenar los diseños. Su correcto uso tendrá un impacto positivo en la comunicación visual y la experiencia del usuario.
Como establece el principio, los elementos que están relacionados deben permanecer cerca unos de otros, mientras que los elementos no relacionados deben mantenerse más separados. El espacio en blanco juega un papel vital aquí, ya que crea un contraste que guía los ojos de los usuarios en la dirección deseada. El espacio en blanco puede impulsar la jerarquía visual y el flujo de información, contribuyendo a diseños fáciles de leer e interpretar.
5- Figura y Fondo
Como comentábamos al principio, el cerebro no es capaz de enfocar en dos imágenes en simultáneo. Ya me dirán ustedes que ven aquí debajo… ¿un árbol o animales?
Podemos definir a la figura como elemento que existe en un espacio o campo destacándose en su interrelación con otros elementos, mientras que el fondo es la parte del campo que contiene elementos interrelacionados que sostienen a la figura que, por su contraste, tienden a desaparecer.
Es muy importante el tener en cuenta que, si el fondo se mezcla con los colores, texturas o formas que mostramos en nuestros gráficos, no solo podemos terminar perdiendo el hilo del storytelling de nuestro dashboard, sino que puede generar que algún dato se pierda en el camino.
6- Simetría y orden
Los elementos simétricos son más agradables y armoniosos, visualmente hablando. Dan sensación de orden y estabilidad.
Este principio se enfoca en que una composición no debe proporcionar una sensación de entropía (desorden), ya que de lo contrario el espectador perderá el tiempo tratando de localizar el elemento que falta, o solucionar el problema, en lugar de centrarse en el mensaje que la composición o diseño quiere transmitir.
De aquí viene la importancia de respetar las distancias, los espacios en blanco, las jerarquías de objetos y cómo se van agrupando los distintos elementos dentro de nuestro tablero.
Si miramos en la imagen de aquí debajo, verán que el primer reflejo que tienen es de ver como un grupo aquellos elementos que se encuentren en simetría, sin importar color, distancia o forma.
7- Pregnancia (o buena forma)
Definimos a la pregnancia como la forma más simple, o más sencilla de interpretar y de presentar las figuras u objetos. Asi mismo, las formas sencillas son más pregnantes que las complejas.
Se dice que lo percibido es pregnante cuando luego de una descripción verbal corriente puede ser reconocido.
A la hora de diseñar logotipos, por ejemplo, este es uno de los factores más importantes, ya que una imagen es más “pregnante” cuando se puede recordar rápidamente. Si les muestro algunas de las siguientes imágenes, las reconocen fácilmente, ¿no?
Yendo a nuestro caso, hablando de tableros y dashboards, muchas veces sucede que tienen un exceso de colores, formas, texturas, graficos, sin ningún tipo de orden o jerarquía. Aquí debajo les dejo un tablero que, al mirar cada grafico individualmente puede estar muy bien hecho, pero en el conjunto general es tan poco pregnante que pierde el sentido de lo que muestra y es imposible sacar información.
8- Experiencia
Este principio se basa en que cada persona, dependiendo origen, cultura o conocimientos, puede interpretar o leer el tablero de una forma diferente. Como explicaba anteriormente, en occidente estamos acostumbrados a leer de izquierda a derecha, mientras que en otros lugares la información la leen en distinto sentido.
Si miramos un tablero hecho, por ejemplo, en Asia, las imágenes, tipografías y paletas de colores serán sin duda muy distintas a las que acostumbramos aquí.
Esto no se basa exclusivamente en una cuestión de cultura o distribución geográfica, sino que se basas en el entorno en el que una persona se acostumbró a interpretar su contexto y como observa y percibe lo que ve.
9- Jerarquia
Plantea la importancia de presentar los elementos de forma jerarquizada, de lo principal a lo accesorio. Es decir, cuando colocamos, por ejemplo, un texto y por debajo colocamos otro, estamos dando una jerarquía, implicando que lo de arriba tendrá una importancia o clasificación igual o mayor a lo de abajo, y a la inversa indicamos que, al menos, lo de abajo pertenece al texto de arriba´
Si bien muchas de las leyes de la Gestalt parecen intuitivas, es importante tener siempre en cuenta este tipo de cuestiones. El crear tableros y dashboards sencillos de leer e interpretar es primordial para que los usuarios puedan optimizar el uso de los tableros y su información. Para mas info tambien les recomiendo darse una vuelta por la nota de mi amigo Lucas Justo, que fue quien dio una buena introducción a este tema
En fin, espero que les haya resultado interesante. He encontrado muchos nombres distintos y variantes de las leyes, pero creo que aquí he hecho un resumen bastante completo. Ya me dirán si las conocían o si han descubierto algo nuevo hoy. Aquí me despido, y ¡Hasta la próxima!
* Tu información será utilizada exclusivamente para contactarte en relación al Business Data Master. No hacemos spam ni compartimos datos con terceros.