Principios de Gestalt en el diseño de interfaces de usuario

ramses

10 min

image 1
Pocas teorías tomadas de disciplinas externas tienen tanto impacto en campo del diseño de interfaces de usuario como la corriente psicológica llamada Gestalt, que surgió en Alemania a principios del Siglo XX.

Los principales descubrimientos se realizaron a partir de la ejecución de investigaciones por sus exponentes explican que la percepción que se forma una persona a partir de sus sentidos, es mayor a la simple suma de la información recibida. Descubrieron que los humanos tenemos una tendencia innata para ordenar toda la información que recibimos, que suele ser caótica, para poderle dar un sentido, por ejemplo, cuando ves a una persona, no percibes sus ojos, su nariz, su boca o su cabello como elementos individuales, sino que percibes al conjunto de todos esos elementos como una sola persona, y eso se resumen en una de sus máximas:

“El todo es diferente que la suma de sus partes”
— Kurt Koffka

Aun cuando la psicología de Gestalt cubre muchos aspectos, existen varios principios específicos para la percepción visual descubiertos por esta corriente que desde hace décadas son utilizados por diferentes disciplinas del diseño y ahora se siguen utilizando como base teórica para el diseño visual y en específico en el diseño de interfaces de usuario de productos digitales.

A continuación algunos de los principios más utilizados.

Principio de semejanza

El principio de semejanza o similitud explica que los elementos similares tienden a ser percibidos como relacionados entre sí. La semejanza entre elementos puede ser desde muy sutil hasta muy evidente, utilizando colores, formas, tamaños, texturas, movimiento o una combinación de una o varias de estas características.

Gestalt Principio de Semejanza
En estos ejemplos aún cuando comparten algunas de sus características, podemos hacer una separación visual entre elementos que se identifican como diferentes a los demás y similares en otro aspecto, como su forma, color o tamaño

Puedes utilizar este principio tanto para dejar claro que un grupo de elementos tiene la misma funcionalidad como para lo contrario: establecer que los elementos realizan algo diferente.

Gestalt Principio de Semejanza en el sitio web de las Naciones Unidad
En la página de las naciones unidas puedes ver claramente dos menús, uno para la selección del idioma y otro para las secciones. Es evidente que todos los idiomas tienen un mismo color y tamaño, cada elemento es similar a los demás, por lo que se puede entender que son elementos de una misma jerarquía y que en conjunto forman un grupo. De forma similar, en el menú principal de secciones, todos los elementos comparten la característica de tener un fondo de color gris, texto blanco, pero se incluye un elemento con una única característica diferente: el color de fondo es rojo. Puedes percibir a todos los elementos similares como relacionados entre sí -forman parte de un menú- pero se utiliza una diferencia en la característica de color para hacer evidente que un elemento tiene alguna función especial, en este caso resaltar la sección sobre un tema de tendencia.

Principio de proximidad

Tal vez uno de los principios más importantes, nos indica que tendemos a agrupar o percibir como una sola entidad a los elementos que están cerca unos de otros, y por lo mismo, tendemos a separar a los que están más alejados: Percibimos a los elementos que están más cercanos como relacionados entre sí.

En este ejemplo tenemos, del lado izquierdo 16 círculos, todos con el mismo espaciamiento entre si. Del lado derecho los mismos 16 círculos, pero por el espaciamiento que tienen, puedes ver que hay diferencias entre ellos y percibirlos como dos grupos por separado.

Gestalt Proximidad
En este ejemplo tenemos, del lado izquierdo 16 círculos, todos con el mismo espaciamiento entre si. Del lado derecho los mismos 16 círculos, pero por el espaciamiento que tienen, puedes ver que hay diferencias entre ellos y percibirlos como dos grupos por separado.

En una interfaz, este principio lo puedes aplicar para determinar qué elementos con características diferentes están relacionados entre sí. 

BBC Mundo
En este ejemplo de la página web de BBC mundo tenemos un listado de 8 noticias, cada noticia se compone de 3 elementos: una fotografía, un título y una fecha. Cada uno de estos elementos los puedes percibir como relacionados entre si, por la separación menor que tienen entre ellos, a diferencia de la separación mayor que hay entre cada noticia.
BBC Mundo
Si la separación fuera diferente, por ejemplo separando más el título de la fotografía a tal grado que su separación sea mayor que entre fotografías, podríamos ya confundir a qué fotografía corresponde cada título.

