Horrores de Diseño Web en eCommerce

1,311 views

Published on

Los errores más comunes a la hora de hacer tiendas online y cómo remediarlos.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,311
On SlideShare
0
From Embeds
0
Number of Embeds
791
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Horrores de Diseño Web en eCommerce

  1. 1. Horrores de Diseño Web en eCommerce DG Lucas Mourelle Líder de Diseño - OmbuShop @lucasmourelle
  2. 2. #ELD2013 #UX #eCommerce
  3. 3. Lucas Mourelle Diseñador Front-end developer Docente Líder de Diseño de • • • •
  4. 4. HORRORES CÓMO NO VENDER ONLINE
  5. 5. FOTOGRAFÍAS
  6. 6. FOTOGRAFÍAS Un bolso
  7. 7. FOTOGRAFÍAS Un bolso
  8. 8. FOTOGRAFÍAS
  9. 9. FOTOGRAFÍAS
  10. 10. FOTOGRAFÍAS
  11. 11. FOTOGRAFÍAS
  12. 12. FOTOGRAFÍAS
  13. 13. INFORMACIÓN
  14. 14. INFORMACIÓN Selmer Paris Modelo  MARK VI Laqueado-Campana Grabada número de serie 195XXX- Año 1971
  15. 15. 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.
  16. 16. INFORMACIÓN
  17. 17. INFORMACIÓN
  18. 18. INFORMACIÓN
  19. 19. INFORMACIÓN
  20. 20. CHECKOUT
  21. 21. CHECKOUT
  22. 22. CHECKOUT
  23. 23. CHECKOUT
  24. 24. CHECKOUT
  25. 25. CHECKOUT
  26. 26. CHECKOUT
  27. 27. ¿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...
  28. 28. ✔ 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.
  29. 29. ✔ 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?
  30. 30. ✔ 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?
  31. 31. VENTA POR MENSAJES ✔ Experiencia tediosa ✔ Pérdida de tiempo ✔ Pérdida de paciencia ✔ Dificultad de compra ✔ Conversiones bajas
  32. 32. NAVEGACIÓN DE PRODUCTOS ✔ Zapatos ✔ Zapatillas ✔ Valijas ✔ Carteras ✔ Bolsos x Producto
  33. 33. 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
  34. 34. PENSANDO EN EL USUARIO DANDO FIN AL DISEÑO AUTO-REFERENCIAL
  35. 35. PENSANDO EN EL USUARIO
  36. 36. PENSANDO EN EL USUARIO ?
  37. 37. PRUEBEN CON USUARIOS!
  38. 38. DISEÑAR LA UX ¿PODEMOS MEJORAR LA EXPERIENCIA QUE TIENEN NUESTROS USUARIOS?
  39. 39. UX User eXperience (experiencia de usuario) ?
  40. 40. 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
  41. 41. UX Experiencia de Usuario
  42. 42. UX Experiencia de Usuario
  43. 43. UX Experiencia de Usuario LLEGADA
  44. 44. UX Experiencia de Usuario ANÁLISISLLEGADA
  45. 45. UX Experiencia de Usuario ELECCIÓNANÁLISISLLEGADA
  46. 46. UX Experiencia de Usuario COMPRAELECCIÓNANÁLISISLLEGADA
  47. 47. UX Experiencia de Usuario RECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA
  48. 48. UX Experiencia de Usuario USORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA
  49. 49. UX Experiencia de Usuario POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA
  50. 50. UX Experiencia de Usuario
  51. 51. POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA
  52. 52. POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA
  53. 53. POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA
  54. 54. POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA
  55. 55. POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA
  56. 56. POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA
  57. 57. POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA
  58. 58. POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA
  59. 59. POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA
  60. 60. POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA
  61. 61. POSTUSORECEPCIÓNCOMPRAELECCIÓNANÁLISISLLEGADA
  62. 62. UX Experiencia total
  63. 63. CUESTIONES TÉCNICAS INTERNET Y LA WEB
  64. 64. W3C World Wide Web Consortium
  65. 65. W3C + WHATWGWeb Hypertext Application Technology Working Group World Wide Web Consortium
  66. 66. HTML CONTENIDO CSS PRESENTACIÓN JavaScript COMPORTAMIENTO Estructurado semánticamente Descripción del diseño Programación de la interacción
  67. 67. HTML CONTENIDO CSS PRESENTACIÓN JavaScript COMPORTAMIENTO Estructurado semánticamente Descripción del diseño Programación de la interacción
  68. 68. ¿Por qué la tecnología es importante para la UX?
  69. 69. ✔ Comportamiento predecible de los navegadores web ¿Por qué la tecnología es importante para la UX?
  70. 70. ✔ Comportamiento predecible de los navegadores web ✔ SEO (Search Engine Optimization) ¿Por qué la tecnología es importante para la UX?
  71. 71. ✔ Comportamiento predecible de los navegadores web ✔ SEO (Search Engine Optimization) ✔ Accesibilidad ¿Por qué la tecnología es importante para la UX?
  72. 72. ✔ Comportamiento predecible de los navegadores web ✔ SEO (Search Engine Optimization) ✔ Accesibilidad ✔ Usabilidad ¿Por qué la tecnología es importante para la UX?
  73. 73. LA TECNOLOGÍA ES IMPORTANTE PARA LA UX
  74. 74. PLATAFORMA ELEGIR LA PLATAFORMA DE VENTAS ADECUADA
  75. 75. 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
  76. 76. 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
  77. 77. 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
  78. 78. 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
  79. 79. PRESENCIA ONLINE INCREMENTAR LAS VISITAS AL SITIO
  80. 80. 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)
  81. 81. 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)
  82. 82. JERARQUÍAS EXPLICITAR CLARAMENTE LOS NIVELES DE LECTURA
  83. 83. #1 #2 #3
  84. 84. CALL TO ACTION LLAMADO A LA ACCIÓN
  85. 85. CALL TO ACTION LLAMADO A LA ACCIÓN
  86. 86. CALL TO ACTION LLAMADO A LA ACCIÓN
  87. 87. CALL TO ACTION LLAMADO A LA ACCIÓN
  88. 88. CHECKOUT CONCRETAR LA COMPRA, PAGO, ENVÍO
  89. 89. CHECKOUT CONCRETAR LA COMPRA, PAGO, ENVÍO ✔ Call to action
  90. 90. CHECKOUT CONCRETAR LA COMPRA, PAGO, ENVÍO ✔ Call to action ✔ Carrito
  91. 91. CHECKOUT CONCRETAR LA COMPRA, PAGO, ENVÍO ✔ Call to action ✔ Carrito ✔ Checkout
  92. 92. CHECKOUT CALL TO ACTION
  93. 93. CHECKOUT CARRITO
  94. 94. CHECKOUT
  95. 95. CHECKOUT SIN OBSTÁCULOS
  96. 96. CHECKOUT SIN OBSTÁCULOS ✔ Datos de contacto
  97. 97. CHECKOUT SIN OBSTÁCULOS ✔ Datos de contacto ✔ Medio de envío
  98. 98. CHECKOUT SIN OBSTÁCULOS ✔ Datos de contacto ✔ Medio de envío ✔ Medio de pago
  99. 99. CHECKOUT SIN OBSTÁCULOS ✔ Datos de contacto ✔ Medio de envío ✔ Medio de pago ✔ Confirmación (datos de la compra)
  100. 100. 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)
  101. 101. ONE MORE THING…
  102. 102. DISPOSITIVOS MÓVILES POSIBILIDADES TÉCNICAS
  103. 103. MEDIA QUERIES DISEÑO LÍQUIDO
  104. 104. MEDIA QUERIES DISEÑO LÍQUIDO
  105. 105. MEDIA QUERIES DISEÑO LÍQUIDO
  106. 106. MEDIA QUERIES DISEÑO LÍQUIDO
  107. 107. MEDIA QUERIES DISEÑO LÍQUIDO
  108. 108. MEDIA QUERIES DISEÑO LÍQUIDO
  109. 109. ¡Muchas gracias! Lucas Mourelle
  110. 110. ¿Preguntas? Lucas Mourelle @lucasmourelle lucas@ombushop.com
  111. 111. Chau! Lucas Mourelle @lucasmourelle lucas@ombushop.com

×