Los datos fueron tomados durante 4 semanas. En total se registraron un millon de clicks aleatorios en unos 18.000 banners de la red. A partir de estos datos se generó el siguiente mapa de calor:

Los resultados del mapa de calor indican que los usuarios suelen pinchar con mayor frecuencia en la zona superior derecha del banner. En general, la zona inferior del banner casi no registra actividad.

Con estos resultados podemos extrapolar que los usuarios prestan mayor interés a la zona superior derecha del banner. Algo que se debería tener en cuenta al diseñar este tipo de banners y aumentar así el CTR y ROI de una campaña.

¿Cómo afecta al SEO?

Esta nueva funcionalidad afecta, esencialmente, a equipos compartidos, donde usuarios con diversos perfiles realizan búsquedas, las cuales se guardan en la cookie y afectan a los resultados de otros usuarios del equipo.

Por otro lado, también, puede afectar negativamente los resultados de nuevas webs posicionadas en Google. Por ejemplo, si realizamos un SEO de una web de recetas y la conseguimos colocar en la primera posición, los usuarios que anteriormente han buscado recetas no tendrán la nueva web en la primera posición, ya que Google Personalized Search basará los resultados en la experiencia anterior del usuario en los últimos 180 días.

Las redes sociales

En este nuevo contexto de búsqueda, la importancia de las redes sociales radica en que es imprescindible que los usuarios se vean influenciados en pinchar un resultado sobre otro por su calidad y/o imagen antes que por la posición en los resultados.

Ya en diciembre del año 2007 este interesante articulo indicaba ciertos puntos a tener en consideración al optimizar los resultados personalizadas de Google:

• Demografía
• Relevancia del contenido
• Estrategia adecuada de palabras claves/frases
• Calidad del contenido
• Conversión de los resultados de búsqueda
• Novedad
• Imprimir página/añadir a favoritos/redes sociales
• Usabilidad
• Google Analytics

Para ver cual es el mejor uso para cada plantilla puedes el artículo completo en UX Magazine o ver la presentación con 80 ejemplos más abajo.

1. Master/Detalle

2. Columnas

3. Paleta/canvas

4. Dashboard

5. Spreadsheet

6. Interactivo

7. Busqueda/Resultado

8. Filtrado datos

9. Paneles paralelos

10. Asistente

11. Preguntas y respuestas

12. Formularios

13. Portal

14. Pestañas

15. Explorador

80 ejemplos reales de las plantillas

Yahoo!’s Design Pattern Library

Yahoo!’s Design Pattern Library, es una librería de patrones de diseño. Actualmente dispone de 56 diseños que pueden ayudar mucho a los desarrolladores y diseñadores al diseñar el interfaz y aumentar la usabilidad.

Excepcional Performance

Excepcional Performance, es una sección dedicada a la optimización del rendimiento de webs. Además de consejos, dispone de vídeos e información sobre la extensión Yslow! para Firebug, la cual permite analizar el rendimiento de una web desde el navegador Firefox.

YUI Library

YUI Library, es una librería de utilidades escritas en javascript y css para construir aplicaciones interactivas (RIA). Personalmente prefiero jquery como javascript framework, pero como en las diferentes distribuciones de Linux, cada una tiene sus pros y contras, y YUI es una biblioteca estable y potente – algo que queda demostrado gracias a que Yahoo! la usa en todas sus webs.

Astra

Astra, es una librería de componentes para Adobe Flash y Flex pensado para los desarrolladores Flash & Actionscript que permite construir aplicaciones interactivas (RIA).

Lenguajes de programación

En los centros de lenguajes de programación encontrarás tutoriales, articulos, foros y ejemplos de código de los siguientes lenguajes de programación: Flash, Java, JavaScript, .NET, PHP, Python, Ruby y Silverlight.

API y servicios web

Por último recordar que en este portal encontraremos toda la información y ejemplos relacionados con las más de 35 APIs y servicios web de Yahoo!, como por ejemplo Flickr, Yahoo! Maps. De todos ellos me gustaría destacar dos:

