Conversion Web Madrid Tecnologia 2010

Pedro Jesús González www.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

En el que se tienen en cuenta los detalles

La que sabe adaptar las herramientas a las necesidades…

El que no aporta información irrelevante para el usuario

El que no aporta información contradictoria

Tiene en cuenta las necesidades de los usuarios

Aprovecha el espacio visual

Sin sobrecargarlo

Ofrece ideas innovadoras a problemas comunes

Porque la competencia está a un clic de distancia

No tiene fallos de programación

Los textos son redactados de forma sincera y pensando en el beneficio del usuario

Siendo breves siempre que sea posible…

… pero sin ser imprecisos

No comete faltas de ortografía

y cuida las imagénes utilizadas

Tiene en cuenta que los usuarios van a opinar

Ofrece la misma información en toda la web

Cuida los mensajes de error

Cuida su identidad visual

No ofrece ambigüedades

No pretende dar una solución a todas las necesidades de negocio

… y tiene unos objetivos claramente definidos.

Ofrece una navegación limpia y segura

Establece claras llamadas a la acción

… pues los usuarios las cumplimos.

Los textos son redactados de forma sencilla

Nunca sacrifica función a favor de un malentendido Diseño.

Es actualizado frecuentemente…

Atiende a usuarios con distintas necesidades

Ofrece siempre una navegación segura

Nunca incluye elementos como “En construcción”

Es unívoco

De verdad…

… y sus contenidos son revisados antes de publicarlos

Es, en definitiva, lo contrario a esto:

¿y todo esto por qué?

A wareness I nterest D esire A ction

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 Online Atraer 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.
UPV Por 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

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

Gracias, [email_address] Próximamente: http://conversionmarketing.es

Conversion Web Madrid Tecnologia 2010

by Pedro Jesús González on Oct 11, 2010

Accessibility

Upload Details

Usage Rights

Statistics

Conversion Web Madrid Tecnologia 2010 Presentation Transcript