horrores de diseño web en ecommerce

Horrores de Diseño Web en eCommerce

DG Lucas MourelleLíder de Diseño - OmbuShop

@lucasmourelle

#ELD2013#UX

#eCommerce

Lucas MourelleDiseñadorFront-end developerDocente

Líder de Diseño de

•••

•

HORRORESCÓMO NO VENDER ONLINE

FOTOGRAFÍAS

FOTOGRAFÍAS

Un bolso

FOTOGRAFÍAS

Un bolso

FOTOGRAFÍAS

FOTOGRAFÍAS

FOTOGRAFÍAS

FOTOGRAFÍAS

FOTOGRAFÍAS

INFORMACIÓN

INFORMACIÓNSelmer ParisModelo  MARK VI Laqueado-Campana Grabadanúmero de serie 195XXX- Año 1971

INFORMACIÓNSelmer ParisModelo  MARK VI Laqueado-Campana Grabadanúmero de serie 195XXX- Año 1971

Este es un increíble soprano Mark VI de los “mágicos”, los que tienen algo más que otros excelentes instrumentos. Un plus que es difícil definir. Habitualmente se describen los instrumentos en términos de lo que se escucha, el lado de un oyente: el "afuera".La otra dimensión que se puede tomar en cuenta es la del músico: lo que siente el músico al soplar un instrumento excepcional.

La emisión es puramente libre, sin resistencia. Uno siente ser todo sonido al soplarlo. La emisión es sin freno. La potencia no se acaba. Y esto se percibe en cualquier rango del instrumento. El otro

INFORMACIÓN

INFORMACIÓN

INFORMACIÓN

INFORMACIÓN

CHECKOUT

CHECKOUT

CHECKOUT

CHECKOUT

CHECKOUT

CHECKOUT

CHECKOUT

¿VENTA POR MENSAJES?✔ 1. Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ 2. Vendedor: $100

✔ 3. Cliente: ¡Genial! ¿Me envían dos a Palermo?

✔ 4. Vendedor: Sí, te va a salir $120.

✔ 5. Cliente: ¡Dale! ¿Cómo te pago?

✔ 6. Vendedor: Se hace pago contra entrega...

✔ 1. Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ 2. Vendedor: $100

✔ 3. Cliente: ¿Pesos o dólares?

✔ 4. Vendedor: Pesos argentinos.

✔ 5. Cliente: ¿Te puedo pagar $50 y te dejo el modelo XYZ como parte de pago?

✔ 6. Vendedor: Acepto sólo efectivo.

✔ 7. Cliente: $80, es todo lo que puedo acercarme.

✔ 8. Vendedor: No. El precio es $100.

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

✔ Vendedor: $100

✔ Cliente: ¿Pesos o dólares?

✔ Cliente: ¡Qué lindo! ¿Cuánto cuesta?

VENTA POR MENSAJES

✔ Experiencia tediosa

✔ Pérdida de tiempo

✔ Pérdida de paciencia

✔ Dificultad de compra

✔ Conversiones bajas

NAVEGACIÓN DE PRODUCTOS

✔ Zapatos

✔ Zapatillas

✔ Valijas

✔ Carteras

✔ Bolsos

x Producto

NAVEGACIÓN DE PRODUCTOS

✔ Zapatos

✔ Zapatillas

✔ Valijas

✔ Carteras

✔ Bolsos

x Producto

✔ Para Hombre

✔ Calzado Joven

✔ Calzado Formal

✔ Valijas y Bolsos

✔ Para Mujer

✔ Calzado Joven

✔ Calzado Formal

x Usuario

PENSANDO EN EL USUARIODANDO FIN AL DISEÑO AUTO-REFERENCIAL

PENSANDO EN EL USUARIO

PENSANDO EN EL USUARIO

?

PRUEBEN CON USUARIOS!

DISEÑAR LA UX¿PODEMOS MEJORAR LA EXPERIENCIA QUE TIENEN

NUESTROS USUARIOS?

UXUser eXperience

(experiencia de usuario)

?

Percepción del usuario, que resulta de los factores y situaciones que surgen en la interacción de dicho usuario con un producto o servicio.

UXEXPERIENCIA DE USUARIO

UXExperiencia de Usuario

UXExperiencia de Usuario

UXExperiencia de Usuario

LLEGADA

UXExperiencia de Usuario

ANÁLISISLLEGADA

UXExperiencia de Usuario

ELECCIÓNANÁLISISLLEGADA

UXExperiencia de Usuario

COMPRAELECCIÓNANÁLISISLLEGADA

UXExperiencia de Usuario

RECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA

UXExperiencia de Usuario

USORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA

UXExperiencia de Usuario

POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA

UXExperiencia de Usuario

POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA

POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA

POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA

POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA

POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA

POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA

POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA

POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA

POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA

POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA

POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA

UXExperiencia total

CUESTIONES TÉCNICASINTERNET Y LA WEB

W3CWorld Wide Web Consortium

W3C + WHATWGWeb Hypertext Application Technology

Working GroupWorld Wide Web Consortium

HTMLCONTENIDO

CSSPRESENTACIÓN

JavaScriptCOMPORTAMIENTO

Estructurado semánticamente

Descripción del diseño

Programación de la interacción

HTMLCONTENIDO

