Lo que necesita saber sobre la percepción visual y el diseño de sitios web

Lo que necesita saber sobre la percepción visual y el diseño de sitios web

No faltan datos que sugieran cuán orientados a lo visual somos como humanos.

Por ejemplo, «90 por ciento de la información que se transmite al cerebro es visual, y las imágenes se procesan 60 000 veces más rápido en el cerebro que el texto”.

cerebro visual del 90 por ciento

O esto: «El 65 por ciento de las personas son aprendices visuales, y una de las mejores maneras de enviar mensajes a casa es a través del contenido visual».

Estos datos ayudan a explicar por qué el marketing visual realmente se ha disparado recientemente y el contenido centrado en lo visual, como las infografías, es tan popular.

La vista es uno de nuestros sentidos primarios por los cuales captamos información y entendemos el mundo.

Básicamente, es un gran problema.

Por lo tanto, tiene sentido que el diseño de un sitio web efectivo se realice teniendo en cuenta la percepción visual.

No solo ¿influye en tu tasa de rebote?la duración promedio de la sesión y las tasas de conversión, pero también tiene un gran impacto en el valor de su marca.

En realidad, «46.1 por ciento de las personas dicen que el diseño de un sitio web es el criterio número uno para discernir la credibilidad de una empresa”.

Hacerlo bien desde un punto de vista visual es esencial, por lo que se necesita mucho esfuerzo para comprender la percepción visual y la psicología subyacente detrás de «hacer que un sitio se vea bien».

Aquí hay algunas formas en que la percepción visual se aplica al diseño web y algunos principios específicos que puede aplicar para una UX óptima.

Tenga en cuenta, estas son ideas generales, no pequeñas tácticas ingeniosas. En lugar de proporcionar procedimientos prescriptivos con respecto a la percepción visual, he esbozado principios de alto nivel basados ​​en datos que se pueden aplicar en prácticamente cualquier industria, negocio vertical o nicho.

Las fuertes jerarquías visuales brindan una guía clara

En el momento en que alguien llega a su sitio web, su objetivo es guiarlo en un viaje que finalmente culmina en una conversión.

Para lograr esto desde una perspectiva de diseño, es esencial crear una jerarquía visual.

52 semanas de UX ofrece una excelente descripción de este proceso:

Jerarquía visual

También proporcionan un buen ejemplo de un sitio con jerarquías visuales sólidas frente a uno con jerarquías visuales débiles.

Fuertes jerarquías visuales

El objetivo de un diseñador web es clasificar los diversos elementos de un sitio en términos de importancia en relación con el cumplimiento de su objetivo comercial.

Por ejemplo, el punto focal de una página de inicio puede ser una imagen grande para capturar instantáneamente la atención de un visitante. Esto podría ir seguido de un título que indique lo que se ofrece y luego un CTA bien ubicado para que los visitantes hagan clic.

Aquí hay un muy buen ejemplo de la página de inicio de TOMS que sigue esta fórmula.

Llamada a la acción de Toms

La clave aquí es clasificar los elementos de su sitio según su importancia y organizarlos de una manera que guíe a sus visitantes sin fricciones.

Los ojos tienden a seguir un patrón en forma de F

No voy a hacerle perder el tiempo con todos los detalles sangrientos de este fenómeno. Ya ha sido cubierto extensamente.

Pero es necesario señalar que varios estudios de seguimiento ocular que utilizan mapas de calor encontraron una tendencia común en la forma en que las personas ven el contenido del sitio web.

En general, el movimiento de los ojos sigue un patrón distintivo en forma de F.

Uno de los estudios más notables realizados sobre este tema provino de Grupo Nielsen Norman en 2006.

Aquí está el quid de lo que encontraron:

Y así es como se ve visualmente:

Mapa de calor

La primera página a la izquierda es la sección «acerca de nosotros» de un sitio web. La página del medio es una página de producto de un sitio de comercio electrónico. La tercera página a la derecha es una SERP.

Como puede ver, existe un patrón perceptible que surge entre los tres tipos de página.

Si bien el patrón en forma de F es más prominente en la página del producto de un sitio de comercio electrónico o SERP, está claro que otros tipos de contenido se digieren de manera similar.

A menudo, se puede lograr una experiencia de usuario de escritorio óptima estructurando el diseño de su página siguiendo este principio para dirigir la atención de un visitante.

El espacio en blanco juega un papel más importante de lo que piensas

El espacio en blanco o “espacio negativo” es el área entre los objetos. Es el espacio vacío que separa gráficos, texto, encabezados, columnas, etc.

Si bien puede parecer insignificante, el espacio en blanco en realidad juega un papel integral y tiene un gran impacto en la estética general de un sitio. Si realmente lo piensas, es el espacio en blanco lo que permite que los objetos existan en primer lugar.

Un pecado capital que se comete con bastante frecuencia es sobrecargar un sitio web con demasiados objetos hasta el punto de que se ve torpe y saturado. Puedes pensar en ello como maximalismo digital.

Si bien cargar un sitio con más «cosas» puede parecer una forma efectiva de captar la atención del usuario, generalmente se considera una práctica ineficaz. Esto se debe a que tiende a distraer y puede abrumar al visitante hasta el punto de que se produzca una sobrecarga cognitiva.

En un mundo saturado de datos e información en exceso, lo que la mayoría de los usuarios anhelan es simplicidad.

