el cerebro humano está conectado para ver la estructura, la lógica y los patrones. Nos ayuda a darle sentido al mundo. En la década de 1920, un grupo de psicólogos alemanes desarrolló teorías sobre cómo las personas perciben el mundo que les rodea, llamadas principios Gestalt.
por ejemplo, ¿qué ves cuando miras esta imagen?,
Fuente: The Inspired Eye
Si eres como la mayoría de las personas, probablemente veas un triángulo. Pero en realidad, todo lo que hay son tres hombres blancos «pac».»Vemos el triángulo porque nuestros cerebros toman la información visual ambigua y la organizan en algo que tiene sentido para nosotros: algo familiar, ordenado, simétrico y que entendemos.
cuando este proceso cognitivo se inicia, nuestras mentes saltan de comprender todos los elementos como componentes individuales y no relacionados a ver toda la forma como un todo., Y como resultado, percibimos formas y objetos donde no se crearon.
para ilustrar más este proceso, echa un vistazo al GIF a continuación. Tu cerebro ve a un perro paseando, pero no es más que una serie de puntos en movimiento.
fuente: Gizmodo
Estos son ejemplos simples, pero demuestran los tipos de atajos que nuestros cerebros hacen todo el tiempo para dar sentido rápidamente al mundo.
¿cuáles son los principios Gestalt?,
estos atajos se conocen como los principios Gestalt de la percepción visual, Y detallan cómo nuestros cerebros crean la estructura por defecto. Pero, ¿por qué es importante entender esto para el diseño web y móvil?
por qué los diseñadores deben preocuparse por los principios Gestalt
los grandes diseñadores entienden el poderoso papel que juega la psicología en la percepción visual. ¿Qué sucede cuando el ojo de alguien se encuentra con sus creaciones de diseño? ¿Cómo reacciona su mente al mensaje que tu artículo está compartiendo?, – Laura Busche, estratega de contenido de marca en Autodesk
piense en esa cita por un minuto. Cuando la gente ve por primera vez sus diseños, ¿cómo los experimentan? Para entender lo que hace que el diseño de interfaz de usuario funcione, debe comprender la psicología de la percepción humana.
la ley fundamental que gobierna un principio Gestalt es que tendemos a ordenar nuestra experiencia de una manera que es regular, ordenada y reconocible. Esto es lo que nos permite crear significado en un mundo complejo y caótico., Y tener una sólida comprensión de cómo funcionan estos principios te ayudará de tres maneras.
- te ayudarán a determinar qué elementos de diseño son más efectivos en una situación determinada. Por ejemplo, cuándo usar jerarquía visual, sombreado de fondo, degradados y cómo agrupar elementos similares y distinguir otros diferentes.
- estos principios psicológicos tienen el poder de influir en nuestra percepción visual, lo que permite a los diseñadores dirigir nuestra atención a puntos específicos de enfoque, hacernos tomar acciones específicas y crear un cambio de comportamiento.,
- y finalmente, al más alto nivel, los principios Gestalt le ayudan a diseñar productos que resuelvan el problema del cliente o satisfagan las necesidades del usuario de una manera que sea hermosa, agradable e intuitiva de usar.
en este artículo, discutiremos Siete Leyes o principios Gestalt que se aplican directamente al diseño moderno, y compartiremos algunos ejemplos de cómo se usan en el diseño de interfaz de usuario. Esta no es una lista exhaustiva, pero rápidamente comenzará a notar que hay una superposición entre muchos de los principios y que todos funcionan juntos de manera fluida. Ahora vamos a sumergirnos.,
- Figura-fondo
- Similitud
- Proximidad
- región Común
- la Continuidad
- Cierre
- punto Focal
el Principio #1: figura-fondo
La figura-fondo principio establece que las personas instintivamente percibir los objetos como en el primer plano o el fondo. Se destacan prominentemente en la parte delantera (la figura) o retroceden en la parte posterior (el suelo).,
fuente: un enano llamado Warren
en la imagen de arriba, por ejemplo, su ojo ve instantáneamente una manzana blanca sentada sobre un fondo negro.
esta determinación ocurrirá rápida y subconscientemente en la mayoría de los casos. Figure / Ground nos permite saber en qué deberíamos centrarnos y qué podemos ignorar con seguridad en una composición. – Steven Bradley, diseñador web
cuando las personas utilizan su sitio web o aplicación móvil, una de las primeras cosas que hacen en cada pantalla es determinar cuál es la figura y cuál es el suelo.,
ejemplos del principio figura-suelo
la página de inicio de Basecamp tiene un montón de gráficos, texto, formularios y otra información. Y debido al principio figura-suelo, se puede decir inmediatamente que debe centrarse en el contenido en las áreas blancas de primer plano.
AngelList utiliza el principio figura-tierra de dos maneras a continuación. En primer lugar, el texto y el logotipo en el lado izquierdo de la página están claramente sentados en la parte superior de la imagen de fondo. En segundo lugar, el texto blanco en el menú de la derecha se encuentra en la parte superior del fondo negro.,
principio # 2: similitud
el principio de similitud establece que cuando las cosas parecen ser similares entre sí, las agrupamos. Y también tendemos a pensar que tienen la misma función.
por ejemplo, en esta imagen, parece haber dos grupos separados y distintos basados en la forma: los círculos y los cuadrados.
fuente: Creative Beacon
Una variedad de elementos de diseño, como el color y la organización, se pueden utilizar para establecer grupos similares., En la imagen de abajo, por ejemplo, aunque todas las formas son iguales, está claro que cada columna representa un grupo distinto:
fuente: Andy Rutledge
ejemplos del principio de similitud
GitHub usa el principio de similitud de dos maneras en la página de abajo. Primero, lo usan para distinguir diferentes secciones. Inmediatamente se puede decir que la sección gris en la parte superior tiene un propósito diferente que la sección negra, que también está separada y diferente de la sección Azul.,
en segundo lugar, también utilizan el color azul para distinguir los enlaces del texto normal y para comunicar que todo el texto azul comparte una función común.
principio # 3: proximidad
el principio de proximidad establece que las cosas que están cerca entre sí parecen estar más relacionadas que las cosas que están más separadas.
fuente: Andy Rutledge
la proximidad es tan poderosa que anula la similitud de color, forma y otros factores que podrían diferenciar un grupo de objetos.,
fuente: Steven Bradley
observe los tres grupos de puntos negros y rojos arriba? La proximidad relativa de los objetos tiene una influencia aún más fuerte en la agrupación que el color.
ejemplos del principio de proximidad
la proximidad de cada imagen y su texto correspondiente comunica que están relacionados entre sí.
y Vice lo usa para distinguir entre las imágenes, titulares, descripciones y otra información para cada una de sus historias.,
principio # 4: región común
el principio de Región común está altamente relacionado con la proximidad. Afirma que cuando los objetos se encuentran dentro de la misma región cerrada, los percibimos como agrupados.
fuente: Smashing Magazine
agregar bordes u otras barreras visibles es una gran manera de crear una separación percibida entre grupos de objetos, incluso si tienen la misma proximidad, forma, color, etc.,
ejemplos del principio de Región común
en el ejemplo de Pinterest a continuación, el principio de Región común se utiliza para separar cada pin (incluida su foto, título, descripción, colaborador y otros detalles) de todos los demás pines que lo rodean.
y se usa en el ejemplo de Facebook a continuación para comunicar que los comentarios, Los me gusta y las interacciones están asociados con esta publicación específica, y no con las otras publicaciones que la rodean.,
principio # 5: continuidad
el principio de continuidad establece que los elementos que están dispuestos en una línea o curva se perciben como más relacionados que los elementos que no están en la línea o curva.
fuente: Smashing Magazine
en la imagen de arriba, por ejemplo, los puntos rojos en la línea curva parecen estar más relacionados con los puntos negros en la línea curva que con los puntos rojos en la línea horizontal recta., Esto se debe a que su ojo sigue naturalmente una línea o una curva, haciendo que la continuación sea una señal más fuerte de relación que la similitud del color.
ejemplos del principio de continuidad
Amazon utiliza la continuidad para comunicar que cada uno de los siguientes productos es similar y está relacionado entre sí.
Sprig lo usa para explicar el proceso de tres pasos para usar su aplicación.
y Credit Karma lo utiliza para ilustrar los beneficios que proporcionan sus servicios.,
principio # 6: cierre
el principio de cierre establece que cuando miramos una disposición compleja de elementos visuales, tendemos a buscar un patrón único y reconocible.
En otras palabras, cuando vea una imagen que tiene partes faltantes, su cerebro llenará los espacios en blanco y creará una imagen completa para que aún pueda reconocer el patrón.
fuente: Eduard Volianskyi
por ejemplo, cuando mira la imagen de arriba, lo más probable es que vea una cebra, aunque la imagen es solo una colección de formas negras., Tu mente llena la información que falta para crear un patrón reconocible basado en tu experiencia.
ejemplos del principio de cierre
el principio de cierre se utiliza a menudo en diseños de logotipos en una variedad de empresas, incluidas IBM, NBC, Zendesk y Funding Circle.
Principio #7: punto focal
El punto focal principio afirma que lo que se destaca visualmente será captar y mantener la atención del espectador en primer lugar.,
Source: Smashing Magazine
Cuando miras la imagen de arriba, por ejemplo, lo primero que notas es el cuadrado rojo porque es diferente de todos los círculos negros que lo rodean. Es el primer punto de interés que atrapa tu atención, y desde allí tu atención se mueve a otras partes de la imagen.
ejemplos del principio del punto focal
Twilio utiliza el principio del punto focal para atraer su atención a su botón de llamada a la acción.,
y en el ejemplo a continuación, Instacart combina el principio del punto focal con el principio de la figura-suelo para atraer su atención al primer plano blanco, y luego al botón verde «buscar tiendas».
Pensamientos finales
si entiendes cómo funciona la mente humana, es más fácil dirigir la atención de las personas al lugar correcto. Y mantener estos principios en primer plano le ayudará a mantener al usuario en el Centro de su proceso de desarrollo de productos., Si desea obtener más información sobre los principios Gestalt de la percepción visual, le recomendamos que consulte los recursos a continuación.,
más información:
- simplicidad, simetría y más: la teoría de la Gestalt y los principios de diseño dio origen a
- principios de diseño: la percepción Visual y los principios de la Gestalt
- La Guía del diseñador para la teoría de la Gestalt
- serie de cinco partes de Andy Rutledge sobre la percepción de la Gestalt:
- Parte 1: Relaciones figura-Suelo
- Parte 2: similitud
- Parte 3: proximidad, conectividad uniforme y buena continuación
- Parte 4: destino común
- Parte 5: Cierre
¿quieres saber más?,
para saber cómo UserTesting puede ayudarle a entender a sus clientes a través de información humana bajo demanda, póngase en contacto con nosotros aquí.