SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
Estudios de Usabilidad Web
effyciens Marketing Online
Usabilidad Web
•

Definición: Atributo de calidad que valora la facilidad de
uso de un interface, en nuestro caso, una página web.

•

Se define por 5 componentes de calidad
Aprendizaje: La primera vez que te enfrentas al diseño
• ¿Es fácil cumplir las tareas básicas?
Eficiencia: Una vez aprendido el diseño.
• ¿Cuanto se tarda en realizar las tareas?
Recuerdo: Cuando los usuarios vuelven al cabo de un tiempo
• ¿Es fácil volver a tomarle el pulso?
Errores: Cuando se cometen errores …
• ¿Cuantos errores se cometen?
• ¿Son graves los errores?
• ¿Es fácil recuperarse del error?
Satisfacción:
• ¿Es una experiencia agradable el uso de ese diseño?
Estudios de Usabilidad Web
•

Tests de Usabilidad Subjetivos
•
•

•

No dirigidos: “amor a primera vista” visión de 5 segundos.
Dirigidos: planteamiento de tareas.

Tests de Usabilidad Objetivos
Eyetracking: movimientos de ojo y eye-stops
Clicking: estudios de rastreo de ratón y clicks. CTR (click through rate)

Mapa de calor de eyetracking

Mapa de calor de CTR
Mapas de calor
•

Definición: Representación gráfica donde los valores
individuales agregados se representan por colores en
función de la densidad de aparición.

•

En la Web son usados para mostrar las áreas mas
restreadas o utilizadas por los usuarios en función de
la metodología del estudio:
•

Eyetracking: estudios de movimiento ocular y eye-stops

•

Clicking: estudios de rastreo del ratón y clicks
Mapas de calor
Primeros 10 segundos viendo el
Google SERP (search engine
results page).
!

Mapa de Calor basado en 60
usuarios

Patrón de colores:
Rojo: muestra la mayor densidad
Amarillo: densidad intermedia
Azul: muestra la menor densidad.
Mapas de calor
Primeros 10 segundos viendo el
homepage corporativo de
Adelphia.
!

Mapa de Calor basado en 60
usuarios
Mapas de calor
Primeros 10 segundos viendo la
página de una sección del New
York magazine.
!

Mapa de Calor basado en 60
usuarios
Mapas de calor
•

Correlación entre el trazado de un mapa de calor de
los 10 primeros segundos con los realizados tras la
visita completa a la página web.
Eyetracking NNGROUP: Metodología y Objetivos

Eyetracking
Sujetos = 300
Edad
18-64 años
Tareas = 85

Tecnología
eyetracking en
laboratorio

Websites

nº eye-stops = 1,5 M
!
• Cabeceras
• Fotos
• Resumenes
• Podcasts
• Blogs
… hasta 300 topics
!

Test de Recuerdo
Eyetracking NNGROUP: F-Shaped Pattern
•

Los estudios de eyetracking muestran que habitualmente
realizamos la lectura de las páginas web siguiendo un
patrón en forma de F.

Mapas de calor de estudios de eyetracking sobre 3 páginas web.
Eyetracking NNGROUP: Fotos como contenido web
•

Los usuarios prestan atención a las imágenes (fotografías
e infografías) con contenido relevante, pero ignoran las
imágenes “ligeras”.

Prestan atención a fotografías con “gente real”

Ignoran fotografías con “gente genérica”
Eyetracking NNGROUP: Estructura del Front Page
•

Mostrar sumarios de varios artículos es mejor que
proporcionar los artículos completos
De Izquierda a derecha:
•
•
•
•
•

!

Seagate Digital Den
Zappos CEO and COO Blog
Capgemini CTO Blog
Rackspace Cloud Blog
Aol Autoblog

Los dos primeros ejemplos
muestran blogs con artículos
completos. Los usuarios
rastrean el primero de ellos y
ninguno mas. Si el primer
artículo no interesa, se pierde
al usuario.
El segundo bloque de dos
blogs presentan sumarios y las
páginas son mas cortas.
El último blog es un híbrido,
los Posts cortos se muestran
enteros y los largos como
resumen.
Eyetracking NNGROUP: Tiempos de Respuesta
•

