TeaCup Lab Logo

La historia de un elefante y los principios de la Gestalt

Paulina Maślona
13 julio, 2022

Un día, cuando tenía cinco años, mi padre me llevó a su trabajo. ¿Una idea estúpida, pensaréis? Pues sí. Como es fácil imaginar, no me impresionaron mucho las interminables filas de oficinas de aspecto similar, la gente seria y con prisa constante y las máquinas de café sin opción de chocolate caliente. Obviamente, empecé a quejarme. Algo que me enorgullece decir, se me daba bastante bien.

Mi pobre padre, desesperado por entretenerme de alguna manera, cogió uno de los rotuladores y empezó a dibujar en la pizarra. Me quedé sentada, incrédula. Nunca había dibujado nada en su vida. Pero ese viernes cualquiera de 1997 estaba allí, haciendo unas líneas para que su hija dejara de lloriquear. Se parecía a esto...

Inmediatamente supe lo que era. A pesar de sus orejas torcidas, de las partes que no conectaban y de la evidente falta de talento artístico de mi padre. Lo que no sabía era que mi padre acababa de darme un ejemplo perfecto del poder de la percepción humana. Lo que no sabía era que alguien ya había escrito libros sobre ello, creado teorías a su alrededor, discutido sobre ello con otros científicos. Por último, lo que no sabía era que este fenómeno había formado una parte crucial de cómo diseñamos los sitios web hoy en día. Ésta, señoras y señores, fue una de mis primeras experiencias conscientes de lo que todos conocemos como "principios de la Gestalt".

La curiosidad, las luces y las vacaciones que nunca sucedieron 

Unos cientos de años antes de que yo entrara en la oficina de mi padre, un filósofo y psicólogo alemán de 30 años llamado Max Wertheimer se subió al tren de Viena a Renania. Era el verano de 1910 y se dirigía a comenzar sus merecidas vacaciones cuando algo llamó su atención. Desde la ventanilla de su tren vio dos luces que parpadeaban de forma alterna. Wertheimer descubrió que lo que en realidad eran dos hechos separados, su cerebro lo percibía como una sola luz que se movía de un lado a otro. Para Wertheimer fue una experiencia tan esclarecedora que decidió cancelar sus planes de vacaciones (que, creo que todos estamos de acuerdo, es el mayor sacrificio que uno puede hacer por su trabajo) y repetir su experimento de percepción visual una y otra vez. Lo llamó el fenómeno phi: "una ilusión de movimiento que surge cuando se colocan objetos inmóviles -bombillas, por ejemplo- y se iluminan rápidamente uno tras otro" (fuente, Enciclopedia Británica).

 

Los tres mosqueteros alemanes

El descubrimiento de Wertheimer causaría un gran revuelo en el desarrollo de la psicología y la percepción humana, ya que el fenómeno Phi resultó ser no sólo una única e interesante observación, sino la base de una teoría mucho más amplia. Wertheimer, junto con otros dos psicólogos (y grandes admiradores de su descubrimiento) Kurt Koffka y Wolfgang Kohler, demostró que la percepción completa es diferente de sus elementos individuales juntos o, citando al propio Koffka, "un todo es diferente de la suma de sus partes".

En 1920 los tres volcaron todos sus conocimientos sobre la percepción en los principios de la Gestalt y gracias a ello hoy entendemos cómo tendemos a agrupar objetos, reconocer patrones y simplificar estructuras complejas. Pero, ¿Qué hicieron estos señores alemanes por el Internet de hoy? Y, lo que es más importante, ¿por qué el elefante mal dibujado de mi padre es relevante en esta historia?

Bueno, probablemente ya sepas la respuesta. No importa si es mi mente de 5 años la que analiza lo que ve en la pizarra de la oficina o alguien que mira la interfaz de la web por primera vez: nuestros cerebros siguen ciertos patrones para organizar los elementos visuales en "conjuntos unificados". Y si queremos diseñar bien, entender estos patrones es crucial.

Algunos de los principios de la Gestalt (con ejemplos de algunos sitios web españoles populares)

1. Proximidad

Si algunos elementos permanecen cerca, entendemos que hay una conexión entre ellos. Un ejemplo fácil sería cualquiera de los formularios de Internet que tenemos que rellenar para finalizar un proceso de compra, como en el comercio electrónico español, El Corte Inglés. La distancia aquí es crucial para que entendamos si debemos rellenar la casilla que está debajo o encima del texto.

Screenshot 2022-07-12 at 13.25.34

Ejemplo de elcorteignles.es. La caja está mucho más cerca del texto de arriba que de abajo para no confundir al cliente sobre qué información debe proporcionar.

Otro ejemplo de proximidad: en la mayoría de los sitios web de comercio electrónico los objetos de una misma categoría suelen estar muy juntos y a mayor distancia del resto.

Ejemplo de amazon.es

Screenshot 2022-07-12 at 13.25.45

2.Similaridad

No sólo si los objetos son cercanos tendemos a ver esta conexión, también cuando son visualmente similares. Echemos un vistazo a twitch.com: las diferentes categorías de vídeos se presentan de la misma manera, así como todos los canales de la lista recomendada. Esto tranquiliza a nuestro cerebro, nos hace entender que estamos ante un grupo de opciones similares. Imagínate que una sola de las opciones tuviera un color o un tipo de letra diferente, inmediatamente nos preguntaríamos: ¿Por qué? ¿En qué se diferencia ésta del resto? ¿Qué tiene de especial?


