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.

Con un enfoque bastante diferente se ha creado un nuevo editor bastante innovador: Aloha Editor. Este nuevo editor open source se enfoca a la edición frontend, menús sencillos y HTML5.

Aloha Editor permite editar el contenido directamente, sin necesidad de previsualizar los cambios y a nivel de usabilidad reduce el número de interacciones (comparado con TinyMCE y CKeditor).

El tiempo dirá si se convierte en uno de los editores por defecto, de momento es un editor con ideas innovadoras e interesantes.

Click & Collect

Un factor estratégico muy importante es utilizar todos los canales útiles y posibles. Esto se conoce como Multi-Channeling, y hoy en día ha demostrado su efectividad en el mundo de la publicidad (campañas 360).  Para los clientes, de los comercios establecidos, el comercio electrónico es un canal añadido. En estos casos, el cliente ve el comercio como un todo, y es importante ofrecer el Multi-channeling al cliente. Por ejemplo, permitir al usuario comprar online y recoger el producto offline: Click & Collect. Los comercios que disponen de una amplia red de establecimientos juegan con ventaja, por ejemplo, un factor determinante del éxito online de los supermercados Tesco  (Gran Bretaña) ha sido el Click & Collect. A finales del año pasado, Walmart anunció que iba a introducir este servicio, pero, quizás, lo más sorprendente: los rumores de que Amazon planea abrir una red de tiendas físicas con lo que también podría ofrecer la opción Click & Collect a sus compradores. En España, hay varios comercios que tienen la opción de recoger el pedido en una tienda física, por ejemplo La Fnac.

Optimización & Neuromarketing

Optimizar es un proceso continuo y en el 2010 seguirá siendo un factor imprescindible. En los últimos años la optimización de la conversión y la usabilidad se ha visto reforzada por herramientas de análisis de usabilidad como Google Website Optimizer.

El consumidor online no es el mismo que el consumidor offline al utilizar otros mecanismos psicológicos de decisión  por lo que el Neuromarketing será un nuevo factor muy importante en la optimización del comercio electrónico. Incluso cuando tendemos a pensar que el comprador online es más racional y dispone de múltiples herramientas para analizar las diferentes opciones, la decisión de compra es emocional (alrededor del 85% de la decisión es a nivel inconsciente). Por ejemplo, en este articulo, se expone cómo la posición del producto en un listado influye en el número de ventas. En otro estudio se demostró que en una web con 2 productos similares, uno por $200 y otro por $250, la mayoría de los usuarios compraban el más barato. Pero al añadir un tercer producto más caro, por ejemplo de $300, el producto más vendido era el de $250.

Búsqueda y personalización

La búsqueda en las tiendas online es cada vez más importante, más aun cuando el catálogo se compone de miles o incluso millones de productos. La búsqueda por palabras es insuficiente por lo que la tendencia son los buscadores inteligentes y personalizados al usuario.  Por ejemplo, la tienda virtual Like permite realizar búsquedas visuales de detalles y patrones. Por lo tanto, la personalización de la navegación y de la información, permite ofrecer a los compradores una experiencia única y mejorar las ventas.

Compra con vídeos

Gracias a portales como youtube, el vídeo online ha conseguido establecerse como un medio efectivo en la web. En el caso del comercio electrónico  hay muchos casos de éxito que demuestran que el uso de vídeos aumenta, de media, entre un 30% y un 40% las conversiones. Por supuesto, el aumento de conversión depende del uso del vídeo adecuadamente dentro de la estrategia global y un factor decisivo es que los vídeos sean emotivos y promuevan la compra.

Social Commerce

Puede que  la tendencia más importante del año pasado, en el comercio electrónico,  fuera el Social Commerce.  Y este año seguirá asentándose, por lo que la integración de las soluciones de comercio electrónico con las redes sociales es imprescindible. Gracias a las redes sociales es posible simplificar los procesos de autentificación, dar más valor a los comentarios, mejorar la atención al cliente, etc.  Incluso a corto plazo, quizás, facilitará los procesos de compra gracias a métodos de pago alternativos como Facebook Currency.

Realidad Aumentada

El año pasado la realidad aumentada fue una revolución en el mundo del marketing y  se está introduciendo en el comercio electrónico. Por ejemplo, la agencia de marketing interactivo Zugara ofrece un probador virtual. Otro ejemplo de probador virtual es el Ray Ban Virtual Mirror, gracias al cual el comprador puede probarse las gafas Ray Ban antes de comprarlas.

Location Based Services

Gracias a la proliferación de la tecnología GPS es posible ofrecer Servicios basados en la localización (Location Based Services).  La proliferación de smartphones con GPS permiten soluciones creativas de comercio electronico personalizadas, por ejemplo que el usuario pueda comparar los productos de una tienda física con las ofertas online o recibir cupones online para la tienda física.

Mobile Commerce

Gracias al éxito del iPhone y actualmente al de los Smartphones basados en Android, la venta a través del móvil se está consolidando.  Es usual que las tiendas online ofrezcan una versión compatible para móviles, pero también aplicaciones para iPhone o Android. El móvil también permite unir online y offline, utilizando códigos para móviles (EAN, QR-Code, etc) en acciones de marketing.

Descuentos grupales

Los agregadores de compra o compra en grupo, es un modelo que permite a los compradores conseguir un producto con un descuento si un número minimo de compradores reservan el producto en un periodo de tiempo establecido. El pionero fue letsbuyit.com, el cual en sus inicios tuvo un gran exito, pero que cerró sus operaciones a finales del año 2000.  A lo largo del 2009 este modelo ha vuelto a repuntar gracias a Groupon. En este caso, se ofrecen descuentos en servicios (cine, gastronomia, etc). Comparado con los antecesores, no hay gastos de logística, los descuentos son localizados y la promoción boca a boca a través de las redes sociales aumenta el número de usuarios. Seguramente a lo largo del 2010 aparecerán varios de estos servicios, por ejemplo en España está disponible CityDeal.

Tecnología Opensource

El software libre es un importante pilar de las tecnologías web y también del comercio electrónico.  Existen soluciones opensource para casi todas las necesidades del comercio electrónico. Algunos ejemplos destacados son:

• Magento: tienda online
• Apache Solr: buscador corporativo
• Apache OFBiz: Framework para automatización de procesos de negocio
• Openbravo: ERP

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.