Krypton Solid

Mejore sus diseños con los principios de similitud y proximidad (Parte 1)

Mejore sus diseños con los principios de similitud y proximidad (Parte 1)

En este primer artículo, veremos cómo funcionan los principios de similitud y proximidad, y veremos ejemplos del mundo real para ilustrar su uso para que pueda comenzar a usarlos en sus propios diseños.

El proceso de percepción nos permite percibir el mundo a través de nuestros sentidos de la vista, el olfato, el oído, el gusto y el tacto. En particular, nuestro sistema visual procesa grandes cantidades de información en su entorno. En lugar de percibir elementos por separado, nuestro cerebro organiza patrones, objetos y formas en formas completas que podemos entender.

Los principios de agrupación gestáltica de la percepción visual describen esta organización como un conjunto de principios que explican cómo percibimos y organizamos esta enorme cantidad de estímulos visuales. Los principios de la Gestalt (similitud, proximidad, cierre, figura-fondo, continuidad y destino común) son una herramienta popular utilizada por los diseñadores para organizar visualmente la información. Como diseñador visual, y ahora diseñador de interacción, aplico estos principios de forma regular para crear relaciones y diferencias entre los elementos de mis diseños. Comprender cómo funcionan estos principios y cómo utilizarlos en sus diseños produce un trabajo más sólido y atractivo.

¿Estás listo para mejorar tus diseños? Comencemos por profundizar en la similitud.

Semejanza

El principio de similitud de la Gestalt dice que los elementos que son similares se perciben como más relacionados que los elementos que son diferentes. La similitud nos ayuda a organizar los objetos por su relación con otros objetos dentro de un grupo y puede verse afectada por los atributos de color, tamaño, forma y orientación.

Usar color para asignar relaciones

La similitud se ve particularmente afectada por el color. En el siguiente ejemplo, observe cómo las formas coloreadas tienen un fuerte efecto en la asignación de una agrupación o relación, incluso cuando se incluyen diferentes formas.

Ningún otro atributo puede vencer al color cuando se trata de asignar relaciones.

Usar tamaño para asignar relaciones

El tamaño es otra herramienta útil que podemos utilizar para crear similitudes. En el siguiente ejemplo, la similitud de tamaño hace que las formas más grandes se destaquen y formen un grupo, aunque todas las formas sean iguales.

Usar el tamaño para asignar similitud
El tamaño hace que los cuadrados más grandes parezcan más importantes que las formas circundantes.

Usar forma para asignar relaciones

La forma es útil para agrupar por similitud, pero tiene el efecto de agrupación más débil en comparación con el color y el tamaño. En el ejemplo que se ve aquí, la forma hace que interpretemos los elementos como columnas de círculos y cuadrados, en contraposición a filas de círculos y cuadrados alternos.

Usar forma para asignar similitud
Es mucho más fácil ver columnas de formas similares que filas de formas diferentes.

Uso de la orientación para asignar relaciones

La orientación también se puede utilizar para agrupar por similitud. Al girar algunos de los cuadrados de este grupo en 45 grados, se crea una agrupación separada que se percibe como relacionada. Casi parecen moverse juntos en una dirección similar en comparación con las formas que los rodean. En realidad, esto toca el principio gestalt del destino común, un principio que abordaremos en un artículo futuro. Pero siéntase libre de avanzar y buscarlo en Google (¡después de leer este artículo, por supuesto!). Es un principio fascinante que ocurre con frecuencia a tu alrededor.

Usar la orientación para asignar similitudes
La diferencia de orientación crea relaciones sólidas.

Más sobre el color

Como se mencionó anteriormente, la similitud se ve particularmente afectada por el color y puede anular otros atributos. Por ejemplo, podemos anular el ejemplo de similitud en la forma agregando color. Ahora percibimos filas alternas de formas rojas y blancas en contraposición a columnas de círculos y cuadrados. Darle una oportunidad. Intenta ver las columnas de círculos y cuadrados. Es posible, pero bastante difícil ahora, ¿no?

