Horrores de Diseño Web en eCommerce
•
0 recomendaciones•1,585 vistas
El documento presenta los principales errores de diseño que deben evitarse en el comercio electrónico, como fotografías de mala calidad, información insuficiente de los productos, procesos de compra engorrosos y falta de claridad en la navegación. También describe conceptos clave como la experiencia de usuario, el uso de estándares web, y la importancia de eliminar obstáculos en el proceso de compra.
Más contenido relacionado
Similar a Horrores de Diseño Web en eCommerce
Similar a Horrores de Diseño Web en eCommerce (20)
Último
Último (20)
Horrores de Diseño Web en eCommerce
- 1. Horrores de Diseño Web en eCommerce DG Lucas Mourelle Líder de Diseño - OmbuShop @lucasmourelle
- 3. Lucas Mourelle Diseñador Front-end developer Docente Líder de Diseño de • • • •
- 4. HORRORES CÓMO NO VENDER ONLINE
- 5. FOTOGRAFÍAS
- 10. FOTOGRAFÍAS
- 11. FOTOGRAFÍAS
- 12. FOTOGRAFÍAS
- 13. FOTOGRAFÍAS
- 14. FOTOGRAFÍAS
- 15. INFORMACIÓN
- 16. INFORMACIÓN Selmer Paris Modelo MARK VI Laqueado-Campana Grabada número de serie 195XXX- Año 1971
- 17. INFORMACIÓN Selmer Paris Modelo MARK VI Laqueado-Campana Grabada nú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.
- 18. INFORMACIÓN
- 19. INFORMACIÓN
- 20. INFORMACIÓN
- 21. INFORMACIÓN
- 22. CHECKOUT
- 23. CHECKOUT
- 24. CHECKOUT
- 25. CHECKOUT
- 26. CHECKOUT
- 27. CHECKOUT
- 28. CHECKOUT
- 29. ¿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...
- 30. ✔ 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.
- 31. ✔ 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?
- 32. ✔ 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?
- 33. VENTA POR MENSAJES ✔ Experiencia tediosa ✔ Pérdida de tiempo ✔ Pérdida de paciencia ✔ Dificultad de compra ✔ Conversiones bajas
- 34. NAVEGACIÓN DE PRODUCTOS ✔ Zapatos ✔ Zapatillas ✔ Valijas ✔ Carteras ✔ Bolsos x Producto
- 35. 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
- 36. PENSANDO EN EL USUARIO DANDO FIN AL DISEÑO AUTO-REFERENCIAL
- 37. PENSANDO EN EL USUARIO
- 38. PENSANDO EN EL USUARIO ?
- 46. DISEÑAR LA UX ¿PODEMOS MEJORAR LA EXPERIENCIA QUE TIENEN NUESTROS USUARIOS?
- 47. UX User eXperience (experiencia de usuario) ?
- 48. 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. UX EXPERIENCIA DE USUARIO
- 71. CUESTIONES TÉCNICAS INTERNET Y LA WEB
- 72. W3C World Wide Web Consortium
- 73. W3C + WHATWGWeb Hypertext Application Technology Working Group World Wide Web Consortium
- 74. HTML CONTENIDO CSS PRESENTACIÓN JavaScript COMPORTAMIENTO Estructurado semánticamente Descripción del diseño Programación de la interacción
- 75. HTML CONTENIDO CSS PRESENTACIÓN JavaScript COMPORTAMIENTO Estructurado semánticamente Descripción del diseño Programación de la interacción
- 77. ¿Por qué la tecnología es importante para la UX?
- 78. ✔ Comportamiento predecible de los navegadores web ¿Por qué la tecnología es importante para la UX?
- 79. ✔ Comportamiento predecible de los navegadores web ✔ SEO (Search Engine Optimization) ¿Por qué la tecnología es importante para la UX?
- 80. ✔ Comportamiento predecible de los navegadores web ✔ SEO (Search Engine Optimization) ✔ Accesibilidad ¿Por qué la tecnología es importante para la UX?
- 81. ✔ Comportamiento predecible de los navegadores web ✔ SEO (Search Engine Optimization) ✔ Accesibilidad ✔ Usabilidad ¿Por qué la tecnología es importante para la UX?
- 82. LA TECNOLOGÍA ES IMPORTANTE PARA LA UX
- 83. PLATAFORMA ELEGIR LA PLATAFORMA DE VENTAS ADECUADA
- 84. 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
- 85. 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
- 86. PLATAFORMA ELEGIR LA PLATAFORMA DE VENTAS ADECUADA ✔ Tienda en Facebook ✔ Tienda con dirección propia (as-a-service) ✔ Tienda con dirección propia a medida
- 87. PLATAFORMA ELEGIR LA PLATAFORMA DE VENTAS ADECUADA ✔ Tienda en Facebook ✔ Tienda con dirección propia (as-a-service) ✔ Tienda con dirección propia a medida HTML CONTENIDO CSS PRESENTACIÓN JavaScript COMPORTAMIENTO
- 88. PRESENCIA ONLINE INCREMENTAR LAS VISITAS AL SITIO
- 89. PRESENCIA ONLINE INCREMENTAR 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)
- 90. SEO PRESENCIA ONLINE INCREMENTAR 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)
- 91. JERARQUÍAS EXPLICITAR CLARAMENTE LOS NIVELES DE LECTURA
- 95. #1 #2 #3
- 97. CALL TO ACTION LLAMADO A LA ACCIÓN
- 98. CALL TO ACTION LLAMADO A LA ACCIÓN
- 99. CALL TO ACTION LLAMADO A LA ACCIÓN
- 100. CALL TO ACTION LLAMADO A LA ACCIÓN
- 101. CHECKOUT CONCRETAR LA COMPRA, PAGO, ENVÍO
- 102. CHECKOUT CONCRETAR LA COMPRA, PAGO, ENVÍO ✔ Call to action
- 103. CHECKOUT CONCRETAR LA COMPRA, PAGO, ENVÍO ✔ Call to action ✔ Carrito
- 104. CHECKOUT CONCRETAR LA COMPRA, PAGO, ENVÍO ✔ Call to action ✔ Carrito ✔ Checkout
- 106. CHECKOUT CARRITO
- 107. CHECKOUT
- 109. CHECKOUT SIN OBSTÁCULOS ✔ Datos de contacto
- 110. CHECKOUT SIN OBSTÁCULOS ✔ Datos de contacto ✔ Medio de envío
- 111. CHECKOUT SIN OBSTÁCULOS ✔ Datos de contacto ✔ Medio de envío ✔ Medio de pago
- 112. CHECKOUT SIN OBSTÁCULOS ✔ Datos de contacto ✔ Medio de envío ✔ Medio de pago ✔ Confirmación (datos de la compra)
- 113. CHECKOUT SIN OBSTÁCULOS ✔ Datos de contacto ✔ Medio de envío ✔ Medio de pago ✔ Confirmación (datos de la compra) ✔ Factura (feedback de éxito al usuario)
- 114. ONE MORE THING…