Cómo mejorar la usabilidad web y el diseño a través de la psicología Gestalt. Las leyes ilustradas con ejemplos actuales. Consejos para hacer webs más usables con la Gestalt, que lleva más de un siglo influyendo en el marketing, la publicidad y el diseño.

1. MEJORAR LA USABILIDAD A TRAVÉS
DE LA PSICOLOGÍA GESTALT
Autora: Sara Rovira
Fecha: 12/05/2014

2. sararovira.com / me@sararovira / 659 854 140 2
La Gestalt es una corriente psicológica que nace en la Alemania de 1910 y que
surge en contraposición a los empiristas y estructuralistas, que dicen que los estímulos
se aprenden.
!
Las leyes gestálticas o de la percepción, tratan de cómo las personas percibimos
de forma innata los elementos exteriores y los organizamos.
!
Los teóricos de la Gestalt popularizaron el lema “el todo es más que la suma de las
partes”.
BREVE HISTORIA
!
Köhler
Kart Koffka
Max Wertheimer
Creadores e impulsores

3. sararovira.com / me@sararovira / 659 854 140 3
PSICOLOGÍA GESTALT Y USABILIDAD
¿Cómo podemos vincularlas?
!
Los psicólogos de la Gestalt dicen que una parte importante del aprendizaje humano
es por “insight” (de repente), por lo que pasar de la ignorancia al conocimiento es
una experiencia inmediata.
Navegar por internet se rige por
instantes y captar la atención
del usuario es cuestión de
milésimas de segundo. Es por
eso que es tan importante
asegurar la comprensión
inmediata del usuario al abrir una
página web.

4. sararovira.com / me@sararovira / 659 854 140 4
PRINCIPIO DE FIGURA-FONDO O DIALÉTICA
La organización básica comprende una figura (en lo que nos concentramos)
sobre un fondo. Hay elementos que tienden a percibirse como figura (cuadrados,
estrellas y triángulos) y otros como fondo, aunque ocupen el mayor porcentaje de la
pantalla.

5. sararovira.com / me@sararovira / 659 854 140 5
PRINCIPIO DE FIGURA-FONDO O DIALÉTICA
Ejemplo 1: Feedly
En el ejemplo 1A que hay a continuación, podemos decir que tratamos como figura o
distintas figuras la parte señalada con el cuadrado rojo. Actúa como fondo el blanco de
la página y el resto de la información, por lo que el menú principal (lateral izquierdo) se
desvanece en él y tiene poca visibilidad.

6. sararovira.com / me@sararovira / 659 854 140 6
PRINCIPIO DE FIGURA-FONDO O DIALÉTICA
(Continuación ejemplo 1: Feedly)
En el ejemplo 1B vemos que si aplicamos un rectángulo de color al menú izquierdo,
éste deja de formar parte del fondo (poca visibilidad) y pasa a formar parte de la
figura en el plano general. Incluso vemos cómo con este pequeño cambio, el nivel de
percepción del menú principal pasa a ser superior que el del resto de la información
de la página y el resultado es una mejora en la navegación.

7. sararovira.com / me@sararovira / 659 854 140 7
PRINCIPIO DE FIGURA-FONDO O DIALÉTICA
Ejemplo 2: Mashable
Una técnica relacionada con el Principio Figura-Fondo y que vemos continuamente
tanto en páginas web como en redes sociales es el lightbox. En el ejemplo 2, el
lightbox concentra la atención del usuario en un contenido en concreto (lo que sería la
figura) con la intención de dejar los contenidos del fondo en segundo plano.