Limites en los tiempos de
respuesta de la página web.
•

0,1 segundo: da la sensación de respuesta
instantánea

•

1 segundo: mantiene al usuario aunque
detecta un retraso. Es necesario para una
buena navegación

•

10 segundos: hace que el usuario deje la
página definitivamente.

Gaze Plots de dos momentos diferentes en la
carga de la página web. Los puntos azules
muestran la secuencias de los movimientos, así
como, el orden y la duración del eye-stop.
Eyetracking NNGROUP: Atención Horizontal
•

La atención horizontal se inclina hacia la izquierda. Los
usuarios utilizan un 69% del tiempo viendo la mitad
izquierda, frente a un 30% en la mitad derecha.

En esta gráfica cada barra muestra la cantidad de tiempo invertida por los usuarios de una
página web en puntos de la misma según su posición frente al margen izquierdo
Eyetracking NNGROUP: Atención Vertical
•

Los usuarios de una página web invierten el 80% de su tiempo viendo
información situada por encima del limite inferior. Aunque hagan scroll
(desplazamiento hacia abajo), solo empleamos un 20% del tiempo por
debajo del limite inferior de visionado (page fold= limite inferior de visión sin
ejercer ninguna acción por nuestra parte).
Eyetracking Poynter 2006: Metodología y Objetivos

Tabloides

Sesiones de
lectura = 582

Eyetracking

de Julio a Noviembre de 2006

Hombres = 49%
Mujeres = 51%
Edad
18-41 = 56%
42-60 = 44%
Hábitos de lectura
1-3 /week = 29%
> 4 /week = 71%

Gafas eyetracking
(movimiento de ojo)

!

15 min. lectura

Periodicos

nº eye-stops = 102.000
!
• Cabeceras
• Fotos
• Resumenes
• Podcasts
• Blogs
… hasta 300 topics
!

Test de Recuerdo

Websites
Eyetracking Poynter 2006: Resultados

Profundidad de lectura

Eyetracking 2006. The Poynter Institute. www.pointer.org
Eyetracking Poynter 2006: Resultados

Patrones de lectura
•

Lectores Metódicos:
•
•

•

Leen de arriba a abajo
Utilizan menús desplegables y barras de navegación para localizar las historias

Lectores Scanner
•
•
•

Leen titulares y otros elementos sin necesidad de leer todo el texto
Suelen utilizar listas de noticias de la página de inicio
Eventualmente hacen click en cabeceras u otros enlaces de la historia

Cantidad de texto leído

Eyetracking 2006. The Poynter Institute. www.pointer.org
Estudio Eyetracking Medios España

Patrones de lectura
•

Tamaño Muestral N= 17
•
•

No se especifica el porcentaje de hombres y mujeres
Edad entre 18 - 65 años

Eyetracking Medios España 2005
Gracias!

Weitere ähnliche Inhalte

Ähnlich wie Estudios de Usabilidad Web

Usabilidad: el software, como la comida, entra por los ojos
Usabilidad: el software, como la comida, entra por los ojosUsabilidad: el software, como la comida, entra por los ojos
Usabilidad: el software, como la comida, entra por los ojosLisandra Armas
 
Curso de analítica web
Curso de analítica webCurso de analítica web
Curso de analítica webIván Fociños
 
10. Estudios Usabilidad primera parte (HCI1)
10. Estudios Usabilidad primera parte (HCI1)10. Estudios Usabilidad primera parte (HCI1)
10. Estudios Usabilidad primera parte (HCI1)Mario A Moreno Rocha
 
Diseño de Interfaces y Usabilidad
Diseño de Interfaces y UsabilidadDiseño de Interfaces y Usabilidad
Diseño de Interfaces y UsabilidadJuan Manuel Carraro
 
Escritura de textos en la web y usabilidad
Escritura de textos en la web y usabilidadEscritura de textos en la web y usabilidad
Escritura de textos en la web y usabilidadGermán García
 
