11 Principios Gestalt y psicológicos en diseño UX UI

Seguro que ya has oído hablar de La psicología y principios de la Gestalt, la corriente psicológica que explica cómo los seres humanos percibimos y organizamos visualmente la información a través de la forma. 

Desarrollada a principios del siglo XX por psicólogos como Wertheimer, Köhler, Koffka​ o Lewin, la Gestalt sostiene que el todo es percibido de manera diferente a la suma de sus partes. Es decir que por sinergia, un elemento al completo aporta más información que el simple hecho de juntar sus partes.

En esta entrada exploraremos cómo la teoría de la gestalt y sus leyes o principios afectan y son de utilidad en diseño UX y diseño UI.

Para ello he estructurado el contenido de la siguiente manera:

Principios de agrupamiento según la Gestalt:

Los principios de agrupamiento de la Gestalt se corresponden con las famosas leyes de la Gestalt y son reglas que describen cómo nuestra mente organiza los elementos visuales en grupos o patrones coherentes, basándose en ciertas características. Estos principios reflejan la tendencia natural de percibir conjuntos, en lugar de elementos aislados. A continuación, te detallo las principales leyes:

Ley / Principio de Proximidad

Tendemos a agrupar los elementos que quedan cerca. De esta manera también podemos ver formas simples compuestas a partir de diferentes formas

Este principio es una constante en diseño UI. Pero quiero poner como ejemplo el icono del menú de hamburguesa. Podríamos percibir que son 3 líneas independientes y cada una para una cosa diferente. Sin embargo, comprendemos que son parte de un todo que es el icono de menú.

Ley / Principio de Semejanza

Tendemos a agrupar los elementos que son parecidos por forma, color, tamaño, etc.

El principio de semejanza es fundamental para ofrecer una buena experiencia de uso. Es lo que permite distinguir cada elemento y su funcionalidad. Jugando con este principio podemos hacer entender al usuario qué elementos son botones y que son diferentes entre ellos al romper con parte de esa semejanza.

Ley / Principio de Cierre

Tendemos a agrupar elementos sueltos como partes de un elemento mayor que vemos incompleto.

La ley de cierre es un gran aliado para conseguir diseños atractivos y para enfrentarnos a las restricciones de tamaño de los dispositivos. Por ejemplo, gracias a este principio podemos hacer que los usuarios entiendan que en los menús de elementos, el contenido sigue con tan solo dejar un elemento partido a la mitad.

Ley / Principio de Continuidad

Tendemos a continuar una dirección empezada pese a las intersecciones que ésta se encuentre.

El principio de continuidad es lo que como usuarios nos permite no descarrilar en la mayoría de flujos. Por ejemplo, en este que te pongo abajo donde venimos de hacer scroll vertical pero pasamos a la posibilidad de scroll horizontal. Podríamos pensar que el final del scroll horizontal es el final del recorrido, pero por este principio sabemos que debemos seguir probando con el scroll vertical.

Ese descarrilamiento es lo que sucede si forzamos al usuario a romper con el patrón de continuidad que venía trayendo, en el siguiente ejemplo, el aprendido de lectura de izquierda a derecha y de arriba a abajo.

https://twitter.com/callatecarol/status/1175743997215723520

Ley / Principio de Destino común

Tendemos a agrupar los elementos que siguen una misma dirección y una misma velocidad.

En diseño UI este principio se emplea de diferentes formas. Por ejemplo en un onboarding es probable que las pantallas tengan una transición desde la derecha para indicar que vienen de una página siguiente. Al final el diseño UI copia mucho este principio del diseño gráfico donde ya se utilizaba para guiar la lectura.

Ley / Principio de Buena forma o Pregnancia

Tendemos a agrupar elementos de similar forma, patrón, color, etc., incluso en casos donde dos o más formas se superponen claramente. El cerebro intenta crear las formas más simples posibles. Lo cual, a su vez se traduce en que un elemento complejo podemos identificarlo como múltiples subelementos más simples.

La ley de la buena forma o pregnancia es lo que nos permite reconocer muchos iconos como el de usuario que pongo de ejemplo. Pese a que vemos una forma rara, el cerebro nos permite simplificarlo como dos bolas diferentes a partir de las cuales y por otros principios, vincular una al cuerpo y otra a la cabeza.

Ley / Principio de Figura – Fondo

Distinguimos entre los elementos principales que conforman la figura y el fondo

