Qué son los principios de la Gestalt y cómo aplicarlos

Una de las teorías psicológicas más influyentes en los campos de la UX y el diseño de interacción es la teoría de la Gestalt. La teoría fue fundada por psicólogos alemanes y la palabra "Gestalt" significa formulario o forma Como su nombre indica, la idea en la que se basan los principios de la Gestalt es que los seres humanos perciben grupos de objetos como patrones en lugar de objetos individuales.

Hay muchos artículos sobre los principios de la Gestalt, pero no tantos de ellos te ayudan a entender cómo aplicarlos en tu trabajo como diseñador UX/UI. Este artículo te dará algunas ideas sobre cómo utilizar los principios de la Gestalt para crear mejores diseños UX y UI que ayuden a las personas a alcanzar sus objetivos con menos esfuerzo.

La ley de la similitud

El principio de similitud afirma que cuando los objetos son físicamente parecidos tendemos a agruparlos y asumen que tienen el misma funcionalidad Por ejemplo, en la imagen de abajo es bastante fácil distinguir la línea que contiene círculos rojo burdeos del resto de la imagen debido a su color diferente.

Un ejemplo del principio de similitud. Foto del autor.

Uso de la similitud en el diseño de UX y UI

Imaginemos que su empresa ha desarrollado una aplicación llamada "Il Mio Chef'' que utilizan los aficionados a la comida italiana de EE.UU. y Canadá (la utilizaremos para el resto de este artículo). Un informe reciente que le ha entregado su investigador de UX afirma que, a la hora de pedir comida italiana, los usuarios se preocupan sobre todo por saber qué restaurantes son los más cercanos. Al fin y al cabo, a todos nos gustaría tener nuestrolasaña o pizza a domicilio mientras aún está fresca y caliente, ¿no?

Para facilitar que los usuarios de nuestra aplicación vean qué restaurantes son los más cercanos, podemos utilizar el principio de similitud resaltando estos restaurantes en la interfaz de usuario. En la imagen siguiente puede ver cómo resaltar estas opciones en amarillo (a la derecha) marca una gran diferencia al enfatizar visualmente la diferencia entre los restaurantes más cercanos y los que están más lejos. Así es como sepuede utilizar el principio de similitud para ayudar a sus usuarios a encontrar rápidamente lo que buscan.

Utilización del principio Gestalt de similitud. Imagen del autor.

La ley de la proximidad

El principio de proximidad establece que los objetos que se encuentran cerca unos de otros parecen estar más relacionados Por ejemplo, la primera y la segunda imagen tienen la misma cantidad de círculos, pero en la segunda algunas columnas están más cerca unas de otras y dan la impresión de que hay tres grupos distintos en lugar de uno grande.

Proximidad - ejemplo 1 - un grupo grande. Imagen del autor.

Proximidad - ejemplo 2 - tres grupos distintos. Imagen del autor.

Uso de la proximidad en el diseño de UX y UI

Tomemos un ejemplo del campo de la visualización de la información.

Esta vez, imaginemos que eres un ejecutivo que quiere ver cómo funciona su aplicación "Il Mio Chef". Quieres ver los KPI que miden el rendimiento financiero, el compromiso de los usuarios y la satisfacción. Al principio, tu especialista en visualización de la información crea el siguiente cuadro de mando que hace que tú y todos los demás ejecutivos os perdáis en los números y os hagáis aún más preguntas. Después de un mes, muchos de vosotrossimplemente dejar de usar este tablero de instrumentos por completo.

Cuadro de mando KPI - Il Mio Chef. Imagen del autor.

En este punto, vuelves a tu especialista en visualización de la información y le pides que facilite la comprensión global rediseñando el cuadro de mandos. El principio de proximidad resulta muy útil en este caso, y puedes ver el nuevo diseño a continuación. Contiene tres grupos divididos por el tipo de KPI y ayuda a todos a comprender cómo va la aplicación en términos financieros.Agrupar los objetos y utilizar más espacio en blanco entre los grupos puede ayudar a los usuarios a digerir la información más rápidamente.

Utilización del principio Gestalt de proximidad en el diseño de salpicaderos. Imagen del autor.

La ley de la continuidad

El principio de Continuidad establece que una vez que el ojo comienza a seguir un objeto, continuará siguiendo el "movimiento" en esa dirección hasta que se encuentre con otro objeto. Este movimiento nos ayuda a percibir el objeto como parte del mismo camino que tenemos que recorrer para encontrar información. La imagen siguiente muestra cómo podemos utilizar el principio de continuidad para crear esos patrones visuales que guían alojo en una dirección determinada.

Un ejemplo del principio de Continuidad. Imagen del autor.

Utilizar la continuidad en el diseño de UX y UI

Su investigador de UX presentó un nuevo informe que muestra que la principal motivación de los usuarios para utilizar la aplicación "Il Mio Chef" es la exploración gastronómica, ya que les permite acceder a nuevos restaurantes de comida italiana cada semana. Usted observa la métrica que muestra cuántas veces la gente desliza el dedo por sus opciones con el diseño de UI actual en la imagen de abajo (lado izquierdo) y ve que nunca deslizan el dedo más de dos veces enmedia para ver qué opciones tienen a su disposición.

Utilizando el principio de continuidad (a la derecha en la imagen de abajo), su diseñador de UX ayudó a aumentar ese número a unos 10 deslizamientos de media. ¿Cómo ocurrió? Al ocultar parte de la imagen y destacar el hecho de que hay que deslizar a la izquierda o a la derecha para ver lo que hay ahí, los ojos de los usuarios fueron guiados para crear literalmente el movimiento de "deslizar" y se sintieron más motivados para explorar más restaurantes y...Esto es algo que el diseño anterior no te motivaba en absoluto, aunque ya estuvieras intrínsecamente motivado para hacerlo.

Utilización del principio Gestalt de continuidad en el diseño UX/UI. Imagen del autor.

En resumen Utilizar los principios de la Gestalt presentados en este artículo en el diseño de su UX y UI puede ayudar a sus usuarios a encontrar la información más rápidamente y a digerirla mejor. Además, puede aumentar su satisfacción con su producto motivándoles a realizar las acciones que más les gustan.

‍

La portada incluye ilustraciones de Miklos Philips, editadas en Vectornator.