Usabilidad en web: cinco consejos para llevar (UNSIS 2013)
Usabilidad en web: cinco consejos para llevar (UNSIS 2013)Usabilidad en web: cinco consejos para llevar (UNSIS 2013)
Usabilidad en web: cinco consejos para llevar (UNSIS 2013)Mario A Moreno Rocha
 
"Como escribir para la web"
"Como escribir para la web""Como escribir para la web"
"Como escribir para la web"pamesuarez
 
Escribir para internet pautas de edacción web por Denys Reyes_interlat
Escribir para internet pautas de edacción web por Denys Reyes_interlatEscribir para internet pautas de edacción web por Denys Reyes_interlat
Escribir para internet pautas de edacción web por Denys Reyes_interlatInterlat
 

Ähnlich wie Estudios de Usabilidad Web (18)

Usabillidad web 2013
Usabillidad web 2013Usabillidad web 2013
Usabillidad web 2013
 
Duoc ai - usabilidad - metodologias
Duoc   ai - usabilidad - metodologiasDuoc   ai - usabilidad - metodologias
Duoc ai - usabilidad - metodologias
 
Presentacion
PresentacionPresentacion
Presentacion
 
Trabajo postitulo
Trabajo postituloTrabajo postitulo
Trabajo postitulo
 
Ruta y roca mobile 2
Ruta y roca mobile 2Ruta y roca mobile 2
Ruta y roca mobile 2
 
Usabilidad: el software, como la comida, entra por los ojos
Usabilidad: el software, como la comida, entra por los ojosUsabilidad: el software, como la comida, entra por los ojos
Usabilidad: el software, como la comida, entra por los ojos
 
Cursoanalitica 121109173846-phpapp02
Cursoanalitica 121109173846-phpapp02Cursoanalitica 121109173846-phpapp02
Cursoanalitica 121109173846-phpapp02
 
Curso de analítica web
Curso de analítica webCurso de analítica web
Curso de analítica web
 
10. Estudios Usabilidad primera parte (HCI1)
10. Estudios Usabilidad primera parte (HCI1)10. Estudios Usabilidad primera parte (HCI1)
10. Estudios Usabilidad primera parte (HCI1)
 
Metodo de Jakob Nielsen.ppsx
Metodo de Jakob Nielsen.ppsxMetodo de Jakob Nielsen.ppsx
Metodo de Jakob Nielsen.ppsx
 
Diseño de Interfaces y Usabilidad
Diseño de Interfaces y UsabilidadDiseño de Interfaces y Usabilidad
Diseño de Interfaces y Usabilidad
 
Robotica
RoboticaRobotica
Robotica
 
Escritura de textos en la web y usabilidad
Escritura de textos en la web y usabilidadEscritura de textos en la web y usabilidad
Escritura de textos en la web y usabilidad
 
Criterios Ergonómicos
Criterios ErgonómicosCriterios Ergonómicos
Criterios Ergonómicos
 
archivoTercerParcial
archivoTercerParcialarchivoTercerParcial
archivoTercerParcial
 
Usabilidad en web: cinco consejos para llevar (UNSIS 2013)
Usabilidad en web: cinco consejos para llevar (UNSIS 2013)Usabilidad en web: cinco consejos para llevar (UNSIS 2013)
Usabilidad en web: cinco consejos para llevar (UNSIS 2013)
 
"Como escribir para la web"
"Como escribir para la web""Como escribir para la web"
"Como escribir para la web"
 
Escribir para internet pautas de edacción web por Denys Reyes_interlat
Escribir para internet pautas de edacción web por Denys Reyes_interlatEscribir para internet pautas de edacción web por Denys Reyes_interlat
Escribir para internet pautas de edacción web por Denys Reyes_interlat
 

Mehr von Effyciens Marketing Online SL. (12)

Glosario del Cáncer
Glosario del CáncerGlosario del Cáncer
Glosario del Cáncer
 
