conversion web madrid tecnologia 2010
DESCRIPTION
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.TRANSCRIPT
![Page 1: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/1.jpg)
Pedro Jesús Gonzálezwww.domestika.com
DISEÑO DE CONVERSIÓN
30 - Sept - 2010 www.domestika.org
![Page 2: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/2.jpg)
— 10.000 clientes, 5 años
— 120 profesionales
— Socios: madrid tecnología, camerpyme, ministerio industria, google, paypal, vocento, yahoo!
— Tecnología propia
— Domestika.org
![Page 3: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/3.jpg)
— Una idea
— Un montón de ejemplos
— Algunas herramientas
— Algunas técnicas
— Una ilusión
En estas dos horas
![Page 4: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/4.jpg)
¿Qué es una Diseño de Conversión?
![Page 5: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/5.jpg)
Es aquel que no está realizado pensando en su dueño
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 6: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/6.jpg)
Aquel en la que se tienen en cuenta todos los navegadores
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 7: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/7.jpg)
En el que se tienen en cuenta los detalles
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 8: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/8.jpg)
La que sabe adaptar las herramientas a las necesidades…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 9: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/9.jpg)
El que no aporta información irrelevante para el usuario
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 10: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/10.jpg)
El que no aporta información contradictoria
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 11: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/11.jpg)
Tiene en cuenta las necesidades de los usuarios
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 12: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/12.jpg)
Aprovecha el espacio visual
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 13: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/13.jpg)
Sin sobrecargarlo
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 14: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/14.jpg)
Ofrece ideas innovadoras a problemas comunes
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 15: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/15.jpg)
Porque la competencia está a un clic de distancia
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 16: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/16.jpg)
No tiene fallos de programación
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 17: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/17.jpg)
Los textos son redactados de forma sincera y pensando en el beneficio del usuario
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 18: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/18.jpg)
Siendo breves siempre que sea posible…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 19: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/19.jpg)
… pero sin ser imprecisos
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 20: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/20.jpg)
No comete faltas de ortografía
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 21: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/21.jpg)
y cuida las imagénes utilizadas
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 22: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/22.jpg)
Tiene en cuenta que los usuarios van a opinar
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 23: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/23.jpg)
Ofrece la misma información en toda la web
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 24: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/24.jpg)
Cuida los mensajes de error
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 25: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/25.jpg)
Cuida su identidad visual
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 26: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/26.jpg)
No ofrece ambigüedades
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 27: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/27.jpg)
No pretende dar una solución a todas las necesidades de negocio
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 28: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/28.jpg)
… y tiene unos objetivos claramente definidos.
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 29: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/29.jpg)
Ofrece una navegación limpia y segura
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 30: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/30.jpg)
Establece claras llamadas a la acción
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 31: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/31.jpg)
… pues los usuarios las cumplimos.
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 32: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/32.jpg)
Los textos son redactados de forma sencilla
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 33: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/33.jpg)
Nunca sacrifica función a favor de un malentendido Diseño.
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 34: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/34.jpg)
Es actualizado frecuentemente…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 35: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/35.jpg)
Atiende a usuarios con distintas necesidades
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 36: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/36.jpg)
Ofrece siempre una navegación segura
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 37: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/37.jpg)
Nunca incluye elementos como “En construcción”
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 38: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/38.jpg)
Es unívoco
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 39: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/39.jpg)
De verdad…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 40: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/40.jpg)
… y sus contenidos son revisados antes de publicarlos
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 41: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/41.jpg)
Es, en definitiva, lo contrario a esto:
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 42: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/42.jpg)
¿y todo esto por qué?
![Page 43: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/43.jpg)
AIDA
![Page 44: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/44.jpg)
AwarenessInterestDesireAction
![Page 45: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/45.jpg)
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 46: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/46.jpg)
SEO
SOCIAL MEDIA
SEM
Analítica Web
Atraer Tráfico+ +
+
+
=
Una estrategia general:
![Page 47: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/47.jpg)
Diseño Orientado
Usabilidad
Accesibilidad
Analítica Web
Conversión+ +
+
+
=
Una estrategia general:
![Page 48: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/48.jpg)
+ ++ = Éxito OnlineAtraer Tráfico Conversión
La clave:
![Page 49: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/49.jpg)
Vamos a ir viendo ejemplos…
![Page 50: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/50.jpg)
Arquitectura web
![Page 51: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/51.jpg)
• 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.
Vender césped artificial Descargar un plano
![Page 52: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/52.jpg)
• 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.
Vender varios productos ¿y este?
![Page 53: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/53.jpg)
• Información de contacto clara. Destacada y bien ubicada, fácil de encontrar desde cualquier punto de la web.
¿1 segundo? Contando…
![Page 54: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/54.jpg)
• Rótulos significativos y estándar. Las palabras elegidas como menú de navegación deben ser simples y descriptivas.
Punto de vista del usuario, no reinventemos la rueda, ¿otros varios?
En casa del herrero…
• URLs claras y únicas. Cada página, una URL descriptiva, única y permanente.
Dinámica Vs Estática (y amigable) Vs Ninguna
![Page 55: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/55.jpg)
Arquitectura y usabilidad web (II)
• Folksonomías Vs Taxonomías
Etiquetas y multicategorización
-> Fotos vacaciones-> Por fecha-> Por destino
-> Textos-> Trabajo-> Personales
![Page 56: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/56.jpg)
• 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.
Rastreator
Asesorseguros.com
![Page 57: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/57.jpg)
• 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.
UPVPor otro lado
![Page 58: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/58.jpg)
• Landing Page. Sirven a un único objetivo. Call to action, beneficios frente a características, formularios, sin menús…
![Page 59: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/59.jpg)
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.
http://blog.duopixel.com/justified.png
![Page 60: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/60.jpg)
(Este cómo se llamaba…?¿Pedro, qué más?)
![Page 61: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/61.jpg)
(Este cómo se llamaba…?¿Pedro, qué más?
![Page 62: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/62.jpg)
- Primera impresión. Five Second Test
- Hábitos de navegación. Eyetracking
- Analítica. G. Analytics, Omniture, Reinvigorate
- A/B Testing. G. Website Optimizer
Herramientas y Técnicas
![Page 63: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/63.jpg)
- Permite evaluar bocetos
- Ayuda a convertir
Five Second Test
-www.fivesecondtest.com
![Page 64: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/64.jpg)
- Permite evaluar conductas
- Ayuda a convertir
Eyetracking
-http://www.labsmedia.com/clickheat/index.html- http://www.alt64.com/
![Page 65: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/65.jpg)
- Permite reconstruir patrones de navegación
- Permite ver atenciones máximas
Eyetracking
![Page 66: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/66.jpg)
Eyetracking
![Page 67: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/67.jpg)
Eyetracking
![Page 68: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/68.jpg)
A/B Testing
-http://www.google.com/support/websiteoptimizer/?hl=es- http://www.wichtestwon.com/
![Page 69: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/69.jpg)
Para terminar…
![Page 70: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/70.jpg)
![Page 71: Conversion Web Madrid Tecnologia 2010](https://reader036.vdocuments.site/reader036/viewer/2022062514/5589fb67d8b42ad27d8b46bb/html5/thumbnails/71.jpg)
“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