Screenshot 2022-07-09 at 21.30.33

Un ejemplo diferente: el diseño de las CTA, a menudo muy importante para el éxito del uso del sitio web. Ryanair utiliza el principio de similitud de forma interesante: todos sus CTA "positivos" (aceptar las condiciones de privacidad, decidir registrarse, comprar billetes) tienen la misma fuente y un tono amarillo brillante.

Screenshot 2022-07-12 at 13.25.56

3.Simetría

Nuestro cerebro busca la simetría y el orden, si lo encontramos en el diseño de la web, solemos tener menos problemas para entender la disposición y las posibles acciones en los primeros segundos.

Screenshot 2022-07-09 at 21.12.21

El diseño de la plataforma española de intercambio de productos usados Wallapop, gracias a su simetría, es visualmente atractivo y fácil de leer.

4.Continuidad

Si ciertos elementos parecen seguir una línea continua, nos hace creer que forman un grupo. Por eso los diseñadores rara vez idean menús que no sigan una línea recta y no tenemos problemas para entender las categorías dispuestas en columnas o los carruseles de Netflix.

Screenshot 2022-07-12 at 13.26.07

Ejemplo: la organización de los resultados de fútbol en el sitio web español de noticias deportivas mundodeportivo.com. La flecha sugiere que hay más cosas que ver.

5. Figura redonda

Como humanos entendemos automáticamente los diferentes planos de enfoque y reconocemos cuáles forman el primer plano y cuáles el fondo de la imagen. Tendemos a dar más importancia al primero. Este principio puede ser muy útil cuando queremos proporcionar a nuestro usuario información importante: una bonita ventana emergente que aparezca en primer plano y un desenfoque o sombra en el fondo harán evidente dónde debemos centrar nuestra atención.

Arriba puede ver un ejemplo diferente de Renfe. Gracias al fondo difuminado podemos completar los detalles de nuestro viaje sin distracciones innecesarias.

6.Destino común

Otra forma de mostrar una relación entre elementos es hacer que se muevan en la misma dirección o de la misma manera, como los coches en la autopista: pueden estar lejos unos de otros pero su movimiento nos hace saber que tienen un destino común.

Un ejemplo podría ser el de los menús deslizantes o, quizá menos obvio, el de los tooltips que aparecen cuando pasamos el ratón por encima de algunas partes de la web. Que las instrucciones aparezcan en la pantalla de la misma manera asegura al usuario que se trata de la misma categoría de información.

Menú deslizante en Amazon.es - las diferentes categorías no sólo apuntan en la misma dirección sino que se mueven en el mismo sentido.

Y, por último, el Cierre (o, como puedes llamarlo a partir de ahora, el caso de un elefante)

A nuestro cerebro no le gustan las historias inacabadas. Rellenamos los huecos entre los elementos automáticamente para percibir una imagen completa. Precisamente por eso conseguí ver un elefante en la imagen dibujada con unas pocas líneas inconexas, por eso tampoco tenemos problemas para entender los logotipos de abajo.

Screenshot 2022-07-12 at 13.26.28

¿Cómo se puede utilizar esta regla en el diseño de interfaces? El ejemplo que se menciona casi siempre en este caso es el aspecto de los iconos que elegimos para nuestros sitios web: no es necesario que sean demasiado detallados para que quede muy claro lo que significan. Además, un diseño sencillo suele ser más claro y fácil de ver.

Screenshot 2022-07-12 at 13.26.39

Ejemplo de iconos que representan formas de ser más sostenibles de ikea.es 

Conclusiones

Los principios de la Gestalt pueden parecer bastante obvios para la mayoría de la gente, especialmente para los diseñadores. Sin embargo, merece la pena tenerlos siempre en la cabeza: al fin y al cabo, estos principios son la base de la comunicación visual con los usuarios de nuestros productos. Son instrucciones seguras para una interfaz fiable y fácil de digerir. Por otro lado, sabiendo lo grabados que están en las mentes humanas, también podemos empezar a jugar con estos conceptos para captar la atención de los usuarios.

Si quieres saber más sobre la psicología de la Gestalt y el estudio de la percepción, aquí tienes una interesante conferencia de Eric Vanman, profesor asociado de psicología en la Universidad de Queensland - https://www.youtube.com/watch?v=lk967U1Aq8A

En cuanto a los conocimientos prácticos, el libro Laws of UX: Using Psychology to Design Better Products & Services explica en detalle no sólo los principios de la Gestalt, sino también cómo en general los usuarios perciben y procesan las interfaces digitales.

Y si quieres impresionar a tu hija/hijo/sobrino/nietos, te recomiendo encarecidamente el dibujo del elefante visto desde atrás.

¿Listo para mejorar la experiencia de tus usuarios? ¡Hablemos!
Las respuestas que buscas, a tan solo un clic.
Contáctanos ->
TeaCup Lab Logo
TeaCup Lab is a user experience consultancy agency founded in Madrid in 2016. We specialize in User Research & User testing for global brands.
Copyright 2019-2023 TeaCup Consulting SL

Contact us

TeaCup Lab 
Calle Jaén 2, 1ºG
28020, Madrid, Spain
+34 910 59 21 36
hola@teacuplab.com