ux: responsabilidad creativa en ecommerce (con notas del presentador)

UX Responsabilidad creativa en ecommerce

[email protected]

www.diga-33.com

@diga33

www.diga-33.com "[email protected]"@diga33

Un poco de (nuestra) historia

Año 1999, Banesto y CAP Gemini, los inicios

Año 2009, Ignacio Riesco nos encarga el primer comercio electrónico

Año 2007, nace Diga33! Pero llevamos toda la vida en esto

Buena tardes, soy Luz De-León directora creativa y socia fundadora de Diga33!, una empresa que lleva desde el 2007 dedicada a diseñar experiencias para los usuarios Llevo toda la vida en esto, como 16 años desde que arrancara un buen día en el gabinete de usabilidad de Banesto en mi época de CAP Gemini, llevar toda esta vida implica haber visto una gran evolución, muchos cambios, muchas idas y venidas respecto los que el usuario es, espera o hace en la web. Cuando hace más de cuatro años, Ignacio Riesco, hoy CEO de interactiv4 contactó conmigo y me propuso hacer la dirección creativa de un comercio electrónico me pareció divertido e interesante y, por supuesto, un reto.

www.diga-33.com "[email protected]"@diga33Crear experiencia de usuario en Banca

genera más opinión que resultado

El usuario está cautivo del sistema

Mi trayectoria había venido desde sus inicios muy unida a un sector que aunque gris, tenemos que agradecerle el impulso que ha dado al UX y que es, ni más ni menos, que la Banca y los Seguros. Crear experiencia de usuario en Banca, a menudo genera más opinión que resultado ya que el usuario está cautivo del sistema.

www.diga-33.com "[email protected]"@diga33En el comercio electrónico, la matemática no

miente: o vendes o no vendes.

Pero en el caso de un comercio electrónico, la matemática no miente: o vendes o no vendes.


ENTONCES el diseñador de experiencia lo

tiene fácil.

Facilitar los procesos barrera le suponen

Ser fiable (plazos de envío y devolución)

Una política de precios competitiva

Tener un producto atractivo

Si el cliente hace su parte: tener un producto atractivo, una política de precios competitiva, ser fiable cumpliendo con los plazos de envío y devolución y facilitar al cliente los procesos que más barrera le suponen (conocer su talla, comprobar unas la características técnicas, elegir que producto es el mas adecuado de entre una selección…), a menudo el diseñador de experiencia lo tiene fácil.


Diseñar para ecommerce

No consiste en: ganar premios, ni escuchar literalmente al cliente, ni copiar otras tiendas…

Diseñar para e-commerce no consiste en ganar premios, ni en escuchar a un cliente que unas veces te dice “Queremos ser como Zara” y otras veces te dice “No, pero sed muy creativos”


ZARAMarca con un recorrido (desde 1974)

Producto con demanda

1808 tiendas en el mundo a 30 de octubre del 2013…

Sííí, ¡y su tienda on-line mola! ¿pero es usable?

El cliente se olvida a menudo de que Zara vende porque es Zara, es decir, tiene una marca con un recorrido, un producto con demanda y 1808 tiendas en el mundo a 30 de octubre del 2013… Siii, y su tienda on-line mola pero desde los que vivimos el UX cada día le encontramos sus problemas obvios de usabilidad.

www.diga-33.com "[email protected]"@diga33Sed muy creativos = 3 insatisfechos

Y el “pero sed muy creativos” es un pozo sin fondo de insatisfacción para tres implicados: el cliente, que en el fondo quiere una tienda que venda, el usuario, que el pobre no se entera de nada y el propio diseñador que se ha vuelto loco siendo muy creativo y va a terminar haciendo lo de siempre pero en la séptima versión


Momentos clave en el diseño de UX de una tienda on-line:

1. LA APROXIMACIÓN

1. LA APROXIMACIÓN

2. EL PROCESO DE COMPRA

3. E

El diseñador es claramente responsable de tres momentos clave en el diseño de UX de una tienda on-line: - La aproximación: el cliente ha llegado a esta tienda para comprar, aunque si un cyberdependiente se le acercara a preguntar “puedo ayudarle?”, siempre contestaría “no, estoy mirando”,


Necesidades de la aproximación

mirar: producto y precio

moverse con libertad por la tienda

