¿Cómo diseñar mi tienda online?

  • Published on
    12-Jun-2015

  • View
    5.353

  • Download
    4

Embed Size (px)

DESCRIPTION

Charla sobre usabilidad, accesibilidad y diseo. Aspectos a tener en cuenta a la hora de disear una tienda online. Jornadas #mescomercio en Cmara de Comercio de Valladolid. Noviembre 2010

Transcript

<ul><li> 1. Cmo disear mi tienda online? </li></ul> <p> 2. cual es el objetivo de mi web? Ya, pero definir objetivos es la clave (Es casi ms difcil que cumplirlos) 3. definir una estrategia 4. Usuarios de Internet Encuentran nuestra web Navegan por nuestra web Encuentran el producto que estn buscando Los que empiezan el Proceso de compra Los que lo terminan Los que nos recomiendan Los que vuelven Marketing Diseo + Usabilidad + Accesibilidad Servicio + Atencin al cliente el embudo de la conversin 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 ms rentable 6. Llegan usuarios Pero no se convierte en clientes Problemas de usabilidad Desconfianza Falta de Informacin Potencial de crecimiento exponencial embudo descompesado 7. Mercados maduros La experiencia de uso es correcta Pero la gente no llega a la web Crecimiento lineal Ms Marketing -&gt; Ms clientes embudo pronunciado de boca estrecha 8. El posicionamiento y el marketing online atraen usuarios a la web SEO Social Media SEM Analtica Web Atraer trfico+ + + + = 9. El diseo y la usabilidad convierten usuarios en clientes Usabilidad Diseo orientado Accesibilidad Analtica Web Conversin+ + + + = 10. El trfico y la conversin: las claves del xito + + + = xito OnlineAtraer Trfico Conversin 11. El diseo es fundamental 12. Usabilidad Accesibilidad Diseo grfico 13. la importancia de un buen dominio Representativo de nuestra empresa Debe introducir el nombre, o una de las palabras del nombre o marca. Tambin debera ser descriptivo de nuestra actividad. Ejemplo: ceramicaslopez.com Fcil de recordar Mejor corto que largo, aunque algunos giros o expresiones pueden ser llamativos y mnemotcnicos Evitar nmeros y guiones Para poder decir y deletrear fcilmente el dominio 14. definiendo a nuestros usuarios 15. definiendo a nuestros usuarios fcil de usar amigable claro intuitivo de fcil aprendizaje Nuestro sitio ha de ser: 16. El diseo y la usabilidad convierten usuarios en clientes Usabilidad Diseo orientado Accesibilidad Analtica Web Conversin+ + + + = 17. usabilidad 18. arquitectura de la informacin Estructura y organizacin Definicin de layouts/wireframes Taxonomas y folksonomas Navegacin y niveles de navegacin Bsquedas 19. arquitectura de la informacin Algunas tcnicas Card Sorting Benchmarking Anlisis de las estadsticas web Tests de usuario Los usuarios no leen, escanean 20. usabilidad Sencillez Atractivo para el usuario Fcil de usar Fcil de aprender Informacin a la vista Guiar al usuario Mximo 3 clicks? 21. arquitectura y usabilidad (I) Estructura acorde con los objetivos de la web. La home se estructura para lograr los objetivos de comunicacin: informativos, comerciales, atencin al cliente, producto, etc. URLs claras y nicas. Cada pgina, una URL descriptiva, nica y permanente. Informacin de contacto clara. Destacada y bien ubicada, fcil de encontrar desde cualquier punto de la web. Rtulos significativos y estndar. Las palabras elegidas como men de navegacin deben ser simples y descriptivas. Navegacin completa y descriptiva. Donde ests, dnde has estado, dnde puedes ir. Un sistema de navegacin consistente. Mximo 4 niveles de navegacin. 22. arquitectura y usabilidad (II) Mximo 7 items de navegacin. Migas de pan. Muestra el camino hacia atrs. Enlace a la home en el logo. Recurso sencillo para facilitar la vuelta a la pgina de inicio. Enlace a la pgina de inicio desde todas las pginas. Enlaces claros y bien identificados en todo el site. Con estilo propio y bien visibles. Aprovechar la jerarqua visual para estructurar informacin. Estableciendo niveles de importancia del contenido y ponindolos en los sitios ms visibles. 23. arquitectura y usabilidad (III) Evitar sobrecarga informativa. No ms de 7 2 elementos por pgina. Ayuda contextual y mensajes de error. Para tareas complejas, ayudas con globos de texto, informacin sobre tamao y formato de un documento, etc., evitando secciones independientes de ayuda. Informacin de estado. En tareas complejas (como una compra), informar de dnde se est y lo que falta para terminar. Evitar flash innecesario. No usar intros en flash, no construir pginas completamente en flash. Usar elementos flash para introducir toques de dinamismo en la web (cabecera, banners, etc). 24. resumiendo usabilidad La clave de un sitio usable es que quin navegue por l, entienda su estructura y consiga realizar con xito, aquello que pretenda realizar. ej: proceso de compra. 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 navegacin: listado de elementos dispuestos a la izquierda no ms de 7 elementos buscador: situado en la parte superior derecha ayuda: situada en la parte superior derecha 26. algunos trucos tipos de letra: sans-serif (sin remates) contraste fuente-fondo: influye en la legibilidad tamao de los textos: los tipos de letra pequeos se leen mal aspectos importantes del texto para su comprensin: ttulo imagen introduccin al texto elementos parpadeantes y similares: distraen la atencin del usuario 27. algunos trucos ayuda contextual ayudas a la navegacin: 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. El diseo y la usabilidad convierten usuarios en clientes Usabilidad Diseo orientado Accesibilidad Analtica Web Conversin+ + + + = 29. accesibilidad 30. accesibilidad Visibilidad Efectividad Universal Distintos tipos de dispositivos Distintas posibilidades Estndares web 31. accesibilidad El cumplimiento de estndares W3C permite: ver lo mismo en todos los navegadores acceder desde cualquier dispositivo 32. El diseo y la usabilidad convierten usuarios en clientes Usabilidad Diseo orientado Accesibilidad Analtica Web Conversin+ + + + = 33. diseo orientado a la conversn Dilogo Influencia 34. diseo grfico 35. Los 10 errores ms comunes 1. problemas de legibilidad 2. enlaces alejados del formato estndar 3. flash 4. contenido no escrito para la web 5. bsquedas deficientes 6. incompatibilidad entre navegadores 7. formularios incmodos, demasiado largos 8. ausencia de vas de contacto 9. maquetacin con ancho fijo? 10. ampliacin inadecuada de las imgenes 36. Los 10 imprescindibles 1. logotipo vinculado a la pgina 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. diseo grfico Look &amp; feel adaptado a los objetivos y al sector La cabecera marca la pauta. La paleta cromtica El logotipo de la empresa debe integrarse Evitemos ruido visual Jerarqua visual Uso tipogrfico adecuado Contraste entre fuente y fondo Evitar el sonido ambiental No abusar de los ornamentos o recursos grficos Proporciones de los elementos de la web 38. NO a las intros en FLASH Usabilidad: dificultad para el usuario, provocan el abandono de la pgina en un tanto por ciento elevado de casos. Es algo que quiere el dueo de la pgina pero no el usuario de la pgina Buscadores: incrustar una intro en una web supone prcticamente tirar el valor de la home a la basura para temas de posicionamiento en buscadores Tcnicos: una intro generalmente lleva enlaces dentro del flash hacia secciones internas o idiomas, por lo cual es difcil y costoso de gestionar. Siempre necesitaremos la ayuda de un perfil tcnico 39. El diseo y la usabilidad convierten usuarios en clientes Usabilidad Diseo orientado Accesibilidad Analtica Web Conversin+ + + + = 40. analtica web 41. fivesecondtest Permite evaluar conductas Muy til para evaluar diseos (wireframes) Ayuda a la conversin (usabilidad) 42. eyetraking Ayuda a la conversin Permite ver atenciones mximas Permite reconstruir patrones de navegacin 43. A/B testing 44. test multivariable Test A/B Poco trfico Cambios radicales Al principio del diseo Test multivariable Bastante trfico Testear paginas en las que se mantiene el diseo Testear elementos 45. google analytics 46. elementos de una tienda online 47. catlogo de productos 48. catlogo de productos es nuestra carta de presentacin lo ms importante es la presentacin de los productos (confianza, seriedad) uso de fotografas reales buena descripcin y uso de vdeos, podcasts, otros organizacin jerarquizada uso de los ms vendidos, top 10, etc. 49. carrito de la compra 50. carrito de la compra visible desde todas las pginas debe permitir aadir, eliminar o modificar productos en cualquier momento de la navegacin referencias y cantidad compradas gastos de envo impuestos aplicables (directos) importe total del pedido 51. promociones y ofertas 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 mdulo de descuentos configurable: por categoras, por volumen, por tipo de cliente, etc. cdigos promocionales y cupones de descuento 53. motor de bsqueda 54. motor de bsqueda indispensable una bsqueda simple si tenemos muchos productos es indispensable disponer de un potente motor de bsqueda buscar por categoras, rango de precios, nombre siempre dar una alternativa. Si no existen resultados, mostrar sugerencias con productos relacionados 55. proceso de compra 56. proceso de compra directo y guiado con mensajes de informacin registro de usuarios opcional menor nmero de pasos posible (5 clicks) informacin complementaria que de confianza a los usuarios y adems: 57. proceso de compra gastos de envo asociados a la transaccin direccin de entrega del pedido direccin de facturacin disponibilidad de los productos elegidos y plazo de envo 58. medios de pago 59. medios de pago es el momento ms crtico ofrecer el mayor nmero de posibilidades medios habituales: contra reembolso, transferencia bancaria, domiciliacin bancaria, tarjeta de crdito (TPV virtual), otros medios (Paypal, Saftpay, Allopass, Google Checkout) Mostrar siempre precios finales competos (impuestos incluidos) 60. informacin corporativa 61. informacin corporativa quines somos que ofrecemos aviso legal y poltica de privacidad informacin de contacto dnde estamos (si hay tienda fsica u oficina comercial) condiciones de compra y contratacin preguntas frecuentes 62. registro y rea de usuario Registro siempre opcional es una herramienta indispensable para la fidelizacin de clientes (newsletters, promociones, etc.) el rea de usuario es recomendable pero tiene un coste adicional (seguimiento de envos, consulta ltimas compras, etc.) En el rea de usuario el cliente puede modificar datos, envo y/o facturacin 63. gestin de la tienda online 64. gestin de la tienda online La plataforma / herramienta seleccionada debe permitir realizar la gestin completa de la tienda online: Seguimiento y control de pedidos Atencin al cliente Logstica y transporte Almacn, stocks Gestin comercial Facturacin 65. Elementos de influencia 66. Elementos de influencia 1. Confidencialidad 2. Seguridad en el pago 3. Facilidad en el cambio o la devolucin 4. Proceso de compra realizado correctamente 5. Informacin clara de cmo se hace la compra 6. Navegacin rpida y fcil 7. Imagen de confianza y seriedad 8. Posibilidad de pagar de distintas formas 9. Descripcin detallada de los productos 10. Los precios 67. 10 factores de xito 68. Empieza por el principio 69. Pon la tienda en orden 70. Fcil de usar 71. Que sea bonita 72. Buen contenido y bien actualizado 73. Estndares web 74. Publicita tu web a los cuatro vientos 75. Medir, medir, medir 76. No la abandones 77. Tu imagen en la red 78. Gracias Fuentes: Red.es, Domestika, Vexlan, Cristbal Fransi, E., Barrabs, Google, Territorio Creativo, ONTSI, adigital y fuentes propias. Imgenes: Flickr CC (El Colo Eiguren, NattyDreaddd, Huladancer, Tilanevesen, Sebastin Ramos, Antonio Martnez, Redjar) y Fotolia Contenido: Licencia Creative Commons 3.0 Valladolid noviembre 2010 Jezabel Gonzlez Diez jezabel.gonzalez@vitalinnova.com www.vitalinnova.com/blog twitter.com/jezis twitter.com/vitalinnova </p>