Hileras alternas de formas rojas y blancas
Es difícil no ver filas alternas de rojo y blanco ahora.

Además, el color puede anular el tamaño. Cuando agregamos color al ejemplo de similitud en tamaño, creamos dos agrupaciones separadas entre sí. Ahora percibimos los grandes cuadrados rojos como un grupo y el único gran cuadrado blanco como un grupo separado, no relacionado (y solitario).

Dos grupos separados creados usando color
El color triunfa sobre el tamaño en la asignación de relaciones.

Estos dos ejemplos ilustran cuán poderoso puede ser el color al asignar relaciones entre elementos. Intente usar color en su trabajo para diferenciar elementos y se sorprenderá de lo fuertes que son sus agrupaciones.

Similitud en la práctica

Cuando diseñamos, podemos usar la similitud para transmitir organización y asociaciones al mostrar qué elementos están relacionados o no entre sí. Por ejemplo, las dos secciones que se muestran a continuación en el sitio del Salón están agrupadas por sus tamaños relativos. Percibimos claramente dos grupos separados, con las historias principales a la izquierda y la mayoría leídas a la derecha. Aunque ambas secciones brindan la misma función (mostrar artículos para leer), la agrupación por tamaño asigna más prominencia a la agrupación de la izquierda, lo que permite que Salon dirija la atención a sus historias principales.

Artículos de Salon.com agrupados por sus relaciones en diferencias de tamaño.
La atención se dirige a las historias principales del Salón mediante el uso de similitudes en tamaño. (Ver versión grande)

Por el contrario, la falta de diferencias de tamaño en este ejemplo de Amazon no asigna ninguna importancia particular a ninguna sección. A pesar de esto, la similitud se sigue logrando mediante el uso de repeticiones de tamaño y forma similares, lo que nos hace percibir filas de elementos.

Falta de diferencias de tamaño en las imágenes de los productos.
Cuando las imágenes son del mismo tamaño, no se da énfasis a ninguna sección. (Ver versión grande)

Uso de colores similares

Sabemos que el color es un fuerte indicador de similitud, que ayuda a organizar y hacer que el contenido sea comprensible. En este ejemplo de Cars.com, el uso de colores similares nos ayuda a diferenciar entre un encabezado, un texto de cuerpo y un texto de enlace. (Divulgación completa: trabajo en Cars.com como diseñador de interacción). Al usar colores distintos para cada uno de estos elementos, esperamos que funcionen de manera similar y, en el caso del texto del enlace azul, que se comporten de manera similar.

El uso de colores similares nos ayuda a comprender la función y el comportamiento de los elementos.
El uso de colores similares nos ayuda a comprender la función y el comportamiento de los elementos. (Ver versión grande)

Proximidad

El principio de proximidad de la Gestalt dice que los elementos que están más juntos se perciben como más relacionados que los elementos que están más separados. Como ocurre con la similitud, la proximidad nos ayuda a organizar los objetos por su relación con otros objetos. La proximidad es el principio más fuerte para indicar la relación de objetos, ayudándonos a comprender y organizar la información de manera más rápida y eficiente.

Los ejemplos de círculos a continuación muestran cómo se puede usar la proximidad para ayudarnos a percibir objetos como relacionados. Como vemos aquí, los círculos están esparcidos, no exhibiendo ninguna relación, y cada uno es percibido como un objeto separado.

Círculos sin proximidad espacial
Estas formas no exhiben ninguna relación.

Sin embargo, cuando los círculos se acercan espacialmente entre sí, se les asigna una relación y ya no se perciben como objetos separados.

Círculos con fuerte proximidad espacial
Las formas exhiben relación cuando están muy próximas.

Espacio en blanco