encontrar aquello que se esta buscando

1. LA APROXIMACIÓN

por lo tanto debemos permitirle mirar: mirar el producto y mirar el precio, ambos son los reyes de nuestro comercio electrónico, y deben ser los protagonistas de nuestro trabajo. Aproximarse al producto significa moverse con libertad por la tienda y encontrar aquello que se esta buscando,


Las herramientas

✓ Buscadores

✓ Filtros (LAYERED de Magento)

✓ Comparadores

✓ Opiniones verificadas de otros usuarios que han comparado el producto

1. LA APROXIMACIÓN

buscadores semánticos, filtros como el LAYERED de magento donde podemos limpiar los listados de lo que no nos interesa, comparadores que nos ayuden a decidirnos entre un numero reducido de productos, opiniones de otros usuarios compradores que tienen este producto (opiniones verificadas)… Ayudas que nos van a llevar a la toma de decisión de compra “quiero este producto”


Las herramientas

Buscadores

1. LA APROXIMACIÓN


Las herramientas

Filtros (LAYERED de Magento)

1. LA APROXIMACIÓN

filtros como el LAYERED de magento donde podemos limpiar los listados de lo que no nos interesa


Las herramientas

Comparadores

1. LA APROXIMACIÓN

comparadores que nos ayuden a decidirnos entre un numero reducido de productos,


Las herramientas

Opiniones verificadas

1. LA APROXIMACIÓN

opiniones de otros usuarios compradores que tienen este producto (opiniones verificadas)…


Necesidades de la aproximación

Toma de decisión de compra: “quiero este producto”

1. LA APROXIMACIÓN

mirar: producto y precio

moverse con libertad por la tienda

encontrar aquello que se esta buscando

Buscadores

Filtros

Comparadores

Opiniones verificadas

Ayudas que nos van a llevar a la toma de decisión de compra “quiero este producto”




1. LA APROXIMACIÓN


3. E

El proceso de compra: Ya esta, lo quiero, venga ¿qué tengo que hacer? envíamelo enviamelo, quiero pagar este producto y tenerlo YA…


Necesidades del proceso de compra2. EL PROCESO DE COMPRA

AÑADIR AL CARRITO

PAGAR

REVISAR EL CARRITO

COMPLETAR LA COMPRA


Necesidades del proceso de compra2. EL PROCESO DE COMPRA

AÑADIR AL CARRITO

PAGAR

REVISAR EL CARRITO

COMPLETAR LA COMPRA

COMPRABILIDAD

Ya esta, lo quiero, venga ¿qué tengo que hacer? envíamelo envíamelo, quiero pagar este producto y tenerlo

YA…

Bien, el comprador esta decidido, ahora vamos a hablar de USABILIDAD con mayúsculas o lo que Juan Alcántara bautizó hace ya dos años como “Comprabilidad”.


Necesidades del proceso de compra

Elegir el producto (talla, u otra configuración) y añadirlo al carro


na tienda on-line debe poner el máximo empeño en facilitar la compra al usuario desde el momento en que elige el producto, indica la talla que desea (u otra configuración) y añade el producto al carrito,



Revisar mi compra


de ahí en adelante, revisar su compra,



Completar mi compra

Pagar


proceder al checkout y finalmente pagar es un recorrido con numerosos puntos de abandono que tenemos que contemplar y sellar.



3. EL RECUERDO

1. LA APROXIMACIÓN


3. EL RECUERDO

El recuerdo: ¿hemos hecho el proceso de compra satisfactorio? ¿el usuario esta contento?


Necesidades para ser recordados

¿Hemos hecho el proceso de compra satisfactorio? ¿El usuario esta contento? ¿La compra respira marca?

3. EL RECUERDO

bien, el proceso debe estar cubierto por el paraguas de una marca, que presenta durante todo el proceso haya impregnado con su identidad la compra, colores logotipos, elementos visuales propios de la marca, deben ser usados con inteligencia para que la compra se asocie inevitablemente a la marca sin haber sido invadida por la marca.


El nuevo paradigma del diseñador3. EL RECUERDO

Quiero el botón “comprar” más grande

Quiero el logotipo mas

grande VS

