Conversion Web Madrid Tecnologia 2010
72
Pedro Jesús González www.domestika.co m DISEÑO DE CONVERSIÓN 30 - Sept - 2 www.domestika.org
-
Upload
pedro-jesus-gonzalez -
Category
Documents
-
view
372 -
download
0
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 of Conversion Web Madrid Tecnologia 2010
Pedro Jesús Gonzálezwww.domestika.com
DISEÑO DE CONVERSIÓN
30 - Sept - 2010 www.domestika.org
— 10.000 clientes, 5 años
— 120 profesionales
— Socios: madrid tecnología, camerpyme, ministerio industria, google, paypal, vocento, yahoo!
— Tecnología propia
— Domestika.org
— Una idea
— Un montón de ejemplos
— Algunas herramientas
— Algunas técnicas
— Una ilusión
En estas dos horas
¿Qué es una Diseño de Conversión?
Es aquel que no está realizado pensando en su dueño
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Aquel en la que se tienen en cuenta todos los navegadores
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
En el que se tienen en cuenta los detalles
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
La que sabe adaptar las herramientas a las necesidades…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
El que no aporta información irrelevante para el usuario
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
El que no aporta información contradictoria
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Tiene en cuenta las necesidades de los usuarios
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Aprovecha el espacio visual
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Sin sobrecargarlo
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Ofrece ideas innovadoras a problemas comunes
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Porque la competencia está a un clic de distancia
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
No tiene fallos de programación
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Los textos son redactados de forma sincera y pensando en el beneficio del usuario
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Siendo breves siempre que sea posible…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
… pero sin ser imprecisos
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
No comete faltas de ortografía
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
y cuida las imagénes utilizadas
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Tiene en cuenta que los usuarios van a opinar
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Ofrece la misma información en toda la web
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
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/
Cuida su identidad visual
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
No ofrece ambigüedades
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
No pretende dar una solución a todas las necesidades de negocio
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
… y tiene unos objetivos claramente definidos.
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Ofrece una navegación limpia y segura
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Establece claras llamadas a la acción
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
… pues los usuarios las cumplimos.
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Los textos son redactados de forma sencilla
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Nunca sacrifica función a favor de un malentendido Diseño.
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Es actualizado frecuentemente…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Atiende a usuarios con distintas necesidades
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Ofrece siempre una navegación segura
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Nunca incluye elementos como “En construcción”
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Es unívoco
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
De verdad…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
… y sus contenidos son revisados antes de publicarlos
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Es, en definitiva, lo contrario a esto:
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
¿y todo esto por qué?
AIDA
AwarenessInterestDesireAction
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”
SEO
SOCIAL MEDIA
SEM
Analítica Web
Atraer Tráfico+ +
+
+
=
Una estrategia general:
Diseño Orientado
Usabilidad
Accesibilidad
Analítica Web
Conversión+ +
+
+
=
Una estrategia general:
+ ++ = Éxito OnlineAtraer Tráfico Conversión
La clave:
Vamos a ir viendo ejemplos…
Arquitectura 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.
Vender césped artificial Descargar un plano
• 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?
• Información de contacto clara. Destacada y bien ubicada, fácil de encontrar desde cualquier punto de la web.
¿1 segundo? Contando…
• 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
Arquitectura y usabilidad web (II)
• Folksonomías Vs Taxonomías
Etiquetas y multicategorización
-> Fotos vacaciones-> Por fecha-> Por destino
-> Textos-> Trabajo-> Personales
• 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
• 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
• Landing Page. Sirven a un único objetivo. Call to action, beneficios frente a características, formularios, sin menús…
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
(Este cómo se llamaba…?¿Pedro, qué más?)
(Este cómo se llamaba…?¿Pedro, qué más?
- 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
- Permite evaluar bocetos
- Ayuda a convertir
Five Second Test
-www.fivesecondtest.com
- Permite evaluar conductas
- Ayuda a convertir
Eyetracking
-http://www.labsmedia.com/clickheat/index.html- http://www.alt64.com/
- Permite reconstruir patrones de navegación
- Permite ver atenciones máximas
Eyetracking
Eyetracking
Eyetracking
A/B Testing
-http://www.google.com/support/websiteoptimizer/?hl=es- http://www.wichtestwon.com/
Para terminar…
“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
