Conversion Web Madrid Tecnologia 2010

530 views
420 views

Published on

El taller, con la colaboración del Ayto. de Madrid, estuvo enfocado en cómo lograr que los usuarios que llegan a nuestro sitio web permanezcan en él y acaben completando las acciones que deseamos que realicen en nuestro sitio, ya sean compras, solicitudes de información, contactos telefónicos o cualquier otra acción.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
530
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Conversion Web Madrid Tecnologia 2010

  1. 1. Pedro Jesús González www.domestika.com DISEÑO DE CONVERSIÓN 30 - Sept - 2010 www.domestika.org
  2. 2. <ul><li>10.000 clientes, 5 años </li></ul><ul><li>120 profesionales </li></ul><ul><li>Socios: madrid tecnología, camerpyme, ministerio industria, google, paypal, vocento, yahoo! </li></ul><ul><li>Tecnología propia </li></ul><ul><li>Domestika.org </li></ul>
  3. 3. <ul><li>Una idea </li></ul><ul><li>Un montón de ejemplos </li></ul><ul><li>Algunas herramientas </li></ul><ul><li>Algunas técnicas </li></ul><ul><li>Una ilusión </li></ul>En estas dos horas
  4. 4. ¿Qué es una Diseño de Conversión?
  5. 5. Es aquel que no está realizado pensando en su dueño <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  6. 6. Aquel en la que se tienen en cuenta todos los navegadores <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  7. 7. En el que se tienen en cuenta los detalles <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  8. 8. La que sabe adaptar las herramientas a las necesidades… <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  9. 9. El que no aporta información irrelevante para el usuario <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  10. 10. El que no aporta información contradictoria <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  11. 11. Tiene en cuenta las necesidades de los usuarios <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  12. 12. Aprovecha el espacio visual <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  13. 13. Sin sobrecargarlo <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  14. 14. Ofrece ideas innovadoras a problemas comunes <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  15. 15. Porque la competencia está a un clic de distancia <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  16. 16. No tiene fallos de programación <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  17. 17. Los textos son redactados de forma sincera y pensando en el beneficio del usuario <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  18. 18. Siendo breves siempre que sea posible… <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  19. 19. … pero sin ser imprecisos <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  20. 20. No comete faltas de ortografía <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  21. 21. y cuida las imagénes utilizadas <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  22. 22. Tiene en cuenta que los usuarios van a opinar <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  23. 23. Ofrece la misma información en toda la web <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  24. 24. Cuida los mensajes de error <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul><ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  25. 25. Cuida su identidad visual <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  26. 26. No ofrece ambigüedades <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  27. 27. No pretende dar una solución a todas las necesidades de negocio <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  28. 28. … y tiene unos objetivos claramente definidos. <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  29. 29. Ofrece una navegación limpia y segura <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  30. 30. Establece claras llamadas a la acción <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  31. 31. … pues los usuarios las cumplimos. <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  32. 32. Los textos son redactados de forma sencilla <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  33. 33. Nunca sacrifica función a favor de un malentendido Diseño. <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  34. 34. Es actualizado frecuentemente… <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  35. 35. Atiende a usuarios con distintas necesidades <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  36. 36. Ofrece siempre una navegación segura <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  37. 37. Nunca incluye elementos como “En construcción” <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  38. 38. Es unívoco <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  39. 39. De verdad… <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  40. 40. … y sus contenidos son revisados antes de publicarlos <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  41. 41. Es, en definitiva, lo contrario a esto: <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  42. 42. ¿y todo esto por qué?
  43. 43. AIDA
  44. 44. A wareness I nterest D esire A ction
  45. 45. El embudo de conversión Usuarios de Internet Encuentran nuestra web Navegan por nuestra web Encuentran nuestro formulario, tienda online… Los que empieza un proceso Los que lo terminan Los que nos recomiendan Los que vuelven Marketing Diseño Web + Usabilidad = Diseño de Interacción Servicio, claro… “ El embudo de conversión surge de la Analítica Web”
  46. 46. SEO SOCIAL MEDIA SEM Analítica Web Atraer Tráfico + + + + = Una estrategia general:
  47. 47. Diseño Orientado Usabilidad Accesibilidad Analítica Web Conversión + + + + = Una estrategia general:
  48. 48. + + + = Éxito Online Atraer Tráfico Conversión La clave:
  49. 49. Vamos a ir viendo ejemplos…
  50. 50. Arquitectura web
  51. 51. <ul><li>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. </li></ul>Vender césped artificial Descargar un plano
  52. 52. <ul><li>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. </li></ul>Vender varios productos ¿y este?
  53. 53. <ul><li>Información de contacto clara . Destacada y bien ubicada, fácil de encontrar desde cualquier punto de la web. </li></ul>¿1 segundo? Contando…
  54. 54. <ul><li>Rótulos significativos y estándar . Las palabras elegidas como menú de navegación deben ser simples y descriptivas. </li></ul><ul><ul><li>Punto de vista del usuario, no reinventemos la rueda, ¿otros varios? </li></ul></ul>En casa del herrero… <ul><li>URLs claras y únicas . Cada página, una URL descriptiva, única y permanente. </li></ul><ul><ul><ul><li>Dinámica Vs Estática (y amigable) Vs Ninguna </li></ul></ul></ul>
  55. 55. Arquitectura y usabilidad web (II) <ul><li>Folksonomías Vs Taxonomías </li></ul><ul><ul><li>Etiquetas y multicategorización </li></ul></ul>-> Fotos vacaciones -> Por fecha -> Por destino -> Textos -> Trabajo -> Personales
  56. 56. <ul><li>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. </li></ul>Rastreator Asesorseguros.com
  57. 57. <ul><li>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. </li></ul>UPV Por otro lado
  58. 58. <ul><li>Landing Page . Sirven a un único objetivo. Call to action, beneficios frente a características, formularios, sin menús… </li></ul>
  59. 59. Diseño gráfico en la web (II) <ul><li>Jugando con los espacios en blanco . Pueden existir, pero en Internet tienen un coste mayor. Ayudan en el equilibrio visual. </li></ul><ul><li>La jerarquía visual . El peso gráfico de los elementos debe establecer una jerarquía según la estructura web. La cabecera, logo y claim ganan peso, pero podría hacerlo también una imagen de producto. </li></ul><ul><li>Uso tipográfico adecuado . El tamaño, tipo, resaltados, ancho de línea, alineaciones, etc de los textos son clave para la legibilidad y la organización de la información. Hacer uso de negritas, cursivas, titulares para facilitar la lectura. </li></ul><ul><li>Contraste entre fuente y fondo . Buscar un efecto positivado, de letra oscura sobre fondo claro. </li></ul>http://blog.duopixel.com/justified.png
  60. 60. (Este cómo se llamaba…?¿Pedro, qué más?)
  61. 61. (Este cómo se llamaba…?¿Pedro, qué más?
  62. 62. <ul><li>Primera impresión. Five Second Test </li></ul><ul><li>Hábitos de navegación. Eyetracking </li></ul><ul><li>Analítica. G. Analytics, Omniture, Reinvigorate </li></ul><ul><li>A/B Testing. G. Website Optimizer </li></ul>Herramientas y Técnicas
  63. 63. <ul><li>Permite evaluar bocetos </li></ul><ul><li>Ayuda a convertir </li></ul>Five Second Test <ul><li>www.fivesecondtest.com </li></ul>
  64. 64. <ul><li>Permite evaluar conductas </li></ul><ul><li>Ayuda a convertir </li></ul>Eyetracking <ul><li>http://www.labsmedia.com/clickheat/index.html </li></ul><ul><li>http://www.alt64.com/ </li></ul>
  65. 65. <ul><li>Permite reconstruir patrones de navegación </li></ul><ul><li>Permite ver atenciones máximas </li></ul>Eyetracking
  66. 66. Eyetracking
  67. 67. Eyetracking
  68. 68. A/B Testing <ul><li>http://www.google.com/support/websiteoptimizer/?hl=es </li></ul><ul><li>http://www.wichtestwon.com/ </li></ul>
  69. 69. Para terminar…
  70. 71. “ Sé que la mitad de mi gasto publicidad no me aporta beneficios, pero no sé que mitad” John Wanamaker Planificar y Definir Diseñar o Ejecutar Evaluar Tanto en Diseño Web como en Marketing Online
  71. 72. Gracias, [email_address] Próximamente: http://conversionmarketing.es

×