CSSPRESENTACIÓN

JavaScriptCOMPORTAMIENTO

Estructurado semánticamente

Descripción del diseño

Programación de la interacción

¿Por qué la tecnología es importante para la UX?

✔ Comportamiento predecible de los navegadores web

¿Por qué la tecnología es importante para la UX?

✔ Comportamiento predecible de los navegadores web

✔ SEO (Search Engine Optimization)

¿Por qué la tecnología es importante para la UX?

✔ Comportamiento predecible de los navegadores web

✔ SEO (Search Engine Optimization)

✔ Accesibilidad

¿Por qué la tecnología es importante para la UX?

✔ Comportamiento predecible de los navegadores web

✔ SEO (Search Engine Optimization)

✔ Accesibilidad

✔ Usabilidad

¿Por qué la tecnología es importante para la UX?

LA TECNOLOGÍAES IMPORTANTE

PARA LA UX

PLATAFORMAELEGIR LA PLATAFORMA DE VENTAS ADECUADA

PLATAFORMA

✔ Blog / Facebook (venta por mensajes)

✔ Marketplace de diseño

✔ Tienda en Facebook

✔ Tienda con dirección propia (as-a-service)

✔ Tienda con dirección propia a medida

ELEGIR LA PLATAFORMA DE VENTAS ADECUADA

PLATAFORMA

✔ Blog / Facebook (venta por mensajes)

✔ Marketplace de diseño

✔ Tienda en Facebook

✔ Tienda con dirección propia (as-a-service)

✔ Tienda con dirección propia a medida

ELEGIR LA PLATAFORMA DE VENTAS ADECUADA

PLATAFORMAELEGIR LA PLATAFORMA DE VENTAS ADECUADA

✔ Tienda en Facebook

✔ Tienda con dirección propia (as-a-service)

✔ Tienda con dirección propia a medida

PLATAFORMAELEGIR LA PLATAFORMA DE VENTAS ADECUADA

✔ Tienda en Facebook

✔ Tienda con dirección propia (as-a-service)

✔ Tienda con dirección propia a medida

HTMLCONTENIDO

CSSPRESENTACIÓN

JavaScriptCOMPORTAMIENTO

PRESENCIA ONLINEINCREMENTAR LAS VISITAS AL SITIO

PRESENCIA ONLINEINCREMENTAR LAS VISITAS AL SITIO

✔ Uso de estándares web

✔ Marcado semántico

✔ Links en otros sitios

✔ Uso inteligente de las redes sociales

✔ Campañas virales

✔ Newsletter (no hacer SPAM)

SEO

PRESENCIA ONLINEINCREMENTAR LAS VISITAS AL SITIO

✔ Uso de estándares web

✔ Marcado semántico

✔ Links en otros sitios

✔ Uso inteligente de las redes sociales

✔ Campañas virales

✔ Newsletter (no hacer SPAM)

JERARQUÍASEXPLICITAR CLARAMENTE LOS NIVELES DE LECTURA

#1

#2

#3

CALL TO ACTIONLLAMADO A LA ACCIÓN

CALL TO ACTIONLLAMADO A LA ACCIÓN

CALL TO ACTIONLLAMADO A LA ACCIÓN

CALL TO ACTIONLLAMADO A LA ACCIÓN

CHECKOUTCONCRETAR LA COMPRA, PAGO, ENVÍO

CHECKOUTCONCRETAR LA COMPRA, PAGO, ENVÍO

✔ Call to action

CHECKOUTCONCRETAR LA COMPRA, PAGO, ENVÍO

✔ Call to action

✔ Carrito

CHECKOUTCONCRETAR LA COMPRA, PAGO, ENVÍO

✔ Call to action

✔ Carrito

✔ Checkout

CHECKOUTCALL TO ACTION

CHECKOUTCARRITO

CHECKOUT

CHECKOUTSIN OBSTÁCULOS

CHECKOUTSIN OBSTÁCULOS

✔ Datos de contacto

CHECKOUTSIN OBSTÁCULOS

✔ Datos de contacto

✔ Medio de envío

CHECKOUTSIN OBSTÁCULOS

✔ Datos de contacto

✔ Medio de envío

✔ Medio de pago

CHECKOUTSIN OBSTÁCULOS

✔ Datos de contacto

✔ Medio de envío

✔ Medio de pago

✔ Confirmación (datos de la compra)

CHECKOUTSIN OBSTÁCULOS

✔ Datos de contacto

✔ Medio de envío

✔ Medio de pago

✔ Confirmación (datos de la compra)

✔ Factura (feedback de éxito al usuario)

ONE MORE THING…

DISPOSITIVOS MÓVILESPOSIBILIDADES TÉCNICAS

MEDIA QUERIESDISEÑO LÍQUIDO

MEDIA QUERIESDISEÑO LÍQUIDO

MEDIA QUERIESDISEÑO LÍQUIDO

MEDIA QUERIESDISEÑO LÍQUIDO

MEDIA QUERIESDISEÑO LÍQUIDO

MEDIA QUERIESDISEÑO LÍQUIDO

¡Muchas gracias!

Lucas Mourelle

¿Preguntas?

Lucas Mourelle@lucasmourelle

lucas@ombushop.com

Chau!

Lucas Mourelle@lucasmourelle

lucas@ombushop.com