Mapas de calor: 8 casos

Encontré en BLOGGINGTIPS un artículo titulado “Create a Heat Map of Your Blog”, Crea un mapa de calor de tu blog. En él hacen referencia a una entrada de Neuromarketing desde la que hacían una interesante reseña acerca de Feng-GUI, aplicación online que identifica ‘de manera artificial pero inteligente’ los puntos donde se concentra(ría) la atención de los visitantes del sitio web.

Si bien ya existen herramientas de ese tipo en el mercado (Crazy Egg, ClickHeat, clickdensity) no son de uso online e instantáneo, por lo que de buenas a primeras le abre buena recepción; junto a ello, la posibilidad de ‘analizar’ no solo webs sino imagenes de hasta 5 megas abre su uso tanto a webmasters y diseñadores web como a diseñadores en general, fotógrafos, publicistas…

Como los bloggers no podemos quedar excentos (y siendo de los más participativos en la Internet) me ponía a pensar en la lógica aplicación de la herramienta para estudiar y optimizar la colocación de elementos que nos interesa nuestros visitantes vean, y aquí se rompe el jarrón: publicidad, botón de suscripción, últimos artículos, enlaces populares, páginas internas, etc.

Por ello me tomé el atravimiento de pasar por la misma 8 muy buenos blogs enfocados en un perfil de usuarios similar y hacer unas apreciaciones al vuelo y desprendidas de la observación y el sentido común  con el fin de aprender algo y desde luego contar con su retroalimentación. El orden es aleatorio. (Nota: el servicio se basa en una captura de pantalla y como anoche lo utilicé no refleja la última de las entradas en c/u de los blogs)

• Paraiso Geek

En el blog de mi paisano Alan podemos apreciar que la atención está totalmente deslindada de la cabecera, lo que de aquí en delante me atrevo a considerar en este y otro caso “punto a favor” pues ya tenemos al visitante en el sitio y nos interesa que eche un vistazo en esos puntos de nuestro interés antes de que memorize el nombre del blog. Observamos que la atención se la lleva (distribuida) una imagen colocada en la parte superior de su post, su anuncio de Zync y un widget de Feedburner que flashea tus últimas entradas. Éste último me parece muy bien aprovechado pues además de enfocar la atención del visitante en la invitación de suscripción, le muestra  lo último que has escrito sin necesidad de hacer scroll.

• Punto Geek

El diseño de Juanguis favorece que la atención se concentre en el cuadro de publicidad que muestra enseguida del contenido, para luego repartirse entre su badge 2.0 y su botón de sucripción. La claridad de la plantilla y la ausencia de más distractores visuales en la primera parte de la página evita que haya más fugas de atención.

• SpamLoco

Alejandro ha optado por concentrar la atención del visitaante en su brand, su marca, y prueba de ello lo tenemos en que el logotipo del blog -y que más de uno reconstruimos mentalmente cuando apreciamos su firma en los comentarios- es grande y según el heat map se lleva la principal atención, junto al poste de calles, que si bien no tiene ninguna utilidad, manda -astutamente- la vista a los enlaces a 2 categorías en las que pretende posicionarse, que refuerza con la 3a imagen en la barra lateral interior.

• WebAdictos

Los hermanos Medina desde la península mexicana tienen un diseño muy chulo y tunneado, pero que como podemos apreciar dispersa por toda la plantilla la vista y no permite enfocar un punto en particular, en lo que también contribuye la imagen que podemos observar dentro del primer post. Aún así, el rectángulo vertical de publicidad y el icono de suscripción se llevan la mayor atención.

• Xeduced

Algo parecido sucede en el blog de Public Enemy, con la curiosidad como se puede ver que la atención se distribuye a lo largo de una franja horizontal, repartida entre la imagen de apoyo del post y su botón de suscripción. La rejilla de favicons gratis puede lamentablemente pasar desapercibida. Interesante que a pesar de los vistosos personajes que adornan su header no sean protagonistas en el mapa y eso habla de una buena integración.

• Bocabit

El diseño de The-RockeR lleva al visitante a un viaje entre su área de suscripción y su simpatico logotipo, y la ausencia de otra imagen en la plantilla -y en este caso tampoco en el post- evita se disperse la atención. Como ya mencionaba el mismo The-RockeR, se prospuso optimizar el tiempo de carga del template y la sana auteridad se aprecia.

• Código Geek

En el diseño del blog del buen Hernán encontramos algo parecido a lo de Webadictos, la dispersión de la atención en distintos puntos, eso sí, con la ligera preponderancia en su área de publicidad (principalmente la de su hosting). Vemos que como páginas internas con contenido maneja “Publicidad” y “Ganar Dinero”, y no dudo se lleve -al menos ésta segunda- buenos clicks durante el día, además de ser un título atractivo, sí es visible para el visitante.

• Geekspot

En el blog de Fede777 observamos un comportamiento similar a Bocabit, solo que aderezado con la imagen que en la parte superior del post incluye, que se atraviesa en el camino. La zona de suscripción se ve favorecida, y debajo de ella se puede apreciar una publicidad clara y bien amalgamada con el diseño.

Bueno, ¿y el Blog en Serio?

El que no acostumbre incluir imágenes en la parte superior de los posts favorece que la atención se distribuya en las zonas que realmente mi interesán, aunque sinceramente se fuga algo de ella con la imagen de mi rostro, lo que en parte me favorece pues es parte del brand. Tener colocado el logo de SpamLoco en medio de la cuadrilla de publicidad genera mucha actividad visual en la zona, que se ha reflejado en clicks tanto en su banner como en los aledaños. No se escapa de la atención el espacio del invitado de honor en el lado izquierdo (en este momento ocupado por Entre Códigos y Colores) sin restarles lucimiento a los otros espacios.

Intento de aprendizaje o conclusiones pretenciosas:

• puedes utilizar la herramienta para optimizar “la distribución de atención” en la primera parte de tu plantilla, la que se aprecia sin necesidad de scroll y en la que es recomendable incluir esos puntos en los que puedes tener interés que tus visitantes fijen su vista (cuales fueren).

• puedes utilizar la herramienta para revisar los sitios en los que te interese incluir publicidad pues una inadecuada ubicación de la misma puede hacer inoperante el más seductor de los anuncios; así mismo si piensas incluir iconos o publicidad de otro tipo puedes estudiar sitios donde ya lo implementaron para tener buenos resultados.

• 2 aspectos a considerar: tanto las cabeceras de bajo perfil como la ausencia de imágenes en la parte superior de la entrada (que no después del primer o segundo párrafo o de colofón) permite que la atención no se disperse y que los puntos de tu interés “lleven mano” al momento de que los visitantes lleguen a tu sitio.

* En atención a Alma de Webmaster Libre, googleando encontré quue esta chica ya había comentado la aplicación a principios de septiembre.

Feng-GUI – Feng Shui for Graphic User Interfaces via kwout