¿Qué es Gestalt?

Gestalt (forma, forma en alemán) es un grupo de principios

de percepción visual desarrollados por psicólogos alemanes
en la década de 1920. Se basa en la teoría de que "un todo
organizado, se percibe como mayor que la suma de sus
partes".
"El todo es distinto de la suma de las
partes".
 - Kurt Koffka

Los principios Gestalt intentan describir cómo las personas

perciben los elementos visuales cuando se aplican ciertas
condiciones. Se basan en cuatro ideas clave:

Aparición
Las personas tienden a identificar los elementos primero en
su forma general resumida. Nuestro cerebro reconoce un
objeto simple, bien definido, más rápido que uno detallado.

Cosificación
Las personas pueden reconocer objetos incluso cuando
faltan partes de ellos. Nuestro cerebro combina lo que
vemos con patrones familiares almacenados en nuestra
memoria y llena los huecos.

Multiestabilidad
Las personas a menudo interpretan objetos ambiguos de
más de una manera. Nuestros cerebros rebotarán de un lado
a otro entre las alternativas que buscan seguridad. Como
resultado, una vista se volverá más dominante mientras que
la otra será más difícil de ver.

Invariancia
Las personas pueden reconocer objetos simples
independientemente de su rotación, escala y
traducción. Nuestro cerebro puede percibir objetos desde
diferentes perspectivas, a pesar de su apariencia diferente.
Aquí están los principios Gestalt que pueden
informar el diseño de UI de hoy.

Proximidad
Los elementos dispuestos uno cerca del otro se perciben
como más relacionados que los que están más separados. De
esta manera, los diferentes elementos se ven principalmente
como un grupo y no como elementos individuales.

¿Cómo se aplica el principio de proximidad al

diseño de IU?
Podemos usar el principio de proximidad en el diseño de la
interfaz de usuario para agrupar información similar,
organizar el contenido y crear diseños ordenados. Su uso
correcto tendrá un impacto positivo en la comunicación
visual y la experiencia del usuario.

Como indica el principio, los elementos relacionados deben

permanecer cerca uno del otro, mientras que los elementos
no relacionados deben permanecer 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 en diseños de
fácil lectura y escaneo. Ayudará a los usuarios a lograr sus
objetivos más rápido y profundizar en el contenido.

Región común
De manera similar al principio de proximidad, los elementos
ubicados dentro de la misma región se perciben como
agrupados.
¿Cómo se aplica el principio de la Región
Común al diseño de UI?
El principio de la Región Común es particularmente
útil. Puede ayudar con la agrupación de información y la
organización de contenido, pero también puede lograr la
separación de contenido o actuar como un punto
focal. Aumenta la jerarquía, la capacidad de escaneo y ayuda
a promover la información.

El principio de la región común puede mantener juntos

muchos elementos diferentes manteniéndolos unificados
dentro de grupos más grandes. Lo podemos lograr con el
uso de líneas, colores, formas y sombras. A menudo se
puede utilizar para poner elementos en primer plano, lo que
indica interacción o importancia.

Un buen ejemplo de región común sería el patrón de la

interfaz de usuario de la tarjeta; Un espacio rectangular
bien definido con diferentes bits de información
presentados como uno. Banners y tablas también son
buenos ejemplos.

Semejanza
Los elementos que comparten características visuales
similares se perciben como más relacionados que aquellos
que no comparten características similares.
¿Cómo se aplica el principio de similitud al
diseño de IU?
Tendemos a percibir elementos similares entre sí como
agrupados o un patrón. También podríamos pensar que
sirven para el mismo propósito. La similitud puede
ayudarnos a organizar y clasificar objetos dentro de un
grupo y vincularlos con un significado o función específica.

Hay diferentes maneras de hacer que los elementos

percibidos sean similares y, por lo tanto, relacionados. Estos
incluyen similitud de color, tamaño, forma, textura,
dimensión y orientación; siendo algunos de ellos más
comunicativos que otros (por ejemplo, color> tamaño>
forma). Cuando ocurre la Similitud, un objeto puede ser
enfatizado por ser diferente del resto; Esto se llama
'Anomalía' y se puede usar para crear contraste o peso
visual. Puede atraer la atención del usuario hacia una parte
específica del contenido (punto focal) al tiempo que ayuda
con la capacidad de escaneo, la capacidad de descubrimiento
y el flujo general.
Podemos usar el principio de similitud en la navegación,
enlaces, botones, encabezados, llamadas a acciones y más.

