Home Blog/ Transformaci贸n digital/
Transformaci贸n digital

Leyes de Gestalt: 驴c贸mo aplicarlas para la visualizaci贸n de datos?

Flor Medina - 19 May 22

Articulo

7 min.

驴Sab铆as que si aplicas correctamente las leyes de Gestalt, tu audiencia puede ser capaz de entender y recordar el mensaje que quieres transmitir? 隆As铆 es! Los principios de Gestalt son tan poderosos que se aplican en la visualizaci贸n y en el desarrollo de datos.

La utilizaci贸n de las leyes de Gestalt en la publicidad se ha venido dando desde hace mucho tiempo, sin embargo, poco se conoce en c贸mo se pueden aplicar estos principios dentro del manejo de data. Si quieres conocer m谩s al respecto, est谩s en el lugar indicado. 

驴Quieres saber c贸mo funcionan las leyes de Gestalt en la visualizaci贸n de datos? En esta nota te contaremos en qu茅 consisten las leyes de Gestalt, c贸mo funcionan y c贸mo aplicarlas en tus proyectos digitales.

驴Listo para una gu铆a maestra de data? 隆Empecemos!

banner b2b demo business

驴Qu茅 son los principios de Gestalt?

Las Leyes de Gestalt son unos principios que surgen a partir de la corriente psicol贸gica Gestalt, la cual sostiene que el ser humano tiende a percibir y organizar la informaci贸n como un todo y no como la simple suma de sus partes. 

Es en base a esta premisa que se formularon los principios de la Gestalt, tambi茅n conocidas como las leyes de la percepci贸n, a trav茅s de los cuales se busca entender c贸mo es que el cerebro humano transforma y ordena todos los elementos que percibe. 

Daniela Baena, profesora de nuestro curso online de Fundamentos de Dise帽o Gr谩fico, refiere que 鈥渦na imagen est谩 compuesta por much铆simos elementos, pero cada elemento hace parte de un gran todo. As铆 cualquier transformaci贸n en alguno de estos elementos particulares terminar谩 por afectar c贸mo percibimos ese gran todo鈥. Las Leyes de Gestalt se encargan de analizar todos estos componentes y, de ese modo, entender mejor la configuraci贸n que se realiza a nivel cerebral. 

驴Qui茅n cre贸 las Leyes de Gestalt? Estos principios fueron establecidos por el psic贸logo Max Wertheimer. Adem谩s, tambi茅n recibi贸 importantes contribuciones de los investigadores Wolfgang K枚hler y Kurt Koffka. 

Interesante, 驴cierto? 驴Alguna vez te imaginaste utilizar las leyes de Gestalt para la data o el dise帽o de un sitio web? Y es que todo parte del conocimiento de la percepci贸n del ser humano para poder definir la estructura, la navegaci贸n y la usabilidad de un sitio online.

Qu茅 son los principios de GestaltFuente: Pexels

Las Leyes de  Gestalt y su aplicaci贸n para la visualizaci贸n de datos

Para entender qu茅 son las leyes de Gestalt y su aplicaci贸n para la visualizaci贸n de datos, es importante explicar la relaci贸n que existe entre la narrativa, los datos y la visualizaci贸n de los mismos. 

  • Narrativa y datos: La combinaci贸n de ambos sirven para ofrecer a la audiencia una explicaci贸n sobre los mismos.
  • Visualizaci贸n y datos: La palabra enfoque es el resultado de la combinaci贸n de ambos. A帽adir una visualizaci贸n a los datos ayuda a informar de forma entretenida e inteligente.
  • Narrativa y visualizaci贸n: Esta combinaci贸n tiene como resultado la captaci贸n de clientes.

驴Y qu茅 ocurre cuando se juntan los tres? Si los elementos est谩n combinados correctamente, siguiendo los principios de la Gestalt, el resultado ser谩 un data storytelling que conduzca al cambio positivo del negocio o de tu proyecto.

驴Cu谩les son las Leyes de Gestalt? 

Antes de continuar explicando el uso de las Leyes de Gestalt en la visualizaci贸n de datos, vamos a mencionar cada uno de estos principios:

  • Ley de la proximidad 
  • Ley de semejanza o similitud
  • Ley de regi贸n com煤n 
  • Ley de continuidad
  • Ley de cierre o clausura
  • Ley de conexi贸n

