mejorar la usabilidad a través de la psicología gestalt. ilustrado con ejemplos actuales

MEJORAR LA USABILIDAD A TRAVÉS DE LA PSICOLOGÍA GESTALT

Autora: Sara Rovira Fecha: 12/05/2014

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

http://sararovira.com


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.



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.




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.




(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.




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.




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.



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.



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.



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:



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".



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.



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.



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).



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.



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.



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.



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.



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.



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.



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.



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:


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/

CONTACTO

sararovira.com /me@sararovira / 659 854 140

@sararoviraes.linkedin.com/in/sararovira/ sara.r100


mejorar la usabilidad a través de la psicología gestalt. ilustrado con ejemplos actuales

Marketing