En el libro han colaborado varios autores internacionales y las ilustraciones son de la australiana Yiying Lu.

Ojeando el libro da la impresión de que todos los capítulos son muy completos e inspiradores. Tiene buena pinta el capitulo 7, sobre principios de diseño en videojuegos aplicados al diseño de la experiencia del usuario, y el capitulo 9, un estudio sobre los patrones de diseño en el comercio electrónico.

Sumario de Smashing Book #2

• The Principles of Great Graphic Design
• Visible vs. Invisible Design
• Designing Mobile User Experiences
• Sketching, Wireframing and Prototyping
• Red Flags in Web Development
• The Future of Web Typography
• Game Design Techniques Applied to UX Design
• When They Click: Psychology of Web Design
• Design Patterns on E-Commerce Websites (A Study)
• How to Make a Book (Like This One)

Sin embargo, desde un punto de vista del diseño, los menús desplegables son una solución excelente, ya que ayudan a aligerar layouts saturados. En cuanto a la usabilidad, los llamados mega menús desplegables pueden ser una gran herramienta de navegación, sin dejar de ser una característica de diseño útil y atractiva.

Los menús desplegables pueden mejorar la organización del contenido en elementos ordenados y mejorar el acceso rápido al contenido, pero, si no se realiza correctamente, puede ser tan malo como una distribución desordenada.

Electronic Arts

La Casa Blanca

Adidas

Aprovechando el inicio de este nuevo año y continuado el post sobre  tendencias del comercio electrónico en el 2010 del año pasado, expondré las tendencias del comercio electrónico para el año 2011. En este año continuarán las estrategias iniciadas en los últimos años, pero también nuevas apuestas innovadoras.

Personalización dinámica

La experiencia personalizada en el comercio electrónico va a ser clave este año. La personalización, teniendo en cuenta un amplio espectro de factores y conductas, puede ofrecer una experiencia individual para cada usuario. Algunos de estos factores, tales como el origen de un visitante, la navegación, la página de salida, qué productos compró unido a reglas de negocio específicas, pueden mostrar la combinación de productos adecuada a la persona adecuada en el momento adecuado. Además, la personalización puede potenciar la segmentación y los contenidos de las campañas de email marketing.

Mobile Commerce

El crecimiento del uso de smartphones seguirá este año y en consecuencia el Mobile Commerce. Pero la estrategia debe pasar por optimizar las aplicaciones y los sitios específicos. Los usuarios de móviles tienen necesidades y expectativas distintas de interacción, por ejemplo en un estudio reciente el 18% de los encuestados estaban descontentos con la experiencia de Mobile Commerce, al consumir demasiado tiempo y ser complicada.

Web Analytics

Los días de gloria del tráfico online rápido y crecimiento de las ventas están en declive. Ahora es necesario un modelo de negocio más pragmático con en el que la  perspicacia comercial es cada vez más importante y va a ser crítico verificar de una manera más inteligente el control de retorno de la inversión (ROI). Por ello, los datos analíticos son cada vez más importantes, pero ya no son simples estadísticas sobre el número de visitas. Mediante los datos analíticos se pueden tomar decisiones objetivas para optimizar el diseño del sitio, crear reglas de negocio para personalizar la información, optimizar los Indicadores Clave de Desempeño (KPI)…

Location Based Services

Con la proliferación de móviles con GPS seguirá aumentado el uso de los servicios basados en la localización. Aunque los Social Gaming Apps son muy recientes, su potencial en las promociones multi-canal es innegable. Grandes empresas como Starbucks han realizado promociones basadas en Foursquare para premiar a los clientes fieles y la evolución de estas aplicaciones posibilitarán nuevos tipos de promoción.

Layout flexible y minimalista

Las tendencias en el diseño de la estructura tienden cada vez más a destacar el producto y menos la navegación. El usuario está interesado en el producto, por lo que el ratio óptimo puede estar en un 25% para la navegación y un 75% para el producto.

Otro punto a tener en cuenta es la flexibilidad del diseño a diferentes resoluciones, en parte por la aparición de los tablets. En este caso, AJAX cada vez es más importantes, ya que permite mejorar la interacción y modificar la estructura dinámicamente. Por ejemplo, los usuarios tienden a usar el botón de ver “todos los productos” en una misma página (aunque haya un scroll muy grande) para evitar navegar por un listado dividido en varias páginas.

Globalización

En el 2010, los grandes comercios online han realizado un gran esfuerzo para vender sus productos a nivel mundial: Gap ha comenzado a realizar envíos a otros mercados internacionales además de crear tiendas personalizadas para Reino Unido y China; Amazon lanzó su primera tienda online localizada en seis años, Zara inauguro su tienda online en seis mercados europeos.

En el 2011, cada vez más empresas llegarán a sus clientes globales por medio del envío internacional y crearán infraestructuras en los mercados en el caso de disponer de una masa amplia de compradores. Un ejemplo de este modelo de crecimiento es la empresa británica Boden que no invirtió en un almacén y centro de atención al cliente en EEUU hasta que un tercio de los ingresos provenían del mercado americano.

Social Media

Las redes sociales ya no son un factor nuevo en el comercio electrónico pero los imperativos sociales en las compras están en constante evolución. El nivel más básico puede ser la integración del botón share de Facebook y Twitter. Otro nivel pasa por integrar las redes sociales en los sistemas de recomendaciones, como ya ha hecho Amazon. La importancia de las recomendaciones positivas va a ser muy importante al potenciar el boca a boca, pero también afecta a los resultados en Google, ya que su motor de búsquedas de productos incluye las recomendaciones como un factor de posicionamiento. Relacionado con esto, la atención al cliente unido a los Social Media va a ser cada vez más importante. En España un ejemplo del exito de la atención al cliente mediante redes sociales ha sido la crisis de los controladores, donde las lineas áreas usaron Twitter como vía de información preferente a los clientes.

• Comparar resultados rápidamente: La vista previa de los resultados de búsqueda permite comparar y elegir lo que se está buscando.
• Localizar el contenido relevante: Los globos de texto resaltan los términos de búsqueda en la página web.
• Interactuar con la página de resultados: La vista previa permite ver páginas web antes de hacer clic en los resultados de búsqueda.

Según estudios de eyetracking, a los usuarios les cuesta encontrar y asimilar esta nueva funcionalidad del buscador. Pero, en cuanto los usuarios la asimilan, puede llegar a modificar los comportamientos de búsqueda, al permitir realizar comparaciones de los resultados basados en el diseño.

Por ello, en la previsulización de Google, los diseños centrados en el usuario destacaran frente a otros. En cambio las páginas basadas en Flash sin imágenes sustitutivas van a destacar negativamente.

Previsualización de una web desarrollada en Flash

Google Instant Preview en acción

Esta nueva herramienta está disponible en la sección de “Content” (de momento sólo en las cuentas en inglés) y permite visualizar datos de Google Analytics encima de la página real. La herramienta aún está en Beta y tiene sus inconvenientes. Uno importantes es que si en una página hay dos enlaces a la misma página (por ejemplo una imagen y un texto) los datos son unitarios para los dos enlaces y no se diferencian.

Por ello, para ciertos casos habría que tener en cuenta herramientas alternativas para visualizar la interacción, tales como Crazy Egg o Clicktale.

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.