Diseño y navegación

El diseño de la tienda online es relativamente clásico con un  menú de navegación a la izquierda y destacados en formato tipográfico a la derecha.

Lo que más impacta es el uso de grandes imágenes de fondo de los productos en las diferentes homes (portada, hombre, mujer, …).

El diseño está optimizado para resoluciones de 1024, pero las imágenes de fondo destacan en monitores grandes y panorámicos.

La tienda dispone de los elementos básicos de navegación: menús principales, secundarios, buscador, etc en contra de algunas tiendas online de la competencia que no tienen funcionalidades tan importantes como el buscador.

Hay que destacar positivamente los elementos de filtrado en los listados de productos que permiten mostrar los artículos en función de la características, color, talla y precio máximo.

La página de productos sigue el diseño minimalista del resto de la tienda pero incluye toda la información necesaria para facilitar la decisión de compra: composición y cuidados, colores, tallas, múltiples fotos del producto, productos relacionados. Resulta interesante que en la página de producto haya información sobre los gastos de envío e información sobre la devolución. Esto seguramente reduzca la tasa de abandono en proceso de compra.

En cuanto a las imágenes destaca la opción de ver las fotos de productos en tres formatos:

1. normal (imagen inicial – 360×462px)
2. ampliado (ventana sobrepuesta – 700×898px)
3. superzoom (imagen a pantalla completa – 1300×1667px)

Además, cada producto dispone de varias imágenes que se pueden seleccionar o ver en un slideshow.

Social Commerce

En cuanto al Social Commerce se han integrado botones share a Facebook y Twitter pero al no utilizar el botón Like de Facebook y el botón oficial de Twitter la integración con estas redes sociales es menor. Además, hay errores en el código de las páginas de productos, en concreto, el tag descripción, que Facebook usa al compartir enlaces.

Comercio electrónico

En general la tienda de Zara tiene muy buenas practicas de comercio electronico y contenidos de los que podemos destacar:

• Personalización de la compra mediante filtrado de productos
• Click & Collect (recogida en tienda sin gastos de envío)
• Cross Selling (productos relacionados)
• Múltiples opciones de envío (incluido express de 24 horas)
• Información de los costes de envio destacada en la página del producto
• Teléfono gratuito de soporte durante el proceso de compra
• Pago mediante diversas tarjetas de crédito y Paypal
• Mobile Commerce (aplicaciones iPhone/iPad con compra online)
• Buscador de tiendas en Google Maps
• Vídeos y catálogos interactivos
• Guía de compra con videos demostración y preguntas frecuentes

Lo negativo

Los aspectos negativos están más relacionados con el desarrollo que con las funcionalidades: aparecen excesivas ventanas de errores durante la navegación (por ejemplo, al navegar por unas 42 páginas ha aparecido la ventana de error 11 veces, es decir, en más del 25% de las pantallas visitadas), el tag descripción no contiene información del producto, las url no son del todo seo friendly, no se usa una librería javascript tipo jquery, errores de validación y hay muchos comentarios de programadores en el código html:

<!-- Comprobar si el store está abierto para ventas
Si no es así eliminar la cabecera por completo -->

Conclusiones

Se nota que la tienda online de Zara ha sido trabajada en los aspectos del comercio electrónico al prestar atención en muchos aspectos importantes. No hay aspectos que podamos considerar novedosos, pero el conjunto está por encima de otras tiendas online de la competencia.

Aunque los puntos negativos relacionados con el desarrollo restan puntos en el día del lanzamiento, deberían solventarse en los próximos días.

En los próximos meses habrá que ver la evolución de la tienda tanto en diseño como en funcionalidad. También sería interesante saber si Zara tiene pensado realizar pruebas A/B para optimizar elementos gráficos, funcionalidades, posición de los elementos, tamaños de las tipografías, etc tal y como realizan los referentes en comercio electrónico, por ejemplo, Amazon.

La aplicación ha sido desarrollada por la agencia Mobiento y el estudio Ustwo.

Las funcionalidades más destacadas de la aplicación son:

• Buscador de tiendas con resultados basados en la geolocalización
• Contenido personalizado “Mi H&M” con listas de deseos y ofertas
• Compartir via Facebook y email
• Actualidad de las tiendas H&M (galería 3d)
• Noticias de moda, actualizadas semanalmente con contenido geolocalizado
• Vídeos de moda