hay un gran publicación de ConversionXL que analiza por qué los sitios web «simples» son científicamente mejores.

En el artículo, el autor hace referencia a una Estudio de 2012 de Google que dice: «Los sitios web visualmente complejos se califican constantemente como menos hermosos que sus contrapartes más simples».

Así que hay algo de verdad real en este argumento. Menos es más.

Aquí hay un par de ejemplos de sitios web que logran esto sin problemas:

Alquería

Brault y Barnes

En pocas palabras, dejar mucho espacio en blanco en el diseño web le da al sitio una sensación de limpieza y facilita que los usuarios se concentren en su mensaje principal. Pueden absorber su copia de manera más eficiente y es más probable que noten puntos focales como su CTA.

Los ojos se dibujan naturalmente hacia el contraste

Esto se relaciona con nuestro punto anterior y sugiere que una de las formas más efectivas de hacer que los ojos se dirijan al punto focal deseado es crear contraste.

es uno de los principios de la teoría de la Gestalt, que “intenta describir cómo las personas tienden a organizar los elementos visuales en grupos o totalidades unificadas cuando se aplican ciertos principios”.

efecto gestalt

Los otros principios incluyen proximidad, similitud, estabilidad múltiple, continuidad y cierre.

Gestalt principal

Este aspecto de la percepción visual es en realidad un gran contribuyente a nuestra supervivencia colectiva como especie. La capacidad de nuestros antepasados ​​para identificar el contraste en su entorno (p. ej., un animal depredador en el bosque) es lo que los alertó del peligro y los ayudó a mantenerse con vida.

Detectar el contraste es lo que hacemos como humanos. Entonces, cuando se trata de hacer que los visitantes tomen nota de los elementos clave de su sitio web, es obviamente beneficioso crear contraste.

El sitio web de Wonder Bread logra esto muy bien e incorpora mucho contraste.

Pan maravilloso

Tus ojos no pueden evitar gravitar hacia el pan.

Ayudas de similitud en la digestión de contenido

La similitud es otro principio de la teoría de la Gestalt, que Establece que“Los elementos que comparten características similares se perciben como más relacionados que los elementos que no comparten esas características”.

En pocas palabras, organizar varios elementos en grupos permite a los usuarios diferenciarlos rápidamente del resto de su sitio. Esto es beneficioso porque permite una UX más fluida y requiere gastar menos energía mental.

Aquí hay un ejemplo simple de la página de inicio de Harvard Business Review donde colocan los boletines de HBR en un solo grupo:

Revisión de negocios de Harvard

La conclusión aquí es que usar la similitud es una forma muy efectiva de desglosar las distintas secciones de su sitio para que todo sea fácilmente digerible.

La proximidad también ayuda

Hay un último principio de la teoría de la Gestalt que me gustaría señalar, y es la proximidad.

Es bastante simple. “Objetos que están más cerca se perciben como más relacionados que los objetos que están más separados”.

Solo eche un vistazo a estos grupos de puntos.

Puntos rosas

Estamos naturalmente inclinados a considerar los puntos de la izquierda como un objeto singular. Sin embargo, percibimos los puntos de la derecha como dos objetos separados.

La ley de proximidad nos permite comprender mejor el contenido del sitio web y dividir varios elementos en diferentes categorías.

Aquí hay un ejemplo:

Avenida W3

Puede usar este aspecto de la percepción visual para desglosar el contenido para crear categorías e incluso subcategorías. A su vez, esto debería aumentar el flujo de su sitio y ayudar a los usuarios a navegarlo con mayor facilidad.

La proporción áurea puede optimizar la estética general

El concepto de la proporción áurea se remonta a más de 2000 años y ha sido estudiado por todos, desde Platón y Euclides hasta matemáticos modernos como Roger Penrose.

En pocas palabras, la proporción áurea es 1,618.

La calculadora de la proporción áurea

Así es como se ve visualmente:

Proporción áurea

También conocidas como proporciones divinas, es una proporción en la que los elementos se proporcionan de una manera que son estéticamente agradables a los ojos humanos.

Lo ves en todo, desde la arquitectura antigua…

proporción áurea griega

al cuerpo humano…

1618

E incluso a nivel macro en el universo mismo.

Galaxia proporción áurea

Es bastante asombroso.

Es un fenómeno visto en todo el mundo natural. Y curiosamente, también se puede aplicar al diseño web.

Aquí hay un buen ejemplo:

chris brogan

Observe cómo el diseño y la disposición de los elementos encajan perfectamente con la proporción áurea. Esta es una forma científicamente probada de maximizar el atractivo visual de su sitio.

Para aprender a aplicar proporciones divinas a su sitio, echa un vistazo a esta guía de Tuts+.

Conclusión

La percepción visual en lo que respecta al diseño de sitios web es increíblemente compleja y multifacética. Lo sorprendente es que los principios que cubrí aquí son solo una parte de lo que sucede en el proceso.

Sin embargo, creo que estos principios son algunos de los más integrales para un diseño web efectivo.

Comprender cómo las personas perciben visualmente el contenido y los procesos psicológicos subyacentes que tienen lugar lo colocan en una posición para optimizar su sitio y crear la mejor experiencia de usuario posible.

Esto tiene sus beneficios obvios y le permite maximizar las conversiones y, en última instancia, aumentar las ventas.

¿Cuál considera que es el elemento visual más importante en un sitio web?

Imagen destacada basada en obra de arte por Cmglee.