Programa III Jornada GIDO 2013
Programa III Jornada GIDO 2013Programa III Jornada GIDO 2013
Programa III Jornada GIDO 2013
 
09 Tratamiento combinado de quimio y radioterapia en Cáncer de Pulmón
09 Tratamiento combinado de quimio y radioterapia en Cáncer de Pulmón09 Tratamiento combinado de quimio y radioterapia en Cáncer de Pulmón
09 Tratamiento combinado de quimio y radioterapia en Cáncer de Pulmón
 
08 Radioterapia en Cáncer de Pulmón
08 Radioterapia en Cáncer de Pulmón08 Radioterapia en Cáncer de Pulmón
08 Radioterapia en Cáncer de Pulmón
 
07 Cirugía del Cáncer de Pulmón
07 Cirugía del Cáncer de Pulmón07 Cirugía del Cáncer de Pulmón
07 Cirugía del Cáncer de Pulmón
 
06 Cancer Microcítico de Pulmón
06 Cancer Microcítico de Pulmón06 Cancer Microcítico de Pulmón
06 Cancer Microcítico de Pulmón
 
05 Mesotelioma pleural maligno y timoma
05 Mesotelioma pleural maligno y timoma05 Mesotelioma pleural maligno y timoma
05 Mesotelioma pleural maligno y timoma
 
04 Biologia molecular en Cáncer de Pulmón
04 Biologia molecular en Cáncer de Pulmón04 Biologia molecular en Cáncer de Pulmón
04 Biologia molecular en Cáncer de Pulmón
 
14 Conclusiones: De Sidney a Denver
14 Conclusiones: De Sidney a Denver14 Conclusiones: De Sidney a Denver
14 Conclusiones: De Sidney a Denver
 
03 Diagnóstico y estadificación del Cáncer de Pulmón
03 Diagnóstico y estadificación del Cáncer de Pulmón03 Diagnóstico y estadificación del Cáncer de Pulmón
03 Diagnóstico y estadificación del Cáncer de Pulmón
 
02 Epidemiologia, screening y prevencion
02 Epidemiologia, screening y prevencion02 Epidemiologia, screening y prevencion
02 Epidemiologia, screening y prevencion
 
01 Introducción de Amsterdam a Sidney
01 Introducción de Amsterdam a Sidney01 Introducción de Amsterdam a Sidney
01 Introducción de Amsterdam a Sidney
 

Kürzlich hochgeladen

Diseñando según la regulación actual de cookies para lograr más conversión
Diseñando según la regulación actual de cookies para lograr más conversiónDiseñando según la regulación actual de cookies para lograr más conversión
Diseñando según la regulación actual de cookies para lograr más conversiónVWO
 
Aplicativa 2 Marisol Rojas Luz Rodrigues
Aplicativa 2  Marisol Rojas Luz RodriguesAplicativa 2  Marisol Rojas Luz Rodrigues
Aplicativa 2 Marisol Rojas Luz Rodriguesbivanaj321
 
foro andino, detalles y calidad detallado
foro andino, detalles y  calidad detalladoforo andino, detalles y  calidad detallado
foro andino, detalles y calidad detalladoPabloMendivil
 
Actividad, aprendiendo Slideshare. Pirámide de Maslow
Actividad, aprendiendo Slideshare. Pirámide de MaslowActividad, aprendiendo Slideshare. Pirámide de Maslow
Actividad, aprendiendo Slideshare. Pirámide de Maslowannelizleon
 
Importancia del Marketing Digital, Tarea
Importancia del Marketing Digital, TareaImportancia del Marketing Digital, Tarea
Importancia del Marketing Digital, TareaCarlosAlbertoSolares
 

Kürzlich hochgeladen (6)

Diseñando según la regulación actual de cookies para lograr más conversión
Diseñando según la regulación actual de cookies para lograr más conversiónDiseñando según la regulación actual de cookies para lograr más conversión
Diseñando según la regulación actual de cookies para lograr más conversión
 
