Puerta bonita

2.522 visualizaciones

Publicado el

Taller ofrecido por Pedro Jesús González dentro de la colaboración de Domestika en Madrid Tecnología

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
2.522
En SlideShare
0
De insertados
0
Número de insertados
1.522
Acciones
Compartido
0
Descargas
20
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Puerta bonita

  1. 1. Ponente: Pedro Jesús González www.domestika.com Marketing Digital para la Pyme Aula Puerta Bonita - 07 Sept 2010 www.domestika.org
  2. 2. Los objetivos de mi web Ya, pero… definir objetivos es la clave. (Es casi más díficil que cumplirlos) <ul><li>Aumentar mis </li></ul><ul><li>beneficios, ¿no? </li></ul>
  3. 3. 0- Y todo por un embudo…
  4. 4. 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”
  5. 5. Estrategia Parte 1 Conciencia Consideracion Objetivo Embudo de Conversión Estrategia Parte 2
  6. 6. Diseño Orientado Usabilidad Accesibilidad Analítica Web Conversión + + + + = Una estrategia general:
  7. 7. SEO SOCIAL MEDIA SEM Analítica Web Atraer Tráfico + + + + = Una estrategia general:
  8. 8. + + + = Éxito Online Atraer Tráfico Conversión La clave:
  9. 9. 1.- Fijemos los objetivos de la página <ul><li>Información corporativa. </li></ul><ul><li>¿Venta online? </li></ul><ul><li>¿Catálogo online amplio o monoproducto? </li></ul>Diseño Orientado
  10. 10. 1.- Fijemos los objetivos de la página Diseño Orientado
  11. 11. 2.- La casa en orden: la estructura web <ul><li>Definición de layouts / wireframes. </li></ul><ul><li>Sitemap / mapa de la web </li></ul><ul><li>Tipo de navegación </li></ul><ul><li>Niveles de navegación </li></ul>Diseño Orientado
  12. 12. Estructura Web <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><ul><li>URLs claras y únicas . Cada página, una URL descriptiva, única y permanente. </li></ul><ul><li>Información de contacto clara . Destacada y bien ubicada, fácil de encontrar desde cualquier punto de la web. </li></ul><ul><li>Rótulos significativos y estándar . Las palabras elegidas como menú de navegación deben ser simples y descriptivas. Estilo de redacción. </li></ul><ul><li>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. </li></ul>Diseño Orientado
  13. 13. Estructura Web <ul><li>Máximo 7 items de navegación . </li></ul><ul><li>Breadcrums o migas de pan . Muestra el camino hacia atrás. También Tags </li></ul><ul><li>Enlace a la home en el logo . Recurso sencillo para facilitar la vuelta a la página de inicio. </li></ul><ul><li>Enlace a la página de inicio desde todas las páginas . </li></ul><ul><li>Enlaces claros y bien identificados en todo el site . Con estilo propio y bien visibles. </li></ul><ul><li>Aprovechar la jerarquía visual para estructurar información . Estableciendo niveles de importancia del contenido y poniéndolos en los sitios más visibles. </li></ul>Diseño Orientado
  14. 14. Estructura Web <ul><li>Evitar sobrecarga informativa . No más de 7 ± 2 elementos por página. </li></ul><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><ul><li>Información de estado. En tareas complejas (como una compra), informar de dónde se está y lo que falta para terminar. </li></ul><ul><li>Evitar flash innecesario . No usar intros en flash, no construir páginas completamente flash. Usar elementos flash para introducir toques de dinamismo en la web (cabecera, banners, etc). </li></ul>Diseño Orientado
  15. 15. 3.- Aspecto Visual <ul><li>La estética tiene una utilidad funcional. </li></ul><ul><li>La imagen de nuestra empresa </li></ul><ul><li>Las tendencias existen, como en la moda, y las webs se quedan “obsoletas”. </li></ul><ul><li>Ojo con el flash y las webs sobrecargadas </li></ul>Diseño Orientado
  16. 16. 3.- Aspecto Visual Diseño Orientado
  17. 17. Diseño gráfico en la web <ul><li>Look & feel adaptado a los objetivos y al sector . Los colores y la imagen del “site” debe mantener una “mínima” correspondencia con la actividad de la empresa. </li></ul><ul><li>La cabecera marca la pauta . En términos de estilo, tono, calidad, actividad de la empresa. Puede llegar a definir el tono cromático del resto de la web. </li></ul><ul><li>El logotipo de la empresa debe integrarse . En ocasiones se puede modificar ligeramente en color o forma el logotipo para evitar disonancias visuales. </li></ul><ul><li>Evitemos ruido visual . Lograr un balance en peso gráfico y en estructura: estética, contenidos y usabilidad. Ojo con las imágenes de fondo (sólo en partes externas). Animaciones mínimas. </li></ul>Diseño Orientado
  18. 18. 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>Diseño Orientado
  19. 19. Diseño gráfico en la web (III) <ul><li>Evitar el sonido ambiental . Salvo que la actividad lo requiera, el sonido o música no aporta nada. A veces, puede estar incorporado en un flash. En todo caso, se debe poder apagar el sonido. </li></ul><ul><li>Uso o abuso de ornamentos o recursos gráficos. Pueden aportar equilibrio, belleza, pero deben usarse adecuadamente. Pueden estar bajos de tono, no son protagonistas. </li></ul><ul><li>Proporciones de los elementos de la web . En función de la actividad, el objetivo de la web, el tamaño de la cabecera, por ejemplo, puede variar. </li></ul><ul><li>La paleta cromática . Definir paletas cromáticas corporativas y mantener los tonos en toda la web, incluyendo imágenes, ilustraciones o fotos en la medida de lo posible. </li></ul>Diseño Orientado
  20. 20. Accesibilidad web <ul><li>Accesibilidad web: Capacidad de acceder a una web y sus contenidos independientemente de la discapacidad de un usuario o de su contexto de uso (dispositivos, etc). </li></ul><ul><ul><li>Aumenta el número de visitantes a nuestra web. </li></ul></ul><ul><ul><li>Disminuye los costes de desarrollo. </li></ul></ul><ul><ul><li>Reduce el tiempo de carga de la web. </li></ul></ul><ul><li>XHTML y CSS. Hoy día, un estándar de maquetación web, separa los contenidos del diseño, y facilita la accesibilidad. </li></ul><ul><li>¿Visible en cuántos navegadores? A principios de 2009, Internet Explorer 6, IE7 y Firefox tienen un ratio de uso en España de un 4/4/2 aproximadamente. Hoy, 6/4 </li></ul>Accesibilidad
  21. 21. Accesibilidad web Accesibilidad
  22. 22. Usabilidad web Usabilidad
  23. 23. Usabilidad web Usabilidad
  24. 24. Usabilidad web Usabilidad
  25. 25. Usabilidad web Usabilidad
  26. 26. Usabilidad web Usabilidad
  27. 27. Usabilidad web Usabilidad
  28. 28. En qué se traduce todo lo anterior…
  29. 29. Conversión. Test A/B vs Analítica Web
  30. 30. Analítica Web
  31. 31. SEO SOCIAL MEDIA SEM Analítica Web Atraer Tráfico + + + + = Una estrategia general:
  32. 32. Resultados Orgánicos Posicionamiento buscadores (SEO) SEO
  33. 33. <ul><li>Factores internos web (t écnicos) : gestor de contenidos - optimización de títulos, meta-tags, XHTML y CSS, URLs. </li></ul><ul><li>Factores internos web (contenidos): optimizaci ón de contenidos, palabras clave, BUEN CONTENIDO . </li></ul><ul><li>Factores externos: enlaces entrantes (link building, SMO). </li></ul><ul><li>Resultados a largo plazo. </li></ul><ul><li>No se puede garantizar la primera posición por la palabra que deseamos. </li></ul>Posicionamiento buscadores (SEO) SEO
  34. 34. Elementos SEO <ul><li>Meta tags: para resumir la descripción de la página en buscadores. </li></ul><ul><li>Title: muy importante para el posicionamiento. No más de 7-10 palabras relevantes para la búsqueda. Title único por cada página. </li></ul><ul><li>Keywords: utilizar palabras clave dentro del contenido. Las keywords de html prácticamente no son usadas por los buscadores. Usar enlaces internos. </li></ul><ul><li>URL : importancia que sean descriptivas y tengan palabras clave. </li></ul><ul><li>Redundancia : de etiquetas descriptivas en imágenes, flash y elementos multimedia. </li></ul>SEO
  35. 35. Marketing en buscadores y directorios Enlaces patrocinados en buscadores y comparadores de precios Directorios locales Directorios sectoriales SEM
  36. 36. Enlaces Patrocinados Enlaces patrocinados en buscadores SEM
  37. 37. <ul><li>Sólo se paga por cada visita recibida: desde 0,01 €/visita y en función de la competencia. </li></ul><ul><li>Resultados inmediatos: en menos de 2 días la campaña está en marcha y se reciben visitas. </li></ul><ul><li>Planificación y Vigilancia: </li></ul><ul><ul><li>Es necesario trabajar las palabras clave compradas, los anuncios dinámicos y el coste por click. </li></ul></ul><ul><ul><li>Puntos clave: presupuesto máximo diario, cpc medio, publicidad contextual, horarios, concordancia, palabras negativas… </li></ul></ul><ul><ul><li>TASA DE CONVERSIÓN </li></ul></ul>Enlaces patrocinados en buscadores SEM
  38. 38. <ul><li>Fuente de información para servicios locales: las guías locales en Internet. </li></ul><ul><li>Posibilidad de contratar posiciones destacadas en los resultados de búsqueda </li></ul><ul><li>Búsqueda local a través de mapas </li></ul><ul><li>Ayuda a mejorar nuestro posicionamiento orgánico en buscadores: enlaces. </li></ul>Directorios locales SEM
  39. 39. <ul><li>Guías de Servicios especializadas por sector </li></ul><ul><li>Posibilidad de contratar posiciones publicitarias </li></ul><ul><li>Ayuda a mejorar nuestro posicionamiento orgánico en buscadores. </li></ul>Directorios sectoriales SEM
  40. 40. Dispersión del contenido Social Media
  41. 41. <ul><li>Sacar el contenido del sitio </li></ul><ul><li>No centralizar </li></ul><ul><li>el contenido </li></ul><ul><li>Bidireccional. Traer visitantes al sitio </li></ul><ul><li>Alcanzar nichos </li></ul>Dispersión Social Media
  42. 42. Dispersión Social Media
  43. 43. <ul><li>SMO. Optimizar su difusión. “Share on” </li></ul><ul><li>Redes Sociales. Crear grupos y sitios </li></ul><ul><li>Blogging y microblogging </li></ul><ul><li>Newsletters </li></ul><ul><li>Feeds (RSS, Atom) </li></ul>Dispersión Social Media
  44. 44. <ul><li>Orientadas a un público </li></ul><ul><li>Orientadas a un momento </li></ul><ul><li>Orientadas a una decisión </li></ul>Landing Page Bola Extra 1
  45. 45. E-mail marketing - Una técnica de Marketing Online. Marketing Directo. - Envío de información comercial por email - Permite la segmentación - Permite la evaluación “ Sé que el 50% de mi gasto en publicidad es inutil. El problema es que no sé qué 50% es” R. P. Kleinman Bola Extra 2
  46. 46. Herramientas y Técnicas
  47. 47. <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 </li></ul><ul><li>A/B Testing. G. Website Optimizer </li></ul>Herramientas y Técnicas
  48. 48. <ul><li>Permite evaluar bocetos </li></ul><ul><li>Ayuda a convertir </li></ul>Five Second Test <ul><li>www.fivesecondtest.com </li></ul>
  49. 49. <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>
  50. 50. <ul><li>Permite reconstruir patrones de navegación </li></ul><ul><li>Permite ver atenciones máximas </li></ul>Eyetracking
  51. 51. Eyetracking
  52. 52. Eyetracking
  53. 53. <ul><li>La evaluación “refinitiva” </li></ul><ul><li>Es iterativo </li></ul><ul><li>Es empírico </li></ul>A/B Testing <ul><li>http://www.google.com/support/websiteoptimizer/?hl=es </li></ul><ul><li>http://www.wichtestwon.com/ </li></ul>¿Recordáis la diapositiva 27?
  54. 54. A/B Testing <ul><li>¡Ganó esta! </li></ul><ul><li>Generó un 14.9 % más de registros </li></ul><ul><li>El 49% pensó que no </li></ul><ul><li>El 49% estaba equivocado </li></ul>
  55. 55. A/B Testing <ul><li>Pensar y probar </li></ul><ul><li>Es gratis </li></ul><ul><li>No falla </li></ul><ul><li>Siempre sobre nuestro target (es nuestra web!) </li></ul>
  56. 56. Analítica: Medir, medir y volver a medir <ul><ul><li>Cuántas visitas, cuántos visitantes únicos , cuántas páginas vistas. </li></ul></ul><ul><ul><li>Contenido más visto y tasa de rebote . </li></ul></ul><ul><ul><li>Áreas no usables. Checkout </li></ul></ul><ul><ul><li>Enlaces entrantes. Orígenes </li></ul></ul><ul><ul><li>“ Keywords” en buscadores . </li></ul></ul><ul><ul><li>Éxito de campañas publicitarias. </li></ul></ul>IMAGEN <ul><li>http://analytics.google.com </li></ul><ul><li>http://omniture.com </li></ul>
  57. 57. Para terminar…
  58. 59. “ 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
  59. 60. Gracias, [email_address]

×