Puerta bonita

60
domestika.com Ponente: Pedro Jesús González www.domestika.co m Marketing Digital para la Pyme Aula Puerta Bonita - 07 Sept 2010 www.domestika.org

description

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

Transcript of Puerta bonita

Page 1: Puerta bonita

domestika.com

Ponente: Pedro Jesús Gonzálezwww.domestika.com

Marketing Digital para la Pyme

Aula Puerta Bonita - 07 Sept 2010 www.domestika.org

Page 2: Puerta bonita

domestika.com

Los objetivos de mi web

Ya, pero… definir objetivos es la clave. (Es casi más díficil que cumplirlos)

• Aumentar mis

beneficios, ¿no?

Page 3: Puerta bonita

domestika.com

0- Y todo por un embudo…

Page 4: Puerta bonita

domestika.com

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”

Page 5: Puerta bonita

domestika.com

Estrategia Parte 1

Conciencia

Consideracion

Objetivo

Embudo de Conversión

Estrategia Parte 2

Page 6: Puerta bonita

domestika.com

Diseño Orientado

Usabilidad

Accesibilidad

Analítica Web

Conversión+ +

+

+

=

Una estrategia general:

Page 7: Puerta bonita

domestika.com

SEO

SOCIAL MEDIA

SEM

Analítica Web

Atraer Tráfico+ +

+

+

=

Una estrategia general:

Page 8: Puerta bonita

domestika.com

+ ++ = Éxito OnlineAtraer Tráfico Conversión

La clave:

Page 9: Puerta bonita

domestika.com

1.- Fijemos los objetivos de la página

• Información corporativa.

• ¿Venta online?

• ¿Catálogo online amplio o monoproducto?

Diseño Orientado

Page 10: Puerta bonita

domestika.com

1.- Fijemos los objetivos de la página

Diseño Orientado

Page 11: Puerta bonita

domestika.com

2.- La casa en orden: la estructura web

• Definición de layouts / wireframes.

• Sitemap / mapa de la web

• Tipo de navegación

• Niveles de navegación

Diseño Orientado

Page 12: Puerta bonita

domestika.com

Estructura Web

• 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. Estilo de redacción.

• 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.

Diseño Orientado

Page 13: Puerta bonita

domestika.com

Estructura Web

• Máximo 7 items de navegación.

• Breadcrums o migas de pan. Muestra el camino hacia atrás. También Tags

• 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.

Diseño Orientado

Page 14: Puerta bonita

domestika.com

Estructura Web

• 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 flash. Usar elementos flash para introducir toques de dinamismo en la web (cabecera, banners, etc).

Diseño Orientado

Page 15: Puerta bonita

domestika.com

3.- Aspecto Visual

• La estética tiene una utilidad funcional.

• La imagen de nuestra empresa

• Las tendencias existen, como en la moda, y las webs se quedan “obsoletas”.

• Ojo con el flash y las webs sobrecargadas

Diseño Orientado

Page 16: Puerta bonita

domestika.com

3.- Aspecto Visual Diseño Orientado

Page 17: Puerta bonita

domestika.com

Diseño gráfico en la web

• 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.

• 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.

• El logotipo de la empresa debe integrarse. En ocasiones se puede modificar ligeramente en color o forma el logotipo para evitar disonancias visuales.

• 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.

Diseño Orientado

Page 18: Puerta bonita

domestika.com

Diseño gráfico en la web (II)

• Jugando con los espacios en blanco. Pueden existir, pero en Internet tienen un coste mayor. Ayudan en el equilibrio visual.

• 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.

• 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.

• Contraste entre fuente y fondo. Buscar un efecto positivado, de letra oscura sobre fondo claro.

Diseño Orientado

Page 19: Puerta bonita

domestika.com

Diseño gráfico en la web (III)

• 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.

• 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.

• 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.

• 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.

Diseño Orientado

Page 20: Puerta bonita

domestika.com

Accesibilidad web

• 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).– Aumenta el número de visitantes a nuestra web.– Disminuye los costes de desarrollo.– Reduce el tiempo de carga de la web.

• XHTML y CSS. Hoy día, un estándar de maquetación web, separa los contenidos del diseño, y facilita la accesibilidad.

• ¿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

Accesibilidad

Page 21: Puerta bonita

domestika.com

Accesibilidad web

Accesibilidad

Page 22: Puerta bonita

domestika.com

Usabilidad web

Usabilidad

Page 23: Puerta bonita

domestika.com

Usabilidad web

Usabilidad

Page 24: Puerta bonita

domestika.com

Usabilidad web

Usabilidad

Page 25: Puerta bonita

domestika.com

Usabilidad web

Usabilidad

Page 26: Puerta bonita

domestika.com

Usabilidad web

Usabilidad

Page 27: Puerta bonita

domestika.com

Usabilidad web

Usabilidad

Page 28: Puerta bonita

domestika.com

En qué se traduce todo lo anterior…

Page 29: Puerta bonita

domestika.com

Conversión. Test A/B

vs

Analítica Web

Page 30: Puerta bonita

domestika.com

Analítica Web

Page 31: Puerta bonita

domestika.com

SEO

SOCIAL MEDIA

SEM

Analítica Web

Atraer Tráfico+ +

+

+

=

Una estrategia general:

Page 32: Puerta bonita

domestika.com

Resultados Orgánicos

Posicionamiento buscadores (SEO)

SEO

Page 33: Puerta bonita

domestika.com

1. Factores internos web (técnicos): gestor de contenidos - optimización de títulos, meta-tags, XHTML y CSS, URLs.