La aplicación de H&M puede descargarse gratis desde Apple’s App Store y parece que se añadirán nuevas funcionalidades en las futuras actualizaciones. Además incluye un cupón descuento cuando se agita el iPhone.

Los servicios para compartir enlaces en Twitter no son nada nuevo, el precursor hace años fue TweetMeme, que curiosamente ha ayudado a Twitter en el desarrollo del botón oficial. Pero con el nuevo botón será posible contabilizar de manera más fácil cuántas veces se ha compartido una página web en Twitter.

El botón oficial está teniendo mucha aceptación por la blogsfera. El botón es fácil de instalar (requiere sólo unas lineas de código) y ya existen varios plugins para Wordpress.

Según el blog de Twitter el botón ha sido integrado inicialmente en varios medios de comunicación y grandes portales en menos de una semana. De la lista no hay ninguna tienda online, aunque el botón “Like” de Facebook sí ha tenido buena aceptación en el comercio electrónico. Twitter y Facebook son redes sociales muy diferentes, pero el potencial de promoción viral funciona de una manera similar. Por ello seguramente el botón de Twitter comenzará a usarse más en comercio electrónico a corto plazo.

Incluso ya hay una extensión para la solución de tienda online Magento para habilitar el botón en las páginas del cms y producto en menos de 5 minutos.

El vicepresidente de Inditex anunció, en la pasada junta general de accionistas, que la nueva tienda online de Zara se lanzará el 2 de septiembre. Inicialmente la tienda estará disponible para los mercados de España, Portugal, Reino Unido, Italia, Alemania y Francia.  A principios de 2011 Zara lanzará la tienda online en EE.UU, convirtiéndose en la segunda empresa europea de su segmento, tras Topshop, en vender online al mercado norteamericano.

Aunque no es oficial, parece que la tienda online será compatible con multiples dispositivos: ordenadores, smartphones e iPad.

Por otro lado H&M lanzará su nueva tienda online para el mercado europeo el 16 de septiembre. Actualmente H&M ya dispone de una tienda online, de colecciones anteriores y su linea de casa, para Austria, Dinamarca, Finlandia, Alemania, Holanda, Noruega y Suecia. Por lo que no está claro si la tienda será nueva.

Estas operaciones de comercio electrónico no son de extrañar, ya que en los últimos meses el consumo está cayendo pero el consumo online seguirá creciendo a un ritmo de dos dígitos durante los próximos años.

Según un estudio de la consultora Forrester Research la venta de moda online representa actualmente sólo un 3% del total de ganancias de las empresas del sector, pero que puede llegar al 10% en los próximos años.

En España por ejemplo sólo el 2.7% de las mujeres entre 30 y 50 años compran ropa por Internet, pero las nuevas generaciones se perfilan con tendencias de consumo totalmente opuestas que son más compatibles con la compra online.

No hay duda que la estrategia de venta online es a priori la idónea a medio y largo plazo, pero en los próximos meses veremos si las apuestas de Zara y H&M son las adecuadas y su estrategia incluye las actuales tendencias de comercio electrónico.

Este paso de Amazon es un ejemplo más de la importancia que está teniendo el Social Commerce este año y una importante mejora del famoso y patentado sistema de recomendaciones de Amazon.

La nueva funcionalidad ha sido publicada en la página de Facebook Platform y ha tenido una buena acogida. Existen comentarios de preocupación relacionados con la privacidad por lo que Amazon y Facebook han informado que en ningún caso los datos se intercambiarán entre las dos empresas.

Hace unos años, Chris Anderson, el autor del famoso Long Tail, publicó un artículo sobre el potencial del modelo free en internet y hoy en día, el freebie marketing es un recurso muy habitual en internet.

Hay varias maneras de aplicarlo, entre las que destacan:

• Freemium; ofrecer servicios básicos gratuitos mientras se cobra por otros más avanzados o especiales.
• Subsidio cruzado; lo gratuito incentiva la compra de otro producto/servicio. Modelo muy utilizado en la telefonía móvil, donde los operadores regalan los móviles al contratar sus servicios.
• Coste marginal cero; en caso de ciertos productos/servicios que no tienen un costo apreciable para nadie. Por ejemplo, Radiohead ha distribuido de manera gratuita su música.