A continuaci贸n, profundizaremos en cada una de ellas y su relaci贸n con la organizaci贸n de los datos.

banner business

驴Qu茅 es la ley de proximidad de Gestalt?

Una de las leyes de Gestalt m谩s conocidas y, que est谩 dentro de las reglas m谩s importantes del dise帽o UX, es la ley de proximidad.

驴Qu茅 nos explica la ley de proximidad de Gestalt? Mientras m谩s cerca est茅n los objetos entre s铆, hay una mayor probabilidad de pensar que los objetos pertenecen al mismo grupo. 

Esta es una forma muy sencilla de vincular los datos que quieres que se visualicen juntos y que se entiendan como parte de una misma unidad. 驴Y qu茅 es lo que necesitas para aplicar una de las 6 leyes de Gestalt? 隆Algo muy sencillo! Incluir espacios en blanco en el dise帽o para separar los grupos de datos de la otra informaci贸n que los rodea.

驴C贸mo aplicar la ley de proximidad de Gestalt?

Seg煤n el art铆culo Gestalt Principles: The Complete Overview de la p谩gina UXCam, la mejor forma de aplicar la ley de proximidad de Gestalt en el dise帽o, es colocando aquellos  elementos que guardan alg煤n tipo de relaci贸n a una corta distancia uno del otro; por ejemplo, im谩genes con descripciones o botones con texto. 

 Debes tener en cuenta que, en las leyes de Gestalt, el principio de proximidad, funciona bien solo si decides agrupar elementos que guarden una relaci贸n; de otra manera, crear谩s confusi贸n en el usuario si decides agrupar elementos que no est茅n relacionados.

 

ley proximidad gestalt
Imagen: uxcam.com

隆Veamos esto aplicado en un ejemplo!

Ejemplo de la ley de proximidad de Gestalt

Ejemplos de las leyes de Gestalt 

Recordemos que la definici贸n de esta ley de Gestalt nos dice que tendemos a percibir diferentes elementos como un grupo, siempre y cuando est茅n cerca unos de otros. Este principio se puede emplear en la visualizaci贸n de datos para estructurar ordenadamente la informaci贸n. Veamos el siguiente ejemplo, 驴puedes notar c贸mo el formulario de pago se ve bastante ordenado?

ejemplos leyes gestalt web
Imagen: Dribbble

Si te fijas bien, existen 4 grupos de elementos. Estos grupos no est谩n marcados ni delimitados a su alrededor. Sin embargo, aplicando la ley de proximidad de Gestalt, lo percibimos como un solo grupo o conjunto de informaci贸n. De esta manera, el usuario podr谩 navegar con mayor facilidad a trav茅s de la web y completar su transacci贸n.

ejemplo ley proximidad gestaltImagen: Dribbble

驴Qu茅 es la ley de semejanza de Gestalt?

La ley de semejanza de Gestalt, tambi茅n conocida como la ley de similitud, se utiliza de forma muy recurrente en el dise帽o de interfaces. Una caracter铆stica muy frecuente en este tipo de dise帽o, es que , los objetos del mismo color, tama帽o, forma y orientaci贸n suelen pertenecer al mismo grupo. Esto corresponde a la tendencia que tiene el cerebro humano de agrupar las cosas seg煤n sus caracter铆sticas o factores, siendo una  de las famosas leyes de Gestalt.

驴No te ha pasado que casi siempre asocias objetos por sus atributos y caracter铆sticas que tienen en com煤n? La ley de semejanza de Gestalt funciona muy bien como un medio para identificar diferentes conjuntos de datos en un gr谩fico. Incluso, si quieres vincular datos que est谩n en ubicaciones separadas, puedes aplicar el principio de semejanza para establecer un v铆nculo entre ellos. 驴C贸mo hacerlo? Por ejemplo, usando un mismo color que los represente, una misma forma o incluyendo alg煤n patr贸n caracter铆stico.

驴C贸mo aplicar la ley de semejanza de Gestalt?

隆Ahora ya sabes en qu茅 consiste la ley de semejanza de Gestalt! Mediante este principio, los usuarios interpretan objetos de apariencia similar como un grupo. A partir de esta informaci贸n,  puedes comprender mejor c贸mo plantear esta ley en un sitio web o aplicaci贸n.

