ux en e-commerce

LA IMPORTANCIA DE LA UX (USER EXPERIENCE)

EN EL DISEÑO DE SITIOS WEB PARA E-COMMERCE

DG Lucas Mourelle@lucasmourelle | [email protected]

jueves 2 de agosto de 2012

mailto:[email protected]


eCommerce UXDG Lucas Mourelle

Líder de Diseño - OmbuShop


#ELD2012#UX

#eCommerce


Lucas MourelleDiseñadorFront-end developerDocente

Líder de Diseño de


COMPRA ONLINELATINOAMÉRICA HOY: VENTA POR MENSAJES


BLOG

✔ Venta por mensajes

✔ Súper accesible

✔ Experiencia de uso: pobre

✔ Herramienta de marketing


FACEBOOK

✔ Millones de usuarios

✔ Venta por mensajes

✔ Promoción accesible

✔ Experiencia de uso: difícil


MERCADO LIBRE

✔ Marketplace

✔ Millones de visitantes

✔ Alta exposición

✔ Gran competencia

✔ Gateway de pagos: Mercado Pago


¿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


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


INTERNET


LA WEB(World Wide Web)


INTERNET


INTERNET

servidor


INTERNET

servidor

cliente


INTERNETPEDIDO

servidor

cliente


INTERNETPEDIDO RESPUESTA

servidor

cliente


INTERNETPEDIDO

servidor

cliente


INTERNETPEDIDO

HTML

servidor

cliente


INTERNETPEDIDO

HTMLCSS

servidor

cliente


INTERNETPEDIDO

HTMLCSSJS

servidor

cliente


INTERNETPEDIDO

HTMLCSSJSJPEG

servidor

cliente


INTERNETPEDIDO

HTMLCSSJSJPEGGIF

servidor

cliente


INTERNETPEDIDO

HTMLCSSJSJPEGGIFPNG

servidor

cliente


INTERNETPEDIDO

HTMLCSSJSJPEGGIFPNGetc...

servidor

cliente


HTML


HTMLEstándar mundial


ESTÁNDARES WEBIMPORTANTES PARA LA UX EN eCOMMERCE


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 tecnlogí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


DISEÑAR LA UX¿CÓMO MEJORAR LA EXPERIENCIA DE COMPRA

DE NUESTROS USUARIOS?


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)


FOTOGRAFÍAEL USUARIO DEBE VER CLARAMENTE EL PRODUCTO


JERARQUÍASEXPLICITAR CLARAMENTE LOS NIVELES DE LECTURA


#1

#2

#3jueves 2 de agosto de 2012

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)


MOBILEPOSIBILIDADES TÉCNICAS

PARA DISPOSITIVOS MÓVILES


MEDIA QUERIESDISEÑO LÍQUIDO


¡Muchas gracias!

Lucas Mourelle


¿Preguntas?

Lucas Mourelle@lucasmourelle

[email protected]




Chau!

Lucas Mourelle@lucasmourelle

[email protected]




ux en e-commerce

Design

pesos o dlares

qu lindo

cunto cuesta

pesos argentinos

producto o servicio

ux experiencia

ux user experience experiencia

ecommerce ux