Optimizar sitios web para mejorar la usabilidad y conversiones

Analítica Web
Usabilidad, optimización y testing
Us
Eduard Barredo
@edubarredo
24/05/2012

Experto en Redes Sociales y Marketing Online

miércoles 23 de mayo de 12 1

Eduard Barredo Cortadellas
Consultor Senior en webanalytics.es
certificado en Adobe SiteCatalyst, Google
Analytics y Google Website Optimizer

edu@webanalytics.es

http://www.trucosoptimizacion.com

@edubarredo http://linkd.in/edubarredo



Agenda

‣ ¿Por qué optimizar?
‣ Definiciones, motivaciones y escenario
‣ Metodología
‣ Técnicas y herramientas
‣ Caso práctico



¿
Por
qué
op*mizar
?



¿
Por
qué
op*mizar
?

Mejora
del
ra*o
de
conversión
del
30,3%
al
37,7%

24%
de
mejora
en
el
ra*o
de
conversión

182.000$
de
ingresos
extra



¿
Por
qué
op*mizar
?

Todo
el
ingreso
extra
es
beneﬁcio
directo,
ya
que
el

coste
es
el
mismo

No
inver*mos
más
en
SEM

No
inver*mos
más
en
SEO

Con
los
mismos
recursos,
ganamos
más



¿
Por
qué
op*mizar
?



¿
Por
qué
op*mizar
?

97.3%
de
mejora
en
el
ra*o
de
conversión

Entran
el
doble
de
reservas
vía
web

Puede
prescindirse
de
algunos
aﬁliados
gracias
al

aumento
de
venta
directa



¿
Por
qué
op*mizar
?

¡Sólo
hemos
cambiado
un
texto
y
un
color!



¿
Por
qué
op*mizar
?

La
probabilidad
de
acertar
sólo
era
del
20%
...



¿
Por
qué
op*mizar
?

Imaginad
experimentos
de
cientos
de
combinaciones...

¡la
probabilidad
de
que
aciertes
es
mínima!



¿
Por
qué
op*mizar
?

Sino
testeas...
¿Cómo
diseñas?



¿
Por
qué
op*mizar
?



¿Usuario?



Hacemos
experimentos
porque
es
la
única

manera
de
mejorar
par*endo
de
los

usuarios
reales



‣ Metodología
‣ Caso práctico



¿Qué es la usabilidad?

...




La usabilidad es la facilidad con que las personas pueden utilizar una
herramienta particular o cualquier otro objeto fabricado por humanos con el
ﬁn de alcanzar un objetivo concreto.
! Wikipedia




La usabilidad es un atributo de calidad que “mide” la facilidad de uso
de las cosas. Concretamente, “mide” la velocidad de aprendizaje, la
eﬁciencia de uso, la memorabilidad, la propensión a errores, así como
el disfrute.
! Jakob Nielsen



¿Qué es la usabilidad? / Jakob Nielsen

Jakob Nielsen
‣ Referencia en usabilidad web
‣ Co-fundador de NNgroup
‣ Boletines en useit.com



¿Qué es la usabilidad? / Jakob Nielsen



¿Qué es la experiencia de usuario?

...



¿Qué es la experiencia de usuario?

La experiencia de usuario es el conjunto de factores y elementos relativos a la
interacción del usuario, con un entorno o dispositivo concretos, cuyo resultado es
la generación de una percepción positiva o negativa de dicho servicio, producto
o dispositivo.
La experiencia de usuario depende no sólo de los factores relativos al diseño
sino de aspectos relativos a las emociones, sentimientos, transmisión de la
marca o conﬁabilidad del producto.
! Wikipedia



¿Qué es la experiencia de usuario? / Donald Norman

Donald Norman
‣ Referencia en ciencia cognitiva
‣ Co-fundador de NNgroup
‣ Ensayos en jnd.org



¿Qué es la experiencia de usuario? / Donald Norman



¿Qué es la accesibilidad web?

La accesibilidad web se reﬁere a la capacidad de acceso a la
Web y a sus contenidos por todas las personas
independientemente de la discapacidad que presenten o de las
que se deriven del contexto de uso.
! Wikipedia



¿Qué es la analítica web?

La Analítica Web es la recopilación, medición, evaluación y
explicación racional de los datos obtenidos de Internet, con el
propósito de entender y optimizar el uso de la página web de la
organización.
! Wikipedia



