Explorando los Principios Gestalt del Diseño

Publicado: 2022-03-11

Escucha la versión en audio de este artículo

El espacio negativo ha sido durante mucho tiempo un elemento básico del buen diseño. Dejar un espacio en blanco alrededor de los elementos de un diseño es lo primero que suele venir a la mente. Pero luego hay diseños que usan ese espacio en blanco para inferir un elemento que en realidad no está allí (la flecha escondida entre la E y la X en el logotipo de FedEx inmediatamente me viene a la mente como ejemplo).

el espacio negativo es uno de los elementos y principios clave del diseño — La "E" y la "x" en el logotipo de FedEx crean una flecha dentro del espacio negativo entre ellos.

El cerebro humano es excepcionalmente bueno para llenar los espacios en blanco de una imagen y crear un todo que es mayor que la suma de sus partes. Es por eso que vemos caras en cosas como hojas de árboles o grietas en las aceras.

Este principio es una de las ideas subyacentes más importantes detrás de los principios gestalt de la percepción visual. La propuesta inicial más influyente escrita sobre la teoría fue publicada por Max Wertheimer en sus leyes de la organización perceptual de la Gestalt de 1923 , aunque la discusión de 1920 de Wolfgang Kohler sobre la Gestalten física también contiene muchas ideas influyentes sobre el tema.

Independientemente de quién propuso las ideas por primera vez (ha habido ensayos que se remontan a 1890), los principios de la gestalt son un conjunto importante de ideas que cualquier diseñador debe aprender, y su implementación puede mejorar en gran medida no solo la estética de un diseño, sino también su funcionalidad y facilidad de uso.

En los términos más simples, la teoría de la gestalt se basa en la idea de que el cerebro humano intentará simplificar y organizar imágenes o diseños complejos que constan de muchos elementos, disponiendo subconscientemente las partes en un sistema organizado que crea un todo, en lugar de solo un conjunto. serie de elementos dispares. Nuestros cerebros están diseñados para ver la estructura y los patrones para que podamos comprender mejor el entorno en el que vivimos.

Hay seis principios individuales comúnmente asociados con la teoría de la gestalt: similitud , continuación , cierre , proximidad , figura/fondo y simetría y orden (también llamado pragnanz ). También hay algunos principios adicionales más nuevos que a veces se asocian con la gestalt, como el destino común.

Semejanza

Es la naturaleza humana agrupar cosas similares. En gestalt, los elementos similares se agrupan visualmente, independientemente de su proximidad entre sí. Se pueden agrupar por color, forma o tamaño. La similitud se puede usar para unir elementos que podrían no estar uno al lado del otro en un diseño.

Por supuesto, puede hacer que las cosas sean diferentes si quiere que se destaquen entre la multitud. Es por eso que los botones para las llamadas a la acción a menudo se diseñan en un color diferente al del resto de la página, para que se destaquen y atraigan la atención del visitante hacia la acción deseada.

En el diseño de UX, el uso de la similitud deja en claro a sus visitantes qué elementos son similares. Por ejemplo, en una lista de funciones que utiliza elementos de diseño repetitivos (como un icono acompañado de 3 o 4 líneas de texto), el principio de similitud facilitaría la exploración a través de ellos. Por el contrario, cambiar los elementos de diseño por las características que desea resaltar los hace destacar y les da más importancia en la percepción del visitante.

Incluso cosas tan simples como asegurarse de que los enlaces a lo largo de un diseño tengan el mismo formato se basan en el principio de similitud en la forma en que sus visitantes percibirán la organización y la estructura de su sitio.

Continuación

La ley de continuidad postula que el ojo humano seguirá el camino más suave al ver las líneas, independientemente de cómo se dibujaron realmente las líneas.

un ejemplo del principio gestalt de continuidad — El ojo tiende a querer seguir la línea recta de un extremo a otro de esta figura, y la línea curva de arriba a abajo, incluso cuando las líneas cambian de color a mitad de camino.

Esta continuación puede ser una herramienta valiosa cuando el objetivo es guiar la vista de un visitante en una dirección determinada. Seguirán el camino más simple en la página, así que asegúrese de que las partes más vitales que deben ver estén dentro de ese camino.

