Post on 17-Jun-2015
description
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