2. Factores internos web (contenidos): optimización de contenidos, palabras clave, BUEN CONTENIDO.

3. Factores externos: enlaces entrantes (link building, SMO).

• Resultados a largo plazo.• No se puede garantizar la primera posición por la

palabra que deseamos.

Posicionamiento buscadores (SEO)

SEO

Page 34: Puerta bonita

domestika.com

Elementos SEO

• Meta tags: para resumir la descripción de la página en buscadores.

• Title: muy importante para el posicionamiento. No más de 7-10 palabras relevantes para la búsqueda. Title único por cada página.

• Keywords: utilizar palabras clave dentro del contenido. Las keywords de html prácticamente no son usadas por los buscadores. Usar enlaces internos.

• URL: importancia que sean descriptivas y tengan palabras clave.

• Redundancia: de etiquetas descriptivas en imágenes, flash y elementos multimedia.

SEO

Page 35: Puerta bonita

domestika.com

Enlaces patrocinados en buscadores y comparadores de precios

Directorios locales

Directorios sectoriales

Marketing en buscadores y directoriosSEM

Page 36: Puerta bonita

domestika.com

Enlaces Patrocinados

Enlaces patrocinados en buscadores

SEM

Page 37: Puerta bonita

domestika.com

1. Sólo se paga por cada visita recibida: desde 0,01 €/visita y en función de la competencia.

2. Resultados inmediatos: en menos de 2 días la campaña está en marcha y se reciben visitas.

3. Planificación y Vigilancia: Es necesario trabajar las palabras clave compradas, los anuncios dinámicos y el

coste por click.

Puntos clave: presupuesto máximo diario, cpc medio, publicidad contextual,

horarios, concordancia, palabras negativas…

TASA DE CONVERSIÓN

Enlaces patrocinados en buscadores

SEM

Page 38: Puerta bonita

domestika.com

1. Fuente de información para servicios locales: las guías locales en Internet.2. Posibilidad de contratar posiciones destacadas en los resultados de

búsqueda3. Búsqueda local a través de mapas4. Ayuda a mejorar nuestro posicionamiento orgánico en buscadores:

enlaces.

Directorios locales

SEM

Page 39: Puerta bonita

domestika.com

1. Guías de Servicios especializadas por sector2. Posibilidad de contratar posiciones publicitarias3. Ayuda a mejorar nuestro posicionamiento orgánico en

buscadores.

Directorios sectoriales

SEM

Page 40: Puerta bonita

domestika.com

Dispersión del contenido Social Media

Page 41: Puerta bonita

domestika.com

-Sacar el contenido del sitio

- No centralizar el contenido

- Bidireccional. Traer visitantes al sitio

- Alcanzar nichos

Dispersión Social Media

Page 42: Puerta bonita

domestika.com

Dispersión Social Media

Page 43: Puerta bonita

domestika.com

- SMO. Optimizar su difusión. “Share on”

- Redes Sociales. Crear grupos y sitios

- Blogging y microblogging

- Newsletters

- Feeds (RSS, Atom)

Dispersión Social Media

Page 44: Puerta bonita

domestika.com

- Orientadas a un público

- Orientadas a un momento

- Orientadas a una decisión

Landing Page

Bola Extra 1

Page 45: Puerta bonita

domestika.com

- Una técnica de Marketing

Online. Marketing Directo.

E-mail marketing

- 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

Page 46: Puerta bonita

domestika.com

Herramientas y Técnicas

Page 47: Puerta bonita

domestika.com

- Primera impresión. Five Second Test

- Hábitos de navegación. Eyetracking

- Analítica. G. Analytics, Omniture

- A/B Testing. G. Website Optimizer

Herramientas y Técnicas

Page 48: Puerta bonita

domestika.com

- Permite evaluar bocetos

- Ayuda a convertir

Five Second Test

-www.fivesecondtest.com

Page 49: Puerta bonita

domestika.com

- Permite evaluar conductas

- Ayuda a convertir

Eyetracking

-http://www.labsmedia.com/clickheat/index.html

- http://www.alt64.com/

Page 50: Puerta bonita

domestika.com

- Permite reconstruir patrones de navegación

- Permite ver atenciones máximas

Eyetracking

Page 51: Puerta bonita

domestika.com

Eyetracking

Page 52: Puerta bonita

domestika.com

Eyetracking

Page 53: Puerta bonita

domestika.com

- La evaluación “refinitiva”

- Es iterativo

- Es empírico

A/B Testing

-http://www.google.com/support/websiteoptimizer/?hl=es- http://www.wichtestwon.com/

¿Recordáis la diapositiva 27?

Page 54: Puerta bonita

domestika.com

A/B Testing

• ¡Ganó esta!

• Generó un 14.9 % más de registros

• El 49% pensó que no

• El 49% estaba equivocado

Page 55: Puerta bonita

domestika.com

A/B Testing

• Pensar y probar

• Es gratis

• No falla

• Siempre sobre nuestro target (es nuestra web!)

Page 56: Puerta bonita

domestika.com

IMAGENAnalítica: Medir, medir y volver a medir

• Cuántas visitas, cuántos visitantes únicos, cuántas páginas vistas.

• Contenido más visto y tasa de rebote.

• Áreas no usables. Checkout

• Enlaces entrantes. Orígenes

• “Keywords” en buscadores.

• Éxito de campañas publicitarias.

- http://analytics.google.com- http://omniture.com

Page 57: Puerta bonita

domestika.com

Para terminar…

Page 58: Puerta bonita

domestika.com

Page 59: Puerta bonita

domestika.com

“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

Page 60: Puerta bonita

domestika.com

Gracias,

[email protected]