8. sararovira.com / me@sararovira / 659 854 140 8
PRINCIPIO DE FIGURA-FONDO O DIALÉTICA
Ejemplo 3: Wired
La imagen del ejemplo 3 abre otra puerta que también hay que tener en cuenta cuando
hablamos de portales o medios de comunicación online ya que en gran parte viven de
la publicidad.
El leaderbanner de la home de la revista Wired contiene también el logotipo de la
marca. Mientras las partes oscuras del banner pertenecen a la figura, las letras "I" y "D"
del logo de Wired pertenecen al fondo.
La confusión que genera al usuario hace que,
sin querer, acabemos percibiendo la figura
como el fondo y el fondo como la figura. Al
intentar descifrar visualmente lo que está
pasando, nos concentramos en el logotipo y
nos olvidamos de la publicidad que
motoroilreimagined.com está pagando.
Tendríamos que ver cómo este detalle afecta
a los clicks que va a tener la publicidad.

9. sararovira.com / me@sararovira / 659 854 140 9
PRINCIPIO DE PREGNANCIA O SIMPLICIDAD
Según el cual, la organización perceptual tiende a la mayor simplicidad posible. Muchas
veces por querer colocar la máxima información posible en un espacio acabamos
complicando la comprensión del mensaje.

10. sararovira.com / me@sararovira / 659 854 140 10
PRINCIPIO DE PREGNANCIA O SIMPLICIDAD
Ejemplo 4: Twitter
Lo vemos a través de Twitter con un ejemplo de la pantalla de bienvenida del antes
(ejemplo 4A) y del después (ejemplo 4B). El objetivo de las dos pantallas es el mismo:
aumentar los registros de usuario.
¿Qué diseño cumple mejor su función?
!
Cuando miramos la imagen del ejemplo
4A, enseguida vemos el "See who's
here" y los "Top Tweets" y, al final de
todo, vemos el "Sign up" de registro. De
lo contrario, el diseño limpio de la imagen
del ejemplo 4B y cómo está repartido el
peso de la información hace que lo
primero que veamos es el formulario de
registro (ahora visible) y que las
probabilidades de click en esa zona
aumenten.

11. sararovira.com / me@sararovira / 659 854 140 11
LEY DE SEMEJANZA
Las partes que componen el campo visual se atraen mutuamente por su grado de
igualdad. Según el cual los estímulos similares en tamaño, color, brillo, dirección, peso
o forma tienden a ser percibidos como un conjunto. En la home de Amazon he
encontrado estos dos ejemplos:

12. sararovira.com / me@sararovira / 659 854 140 12
LEY DE SEMEJANZA
Ejemplo 5: Amazon
Miremos el ejemplo 5A atentamente. Luego el ejemplo 5B. ¿Qué sensación tenemos
en cada caso? Mientras que en la segunda imagen percibimos todos los productos
como parte del mismo grupo, en la primera imagen hay algo que visualmente "no nos
cuadra".

13. sararovira.com / me@sararovira / 659 854 140 13
LEY DE SEMEJANZA
(Continuación ejemplo 5: Amazon)
El tamaño y la disposición distinta de dos de los elementos de la primera imagen hace
que en lugar de percibirlos como un único grupo, lleguemos a contar hasta 5 grupos
de elementos. Un detalle que aparentemente no tiene mucha importancia (no es una
imagen rota o una incidencia grave) hace que la claridad de la navegación se vea
afectada de forma negativa.

14. sararovira.com / me@sararovira / 659 854 140 14
LEY DE SEMEJANZA
(Continuación ejemplo 5: Amazon)
Debemos hacer una reflexión: hemos visto cómo nos afecta perceptualmente
incumplir esta ley en una sección reducida de información. Cuando navegamos por la
home de una página web, donde conviven muchos más contenidos, tener errores de
este tipo hace que el problema se multiplique. Regla a tener en cuenta: 1 sección = 1
grupo con todos los estilos definidos.

15. sararovira.com / me@sararovira / 659 854 140 15
LEY DE PROXIMIDAD
Establece que los elementos que se encuentran cercanos en el espacio y en el
tiempo tienden a ser agrupados perceptualmente. La proximidad supera a la
semejanza, por lo que para ser parte de un grupo es más importante que los
elementos estén cercanos que no que se parezcan. Aunque esta vez pongo este
ejemplo a través de un texto, lo que ocurre con esta ley también se aplica a otros
elementos (secciones e imágenes de una web).