1. Pipes, una aplicación web que permite crear mashups de datos a través de un interfaz gráfico y diversas fuentes y formatos (rss, json, …)
2. Yahoo! Connected TV Platform, una plataforma para poder crear widgets para televisores Sony®, VIZIO®, Samsung®, LG®. Inicialmente solo estaba disponible para EE.UU, pero desde principios de este año el servicio está disponible para 16 paises, entre los que está España.

Aunque estas practicas no están extendidas lo que deberían, existen múltiples herramientas que permiten crear wireframes de una manera rápida e intuitiva (tanto versiones Cloud Computing & Saas. como programas para diferentes plataformas):

1. Mockingbird (Online/Saas)

Es una herramienta online de creación de wireframes (Wireframing-Tool). Al estar programada sobre el Framework “Cappuccino” la interacción es como en un programa de escritorio. Los wireframes se crean de una manera sencilla mediante Drag & Drop de elementos comunes en el diseño de páginas web. El resultado puede descargarse o enviarse por email.

2. Firefox Pencil (Mac/Windows)

Esta herramienta está basada en el Geckoengine del navegador Firefox, y se instala como un complemento (plugin). Por lo tanto es una buena solución para esquemas rapidos e independientes de la plataforma. Los wireframes se pueden exportar en formato png. En su contra, el uso es, a veces, un poco más lento debido a que no dispone de atajos de teclado. Pero su escaso tamaño (< 450 KB) y ser una herramienta gratuita la hacen una muy buena elección.

3. Iplotz (Online/Saas)

Es una herramienta online que permite crear wireframes clickables. Además incluye funcionalidades básicas de gestión de proyectos, como por ejemplo asignar tareas, por lo que es posible colaborar con otros usuarios en la creación de los wireframes. Aunque sea un servicio Saas, existe una versión descargable programada en AIR. Finalmente, hay múltiples planes que se adaptan a diversos usuarios, desde una versión gratuita (1 proyecto limitado a 5 pantallas) a versiones corporativas (múltiples usuarios y proyectos ilimitados)

4. Balsamiq (Mac/Windows)

Balsamiq es una herramienta programada en Flex y la creación de wireframes es muy intuitiva y permite crearlos de una manera rápida. Las plantillas, con un estilo pintado a mano, facilitan que al presentar los prototipos no se malinterpreten con versiones finales. En la web de balsamiq se puede probar la herramienta de manera gratuita y exportar los wireframes a png (con marca de agua). Y en el caso de utilizar la herramienta habitualmente existe una versión de pago, además de una versión onlines/saas en el futuro. Por ultimo al basarse en archivos xml, es posible integrar la herramienta con otros programas como por ejemplo gestores de proyectos.

5. Omnigraffle Pro (Mac)

Esta herramienta permite crear rápidamente wireframes, diagramas de proceso y sitemaps. Las características más interesantes de Omnigraffle es que permite crear capas como en Photoshop y usar plantillas predefinidas, que pueden descargarse de internet – por ejemplo de Graffletopia. Estas plantillas permite crear fácilmente wireframes de aplicaciones de Facebook y Iphone, Elementos Ajax, Formatos publicitarios o elementos de Social Media Webs. También es posible crear prototipos clickables al poder definir zonas interactivas que al exportarse a pdf clickables dan cierta interacción (aunque no pueden sustituir a prototipos en html)

6. Axure (Windows)

En comparación con otras herramientas Axure permite crear prototipos interactivos en html/javascript. La creación de prototipos interactivos es muy util tanto para presentaciones como para pruebas de usuarios y poder hacerse una idea de la futura web. Otra funcionalidad interesante es la posibilidad de crear comentarios en los documentos que luego pueden exportarse a formato Word, para crear la documentación conceptual de un proyecto. Como en otras herramientas es posible cargar plantillas para agilizar la creación de los wireframes.

7. Adobe FlashCatalyst (Mac/Windows)