Este principio es tan básico y fundamental en diseño UI que se sobreentiende y por lo general termina pasando desapercibido. Sin embargo es el motor de los sistemas de profundidad y 3D en cualquier web o app móvil. Al final como diseñadores jugamos a colocar elementos en capas superpuestas unas encima de otras. Además, para ayudar a distinguir entre elementos más cercanos y más lejanos al usuario, utilizamos un sistema de sombras que ayuden a comprender esa diferencia entre figura y fondo, sobre todo cuando los colores del fondo y la figura son confusos.

También es un principio muy común y aquí sí ya más notorio para resaltar elementos concretos como por ejemplo las ventanas emergentes, modales o dialogs.

Otros principios de la psicología que impactan en diseño UX / UI

Más allá de las famosas leyes de la Gestalt que hemos visto anteriormente, existen otros principios más o menos conocidos que también podemos utilizar a nuestra conveniencia en diseño UX / UI

Ley / Principio del Contraste

La relación entre los elementos condiciona la manera en que los percibimos

Sin contraste no hay percepción. A su vez, el contraste viene dado por la relación entre los atributos de los elementos que percibimos. Ya sean color, tamaño, forma, dirección, etc. Todo esto nos hace poder diferenciar entre figura y fondo, entre elementos y entre partes de un mismo elemento. Por tanto, a mayor contraste, mejor percepción y comprensión.

En este artículo sobre el ratio de contraste del color explicaba cómo funciona el contraste entre colores y cómo se mide

http://twitter.com/dei_biz/status/1799758820144824685

Ley / Principio de la Jerarquía

Tendemos a ordenar la información que percibimos en base a una jerarquía.

Cuando vemos, primero vemos unos elementos y después otros, no todo a la vez. Este orden de ver se considera jerarquía.

En diseño UX y UI utilizamos este principio de jerarquía para facilitar la navegación y lectura de los usuarios a través de aplicar diferentes tamaños, grosores o contrastes. Por tanto, gracias a este principio podemos conseguir que los usuarios encuentren con mayor facilidad lo que buscan, pudiendo cumplir con sus objetivos con mayor eficiencia y por tanto satisfacción. O todo lo contrario, conseguir llamar 

En el ejemplo siguiente podemos ver cómo aplicando diferentes grosores, se facilita la jerarquía visual en un menú.

Otra facultad del principio de jerarquía es que podemos emplearlo para captar la atención del usuario y dirigirlo según nos convenga.

Ley / Principio de Birkhoff

Comprendemos mejor las imágenes cuantos más ejes tengan

Los ejes se pueden entender como vectores y como detalle. 

Este aplica bastante en diseño UX / UI, por ejemplo en el diseño esqueumórfico, donde se potencia el entendimiento de las interfaces por parte del usuario a través de aplicar tanto detalle como sea posible a los diferentes elementos UI. Sin embargo, el estilo skeumórfico no me parece el mejor ejemplo ya que su elección depende de las tendencias y juega contra el principio del minimalismo.

Por el contrario, sí considero un buen ejemplo de cómo aplicamos la ley de Birkhoff en diseño UX / UI con la diferencia entre wireframes de baja fidelidad y de alta fidelidad. Los de mayor detalle se entienden mucho mejor.

Ley / Principio de Memoria

Comprendemos mejor las formas que nos son conocidas. 

Si bien el cerebro genera imágenes continuas y reconoce el contraste de estas, las que son conocidas y ya han sido percibidas con anterioridad tienden a ser reconocidas con mayor facilidad. Además, cuanto más vista haya sido una forma, más reconocible será en adelante.

La ley de memoria no sólo sirve para el diseño visual, sino que también nos puede ayudar a mejorar la usabilidad a través de la arquitectura de la información. Concretamente, reutilizando patrones de navegación y uso que sean conocidos al usuario. Por ejemplo usando el movimiento de pinza para hacer zoom o el resto de gestos para interacción móvil.

A nivel visual es más evidente ya que podemos encontrar este principio en mantener el icono de casa para la página de inicio de cualquier aplicación web o móvil.

Me gusta este ejemplo de Spotify porque podemos ver como un mal uso del principio de memoria complica el entendimiento. Así pues, en este caso, el icono de biblioteca puede ser confuso para los usuarios nuevos al ser diferente de lo conocido.

Ley / Principio de Invarianza Topológica

Percibimos las buenas formas incluso deformadas y cuanto mejor definida esté su estructura, mayor será su pregnancia.

Esto es otra de esas leyes que pasan desapercibidas constantemente en diseño UI por su obviedad. Pero es este principio el que nos permite reconocer los botones aunque le cambiemos el color, y reconocer las formas de los iconos entre los distintos sitios web por diferente que sea el estilo visual entre ellos.