Para aplicar la ley de similitud en la arquitectura de una web, necesitas que los elementos con el mismo valor o significado, se dise帽en de forma similar. Los usuarios reconocer谩n de forma inmediata la funci贸n de un elemento y sabr谩n que cualquier elemento de aspecto similar, tendr谩 la misma funci贸n dentro de un grupo.

ley semejanza gestalt
Imagen: uxcam.com

Ejemplo de la ley de semejanza de Gestalt

Ejemplos de las leyes de Gestalt 

Ahora es momento de ver c贸mo aplicar  la ley de similitud de Gestalt. Para ello, se puede considerar el tama帽o de las im谩genes para comunicar una relaci贸n entre ellas. Como se aprecia en el ejemplo, los rect谩ngulos de 鈥渕ovie鈥 tienen un tama帽o rectangular similar, mientras que los textos como 鈥渕ovie theaters鈥 y 鈥渘ext cinema鈥 son de forma cuadrada para indicar que pertenecen a otro grupo.

ejemplo ley semejanza gestaltImagen: careerfoundry.com

驴Qu茅 es la ley de regi贸n com煤n de Gestalt?

Dentro de las leyes de Gestalt aplicadas a la visualizaci贸n de datos, encontramos la ley de regi贸n com煤n de Gestalt. 

驴Qu茅 plantea la ley de regi贸n com煤n de Gestalt? De acuerdo a este principio, un grupo de objetos puede estar encerrado por cualquier cosa que forme un borde visual a su alrededor (una l铆nea o un campo de color). Esta regi贸n com煤n hace que los objetos parezcan estar separados en un lugar distinto al resto. 驴Y en d贸nde se visualiza este principio? 隆F谩cil! Lo ver谩s con frecuencia en el uso de bordes y colores de rellenos en tablas y gr谩ficos para agrupar informaci贸n y diferenciarla.

驴C贸mo aplicar la ley de regi贸n com煤n de Gestalt?

Si quieres crear interfaces fant谩sticas aplicando la ley de regi贸n com煤n de Gestalt, entonces, tienes que agregar a los elementos relacionados un marco para demostrar que pertenecen a un solo conjunto. Al definir un borde claro, estar谩s indicando a los usuarios que los elementos que se encuentran al interior forman parte de un grupo.

ley region comun gestalt
Imagen: uxcam.com

Ejemplo de la ley de regi贸n com煤n de Gestalt

Ejemplos de las leyes de Gestalt 

El blog Welcome to UX, nos comparte un ejemplo interesante del uso de la ley de regi贸n com煤n de Gestalt.

Una manera de aplicar el principio de regi贸n com煤n se puede apreciar en la secci贸n explorar de Spotify, en la cual se visualiza una divisi贸n del contenido por categor铆as de una manera uniforme. Cada elemento est谩 compuesto por una imagen de background, un 铆cono y un t铆tulo. Todos tienen un dise帽o similar, sin embargo, sabemos que cada casilla representa un contenido diferente.  

驴Y c贸mo Spotify separa los elementos aplicando las leyes de Gestalt? Mediante el uso de p铆xeles de espacio que rodean a cada una de las casillas. De esta manera, los usuarios se dar谩n cuenta de que se trata de diferentes categor铆as; sin embargo, todos pertenecen al mismo tipo de material, o sea, a la misma regi贸n com煤n.

ejemplo spotify gestalt
Imagen: welcometoux

驴Qu茅 es la ley de continuidad de Gestalt?

Dentro de las principales leyes de Gestalt, no pod铆amos dejar de mencionar a la ley de continuidad aplicada tambi茅n al dise帽o UX y UI

De acuerdo a la ley de continuidad de Gestalt, los elementos individuales que siguen un mismo patr贸n o se colocan en una misma direcci贸n suelen estar relacionados entre s铆. Nuestro cerebro percibe  los objetos como si fueran parte de un todo 煤nico.

En este principio de Gestalt, lo principal es que se puedan visualizar las agrupaciones sin la necesidad de utilizar l铆neas de cuadr铆cula para separarlas. Existe una secuencia que est谩 organizada y dispuesta hacia una misma direcci贸n. La alineaci贸n (natural) por s铆 sola, hace que la agrupaci贸n se distinga f谩cilmente.

 

驴C贸mo aplicar la ley de continuidad de Gestalt?