Principio de continuidad

El principio de continuidad explica que percibimos los elementos como un todo, aún cuando existan otros elementos que los oculten o interfieran en su percepción. Esto es mucho más evidente si las figuras tienen líneas claramente continuas en las secciones interrumpidas.

Principio de continuidad
Aún cuando buena parte de loscírculos están ocultos, no nos queda duda que detrás de los rectángulos hay círculos completos.
Listado de Peliculas
El principio de continuidad es muy utilizado en las interfaces donde se utilizan listados de películas, por ejemplo, en las recomendaciones de Netflix puedes observar en cada renglón solo una parte de un último elemento, con el cual se deduce que debe haber un elemento completo ahí también y que la lista continúa a la derecha. En este ejemplo intervienen además los principios de similitud y proximidad para poder percibir cada renglón como un grupo.

El principio de continuidad es muy utilizado en las interfaces donde se utilizan listados de películas, por ejemplo, en las recomendaciones de Netflix puedes observar en cada renglón solo una parte de un último elemento, con el cual se deduce que debe haber un elemento completo ahí también y que la lista continúa a la derecha. En este ejemplo intervienen además los principios de similitud y proximidad para poder percibir cada renglón como un grupo.

Principio de cierre

Por otro lado, el principio de cierre indica que como humanos, tendemos a percibir los objetos como completos, aún cuando estos tengan partes faltantes. Esto es incluso más notorio cuando se utilizan líneas que puntos, pues también afecta el principio de continuidad. Nuestro cerebro rápidamente cerrará los espacios faltantes y creará la imagen como un todo. 

Figuras
Aún cuando objetivamente no son figuras completas, no nos queda duda al percibircomo un cuadrado y un círculo estas figuras.

De esta forma, es posible reducir el número de elementos que necesitamos para comunicar una idea y por lo mismo poder lograr una comunicación más clara.

Gestalt cierre
En las interfaces gráficas, la ley de cierre es muy utilizada en la iconografía, como en estos ejemplos del juego de íconos de FontAwesome, donde la bolsita de té, aún incompleta sabemos que está ahí.

Principio de la región común

El principio de la región común, al igual que los principios de similitud y proximidad, ayuda a que podamos percibir elementos individuales, pero que están enmarcados en un área claramente definida, como elementos que forman parte de un mismo grupo.

Gestalt región común
Todos los elementos tienen la misma forma, tamaño y color, por lo que son similares, además tienen el mismo espaciamiento, pero la mitad de ellos están claramente enmarcados y los puedes percibir como parte de un mismo grupo.
Gestalt región común
En la página web de la unesco se tiene una clara área definida en el encabezado, que te da indicios de que los elementos ahí colocados forman parte de un mismo grupo. El mismo principio se utiliza para demarcar elementos individuales de contenido en el cuerpo de la página.

Principio de figura y fondo

Como parte de todos los procesos que hace nuestra mente al percibir una imagen, poder separar lo que es una figura del fondo es uno de los más necesarios, de forma que nuestro cerebro se concentre en lo realmente importante. No podemos percibir un mismo elemento como figura y fondo a la vez.

Gestalt figura común
¿Dos caras o una copa? Una imagen conocida que nos hace dudar entre qué elementos son figura y cuales son fondo.

En el diseño de interfaces de usuario debemos tener especial cuidado al utilizar elementos como fondo, que puedan ser percibidos como figura y hagan que el usuario tenga que realizar más esfuerzo en identificar claramente los elementos que realmente le comunicarán información.

Gestalt figura común
La rejilla de aplicaciones de Windows 10, tiene una marcada diferencia entre lo que es figura y lo que es fondo. El fondo, más oscuro, con cierto difuminado y utilizando colores menos saturados, pasa a un segundo término, donde los íconos con colores más vivos son notoriamente la figura donde se concentra la atención.

Conclusiones

Cuando una persona está percibiendo una imagen cualquiera, o en específico, cuando un usuario está viendo una interfaz, no solo uno, sino varios principios, entran en efecto, en otras palabras, si como diseñador visual no los tomas en cuenta, no quiere decir que estos no estén presentes, sino que pueden jugar en tu contra, al obtener interfaces que son confusas e incrementan el esfuerzo de los usuarios para comprenderla y por ende reducen la usabilidad del producto y se obtienen experiencias negativas.

Referencias