✅ ¿Cuáles son las leyes de Gestalt para datos? [2021]
Leyes de Gestalt: las 6 claves para la visualización de datos

Leyes de Gestalt: las 6 claves para la visualización de datos

Última actualización 25 de Julio del 2021Tiempo de lectura: 7 min.

Alejandra Mujica

¿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.

¿Quieres saber cómo funcionan y cómo se aplican las leyes de Gestalt en la visualización de datos? En esta nota te contaremos cuáles son las leyes de Gestalt, cómo funcionan y cómo aplicarlas en tus proyectos digitales.

¿Listo para una guía maestra de data? ¡Empecemos!
 

¿Qué son los principios de Gestalt?

Para entender de una manera sencilla qué son los principios de Gestalt, conversamos con nuestro profesor y Data & Analytics Manager en KPMG México , Adrian Béjar, del curso online Data Storytelling, quien nos comentó de qué tratan estas famosas leyes de Gestalt.

“Gestalt es una corriente de la psicología de corte teórico y experimental que se dedica al estudio de la percepción humana. Los principios de percepción visual que hoy en día se aceptan y definen cómo las personas interactúan con los estímulos visuales y crean orden a partir de ellos. Esto te ayudará a identificar qué elementos de tus imágenes son señales, ya sea la información que quieres comunicar y cuáles pueden ser ruido o desorden.

Los principios de Gestalt nos ayudan a comprender cómo ve la gente, qué podemos utilizar para identificar elementos innecesarios y facilitar el procesamiento de nuestras comunicaciones visuales. Sus ideas se basan principalmente en la configuración del todo y su premisa básica es la explicación de cómo el todo es mayor que la suma de sus partes, es decir, a sumar las partes emergen elementos que por separado no se percibirán.”

curso data storytelling crehana

➤ 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.

¿Cuáles son las leyes de Gestalt para la visualización de datos?

¿Sabes cuáles son y cuál es la relación de las leyes de Gestalt para la visualización de datos? Este punto es muy interesante, si tienes como objetivo implementar los principios en el desarrollo de cualquier proyecto online.

Bien, continuamos con la explicación del profesor de Crehana, Adrian Béjar, para entender la relación de las 6 leyes de Gestalt de organización de los datos percibidos: proximidad, semejanza, continuidad, conexión, cierre y región común.

  • 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, el resultado será un data storytelling que conduzca al cambio positivo del negocio o de tu proyecto.
 

¿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 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, explica que la mejor forma de aplicar la ley de proximidad de Gestalt en el diseño, es acercando los elementos que van juntos; por ejemplo, imágenes con descripciones o botones con texto. 

➤ Ojito: 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 los elementos como un grupo, siempre y cuando estén cerca unos de otros. Entonces, en el siguiente ejemplo puedes visualizar un formulario de pago bastante ordenado, ¿cierto?

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.

ejemplo ley proximidad gestaltImagen: Dribbble

¿Qué es la ley de semejanza de Gestalt?

La ley de semejanza de Gestalt, se utiliza de forma muy recurrente en el diseño de interfaces. Y es que casi siempre, los objetos del mismo color, tamaño, forma y orientación suelen pertenecer al mismo grupo. Además, la tendencia de cómo agrupamos las cosas según sus características o factores, forma parte también de las famosas leyes de Gestalt.

¿No te ha pasado que casi siempre asocias objetos por sus atributos y características? 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.

¿Cómo aplicar la ley de semejanza de Gestalt?

Ahora que ya sabes que en la ley de proximidad de Gestalt, los usuarios interpretan objetos de apariencia similar como un grupo, esta información puede ayudarte a comprender mejor cómo plantear este principio en un sitio web o aplicación.

Lo más recomendable para aplicar la segunda ley de las leyes de Gestalt en la arquitectura de una web, es 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 

En el siguiente ejemplo aplicando la ley de semejanza de Gestalt, el tamaño de las imágenes se utiliza para comunicar una relación entre ellas. Los rectángulos de “movie” tienen un tamaño rectangular similar, mientras que los textos como “movie theaters” y “next 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? 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 proximidad 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 mostrando a los usuarios que los elementos dentro de él funcionan como 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.

En la sección explorar de Spotify, se puede visualizar una división notario por categorías de una manera uniforme. Cada elemento está compuesto por una imagen de background, un ícono y un título. ¿Y cómo separan los elementos aplicando las leyes de Gestalt? Mediante el uso de píxeles de espacio. De esta manera, te darás cuenta que están bien diferenciados; sin embargo, todos pertenecen al mismo tipo de contenidos, o sea, a la misma región común.

ejemplo spotify gestalt
Imagen: welcometoux
 

¿Qué es la ley de continuidad de Gestalt?

En las leyes generales de Gestalt, no podía faltar la ley de continuidad aplicada también al diseño UX y UI

En la ley de continuidad de Gestalt, los elementos individuales que se colocan en una línea continua o en una curva suelen estar relacionados entre sí. Se perciben 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. 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?

Para aplicar la ley de continuidad de Gestalt, es importante que prestes atención al diseño de un sitio web o app. El objetivo es que las personas puedan encontrar fácilmente los diferentes elementos de un producto sin pensarlo dos veces. ¿Esto qué quiere decir? Básicamente, los ojos de los usuarios deben desplazarse automáticamente sobre el diseño y el contenido.

➤ Ojito: aplicando una de las leyes de Gestalt, como la del principio de continuidad, puedes guiar a los usuarios a través de distintos segmentos dentro de un mismo sitio. ¿Y qué significa esto? Cuando se interrumpe la continuidad de los elementos, los usuarios se darán cuenta que ha comenzado una nueva sección o segmento. Esto ayudará a diferenciar y a recorrer las distintas secciones de una web.

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. Este es un buen ejemplo de la ley de continuidad de Gestalt.

Puedes utilizar las líneas para capturar y guiar a los usuarios hacia los elementos más importantes dentro de una interfaz de usuario

nike ejemplo gestaltImagen: smashingmagazine

¿Qué es la ley de cierre de Gestalt?

¿No te ha pasado que cuando ves una figura incompleta, los ojos tienden a agregar cualquier pieza faltante de forma familiar? De eso se trata la quinta ley de las leyes de Gestalt, 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. ¿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 simples. Lo más recomendable es disminuir la cantidad de elementos necesarios para que los usuarios comprendan lo que estás mostrando visualmente.

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 elemento muy común 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í.

¿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. ¿Y cómo se agrupan? La manera correcta de agrupar es por medio de colores, líneas o marcos.

¿Cómo aplicar la ley de conexión de Gestalt?

Puedes aplicar la ley de conexión de Gestalt 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 “productos relacionados”.

ley conexion gestalt
Imagen: uxcam.com

Ejemplo de la ley de conexión de Gestalt

Ejemplos de las leyes de Gestalt 

Este es un ejemplo de la página Welcome tu UX en donde se visualiza un buen 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.

ejemplo conexion gestaltImagen: welcometoux

Finalmente, ¿sabías que el propósito principal de las leyes de Gestalt aplicados a la data es que cualquiera pueda entender cómo se percibe la información?

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.

¿Te interesa seguir aprendiendo de data y cómo funciona? Dale un vistazo a nuestro curso online de Data Storytelling.

¡Buena suerte!

También podría interesarte