Pero para destacar en un entorno con millones de productos gratuitos es necesario crear un buen contexto, crear ruido y potenciar el marketing viral.

A modo de ejemplo, Sitepoint es una empresa australiana que publica libros y gestiona varias webs. Para promocionar sus libros y servicios utilizan múltiples medios: publicidad, twitter, newsletters … pero destacan sus campañas freebie.

A lo largo de los años Sitepoint ha pulido mucho sus campañas freebie, ya que suelen asociarlas a acontecimientos de interés y productos de pago con descuentos especiales. Además Sitepoint potencia la captación de cuenta de correo electrónico en estas campañas para sus promociones de emailing, en las que también suele regalar descuentos o productos.

Sitepoint: Mundial 2010

Durante el reciente mundial de fútbol en Sudáfrica Sitepoint asociaba un libro de su catálogo a un equipo de futbol e iba incrementando el descuento hasta regalar el libro que iba asociado al campeón del mundial: España.

Con el botón “Like” o “Me Gusta” las webs pueden indicar si el contenido es de interés para otros usuarios y amigos de Facebook. Para Wordpress hay disponible un plugin que permite añadir fácilmente el botón a cualquier web basada en Wordpress.

Una de las tendencias del comercio electrónico en el 2010 es el Social Commerce, y el botón de “Me gusta” es una interesante opción para integrar las tiendas online con Facebook.

Un ejemplo destacado de la apuesta por la integración del botón “Like” con productos es la tienda online de Levi’s, en la que cada producto dispone de un botón.

A su vez, esta tienda integra otras opciones relacionadas con Facebook: feed de la página de Levi’s en Facebook, próximos cumpleaños de los amigos en Facebook, etc

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

Desde principios de este año el servicio está disponible en 16 países (incluido España) y fue uno de las novedades más interesantes del CES 2009, ganando varios premios, y ha vuelto a ser bastante comentado en el CES 2010.

Web-enabled TV

Unir el televisor e Internet es el santo grial de la era digital, y anteriormente otras empresas lo han intentado: Apple con Apple TV, Microsoft con Xbox Live, Tivo, etc. A mi parecer, lo más interesante en este caso es que no es necesario un dispositivo añadido como en los anteriores, ya que el televisor integra los accesorios necesarios para conectar la televisión con Internet. En concreto, según el modelo, integran Wifi y un procesador Intel Media Processor CE y una versión modificada de Yahoo! Widget Engine sobre un sistema operativo Linux.

El potencial de los televisores web-enabled es muy alto, según un estudio de la consultora iSuppli actualmente hay alrededor de 90 modelos de televisores web-enabled y en el año 2013 habrá alrededor de 88 y 90 millones en los hogares, es decir alrededor del 40% del mercado mundial.

Yahoo!^® TV Widgets

En el caso de la solución de Yahoo!, el contenido web se visualiza al mismo tiempo que el programa de televisión – por lo que es posible visualizar los mensajes del twitter sin perder de vista la cara de la presentadora.

Desde un punto de vista de desarrollo e interacción el sistema permite tres vistas: Snippet, Sidebar y Fullscreen.

• Snippet: esta vista o botón permite ver información estática (por ejemplo una imagen) o dinámica (el valor actual de una acción en bolsa) en el menú (Widget Dock).
• Sidebar: esta segunda vista es la típica de un widget y permite acceder a diferentes contenidos como por ejemplo la previsión del tiempo durante varios días.
• Fullscreen, esta vista permite visualizar contenido web a pantalla completa. Existen dos tipos, la primera se sobrepone a la imagen de la televisión (por ejemplo ver los resultados deportivos en tiempo real) y la segunda sustituye completamente a la emisión televisiva. Esta última es la que permite jugar juegos y ver películas ondemand a pantalla completa.

Como hemos visto el potencial para los proveedores de contenido es muy alto, ya que es posible integrar el contenido web sobre la imagen de la televisión (p.ej. periódicos o redes sociales) o a pantalla completa (video on demand).

Además, hay rumores que Yahoo! quiere crear una tienda de widgets, siguiendo el concepto de Apple para las aplicaciones iphone, con lo que los proveedores de contenido tendrían una forma adicional de ingresos.

Desarrollo de Widgets