El proceso creativo del diseñador tradicional se ha roto y de aquella famosa frase del cliente sobre a que tanto hemos bromeado “quiero el logotipo más grande” pasamos a un nuevo paradigma “quiero el botón de compra más grande”


El nuevo paradigma del diseñador

Los proyectos ya NO empiezan en el Photoshop

3. EL RECUERDO

"Y para garantizar el éxito en esos tres momentos, la realización de prototipos es nuestra clave, ninguno de nuestro proyectos empieza ya en el Photoshop

www.diga-33.com "[email protected]"@diga33La realización

de prototipos

La clave para no “pintar” sino diseñar interacción

3. EL RECUERDO

y los mas importantes ni siquiera comienzan en un ordenador, empezamos sentándonos con el cliente, preguntándoles cuáles son sus objetivos, quiénes son sus compradores, y de esta mesa pasamos a la mesa del consultor de ecommerce, generalmente Nacho o Juan, con quienes debatimos rotulador en mano si vamos a implementar una u otra funcionalidad y cómo vamos a hacerlo.

www.diga-33.com "[email protected]"@diga33Y ¿Dónde queda el papel del

diseñador de UX?

3. EL RECUERDO

Una nueva responsabilidad: trabajar la funcionalidad

El papel del diseñador de experiencia es Innovar en la funcionalidad


Y ¿las guidelines?

1 Omnicanal

3. EL RECUERDO

Pero si tengo que extraer diez claves / tendencias o puntos clave que yo considero para una tienda on line, serían: 1. Omnicanalidad: experiencias sin costuras (seamless)


Y ¿las guidelines?

2 Fotos más grandes

3. EL RECUERDO

2. Grandes fotos: protagonismo del producto, emocional!


Y ¿las guidelines?

3 Social

3. EL RECUERDO

3. Social: reseñas de compradores verificados, personalities, expertos reconocidos que ayudan a tomar decisiones basadas en la confianza


Y ¿las guidelines?

4 Megamenus

3. EL RECUERDO

4. Megamenús: con navegación interna, promociones, banners, producto… Podemos reducir hasta tres clics en la navegación a niveles internos!


Y ¿las guidelines?

5 Fidelización: puntos y cupones

3. EL RECUERDO

5. Fidelización; puntos que promuevan la viralizacón, mejora en el ticket de compra, preferencia sobre unos productos u otra (para obtenerlos) y cupones que favorezcan el retorno (para redención)


Y ¿las guidelines?

6 Checkout sencillos

3. EL RECUERDO

6. Facilitar los puntos barrera y de abandono: checkout sencillos y con el menor numero de campos posible


Y ¿las guidelines?

7 Funcionalidades sorprendentes

3. EL RECUERDO

7. Funcionalidades sorprendentes: aquí hay que ser creativo, ¿quien no ha hecho una prueba de color pequeña en una pared y le ha encantado el resultado pero se ha sentido horrorizado al pintar la pared entera? bajo esa premisa en esta tienda de pinturas, pintábamos el fondo completo de la pantalla con el color en rollover


Y ¿las guidelines?

8 Minicarts funcionales

3. EL RECUERDO

8. Minicarts funcionales: cada tienda tiene un estilo de compra distinto, no es lo mismo una tienda de joyas que un supermercado, el carrito es el exponente más importante de esta diferencia, debemos exprimir su utilidad por encima de almacenar producto (aconsejar? completar?, sustituir producto? entender qué quiere el cliente?)


Y ¿las guidelines?

9 Registros sencillos y atractivos

3. EL RECUERDO

9. Registros atractivos y sencillos: capturemos, mostremos las ventajas y simplifiquemos, qué hay mejor para le usuario que un registro con tan sólo autentificarse en sus redes sociales favoritas?


Y ¿las guidelines?

10 Test A/B

3. EL RECUERDO

10. Test A/B: en este recorrido hay muy pocas cosas que inventar, los diseñadores de experiencia tenemos por lo general duda entre dos opciones que funcionan o entre una que funciona y una muy nueva. El mejor test de usuario en un comercio electrónico ágil es el test A/B, navegación real, resultados reales, y evitamos perder con un teste estándar hasta una media de tres semanas en la puesta en producción.


¡MUCHAS GRACIAS!Diga33! creando experiencias desde el 2007

ux: responsabilidad creativa en ecommerce (con notas del presentador)

Technology