Cierre
Un grupo de elementos a menudo se percibe como una sola
forma o figura reconocible. El cierre también se produce
cuando un objeto está incompleto o parte de él no está
encerrado.

¿Cómo se aplica el principio de cierre al

diseño de IU?
Como lo indica el principio de cierre, cuando se le presente
la cantidad correcta de información, nuestro cerebro saltará
a conclusiones llenando los vacíos y creando un todo
unificado. De esta manera podemos reducir la cantidad de
elementos necesarios para comunicar información, reducir
la complejidad y hacer 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.
Podemos usar el principio de Cierre en Iconografía, donde
la simplicidad ayuda a comunicar el significado de manera
rápida y clara.

Simetría
Los elementos simétricos tienden a percibirse como
pertenecientes a un grupo independientemente de su
distancia, lo que nos da una sensación de solidez y orden.

¿Cómo se aplica el principio de simetría en el

diseño de IU?
Los elementos simétricos son simples, armoniosos y
visualmente agradables. Nuestros ojos buscan esos atributos
junto con el orden y la estabilidad, para dar sentido al
mundo. Por esta razón, Symmetry es una herramienta útil
para comunicar información de manera rápida y
eficiente. La simetría se siente cómoda ayudándonos a
concentrarnos en lo que es importante.
Las composiciones simétricas son satisfactorias, pero
también pueden volverse un poco apagadas y estáticas. La
simetría visual tiende a ser más dinámica e
interesante. Agregar un elemento asimétrico a un diseño
simétrico puede ayudar a llamar la atención mientras hace
una impresión; algo útil para cualquier punto de interés o
una llamada a la acción, por ejemplo. La simetría, junto con
una buena cantidad de asimetría es importante en cualquier
diseño.

Es bueno usar Symmetry para portafolios, galerías,

exhibiciones de productos, listados, navegación, banners y
cualquier página con mucho contenido.

Continuación
Los elementos dispuestos en una línea o una curva suave se
perciben como más relacionados que aquellos dispuestos al
azar o en una línea áspera.

¿Cómo se aplica el principio de continuidad

en el diseño de IU?
Los elementos que siguen una línea continua se perciben
como 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.

La continuidad nos ayuda a interpretar la dirección y el

movimiento a través de una composición. Se lleva a cabo al
alinear elementos y puede ayudar a que nuestros ojos se
muevan suavemente a través de la página, ayudando con la
legibilidad. El principio de continuidad fortalece la
percepción de información agrupada, creando orden y
guiando a los usuarios a través de diferentes segmentos de
contenido. La interrupción de la continuidad puede indicar
el final de una sección que llama la atención hacia un nuevo
contenido.

La disposición lineal de filas y columnas son buenos

ejemplos de continuidad.Podemos usarlos en menús y
submenús, listas, arreglos de productos, carruseles,
servicios o pantallas de proceso / progreso.

Destino común
Los elementos que se mueven hacia la misma dirección se
perciben como más relacionados que aquellos que se
mueven en diferentes direcciones, o que no se mueven en
absoluto.
¿Cómo se aplica el principio del destino
común en el diseño de IU?
Sin importar qué tan alejados estén los elementos o qué tan
diferentes puedan parecer, si se mueven o cambian juntos,
se perciben como relacionados. Este efecto puede tener
lugar incluso cuando el movimiento está implícito, por otros
elementos visuales.

El principio del destino común es más potente cuando los

elementos se mueven sincronizados; En la misma dirección
y al mismo tiempo y velocidad. Puede ayudar a agrupar
información relevante y vincular acciones con resultados. La
interrupción de un movimiento sincronizado puede captar la
atención de los usuarios y dirigirlo a un elemento o
característica específica. También puede establecer
relaciones entre diferentes grupos o estados.

Podemos usar el principio del destino común en menús

ampliables, acordeones, herramientas, controles
deslizantes de productos, pergaminos e indicadores de
deslizamiento.
Conclusión
El diseño de la interfaz de usuario no tiene que ver con los
píxeles bonitos y los gráficos brillantes. Se trata
principalmente de comunicación, rendimiento y
conveniencia. Los principios de la Gestalt están siempre
actualizados y nos ayudan a alcanzar estos
objetivos; Creando una experiencia agradable para los
usuarios y un gran éxito para el negocio.

Si le ha gustado este artículo o lo ha encontrado útil,

aplauda y compártalo para que más personas puedan
beneficiarse de él. ❤

* También podría gustarle mi artículo sobre cómo diseñar

con intención , un plan de acción fácil para diseños aún
más exitosos.