¿Qué es la analítica web? / Avinash Kaushik

Avinash Kaushik
‣ Referencia en Analítica Web
‣ Evangelista en Google
‣ Escribe en Occam’s Razor



¿Qué es la analítica web? / Avinash Kaushik



‣ Metodología
‣ Caso práctico



Metodología de optimización

La usabilidad es facilidad de uso para completar una determinada tarea.
Los usuarios tienen como objetivo completar determinadas tareas.
Los objetivos del usuario a veces coinciden con los objetivos del negocio.
La web tiene que estar planteada para satisfacer el objetivo del usuario.



Estado del arte

científico
inaccesible
controlado
complejo
costoso



Estado del arte

remoto
social incerteza
económico



Fases del proceso

1. Plantear un objetivo
2. Ver los números para un objetivo
3. Inspeccionar problemas de uso
4. Plantear soluciones
5. Testear



Fases del proceso

1. Plantear un objetivo
(Preguntas)
2. Ver los números para un objetivo
(Respuestas cuantitativas)
3. Inspeccionar problemas de uso
(Respuestas cualitativas)
4. Plantear soluciones
(Soluciones)
5. Testear
(Test)



Fases del proceso
1

2

Ciclo de
5 3
Optimización

1. Preguntas 4
2. Respuestas cuantitativas
3. Respuestas cualitativas
4. Soluciones
5. Test


Fases del proceso

Por ejemplo...

• Quiero obtener más formularios rellenados
• Quiero reducir el ratio de rebote
• Quiero incrementar el número de páginas vistas
• Quiero incrementar el tiempo medio de visita
• Quiero conseguir más click through en la publicidad
• Quiero más suscripciones al RSS
• Quiero más suscripciones al newsletter
• Quiero ganar más followers en Twitter



Fases del proceso / 2. Respuestas cuantitativas

Quiero obtener más formularios rellenados

• ¿Qué páginas dan acceso al formulario?
• ¿Qué volumen de tráﬁco hay en cada página?
• ¿Cuales son las fuentes de tráﬁco?
• ¿Cual es la etapa del formulario con mayor caída?



Fases del proceso / 3. Respuestas cualitativas

• Realizar evaluación heurística
• Realizar test de usabilidad remoto
• Estudiar el comportamiento de los usuarios
• Hacer encuestas al visitante



Fases del proceso / 4. Plantear soluciones

• Realizar prototipos y wireframe
• Realizar diseño ﬁnal
• Benchmarking



Fases del proceso / 5. Testear

• Implementar diseños en entorno de test
• Observar resultados y patrones
• Escoger versión ganadora
• Implementar versión ganadora en entorno real



‣ Metodología
‣ Caso práctico



Técnicas y herramientas / 1. Preguntas

• Brainstorming



Técnicas y herramientas / 2. Análisis cuantitativo

• Porcentaje de rebote
• Tiempo de visita
• Objetivos cumplidos
• Embudos de conversión
• Sumario de navegación
• Keywords de entrada




• Porcentaje de rebote Es el porcentaje de visitas que sólo han
• Tiempo de visita visto una página. Es decir, usuarios que
• Objetivos cumplidos entran en la web y la abandonan sin
• Embudos de conversión consultar ninguna otra página.




• Porcentaje de rebote Métrica de calidad. Si un usuario pasa más
• Tiempo de visita tiempo en el sitio web, suele ser sinónimo
• Objetivos cumplidos de mayor interactuación con el contenido.




• Porcentaje de rebote Contabiliza en que medida se están
• Tiempo de visita cumpliendo ciertos objetivos. Por ejemplo,
• Objetivos cumplidos tiempo de visita, suscripción al RSS, etc.
• Embudos de conversión También incluiría conversiones para un sitio
• Sumario de navegación de comercio electrónico.



Técnicas y herramientas / 3. Análisis cualitativo

• Análisis heurístico
• Mapa de clics
• Mapa de scrolling
• Video de sesión
• Voice of customer




• Mapa de clics



Técnicas y herramientas / 4. Soluciones

• Creatividad



Técnicas y herramientas / 5. Test

• A/B Test
• MVT
• Test de usabilidad 2.0




• A/B Test
• MVT




• A/B Test
• MVT

La
versión
B
mejoró
en
un
30%
el
número
de
desargas
de
Picasa