Este programa desarrollado por Adobe aun se encuentra en su fase de desarrollo. Aunque solo este disponible una versión beta, la herramienta es muy solida. Al ser un producto Adobe permite cargar archivos de otras herramientas Adobe como por ejemplo Photoshop o Illustrator. Lo más destacable de FlashCatalyst es que permite añadir interacción a los elementos de diseño hasta el punto de crear animaciones avanzadas como por ejemplo scroll, fundidos, etc. Por ello FlashCatalyst es, seguramente, la herramienta ideal para la creación de prototipos con animaciones complejas, ya que es algo limitada para wireframes estáticos.

Otras referencias

En resumen, actualmente existen múltiples herramientas para crear wireframes estáticos y prototipos clickables. Puedes encontrar una amplia tabla resumen en en este articulo de Dan Harrelson.

1. Velocidad de carga

Hace unas semanas, Matt Cutts de Google, indicó, en una entrevista, que en el 2010 un factor importante en los resultados del nuevo algoritmo de búsqueda de Google (Caffeine) seria la velocidad de carga de un sitio web.

Velocidad de carga analizada a través de Firebug

2. Búsquedas semánticas

Es evidente que desde hace tiempo Google está trabajando en mejorar la relevancia de los resultados, dando importancia a factores relacionados con el contenido y menos con factores externos, más fácilmente manipulables (como por ejemplo el número de backlinks).

Poco a poco la web semántica se está haciendo una realidad, y el foco del SEO en el 2010 se deberá basar en el contenido y calidad de una página. A su vez en el futuro próximo, la optimización de buscadores se basará no solo en palabras clave, sino en sinónimos y conceptos.

Un ejemplo claro del potencial de la búsqueda semántica es Google Wonder Wheel.

Resultados en Google Wonder Wheel

3. Usabilidad

La usabilidad – es decir, la facilidad de uso de una página web – ha jugando, durante mucho tiempo, un papel muy importante en el éxito de un sitio web y es uno de los principales factores del porcentaje de abandonos. La usabilidad de una página puede ser medido, entre otras cosas, sobre la base de residencia.

Actualmente Google ya tiene la capacidad para medir la duración de una visita y se espera que sea otro factor en la relevancia de una página en los resultados. Incluso se ha rumoreado que el lanzamiento del navegador Google Chrome estaría relacionado con la opción de analizar los hábitos de navegación de los usuarios por parte de Google.

4. Realtime search y Social Media Optimization

Las redes sociales como Facebook y Twitter están disfrutando de creciente popularidad. Google ya ha integrado en su página de resultados los de la búsqueda en tiempo real de Twitter con lo que estamos ante una nueva oportunidad de mostrar nuestra página en Google:

1. En los resultados orgánicos
2. En los resultados de búsqueda de pago
3. En los resultados de la búsqueda en tiempo real

Resultados en tiempo real de Twitter en Google

5. SEO móvil

El uso del internet móvil es cada vez más común, estudios ya han demostrado que el Internet móvil se utiliza, no sólo para pasar el tiempo mientras llega el autobús, sino también, por ejemplo, para comprar entradas.

Los últimos movimientos de Google en este medio (p.ej. adquisición de Admob, Sistema Operativo móvil Android y el algoritmo adaptado/especifico de Google al acceder desde un móvil) dan pistas de la importancia del mismo a corto plazo y la importancia de participar en el sector.

6. Video online

Estudios recientes muestran que los vídeos están entre los medios más llamativos en Internet y que su consumo se ha generalizado, gracias a portales como youtube. Tanto la publicidad basada en vídeos, como la promoción en videos van a ser un factor importante de promoción de sitios web en 2010.

7. Reputación Online

La gestión de la reputación online ha sido este año un tema de gran importancia y en este sentido, para un SEO profesional, será importante, no sólo optimizar una única página web, sino la optimización del medio ambiente: de las páginas donde los usuarios se expresan positiva o negativamente sobre el cliente, blogs, etc.