Sobre El Autor

Jon era un diseñador visual para muchos años antes de dar el salto para el diseño de interacción. Tiene un máster en Interacción persona-Ordenador de DePaul …Más aboutJon↬

El proceso perceptivo que nos permite percibir el mundo a través de nuestros sentidos de la vista, olfato, oído, gusto y 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 agrupamiento gestalt 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, planta de figuras, 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 usarlos en sus diseños produce un trabajo más fuerte y atractivo.

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

Similitud

El principio gestalt de similitud 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.

El uso del 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 un agrupamiento o relación, incluso cuando se incluyen diferentes formas.

Usar el tamaño Para asignar Relaciones

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

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 vemos aquí, la forma hace que interpretemos los elementos como columnas de círculos y cuadrados, en lugar de filas de círculos y cuadrados alternos.

Usar Orientación Para asignar Relaciones

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

Más información 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 forma añadiendo color. Ahora percibimos filas alternadas de formas rojas y blancas en lugar de columnas de círculos y cuadrados. Inténtalo. Trate de ver las columnas de círculos y cuadrados. Posible, pero bastante difícil ahora, ¿no?

Además, el color puede anular el tamaño. Cuando agregamos color al ejemplo de similitud en tamaño, creamos dos agrupaciones separadas una de la otra. Ahora percibimos los cuadrados rojos grandes como un grupo y el cuadrado blanco grande único como un grupo separado, sin relación (y solitario).

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

Similitud En la práctica

Cuando estamos diseñando, podemos usar 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 en el sitio de Salon a continuación se agrupan por sus tamaños relativos. Percibimos claramente dos grupos separados, con las historias principales a la izquierda y las más leídas a la derecha. A pesar de que ambas secciones proporcionan 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 a Salon dirigir la atención a sus historias principales.

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 todavía se logra a través del uso de la repetición de tamaño y forma similares, lo que nos hace percibir filas de elementos.

Uso de colores similares

Sabemos que el color es un fuerte indicador de similitud, lo 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 lo que es un encabezado, una copia del cuerpo y un texto de enlace. (Revelació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 de enlace azul, que se comporten de manera similar.

Proximidad

El principio gestalt de proximidad dice que los elementos que están más cerca entre sí se perciben como más relacionados que los elementos que están más separados. Al igual que 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 los objetos, lo que nos ayuda 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 los objetos como relacionados. Como vemos aquí, los círculos están dispersos, sin mostrar ninguna relación, y cada uno se percibe como un objeto separado.

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.

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 nos hace percibir los dos grupos como columnas, cada uno su propio grupo. A la derecha, la proximidad de las formas nos hace percibir los dos grupos como filas, de nuevo cada uno su propio grupo. Utilice espacios en blanco en sus diseños para fortalecer agrupaciones, así como para diferenciarlas de otros elementos.

El Poder de 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.

Proximidad En la práctica

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

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

Combinar proximidad y Similitud

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

Proximidad y jerarquía

La proximidad es excelente para organizar elementos jerárquicos. En este ejemplo de Crate & Barrel, las opciones se agrupan bajo encabezados comunes, creando relaciones, lo que facilita mucho el escaneo y la búsqueda de información.

Cuando se eliminan los encabezados y las opciones se agrupan sin proximidad, perdemos las relaciones que se crearon y se hace mucho más difícil escanear y encontrar rápidamente la información deseada. Pruébalo tú mismo. Siga adelante y vea qué tan rápido puede encontrar tazas de café en el agrupamiento con encabezados en comparación con el agrupamiento sin encabezados. Es un poco más difícil saltar rápidamente, ¿no?

Conclusión

Comprender cómo usar la similitud y la proximidad para afectar las relaciones entre los elementos de su trabajo lo ayudará a crear diseños que permitan una organización más fácil y mejoren la usabilidad de su trabajo. Usa la similitud y la proximidad para crear relaciones y diferencias entre los elementos de tus 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 fuertes y atractivas.

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

Recursos Y Buenas lecturas

• Principios Gestalt en Scholarpedia.
• «Laws of Organization in Perceptual Forms»: Texto del artículo seminal de Max Wertheimer de 1923.
• Principios Universales de Diseño Revisados y actualizados: 125 formas de mejorar la usabilidad, influir en la percepción, aumentar el atractivo, tomar mejores decisiones de diseño y enseñar a través del diseño, por William Lidwell, Kritina Holden y Jill Butler. Rockport Pub, 2010.
• Visualización de información: Percepción para el diseño, por Colin Ware. Elsevier, 2012.

• Principios de diseño: Percepción Visual Y Los Principios De Gestalt
• Conectar Y Separar Elementos A Través Del Contraste Y La Similitud
• Equilibrio Compositivo, Simetría Y Asimetría
• Cómo Mejorar Su Flujo De Trabajo De Correo Electrónico Con Diseño Modular
• Mejorar La Experiencia Del Usuario Con Funciones En Tiempo Real