Aplicativa 2 Marisol Rojas Luz Rodrigues
Aplicativa 2  Marisol Rojas Luz RodriguesAplicativa 2  Marisol Rojas Luz Rodrigues
Aplicativa 2 Marisol Rojas Luz Rodrigues
 
foro andino, detalles y calidad detallado
foro andino, detalles y  calidad detalladoforo andino, detalles y  calidad detallado
foro andino, detalles y calidad detallado
 
luciayelSEO_ CANIBALIZACIÓNES_Y_DUPLICIDADES_2024 (1).pdf
luciayelSEO_ CANIBALIZACIÓNES_Y_DUPLICIDADES_2024 (1).pdfluciayelSEO_ CANIBALIZACIÓNES_Y_DUPLICIDADES_2024 (1).pdf
luciayelSEO_ CANIBALIZACIÓNES_Y_DUPLICIDADES_2024 (1).pdf
 
Actividad, aprendiendo Slideshare. Pirámide de Maslow
Actividad, aprendiendo Slideshare. Pirámide de MaslowActividad, aprendiendo Slideshare. Pirámide de Maslow
Actividad, aprendiendo Slideshare. Pirámide de Maslow
 
Importancia del Marketing Digital, Tarea
Importancia del Marketing Digital, TareaImportancia del Marketing Digital, Tarea
Importancia del Marketing Digital, Tarea
 