El espacio en blanco es una herramienta invaluable para crear proximidad. Tomar el mismo grupo de círculos y agregar espacios en blanco nos ayuda a percibir las cosas de manera diferente. Ahora, a la izquierda, la proximidad de las formas hace que percibamos los dos grupos como columnas, cada una con su propio grupo. A la derecha, la proximidad de las formas hace que percibamos los dos grupos como filas, nuevamente cada uno con su propio grupo. Utilice espacios en blanco en sus diseños para fortalecer las agrupaciones, así como para diferenciarlas de otros elementos.

Columnas y filas de círculos
Al agregar espacios en blanco entre los elementos, cambiamos la percepción de las agrupaciones.

El poder de la proximidad

La proximidad es lo suficientemente fuerte como para dominar otros elementos de variación. Observe cómo la proximidad sigue ganando incluso cuando se agregan otros atributos, como el color y la forma. Por más que lo intenten, el color y la forma no dominan la proximidad aquí y cada grupo todavía se percibe como un elemento separado.

¡El color finalmente es derrotado por la proximidad!

Proximidad en la práctica

Cuando estamos organizando información en nuestros diseños, podemos usar la proximidad para crear relaciones entre elementos para ayudar a comprender la información presentada. Por ejemplo, al agrupar estas imágenes de la Apple Store en estrecha proximidad, asignamos una relación a todo el grupo. Los percibimos como relacionados y esperamos que el contenido sea similar.

Imágenes agrupadas mostrando relación.
Las imágenes agrupadas se perciben como relacionadas. (Ver versión grande)

Sin embargo, cuando eliminamos la columna central, de repente percibimos dos grupos separados y tenemos la expectativa de un contenido diferente entre ellos.

Dos grupos separados de imágenes
Se crean dos grupos separados quitando la columna central. (Ver versión grande)

Combinando proximidad y similitud

La agrupación por proximidad también se puede combinar con la similitud para crear relaciones más sólidas. Visto en este ejemplo de Amazon, agrupar por proximidad y similitud en tamaño nos hace percibir dos agrupaciones separadas y asigna más protagonismo al grupo de la izquierda.

Libros agrupados por proximidad y similitud.
La agrupación tanto por proximidad como por similitud crea relaciones más sólidas entre los elementos. (Ver versión grande)

Proximidad y jerarquía

La proximidad es excelente para organizar elementos jerárquicos. En este ejemplo de Crate & Barrel, las opciones se agrupan bajo títulos comunes, creando relaciones, lo que hace que escanear y encontrar información sea mucho más fácil.

Artículos de cocina agrupados bajo títulos.
Encontrar información es más fácil cuando las opciones se agrupan bajo títulos. (Ver versión grande)

Cuando se eliminan los encabezados y las opciones se agrupan sin proximidad, perdemos las relaciones que se crearon y se vuelve mucho más difícil escanear rápidamente y encontrar la información deseada. Inténtalo tú mismo. Continúe y vea qué tan rápido puede encontrar tazas de café en la agrupación con títulos en comparación con la agrupación sin títulos. Es un poco más difícil saltar rápidamente a él, ¿no?

Artículos de cocina con los títulos eliminados.
Sin títulos, es difícil encontrar información rápidamente. (Ver versión grande)

Conclusión

Comprender cómo utilizar la similitud y la proximidad para afectar las relaciones entre los elementos de su trabajo le ayudará a crear diseños que permitan una organización más sencilla y mejoren la usabilidad de su trabajo. Utilice la similitud y la proximidad para crear relaciones y diferencias entre los elementos de sus diseños. Experimente con el uso del espacio en blanco, el color, el tamaño, la forma y la orientación de los elementos y mezcle ambos principios para producir relaciones muy sólidas y atractivas.

En la siguiente parte de esta serie, veremos el cierre y el fondo de la figura, y exploraremos cómo estos dos principios gestálticos usan el espacio positivo y negativo para crear relaciones simples pero poderosas.

Recursos y buenas lecturas

Deja un comentario