16. sararovira.com / me@sararovira / 659 854 140 16
LEY DE PROXIMIDAD
Ejemplo 6: Shiny Happy Things
En el siguiente header de esta página de moda, hay una frase con un interlineado
excesivo. Percibimos lo que debería ser un párrafo (= 1 grupo) como 3 filas
independientes (= 3 grupos), y la legibilidad del texto queda afectada. La teoría de los
grupos y las jerarquías de información es algo que los diseñadores gráficos tienen en
cuenta en todo lo que hacen.

17. sararovira.com / me@sararovira / 659 854 140 17
LEY DE CIERRE
Se refiere a la tendencia a percibir formas completas aunque no lo estén. Cerramos
contornos ya que las figuras abiertas crean inestabilidad.
!
En la era del flat design o diseño plano es difícil encontrar ejemplos actuales en páginas
web que ilustren esta ley. No obstante la voy a comentar como ejemplo de técnica que
permite mejorar los diseños sin alterar la usabilidad de la página ni la comprensión del
mensaje.

18. sararovira.com / me@sararovira / 659 854 140 18
LEY DE CIERRE
Ejemplo 7: Webneel
En el siguiente destacado de este artículo, vemos un cuadrado dividido en 4 partes
distintas. Si nos fijamos en el primer gato, vemos cómo percibimos que se encuentra
sobre un cuadrado cuando en realidad el cuadrado no está cerrado, pero es nuestro
cerebro el que cierra la forma.

19. sararovira.com / me@sararovira / 659 854 140 19
LEY DE CONTINUIDAD
Implica que los elementos que parecen construir un patrón o un flujo en la misma
dirección se perciben como una figura. A través de esto ayudamos a unir formas.

20. sararovira.com / me@sararovira / 659 854 140 20
LEY DE CONTINUIDAD
Ejemplo 8: Vente Privee
Pongo el ejemplo del proceso de compra de Vente Privee pero esto lo vemos en
muchos motores de reserva, procesos de compra, infografías y cualquier ilustración
que sugiera una dirección, ya sea a través de una línea o del orden con el que están
expuestos. En este caso, la línea que une los distintos pasos para realizar la compra en
Vente Privee, hace que el proceso se perciba como una única figura.

21. sararovira.com / me@sararovira / 659 854 140 21
LEY DE LA SIMETRÍA
Los objetos simétricos se asocian a aspectos positivos como la estabilidad,
consistencia y estructura sólida. En cambio, los objetos asimétricos dan una impresión
más bien negativa.

22. sararovira.com / me@sararovira / 659 854 140 22
LEY DE LA SIMETRÍA
Ejemplo 9: BBC News
Si nos fijamos en el header de la BBC News vemos cómo se aplica la simetría en
beneficio de la usabilidad de la página. El peso del logotipo a la izquierda queda
compensado con la ilustración del planeta que hay debajo del campo de búsqueda. El
hecho de que este ese planeta compensando visualmente el peso de la página y
creando simetría, hace que la probabilidad de click en la zona sea superior.

23. sararovira.com / me@sararovira / 659 854 140 23
ENLACES RECOMENDADOS
Enlaces recomendados:
!
• http://www.slideshare.net/Kenyon_of_Oz/psicologa-de-la-gestalt-11822864
!
• http://www.mindmatic.com.ar/gestalt.pdf
!
• http://es.wikipedia.org/wiki/Psicolog%C3%ADa_de_la_Gestalt
• http://www.sararovira.com/optimizar-usabilidad-psicologia-gestalt/
Puedes ver esta presentación en formato web en el siguiente enlace a mi blog:

24. CONTACTO
sararovira.com /me@sararovira / 659 854 140
@sararoviraes.linkedin.com/in/sararovira/ sara.r100