• A/B Test
• MVT



demo



‣ Metodología
‣ Caso práctico



Ideas para testear...

Tener presente el objetivo y el tipo de conversión:

Medio - ingresos publicidad por página vista

Google Adwords - CTR - clicks por impresiones

Sitio corporativo - páginas vistas, duración visita, contactos, descargas de folletos

Comercio electrónico - ventas por visita, ingresos por usuario




Personas y Tareas (Universidad de Sevilla)

Alumno
nacional / extranjero
recién licenciado / con experiencia laboral
Ex alumno / nuevo en el centro

Cada tipo tiene necesidades especíﬁcas
¿necesidades de cada “persona”?
¿cómo se traducen en tareas que debe resolver la interfaz?




Personas y Tareas - fuente de inspiración
Listamos tipos de personas
Listamos tipos de tareas de cada persona

Acciones
¿diferentes landing pages para diferentes personas?
¿diferentes landing pages para diferentes tareas?
¿diferentes SEM para diferentes personas / tareas?




Tres fases de la conversión:

Atención

Deseo

Acción





Atención
Atracción de tráfico - mensajes de SEM, SEO, etc.

Deseo
“los primeros 5 segundos en la página”
confianza, belleza, comodidad, profesionalidad, promesas, calidad de información, claridad

Acción
llamadas a la acción que respondan a personas y tareas específicas





Atención
Diferentes copys en anuncios
Diferentes posiciones de los anuncios
Diferentes anuncios en diferentes periodos
Diferentes anuncios para diferentes países, idiomas, regiones, ciudades,...
Diferentes anuncios para diferentes programas
Llamar la atención de personas ofreciendo respuesta a las tareas que quieren resolver





Deseo
Referencias
de los medios (rankings)
de antiguos alumnos
Estadísticas de empleo obtenido tras master
Privacidad
¿qué sucede si relleno el formulario?
¿puedo contactar de otro modo?
Calidad
PDF bien chulo para descargar, videos,...





Acción
Formularios muy claros en todos los navegadores
Mensajes de error claros y no violentos
Hay muchas opciones además del formulario: bajar pdf, solicitar visita, avisos de
novedades, suscripción a newsletter, trabajos de ex-alumnos, etc.
Cada persona y cada tarea tienen una acción asociada





Acción
Continuidad tras el primer contacto / visita
Correo electrónico automático de respuesta a cada solicitud de contacto
Correo electrónico a todos los que se descargaron el programa en PDF (pasados unos
días, meses, en periodo de inscripción,...)
Avisos por email cuando se abra el periodo de inscripción, cuando salgan cursos
relacionados, etc.




Testeos habituales:

Estructura de la página
Columnas
Scroll
Cabecera
Pie
Imágenes




Testeos habituales:

Arquitectura de la información
Navegación(es)
Opciones / Distracciones en cada página
Espacio en blanco
Colores
Cajas / Bordes / Fondos
“Personas”
“Tareas”




Testeos habituales:

Contenido textual
Nivel de detalle (párrafo, viñetas, titulares, links,...)
Estilo
Tono
Verbos



Práctica

‣ 3/4 grupos
‣ Universidad de Sevilla (http://www.expertoredes.es/)
‣ Barceló Hoteles (http://barcelo.com/)
‣ MTV (http://www.mtv.es/)
‣ Direct Seguros (directseguros.es)

‣ Deﬁnir objetivos: macro y micro indicadores
‣ Deﬁnir páginas candidatas a testear
‣ Realizar brainstorming y versiones de diseños alternativos en papel (wireframe)

‣ Un representante de cada equipo nos va a exponer las conclusiones, método de
trabajo y experimento que habrían puesto en marcha, y discutiremos entre todos las
nuevas propuestas.


Práctica

Ejemplos de wireframes



¡Gracias!
Eduard Barredo
Consultor Senior

@edubarredo
www.web-analytics.es
www.fansgao.com



Optimizar sitios web para mejorar la usabilidad y conversiones

Recommended

Recommended

More Related Content

Similar to Optimizar sitios web para mejorar la usabilidad y conversiones

Similar to Optimizar sitios web para mejorar la usabilidad y conversiones (19)

More from SMMUS

More from SMMUS (20)

Optimizar sitios web para mejorar la usabilidad y conversiones