La aplicaci贸n de la ley de continuidad de Gestalt para el dise帽o de un sitio web o una app, debe estar orientada a facilitar la navegaci贸n del usuario, permitiendo que pueda encontrar f谩cilmente los diferentes elementos de un producto sin tener que pasar minutos buscando entre la p谩gina. 驴Esto qu茅 quiere decir? B谩sicamente, los ojos de los usuarios deben desplazarse autom谩ticamente sobre el dise帽o y el contenido.

Ojito: Al aplicar una de las teor铆as de Gestalt, como la del principio de continuidad, puedes guiar a los usuarios a trav茅s de distintos segmentos dentro de una p谩gina web. 驴Y c贸mo es que se produce esto? Pues cada vez que se interrumpe la continuidad de los elementos, los usuarios perciben que se ha comenzado una nueva secci贸n o segmento. Esto ayudar谩 a diferenciar y a recorrer las distintas secciones de una web con mayor facilidad y rapidez.

ley continuidad gestalt
Imagen: uxcam.com

Ejemplo de la ley de continuidad de Gestalt

Ejemplos de las leyes de Gestalt 

驴Has notado c贸mo a los ojos les gusta viajar a lo largo de l铆neas continuas, sigui茅ndolas y fluyendo con ellas? Muchas veces, la mente tiende a seguir caminos y a agrupar elementos de manera inconsciente. De esta manera, es que se puede hacer uso de la  ley de continuidad de Gestalt en el campo de la arquitectura web.

Veamos este ejemplo de la aplicaci贸n de la ley de continuidad de Gestalt en la tienda online de la marca Nike. Como podr谩s notar, se est谩n utilizando las l铆neas para capturar la atenci贸n y guiar a los usuarios hacia los elementos m谩s importantes dentro de una interfaz de usuario. De esta manera, es f谩cil para el cliente apreciar cu谩les son los productos que est谩n en venta y ejecutar su compra.

nike ejemplo gestaltImagen: smashingmagazine

驴Qu茅 es la ley de cierre de Gestalt?

驴No te ha pasado que cuando ves una figura incompleta, tienes la necesidad de completar aquel espacio faltante para obtener como resultado una figura de forma familiar? 隆Eso tiene explicaci贸n! De acuerdo a las leyes de Gestalt, este efecto se produce por el principio de cierre.

La ley de cierre de Gestalt afirma que percibimos las estructuras abiertas como cerradas, completas y regulares siempre que exista una forma razonable de hacerlo. Es decir, que si un contorno no est谩 cerrado en su totalidad, la mente tiende a hacerlo. 驴Y c贸mo se demuestra eso? Se puede aplicar esta ley al percibir estructuras completas en vectores (como por ejemplo, en el dise帽o gr谩fico).

驴C贸mo aplicar la ley de cierre de Gestalt?

Esta es una de las leyes de Gestalt que se utiliza muy a menudo para dise帽ar los 铆conos de una aplicaci贸n o p谩gina web. Con este principio es posible dise帽ar im谩genes m谩s simples, pero que a煤n puedan ser entendibles para el ojo humano. 

La ley de cierre de Gestalt es una de las m谩s utilizadas dentro del campo del arte publicitario, ya que te permite generar efectos visuales muy est茅ticos. Para su correcta aplicaci贸n, lo m谩s recomendable es disminuir la cantidad de elementos necesarios para que los usuarios comprendan lo que est谩s mostrando visualmente. 隆Podr铆a decirse que aqu铆 menos es m谩s.

ley cierre gestalt
Imagen: uxcam.com

Ejemplo de la ley de cierre de Gestalt

Ejemplos de las leyes de Gestalt 

驴Sab铆as que los elementos de carga o loading son un ejemplo muy caracter铆stico de c贸mo aplicar la ley de cierre en las interfaces de usuario? 

Siempre que un producto necesite un poco m谩s de tiempo  para completar una tarea, los elementos de carga informar谩n que el producto a煤n est谩 funcionando en segundo plano. En este ejemplo se ilustra la ley de cierre de Gestalt, a pesar de que solo se visualiza las l铆neas de animaci贸n, el cerebro har谩 referencia a un c铆rculo completo.

ejemplo gestalt leyes
Imagen: careerfoundry.com

驴Qu茅 es la ley de conexi贸n de Gestalt?