Estudios de Usabilidad Web

  • 1. Estudios de Usabilidad Web effyciens Marketing Online
  • 2. Usabilidad Web • Definición: Atributo de calidad que valora la facilidad de uso de un interface, en nuestro caso, una página web. • Se define por 5 componentes de calidad Aprendizaje: La primera vez que te enfrentas al diseño • ¿Es fácil cumplir las tareas básicas? Eficiencia: Una vez aprendido el diseño. • ¿Cuanto se tarda en realizar las tareas? Recuerdo: Cuando los usuarios vuelven al cabo de un tiempo • ¿Es fácil volver a tomarle el pulso? Errores: Cuando se cometen errores … • ¿Cuantos errores se cometen? • ¿Son graves los errores? • ¿Es fácil recuperarse del error? Satisfacción: • ¿Es una experiencia agradable el uso de ese diseño?
  • 3. Estudios de Usabilidad Web • Tests de Usabilidad Subjetivos • • • No dirigidos: “amor a primera vista” visión de 5 segundos. Dirigidos: planteamiento de tareas. Tests de Usabilidad Objetivos Eyetracking: movimientos de ojo y eye-stops Clicking: estudios de rastreo de ratón y clicks. CTR (click through rate) Mapa de calor de eyetracking Mapa de calor de CTR
  • 4. Mapas de calor • Definición: Representación gráfica donde los valores individuales agregados se representan por colores en función de la densidad de aparición. • En la Web son usados para mostrar las áreas mas restreadas o utilizadas por los usuarios en función de la metodología del estudio: • Eyetracking: estudios de movimiento ocular y eye-stops • Clicking: estudios de rastreo del ratón y clicks
  • 5. Mapas de calor Primeros 10 segundos viendo el Google SERP (search engine results page). ! Mapa de Calor basado en 60 usuarios Patrón de colores: Rojo: muestra la mayor densidad Amarillo: densidad intermedia Azul: muestra la menor densidad.
  • 6. Mapas de calor Primeros 10 segundos viendo el homepage corporativo de Adelphia. ! Mapa de Calor basado en 60 usuarios
  • 7. Mapas de calor Primeros 10 segundos viendo la página de una sección del New York magazine. ! Mapa de Calor basado en 60 usuarios
  • 8. Mapas de calor • Correlación entre el trazado de un mapa de calor de los 10 primeros segundos con los realizados tras la visita completa a la página web.
  • 9. Eyetracking NNGROUP: Metodología y Objetivos Eyetracking Sujetos = 300 Edad 18-64 años Tareas = 85 Tecnología eyetracking en laboratorio Websites nº eye-stops = 1,5 M ! • Cabeceras • Fotos • Resumenes • Podcasts • Blogs … hasta 300 topics ! Test de Recuerdo
  • 10. Eyetracking NNGROUP: F-Shaped Pattern • Los estudios de eyetracking muestran que habitualmente realizamos la lectura de las páginas web siguiendo un patrón en forma de F. Mapas de calor de estudios de eyetracking sobre 3 páginas web.
  • 11. Eyetracking NNGROUP: Fotos como contenido web • Los usuarios prestan atención a las imágenes (fotografías e infografías) con contenido relevante, pero ignoran las imágenes “ligeras”. Prestan atención a fotografías con “gente real” Ignoran fotografías con “gente genérica”
  • 12. Eyetracking NNGROUP: Estructura del Front Page • Mostrar sumarios de varios artículos es mejor que proporcionar los artículos completos De Izquierda a derecha: • • • • • ! Seagate Digital Den Zappos CEO and COO Blog Capgemini CTO Blog Rackspace Cloud Blog Aol Autoblog Los dos primeros ejemplos muestran blogs con artículos completos. Los usuarios rastrean el primero de ellos y ninguno mas. Si el primer artículo no interesa, se pierde al usuario. El segundo bloque de dos blogs presentan sumarios y las páginas son mas cortas. El último blog es un híbrido, los Posts cortos se muestran enteros y los largos como resumen.
  • 13. Eyetracking NNGROUP: Tiempos de Respuesta • Limites en los tiempos de respuesta de la página web. • 0,1 segundo: da la sensación de respuesta instantánea • 1 segundo: mantiene al usuario aunque detecta un retraso. Es necesario para una buena navegación • 10 segundos: hace que el usuario deje la página definitivamente. Gaze Plots de dos momentos diferentes en la carga de la página web. Los puntos azules muestran la secuencias de los movimientos, así como, el orden y la duración del eye-stop.
  • 14. Eyetracking NNGROUP: Atención Horizontal • La atención horizontal se inclina hacia la izquierda. Los usuarios utilizan un 69% del tiempo viendo la mitad izquierda, frente a un 30% en la mitad derecha. En esta gráfica cada barra muestra la cantidad de tiempo invertida por los usuarios de una página web en puntos de la misma según su posición frente al margen izquierdo
  • 15. Eyetracking NNGROUP: Atención Vertical • Los usuarios de una página web invierten el 80% de su tiempo viendo información situada por encima del limite inferior. Aunque hagan scroll (desplazamiento hacia abajo), solo empleamos un 20% del tiempo por debajo del limite inferior de visionado (page fold= limite inferior de visión sin ejercer ninguna acción por nuestra parte).
  • 16. Eyetracking Poynter 2006: Metodología y Objetivos Tabloides Sesiones de lectura = 582 Eyetracking de Julio a Noviembre de 2006 Hombres = 49% Mujeres = 51% Edad 18-41 = 56% 42-60 = 44% Hábitos de lectura 1-3 /week = 29% > 4 /week = 71% Gafas eyetracking (movimiento de ojo) ! 15 min. lectura Periodicos nº eye-stops = 102.000 ! • Cabeceras • Fotos • Resumenes • Podcasts • Blogs … hasta 300 topics ! Test de Recuerdo Websites
  • 17. Eyetracking Poynter 2006: Resultados Profundidad de lectura Eyetracking 2006. The Poynter Institute. www.pointer.org
  • 18. Eyetracking Poynter 2006: Resultados Patrones de lectura • Lectores Metódicos: • • • Leen de arriba a abajo Utilizan menús desplegables y barras de navegación para localizar las historias Lectores Scanner • • • Leen titulares y otros elementos sin necesidad de leer todo el texto Suelen utilizar listas de noticias de la página de inicio Eventualmente hacen click en cabeceras u otros enlaces de la historia Cantidad de texto leído Eyetracking 2006. The Poynter Institute. www.pointer.org
  • 19. Estudio Eyetracking Medios España Patrones de lectura • Tamaño Muestral N= 17 • • No se especifica el porcentaje de hombres y mujeres Edad entre 18 - 65 años Eyetracking Medios España 2005