Dado que el ojo sigue naturalmente una línea, la colocación de elementos en una serie en una línea atraerá naturalmente la atención de un elemento al siguiente. Los controles deslizantes horizontales son un ejemplo de ello, al igual que las listas de productos relacionados en sitios como Amazon.

Cierre

El cierre es uno de los principios gestálticos más geniales y ya lo mencioné al principio de este artículo. Es la idea de que tu cerebro completará las partes faltantes de un diseño o imagen para crear un todo.

En su forma más simple, el principio de cierre permite que tu ojo siga algo así como una línea punteada hasta su final. Pero a menudo se ven aplicaciones más complejas en los logotipos, como el del Fondo Mundial para la Naturaleza. Faltan grandes partes del contorno del panda, pero su cerebro no tiene problemas para completar las secciones que faltan para ver el animal completo.

el logotipo del fondo mundial para la vida silvestre es un ejemplo del principio gestalt de cierre — El principio gestalt de cierre está bellamente ilustrado en el logotipo del panda del Fondo Mundial para la Naturaleza. El cerebro completa las formas blancas, aunque no estén bien definidas.

El cierre se usa con bastante frecuencia en el diseño de logotipos, con otros ejemplos que incluyen los de USA Network, NBC, Sun Microsystems e incluso Adobe.

Otro ejemplo muy importante de cierre en el trabajo en el diseño de UX y UI es cuando muestra una imagen parcial que se desvanece de la pantalla del usuario para mostrarle que hay más para encontrar si desliza el dedo hacia la izquierda o hacia la derecha. Sin una imagen parcial, es decir, si solo se muestran imágenes completas, el cerebro no interpreta inmediatamente que puede haber más para ver y, por lo tanto, es menos probable que el usuario se desplace (ya que el cierre ya es evidente).

Se buscan diseñadores de interfaz de usuario independientes a tiempo completo con sede en EE. UU.

Proximidad

La proximidad se refiere a qué tan cerca están los elementos entre sí. Las relaciones de proximidad más sólidas son aquellas entre sujetos superpuestos, pero simplemente agrupar objetos en una sola área también puede tener un fuerte efecto de proximidad.

Lo contrario también es cierto, por supuesto. Al poner espacio entre los elementos, puede agregar separación incluso cuando sus otras características son las mismas.

Tome este grupo de círculos, por ejemplo:

el principio gestalt de proximidad ilustrado con grupos de círculos — Lo único que diferencia al grupo de la izquierda del de la derecha es la proximidad de las líneas. Y, sin embargo, su cerebro interpreta la imagen de la derecha como tres grupos distintos.

ejemplo del principio gestalt de proximidad en acción que perjudica ux — Un ejemplo de formulario PDF de USPS en el que el principio gestalt de proximidad está perjudicando la experiencia de usuario. Debido a que las etiquetas de campo están más cerca de los campos debajo de ellas, la gente creería erróneamente que ahí es donde va la información para "c". y "d". Sin embargo, se supone que la información debe proporcionarse en los campos encima de las etiquetas de texto.

En el diseño de UX, la proximidad se usa con mayor frecuencia para que los usuarios agrupen ciertas cosas sin el uso de elementos como bordes rígidos. Al juntar cosas similares, con espacio entre cada grupo, el espectador captará de inmediato la organización y la estructura que desea que perciba.

Figura/Fondo

El principio de figura/fondo es similar al principio de cierre en que aprovecha la forma en que el cerebro procesa el espacio negativo. Probablemente haya visto ejemplos de este principio flotando en memes en las redes sociales o como parte de logotipos (como el logotipo de FedEx ya mencionado).

Tu cerebro distinguirá entre los objetos que considera que están en el primer plano de una imagen (la figura o punto focal) y el fondo (el área sobre la que descansan las figuras). Donde las cosas se ponen interesantes es cuando el primer plano y el fondo en realidad contienen dos imágenes distintas, como esta:

un ejemplo de la relación figura-fondo que forma elementos y principios de diseño — Algunas personas verán inmediatamente el árbol y las aves cuando vean el logotipo del Zoológico de Pittsburgh y el Acuario PPG, mientras que otras verán al gorila y al león mirándose fijamente.

