El papel de las fotos en la web respecto a los mapas de calor y el comportamiento del usuario

Los mapas de calor (en inglés, heatmap) son muy útiles para saber cómo distribuir el contenido de una página web, ya que muestran las zonas en las que el usuario más se fija cuando entra en la página, y así se puede conocer su comportamiento. De esta forma, el diseñador web decide dónde colocar los elementos más importantes para que sean los más visibles de toda la página, ya sean elementos textuales, visuales, etc.

Hay varias herramientas que podemos utilizar para crear un mapa de calor de nuestra página, como CrazyEgg o Clicktale, y funcionan de diferente manera; por ejemplo, analizando el movimiento del ratón o los clics que hace el usuario, haciendo un seguimiento de sus ojos, etc. como recogen en Ticbeat y Conversion XL. Cuando ya conocemos el comportamiento de los internautas en nuestra web, y dado que en este blog tratamos la fotografía, cabe hacerse una pregunta: ¿las fotos que estamos mostrando (o queremos mostrar) son informativas o un mero complemento? Porque, en efecto, importa mucho a la hora de colocarlas en un lugar u otro.

Normalmente las fotos suelen utilizarse para llamar la atención y hacer que el usuario lea el texto y haga clic en el enlace que más importante le parece a la empresa. Para ello hay varios puntos indispensables:

La parte superior de la página

El elemento más importante debe estar entre el centro y la zona superior de la página, puesto que es lo primero que mira el visitante. Por eso, muchas webs como Movistar acompañan sus ofertas de fotos llamativas, pero que al mismo tiempo informan. Así que, si la foto es un complemento que ayuda a entender la novedad, es recomendable que sea de tamaño grande y en color.

movistar

El usuario mira donde los demás miran

Si la foto es simplemente un acompañante y en realidad no explica nada importante, es mejor agrandar el tamaño de éste y hacerlo más llamativo que la foto. Cabe mencionar que, cuando hay personas en las fotos, el punto al que enfocan su mirada guía al visitante, como ocurre en el ejemplo que muestra Usableworld. Cambiando la posición del niño y haciendo que mire hacia el texto, se consigue que el visitante pase más fácilmente y rápidamente al mismo.

Usableworld

Mejor la parte izquierda que la derecha

El usuario suele pasar más tiempo mirando a la izquierda de la pantalla, por lo que los objetos importantes suelen colocarse en este lado, como se ve en IBM, ya que el título “Multinational no more” llama la atención sobre el dibujo. Si se hace al revés, es probable que el usuario se fije en la foto, pero luego no pasará a hacer clic en el link, sobre todo si la foto, por llamativa que sea, no guarda relación con los demás elementos.

IBM

Contraste y jerarquía

La información de las páginas web suele estar dividida de manera jerárquica, porque algunas novedades son más importantes que otras, y la empresa quiere que el usuario haga clic en las primeras. Por eso mismo es esencial que haya un contraste entre las fotos más o menos importantes, tanto en tamaño, en posición en la pantalla, en color iluminación, etc.

En cambio, si la foto es esencial para la comprensión de lo que estamos comunicando, es mejor que cumpla solo con algunos de los requisitos, como la zona de la página (mejor arriba y/o a la izquierda) y que esté en contraste con todos los demás elementos (las demás fotos y el texto, que en este caso sería el acompañante). Sin embargo, es recomendable que el propio link a la información se encuentre en la foto, y, de haber personas sobre ella, que miren hacia el frente, para no desviar la atención del usuario.

ZinemaldiaEn la web del Festival de Cine de San Sebastián, con un simple vistazo podemos recibir dos mensajes que se quieren comunicar; por un lado, que es la ediciñon número 62, y por otro, que se celebra en el Auditorio Kursaal, gracias a los elementos visuales.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s