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

Gracias,

pedro.gonzalez@domestika.com

Próximamente: http://conversionmarketing.es