gran ejemplo del principio de la gestalt figura-fondo — Otro gran ejemplo del principio gestalt figura/fondo.

Un ejemplo más sencillo lo podemos ver con esta imagen, de dos caras creando un candelero o jarrón entre ellas:

un ejemplo simple del principio de figura-fondo, un principio de diseño gestalt — En esta famosa ilusión desarrollada por el psicólogo danés Edgar Rubin, al espectador se le suelen presentar dos interpretaciones de formas: dos caras o un jarrón. Es otro excelente ejemplo del principio figura/fondo.

En términos generales, tu cerebro interpretará el área más grande de una imagen como el suelo y la más pequeña como la figura. Sin embargo, como se muestra en la imagen de arriba, puede ver que los colores más claros y más oscuros pueden influir en lo que se ve como la figura y lo que se ve como el fondo.

El principio de figura/fondo puede ser muy útil cuando los diseñadores de productos quieren resaltar un punto focal, particularmente cuando está activo o en uso, por ejemplo, cuando aparece una ventana modal y el resto del sitio se desvanece en el fondo, o cuando Se hace clic en una barra de búsqueda y se aumenta el contraste entre esta y el resto del sitio.

Suscríbete al blog de diseño de Toptal y recibe nuestro eBook

Simetría y Orden

La ley de simetría y orden también se conoce como pragnanz , la palabra alemana para “buena figura”. Lo que dice este principio es que tu cerebro percibirá formas ambiguas de la manera más simple posible. Por ejemplo, una versión monocromática del logotipo olímpico se ve como una serie de círculos superpuestos en lugar de una colección de líneas curvas.

otro de los principios de diseño de gestalt, el principio de pragnanz se ilustra con el logotipo de los juegos olímpicos

Aquí hay otro buen ejemplo del principio de diseño gestalt " pragnanz ":

un ejemplo complejo del principio de pragnanz, otro principio gestalt

Su cerebro interpretará la imagen de la izquierda como un rectángulo, un círculo y un triángulo, incluso cuando los contornos de cada uno estén incompletos porque son formas más simples que la imagen general.

Destino común

Si bien el destino común no se incluyó originalmente en la teoría de la gestalt, desde entonces se ha agregado. En el diseño de UX, su utilidad no puede pasarse por alto. Este principio establece que las personas agruparán cosas que apuntan o se mueven en la misma dirección.

En la naturaleza, vemos esto en cosas como bandadas de pájaros o bancos de peces. Se componen de un montón de elementos individuales, pero debido a que aparentemente se mueven como uno solo, nuestros cerebros los agrupan y los consideran un solo estímulo.

una bandada de pájaros ilustra el principio del destino común — Una bandada de pájaros se ve como una sola unidad cuando vuela en la misma dirección y, por lo tanto, comparte un destino común. (por Martin Adams en Unsplash)

Esto es muy útil en UX ya que los efectos animados se vuelven más frecuentes en el diseño moderno. Tenga en cuenta que los elementos no tienen que estar en movimiento para beneficiarse de este principio, pero tienen que dar la impresión de movimiento.

Principios Gestalt en Diseño UX

Al igual que con cualquier principio psicológico, aprender a incorporar los principios de percepción visual de la gestalt en su trabajo de diseño puede mejorar en gran medida la experiencia del usuario. Comprender cómo funciona el cerebro humano y luego explotar las tendencias naturales de una persona crea una interacción más fluida que hace que el usuario se sienta cómodo en un sitio web, incluso si es su primera visita.

Los principios de la Gestalt son relativamente fáciles de incorporar en casi cualquier diseño y pueden elevar rápidamente un diseño que parece desordenado o que lucha por la atención de un usuario a uno que ofrece una interacción natural y fluida que guía a los usuarios hacia la acción que desea que tomen.

• • •

Lectura adicional en el blog de diseño de Toptal:

Principios de diseño: Introducción a la jerarquía
Mejores prácticas de diseño de interfaz de usuario y errores comunes
Cómo utilizar los poderosos principios de la Gestalt en el diseño (con infografía)
La guía completa de arquitectura de la información
Impulse su UX con estos principios de diseño de interacción exitosos