¿Cómo diseñar mi tienda online?

5.844 visualizaciones

Publicado el

Charla sobre usabilidad, accesibilidad y diseño. Aspectos a tener en cuenta a la hora de diseñar una tienda online.
Jornadas #mescomercio en Cámara de Comercio de Valladolid. Noviembre 2010

Publicado en: Tecnología

¿Cómo diseñar mi tienda online?

  1. 1. ¿Cómo diseñar mi tienda online?
  2. 2. ¿cual es el objetivo de mi web? Ya, pero… definir objetivos es la clave (Es casi más difícil que cumplirlos)
  3. 3. definir una estrategia
  4. 4. Usuarios de Internet Encuentran nuestra web Navegan por nuestra web Encuentran el producto que están buscando Los que empiezan el Proceso de compra Los que lo terminan Los que nos recomiendan Los que vuelven Marketing Diseño + Usabilidad + Accesibilidad Servicio + Atención al cliente el embudo de la conversión
  5. 5. embudo “recto de boca estrecha” • Mercados poco maduros • Productos novedosos • Baja demanda actual • Potencial de crecimiento • Hay poca competencia: Embudo casi recto • El gasto en marketing no es lo más rentable
  6. 6. • Llegan usuarios • Pero no se convierte en clientes • Problemas de usabilidad • Desconfianza • Falta de Información • Potencial de crecimiento exponencial embudo “descompesado”
  7. 7. • Mercados maduros • La experiencia de uso es correcta • Pero la gente no llega a la web • Crecimiento lineal • Más Marketing -> Más clientes embudo “pronunciado de boca estrecha”
  8. 8. El posicionamiento y el marketing online atraen usuarios a la web SEO Social Media SEM Analítica Web Atraer tráfico+ + + + =
  9. 9. El diseño y la usabilidad convierten usuarios en clientes Usabilidad Diseño orientado Accesibilidad Analítica Web Conversión+ + + + =
  10. 10. El tráfico y la conversión: las claves del éxito + + + = Éxito OnlineAtraer Tráfico Conversión
  11. 11. El diseño es fundamental
  12. 12. Usabilidad Accesibilidad Diseño gráfico
  13. 13. la importancia de un buen dominio • Representativo de nuestra empresa Debe introducir el nombre, o una de las palabras del nombre o marca. También debería ser descriptivo de nuestra actividad. Ejemplo: ceramicaslopez.com • Fácil de recordar Mejor corto que largo, aunque algunos giros o expresiones pueden ser llamativos y mnemotécnicos • Evitar números y guiones Para poder decir y deletrear fácilmente el dominio
  14. 14. definiendo a nuestros usuarios
  15. 15. definiendo a nuestros usuarios • fácil de usar • amigable • claro • intuitivo • de fácil aprendizaje Nuestro sitio ha de ser:
  16. 16. El diseño y la usabilidad convierten usuarios en clientes Usabilidad Diseño orientado Accesibilidad Analítica Web Conversión+ + + + =
  17. 17. usabilidad
  18. 18. arquitectura de la información • Estructura y organización • Definición de layouts/wireframes • Taxonomías y folksonomías • Navegación y niveles de navegación • Búsquedas
  19. 19. arquitectura de la información • Algunas técnicas Card Sorting Benchmarking Análisis de las estadísticas web Tests de usuario • Los usuarios no leen, escanean
  20. 20. usabilidad • Sencillez • Atractivo para el usuario • Fácil de usar • Fácil de aprender • Información a la vista • Guiar al usuario • ¿Máximo 3 clicks?
  21. 21. arquitectura y usabilidad (I) • Estructura acorde con los objetivos de la web. La home se estructura para lograr los objetivos de comunicación: informativos, comerciales, atención al cliente, producto, etc. • URLs claras y únicas. Cada página, una URL descriptiva, única y permanente. • Información de contacto clara. Destacada y bien ubicada, fácil de encontrar desde cualquier punto de la web. • Rótulos significativos y estándar. Las palabras elegidas como menú de navegación deben ser simples y descriptivas. • Navegación completa y descriptiva. Donde estás, dónde has estado, dónde puedes ir. Un sistema de navegación consistente. Máximo 4 niveles de navegación.
  22. 22. arquitectura y usabilidad (II) • Máximo 7 items de navegación. • Migas de pan. Muestra el camino hacia atrás. • Enlace a la home en el logo. Recurso sencillo para facilitar la vuelta a la página de inicio. • Enlace a la página de inicio desde todas las páginas. • Enlaces claros y bien identificados en todo el site. Con estilo propio y bien visibles. • Aprovechar la jerarquía visual para estructurar información. Estableciendo niveles de importancia del contenido y poniéndolos en los sitios más visibles.
  23. 23. arquitectura y usabilidad (III) • Evitar sobrecarga informativa. No más de 7 ± 2 elementos por página. • Ayuda contextual y mensajes de error. Para tareas complejas, ayudas con globos de texto, información sobre tamaño y formato de un documento, etc., evitando secciones independientes de ayuda. • Información de estado. En tareas complejas (como una compra), informar de dónde se está y lo que falta para terminar. • Evitar flash innecesario. No usar intros en flash, no construir páginas completamente en flash. Usar elementos flash para introducir toques de dinamismo en la web (cabecera, banners, etc).
  24. 24. resumiendo usabilidad La clave de un sitio usable es que quién navegue por él, entienda su estructura y consiga realizar con éxito, aquello que pretendía realizar. ej: proceso de compra.
  25. 25. …algunos trucos direcciones de lectura: de izquierda a derecha de arriba a abajo llamar a las cosas por su nombre logotipo arriba y a la izquierda navegación: listado de elementos dispuestos a la izquierda no más de 7 elementos buscador: situado en la parte superior derecha ayuda: situada en la parte superior derecha
  26. 26. …algunos trucos tipos de letra: sans-serif (sin remates) contraste fuente-fondo: influye en la legibilidad tamaño de los textos: los tipos de letra pequeños se leen mal aspectos importantes del texto para su comprensión: título imagen introducción al texto elementos parpadeantes y similares: distraen la atención del usuario
  27. 27. …algunos trucos ayuda contextual ayudas a la navegación: migas de pan mapa web texto en los enlaces rotulado correcto: llamar a las cosas por su nombre palabras adecuadas al contexto no hacer pensar a los usuarios
  28. 28. El diseño y la usabilidad convierten usuarios en clientes Usabilidad Diseño orientado Accesibilidad Analítica Web Conversión+ + + + =
  29. 29. accesibilidad
  30. 30. accesibilidad • Visibilidad • Efectividad • Universal • Distintos tipos de dispositivos • Distintas posibilidades • Estándares web
  31. 31. accesibilidad El cumplimiento de estándares W3C permite: ver lo mismo en todos los navegadores acceder desde cualquier dispositivo
  32. 32. El diseño y la usabilidad convierten usuarios en clientes Usabilidad Diseño orientado Accesibilidad Analítica Web Conversión+ + + + =
  33. 33. diseño orientado a la conversón • Diálogo • Influencia
  34. 34. diseño gráfico
  35. 35. Los 10 errores más comunes 1. problemas de legibilidad 2. enlaces alejados del formato estándar 3. flash 4. contenido no escrito para la web 5. búsquedas deficientes 6. incompatibilidad entre navegadores 7. formularios incómodos, demasiado largos 8. ausencia de vías de contacto 9. ¿maquetación con ancho fijo? 10. ampliación inadecuada de las imágenes
  36. 36. Los 10 imprescindibles 1. logotipo vinculado a la página principal 2. lema que describa el sitio 3. lo importante lo primero 4. un buscador que funcione bien 5. texto claramente legible 6. acciones claramente representadas 7. formularios amigables 8. que no haya enlaces rotos 9. que no haya contenido desactualizado 10. que los contenidos cumplan con las expectativas
  37. 37. diseño gráfico • Look & feel adaptado a los objetivos y al sector • La cabecera marca la pauta. La paleta cromática • El logotipo de la empresa debe integrarse • Evitemos ruido visual • Jerarquía visual • Uso tipográfico adecuado • Contraste entre fuente y fondo • Evitar el sonido ambiental • No abusar de los ornamentos o recursos gráficos • Proporciones de los elementos de la web
  38. 38. NO a las intros en FLASH Usabilidad: dificultad para el usuario, provocan el abandono de la página en un tanto por ciento elevado de casos. Es algo que quiere el dueño de la página pero no el usuario de la página Buscadores: incrustar una intro en una web supone prácticamente tirar el valor de la home a la basura para temas de posicionamiento en buscadores Técnicos: una intro generalmente lleva enlaces dentro del flash hacia secciones internas o idiomas, por lo cual es difícil y costoso de gestionar. Siempre necesitaremos la ayuda de un perfil técnico
  39. 39. El diseño y la usabilidad convierten usuarios en clientes Usabilidad Diseño orientado Accesibilidad Analítica Web Conversión+ + + + =
  40. 40. analítica web
  41. 41. fivesecondtest • Permite evaluar conductas • Muy útil para evaluar diseños (wireframes) • Ayuda a la conversión (usabilidad)
  42. 42. eyetraking • Ayuda a la conversión • Permite ver atenciones máximas • Permite reconstruir patrones de navegación
  43. 43. A/B testing
  44. 44. test multivariable • Test A/B Poco tráfico Cambios radicales Al principio del diseño • Test multivariable Bastante tráfico Testear paginas en las que se mantiene el diseño Testear elementos
  45. 45. google analytics
  46. 46. elementos de una tienda online
  47. 47. catálogo de productos
  48. 48. catálogo de productos • es nuestra carta de presentación • lo más importante es la presentación de los productos (confianza, seriedad) • uso de fotografías reales • buena descripción y uso de vídeos, podcasts, otros • organización jerarquizada • uso de los más vendidos, top 10, etc.
  49. 49. carrito de la compra
  50. 50. carrito de la compra • visible desde todas las páginas • debe permitir añadir, eliminar o modificar productos en cualquier momento de la navegación • referencias y cantidad compradas • gastos de envío • impuestos aplicables (directos) • importe total del pedido
  51. 51. promociones y ofertas
  52. 52. promociones y ofertas • vender por precio. El precio de los productos siempre debe estar visible • rebajas de precio, resaltar el precio de la oferta y mantener el precio no rebajado • módulo de descuentos configurable: por categorías, por volumen, por tipo de cliente, etc. • códigos promocionales y cupones de descuento
  53. 53. motor de búsqueda
  54. 54. motor de búsqueda • indispensable una búsqueda simple • si tenemos muchos productos es indispensable disponer de un potente motor de búsqueda • buscar por categorías, rango de precios, nombre • siempre dar una alternativa. Si no existen resultados, mostrar sugerencias con productos relacionados
  55. 55. proceso de compra
  56. 56. proceso de compra • directo y guiado con mensajes de información • registro de usuarios opcional • menor número de pasos posible (5 clicks) • información complementaria que de confianza a los usuarios • y además:
  57. 57. proceso de compra • gastos de envío asociados a la transacción • dirección de entrega del pedido • dirección de facturación • disponibilidad de los productos elegidos y plazo de envío
  58. 58. medios de pago
  59. 59. medios de pago • es el momento más crítico • ofrecer el mayor número de posibilidades • medios habituales: contra reembolso, transferencia bancaria, domiciliación bancaria, tarjeta de crédito (TPV virtual), otros medios (Paypal, Saftpay, Allopass, Google Checkout) • Mostrar siempre precios finales competos (impuestos incluidos)
  60. 60. información corporativa
  61. 61. información corporativa • quiénes somos • que ofrecemos • aviso legal y política de privacidad • información de contacto • dónde estamos (si hay tienda física u oficina comercial) • condiciones de compra y contratación • preguntas frecuentes
  62. 62. registro y área de usuario • Registro siempre opcional • es una herramienta indispensable para la fidelización de clientes (newsletters, promociones, etc.) • el área de usuario es recomendable pero tiene un coste adicional (seguimiento de envíos, consulta últimas compras, etc.) • En el área de usuario el cliente puede modificar datos, envío y/o facturación
  63. 63. gestión de la tienda online
  64. 64. gestión de la tienda online • La plataforma / herramienta seleccionada debe permitir realizar la gestión completa de la tienda online: Seguimiento y control de pedidos Atención al cliente Logística y transporte Almacén, stocks Gestión comercial Facturación
  65. 65. Elementos de influencia
  66. 66. Elementos de influencia 1. Confidencialidad 2. Seguridad en el pago 3. Facilidad en el cambio o la devolución 4. Proceso de compra realizado correctamente 5. Información clara de cómo se hace la compra 6. Navegación rápida y fácil 7. Imagen de confianza y seriedad 8. Posibilidad de pagar de distintas formas 9. Descripción detallada de los productos 10. Los precios
  67. 67. 10 factores de éxito
  68. 68. Empieza por el principio
  69. 69. Pon la tienda en orden
  70. 70. Fácil de usar
  71. 71. Que sea bonita
  72. 72. Buen contenido y bien actualizado
  73. 73. Estándares web
  74. 74. Publicita tu web a los cuatro vientos
  75. 75. Medir, medir, medir
  76. 76. No la abandones
  77. 77. Tu imagen en la red
  78. 78. Gracias Fuentes: Red.es, Domestika, Vexlan, Cristóbal Fransi, E., Barrabés, Google, Territorio Creativo, ONTSI, adigital y fuentes propias. Imágenes: Flickr CC (El Colo Eiguren, NattyDreaddd, Huladancer, Tilanevesen, Sebastián Ramos, Antonio Martínez, Redjar) y Fotolia Contenido: Licencia Creative Commons 3.0 Valladolid – noviembre 2010 Jezabel González Diez jezabel.gonzalez@vitalinnova.com www.vitalinnova.com/blog twitter.com/jezis twitter.com/vitalinnova

×