Al basarse en tecnología web (JavaScript, XML, etc) es relativamente sencillo crear Widgets para la plataforma de Yahoo! Connected TV. Para facilitar el desarrollo, Yahoo! ha creado un Kit de desarrollo (WDK) que puede descargarse de manera gratuita. Este kit incluye, entre otros, un extenso manual de desarrollo y un paquete .deb para instalar el Yahoo! Widget Engine Widget Development Kit (por lo tanto será necesario un sistema Debian o Ubuntu  – en caso de no tener un sistema Linux,  es posible instalarlo en una imagen virtual en VMware o VirtualBox).

Vídeo promocional

Nexus One vs. Apple iPhone

La comparación con el iPhone de Apple es inevitable. En cuanto al diseño, el Nexus One se parece mucho. Mide 119 x 59.8 mm y tiene un grosor de 11.5 mm, un poco menos que el iPhone 3GS (12.3 mm). También es más ligero que el iPhone al pesar 130 gramos en vez de 135 gramos.

El Nexus One dispone de cuatro pequeños botones en la parte inferior (atrás, menú, inicio y buscar) y un trackball al estilo de las Blackberry además de un botón de encendido y controles del volumen.

De todos modos, la mayor parte de la interacción se dará mediante la espectacular pantalla táctil de 3.7 pulgadas. En cuanto a la resolución de 480×800 la hace la mejor pantalla táctil del mercado (el iPhone tiene una resolución de 480×320).

En cuanto al procesador, utiliza el Snapdragon 1 GHz, un procesador diseñado para Smartphones y Smartbooks de nueva generación que utilizan otros dispositivos Android de nueva generación como el Sony Ericsson Xperia X10. Gracias al procesador de Qualcomm, sus 512 MB de RAM y el sistema operativo Android 2.1 el Nexus One no tiene problemas para generar menús 3D, cargar varias aplicaciones al mismo tiempo (el iPhone en cambio no es multitarea) y navegar por Internet. Además, el Nexus One puede ejecutar aplicaciones como por ejemplo Flash Player 10.1. Adrian Ludwig de Adobe ha comentado que es un procesador de alto rendimiento y demuestra en el siguiente video como el Nexus One puede visualizar webs con Flash (a día de hoy el iPhone no visualiza Flash, algo que irrita bastante a más de un dueño de iPhone).

Aunque la pantalla se ajusta automáticamente y el sistema operativo desactiva el procesador cuando no se usa, el Nexus One parece consumir bastante batería. Oficialmente la batería tiene una duración de hasta 7 horas hablando, 250 horas en standby, 5 horas de Internet 3G, 7 horas de reproducción de vídeo y 20 horas de audio. Pero (no oficialmente) la batería se descarga en una hora y media jugando al Robo Defense con el brillo de la pantalla al máximo. Lo positivo es que los usuarios disponen de varias recomendaciones y una aplicación para visualizar y poder optimizar el consumo de la batería.

Otro interesante punto: el móvil incluye un segundo microfono para reducir el ruido ambiental. Pero, en su defecto, el microfono principal se encuentra en la parte inferior izquierda, y cuando se habla sin manos sujetándolo entre el hombro y el cuello, a veces, la voz se corta. En cuanto a la cámara, dispone de 5 Megapixels, LED Flash y permite grabar vídeo a 24fps y una resolución de 720 x 480.

Por último el Nexus One dispone de un cargador para el coche que, una vez conectado, convierte el móvil en un navegador gps gracias a Google Maps.

Android 2.1

Como ya hemos comentado, el Nexus One utiliza el sistema operativo Android 2.1. Esta es la última versión de Android y cuenta con múltiples mejoras y aplicaciones:

1. Integración con Google Voice
2. Controles por voz – por ejemplo es posible escribir y enviar un email solo con la voz
3. Google Earth – parecido al de iPhone
4. Agenda – permite importar los contactos desde varias fuentes como por ejemplo Facebook
5. Email – múltiples cuentas de  Gmail en la misma bandeja de entrada
6. Predicción del tiempo – integrada con el GPS puede dar predicciones especificas a la localización
7. Fondos de pantalla animados
8. Pantallas de inicio – hasta 5 homescreens para poder acceder rápidamente a las aplicaciones
9. Galería de fotos – basado en Cooliris permite navegar fácilmente por las fotos (aquí hay una video-demostración)
10. App Launcher – permite instalar nuevas aplicaciones en menor tiempo comparado con versiones anteriores de Android

Imagenes y videos del Nexus One