De las 6 leyes de Gestalt, es probable que el principio de conexi贸n sea el m谩s f谩cil de comprender. La ley de conexi贸n de Gestalt establece que las personas tienden a agrupar elementos cuando est谩n conectados entre s铆, percibi茅ndolos como un todo.

驴De qu茅 trata la ley de conexi贸n de Gestalt? En t茅rminos de percepci贸n visual, este principio genera una conexi贸n directa entre objetos. Esta ley es muy 煤til para vincular datos no cuantitativos y, adem谩s, afirma que todos los elementos que visualmente est谩n conectados entre s铆, son percibidos como elementos que guardan una relaci贸n estrecha. 

La aplicaci贸n de la ley de conexi贸n de Gestalt se puede dar de diferentes maneras. No obstante, la manera apropiada de agrupar los elementos es por medio de colores, l铆neas o marcos. De esta manera, resultar谩 mucho m谩s f谩cil para el cerebro humano establecer la relaci贸n del contenido.

驴C贸mo aplicar la ley de conexi贸n de Gestalt?

Puedes aplicar la ley de conexi贸n de Gestalt para la visualizaci贸n de datos, mediante una conexi贸n uniforme en un mismo dise帽o de distintas categor铆as y jerarquizaciones de informaci贸n y, adem谩s, presentar distintos contenidos, sin perder el contexto. 

Por ejemplo, este principio de las leyes de Gestalt, tiene mucha presencia en los ecommerce cuando se muestran los 鈥減roductos relacionados鈥漮 tambi茅n cuando se implementa el men煤 desplegable para visualizar y explorar las diferentes categor铆as de productos.

ley conexion gestalt
Imagen: uxcam.com

Ejemplo de la ley de conexi贸n de Gestalt

Ejemplos de las leyes de Gestalt 

En la p谩gina Welcome tu UX se puede visualizar un ejemplo del correcto uso de la ley de conexi贸n de Gestalt. Como ver谩s en las im谩genes, a pesar de ser tres sitios web distintos, se muestra una uniformidad en forma y estilo, lo que permite establecer una asociaci贸n entre los productos que se muestran en la web.

ejemplo conexion gestaltImagen: welcometoux

Beneficios de aplicar las leyes de Gestalt a la visualizaci贸n de datos

Probablemente, en un inicio te resulte complicado distinguir todos estos principios a simple vista. Sin embargo, con la pr谩ctica y elaborando tus propios ejemplos, podr谩s dominar las leyes de Gestalt a la perfecci贸n.

Pero, 驴por qu茅 es importante conocer los principios de Gestalt y aplicarlos en la organizaci贸n de los datos? 隆Es sencillo! El prop贸sito principal es hacer que la data pueda ser percibida de forma correcta y que la navegaci贸n dentro de la p谩gina web pueda ser mucho m谩s placentera. Cuando un usuario entra a una p谩gina web y no encuentra la informaci贸n que necesitas en al menos 1 minuto, lo m谩s probable es que se aburra y e retire de la web. 

Recuerda que ofrecer una experiencia de compra positiva es fundamental para cualquier negocio que quiera fidelizar a sus clientes, sobre todo si se trata de una tienda online. Es por eso que siempre debes tener presente las leyes de Gestalt en la arquitectura web. 

Como hemos visto, los principios de Gestalt son muy poderosos si se aplican correctamente en la visualizaci贸n de la data y en las interfaces de cualquier sitio web. Si implementas estas leyes de manera correcta y l贸gica, pueden otorgar el efecto deseado a una audiencia a partir de la correcta visualizaci贸n de datos.

banner B2B descargables business

驴Quieres aprender a crear dise帽os para aplicaciones m贸viles incre铆bles? Aqu铆 te compartimos algunas plantillas para el dise帽o de interfaces en aplicaciones m贸viles que te ayudar谩n a causar una gran impresi贸n en los usuarios. 

驴Te interesa seguir aprendiendo de data y c贸mo funciona? Entonces te invitamos a darle un vistazo a nuestro cat谩logo de cursos online de Data y Anal铆tica. Aqu铆 no solo conocer谩s los fundamentos del an谩lisis de datos, sino que tambi茅n podr谩s aprender a c贸mo utilizar diferentes herramientas de anal铆tica y visualizaci贸n.  

隆Buena suerte!