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

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

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



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



✔ Vendedor: $100



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


LLEGADA


ANÁLISISLLEGADA


ELECCIÓNANÁLISISLLEGADA


COMPRAELECCIÓNANÁLISISLLEGADA


RECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA


USORECEPCIÓ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

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

✔ Comportamiento predecible de los navegadores web



✔ SEO (Search Engine Optimization)




✔ Accesibilidad




✔ Accesibilidad

✔ Usabilidad


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





HTMLCONTENIDO

CSSPRESENTACIÓN

JavaScriptCOMPORTAMIENTO

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


✔ 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

CHECKOUTCONCRETAR LA COMPRA, PAGO, ENVÍO


✔ Call to action


✔ Call to action

✔ Carrito


✔ Call to action

✔ Carrito

✔ Checkout

CHECKOUTCALL TO ACTION

CHECKOUTCARRITO

CHECKOUT

CHECKOUTSIN OBSTÁCULOS


✔ Datos de contacto



✔ Medio de envío



✔ Medio de envío

✔ Medio de pago



✔ Medio de envío

✔ Medio de pago

✔ Confirmación (datos de la compra)



✔ 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

¡Muchas gracias!

Lucas Mourelle

¿Preguntas?

Lucas Mourelle@lucasmourelle

[email protected]

mailto:[email protected]


Chau!

Lucas Mourelle@lucasmourelle

[email protected]



horrores de diseño web en ecommerce

Design