1. [Logo de la organización
representada (opcional)]
Caso de estudio sobre la usabilidad
en periódicos en línea en México
Luis Carlos Aceves | José Manuel Argüello | Marta Sylvia del Río

2. Caso de estudio sobre la usabilidad en
periódicos en línea en México
Luis Carlos Aceves | José Manuel Argüello | Marta Sylvia del Río

3. Agenda
 Metodologías, técnicas y herramientas
 Inspecciones y revisión de estándares  Resultados
 Pruebas con usuarios  Resultados
 Pruebas Automatizadas  Resultados
 Preguntas

4. Metodologías, técnicas y
herramientas utilizadas

5. Metodología
Diagnóstico y análisis
de Usabilidad
Pruebas con Pruebas con Pruebas
expertos usuarios automatizadas
Actividades Actividades
Diseño visual
previas previas
Actividades Actividades
Navegación
durante durante
Actividades Actividades
Diseño de Interacción
posteriores posteriores
Accesibilidad
Estándares Web
E-marketing

6. ¿A quiénes evaluamos?
 Periódicos de libre acceso
 Alcance Nacional
 Periódicos más populares de acuerdo al índice
de Alexa
 Periódicos más importantes de acuerdo al
Page Rank de Google

7. ¿A quiénes evaluamos?

8. Técnicas
¿Cómo lo hicimos?
 Heurísticas
 Paseo cognitivo
 Inspecciones de estándares
 Thinking aloud
 Encuestas
 Eye tracking

9. Técnicas
¿Cómo lo hicimos?
 Heurísticas
 Paseo cognitivo
 Inspecciones de estándares
 Thinking aloud
 Encuestas
 Eye tracking

10. Técnicas
¿Cómo lo hicimos?
 Heurísticas
 Paseo cognitivo
 Inspecciones de estándares
 Thinking aloud
 Encuestas
 Eye tracking

11. Técnicas
¿Cómo lo hicimos?
 Heurísticas
Pruebas con
 Paseo cognitivo expertos
 Inspecciones de estándares
 Thinking aloud
 Encuestas
 Eye tracking

12. Técnicas
¿Cómo lo hicimos?
 Heurísticas
 Paseo cognitivo
 Inspecciones de estándares
 Thinking aloud
 Encuestas
 Eye tracking

13. Técnicas
¿Cómo lo hicimos?
 Heurísticas
 Paseo cognitivo
 Inspecciones de estándares
 Thinking aloud
 Encuestas
 Eye tracking

14. Técnicas
¿Cómo lo hicimos?
 Heurísticas
 Paseo cognitivo
 Inspecciones de estándares
 Thinking aloud Pruebas con
usuarios
 Encuestas
 Eye tracking

15. Técnicas
¿Cómo lo hicimos?
 Heurísticas
 Paseo cognitivo
 Inspecciones de estándares
 Thinking aloud
 Encuestas
 Eye tracking

16. Técnicas
¿Cómo lo hicimos?
 Heurísticas
 Paseo cognitivo
 Inspecciones de estándares
 Thinking aloud
 Encuestas
 Eye tracking Pruebas automatizadas

17. Herramientas
¿Cómo lo hicimos?
 Validadores W3C
 Validador WAI: Accesibilidad
 Web Site Optimization
 Browsershots
 SurveyMonkey
 Tobii Eye Tracker

18. Herramientas
¿Cómo lo hicimos?
 Validadores W3C
 Validador WAI: Accesibilidad
 Web Site Optimization
 Browsershots
 SurveyMonkey
 Tobii Eye Tracker

19. Herramientas
¿Cómo lo hicimos?
 Validadores W3C
 Validador WAI: Accesibilidad
 Web Site Optimization
 Browsershots
 SurveyMonkey
 Tobii Eye Tracker

20. Herramientas
¿Cómo lo hicimos?
 Validadores W3C
 Validador WAI: Accesibilidad
 Web Site Optimization
 Browsershots
 SurveyMonkey
 Tobii Eye Tracker

21. Herramientas
¿Cómo lo hicimos?
 Validadores W3C
 Validador WAI: Accesibilidad
 Web Site Optimization
 Browsershots
 SurveyMonkey
 Tobii Eye Tracker

22. Herramientas
¿Cómo lo hicimos?
 Validadores W3C
 Validador WAI: Accesibilidad
 Web Site Optimization
 Browsershots
 SurveyMonkey
 Tobii Eye Tracker

23. Herramientas
¿Cómo lo hicimos?
 Validadores W3C
 Validador WAI: Accesibilidad
 Web Site Optimization
 Browsershots
 SurveyMonkey
 Tobii Eye Tracker

24. Inspecciones y
revisión de
estándares
PRUEBAS CON EXPERTOS

25. Inspecciones
¿Qué evaluamos?
Diseño visual:
Look and feel
Sistema visual y retícula
Identidad corporativa
Tipografía
Color
Imágenes
Aplicación de CSS

26. Inspecciones
¿Qué
evaluamos?
Navegación:
Claridad del estado del
usuario dentro del sitio
Eficiencia y simplicidad
para encontrar
información
Navegación dentro del
sitio
Rotulado

27. Inspecciones
¿Qué
evaluamos?
Diseño de Interacción:
Comunicación entre el
usuario y el portal
Prevención y manejo de
errores
Manejo de Enlaces

28. Inspecciones
¿Qué evaluamos?
E-Marketing
Estándares IAB
Posicionamiento en
buscadores

29. Revisión de estándares
¿Qué
evaluamos?
Accesibilidad
Pautas de Accesibilidad
WCAG 1.0
Portabilidad
Tiempo de descarga

30. Revisión de estándares
¿Qué
evaluamos?
Estándares Web
Validación de estructura
Validación de
presentación

31. Resultados de inspecciones
PRUEBAS CON EXPERTOS
-Resultados

32. Benchmark
No se encontraron problemas
Área de oportunidad
Problema moderado
Problema grave

33. Benchmark
Diseño visual
Alineación y organización visual de información
Consistencia en los elementos visuales
Jerarquía de los elementos visuales
Uso de color

34. Diseño visual
Alineación y organización visual de información

35. Diseño visual
Alineación y organización visual de información.

36. Benchmark
Navegación
Buscador Interno
Claridad del estado del usuario dentro del sitio
Eficiencia y simplicidad para encontrar información
Navegación dentro del sitio
Nombres de los rótulos

37. Navegación
Claridad del estado del usuario dentro del sitio

38. Navegación
Claridad del estado del usuario dentro del sitio

39. Benchmark
Diseño de interacción
Comunicación entre el usuario y el portal
Manejo de Enlaces
Prevención y manejo de errores

40. Diseño de Interacción
Comunicación entre el usuario y el portal

41. Diseño de interacción
Comunicación entre el usuario y el portal

42. Benchmark
Accesibilidad
Comunicación entre el usuario y el portal
Manejo de Enlaces
Prevención y manejo de errores

43. Accesibilidad
Portabilidad
BlackBerry Pearl iPhone

44. Accesibilidad
Portabilidad
BlackBerry Pearl iPhone

45. Accesibilidad
Internet Explorer 7 Firefox 3.0
Windows XP Linux Ubuntu

46. Benchmark
Estándares Web
Validación de estructura
Validación de presentación
E-Marketing
Cumplimiento de estándares del IAB
Posicionamiento en buscadores (Sección Meta)

47. Estándares Web
Validación de presentación

48. Estándares Web
Validación de presentación

49. Benchmark
E-Marketing
Cumplimiento de estándares del IAB
Posicionamiento en buscadores (Sección Meta)

50. E-Marketing
Posicionamiento en buscadores
Criterio de Google Yahoo Altavista
Búsqueda
El Universal 1 1 1
Periódicos 7 76 80
Mexicanos
Noticias de 3 5 3
México

51. E-Marketing
Posicionamiento en buscadores
Criterio de Google Yahoo Altavista
Búsqueda
La Prensa 4 4 No aparece en los
primeros 500
Periódicos Mexicanos No aparece en los No aparece en los No aparece en los
primeros 500 primeros 500 primeros 500
Noticias de México No aparece en los No aparece en los No aparece en los
primeros 500 primeros 500 primeros 500

52. PRUEBAS CON USUARIOS
Pruebas
con usuarios

53. Pruebas con usuarios
Diagnóstico y análisis
de Usabilidad
Pruebas con Pruebas con Pruebas
expertos usuarios automatizadas
Actividades Actividades
Diseño visual
previas previas
Actividades Actividades
Navegación
durante durante
Actividades Actividades
Diseño de Interacción
posteriores posteriores
Accesibilidad
Estándares Web
E-marketing

54. Tarea 1. Navegación libre
“Entra al sitio y navega durante 1 minuto
en la página de inicio.”
Conocer la percepción del sitio

55. Tarea 2. Fotografía
“Busca una fotografía sobre (tema no
actual).”
Findability del sitio, interacción con el buscador
y presentación de resultados (imágenes)

56. Tarea 3. Noticia antigua
“Busca una noticia sobre (tema no
actual) sin utilizar el buscador.”
Findability del sitio y navegación

57. Tarea 4. Noticia actual
“Busca (noticia actual que no se
encuentre en la página principal)
tratando de no usar el buscador.”
Sistema de navegación, presentación
de resultados (texto e imágenes)

58. Tarea 5. RSS
“Encuentra cómo funciona el RSS
para el sitio.”
Encontrar funcionalidad y manejo
de lenguaje simple

59. Tarea 6. Contacto
“Contacta al periódico.”
Elementos de interacción y manejo
de convenciones

60. Tarea 7. Editorial
“Busca dos editoriales de (editorialista
del periódico).”
Navegación y manejo de opciones
“artículos relacionados”

61. Tarea 8. Caricatura
“Encuentra tres caricaturas de temas
de actualidad.”
Identidad con el formato impreso,
interacción y navegación

62. Tarea 9. Buscador
“Encuentra el sitio desde un buscador
sin utilizar el nombre del periódico.”
Posicionamiento en buscadores
(sección meta)

63. Sesión con usuarios
 Medir tiempos de
ejecución por
tarea
Estaba buscando y
 Thinking Aloud de repente me sacó
del periódico
 Encuesta

64. Sesión con usuarios
 Medir tiempos
de ejecución por
tarea
 Thinking Aloud
 Encuesta

65. Resultados de pruebas con
usuarios
PRUEBAS CON USUARIOS
-Resultados

66. Calificación del usuario
11.1 % 11.1 %
7.6 22.2 % ¿Cómo calif
1
55.6 %
2
3
4
5
6
7
8.3 %
16.7 % 8
8.3 %
9
10
7.2 25 %
41.7 %

67. Calificación del usuario
12.5% 12.5%
7 25%
25%
¿Cómo calif
1
25%
2
3
4
5
6
1 (uno
10 % 7
10 % 2 (dos
8
3 (tres
10 % 9
4 (cua
10
5 (cinc
6.2
6 (seis
20 % 7 (siet
50 %
8 (och
9 (nue
10 (di

68. Calificación del usuario
8.3 %
8.3 %
33.3 %
5.9 ¿Cómo calif
1
50 %
2
3
4
5
6
7
12.5 % 12.5 % 8
9
12.5 % 10
5.2 37.5 %
25 %

69. Calificación del usuario
10%
10%
10%
1
4.7 30% (u
¿Cómo calif
n
o
20%
1
2
10% 10%
3
4
5
6
7
11.1%
8
22.2% 9
10
3.5 33.3%
33.3%

70. Primera impresión
 Se encuentra rápido las noticias más importantes y los
editorialistas.
 No quedan claros los títulos de las secciones.
 Al entrar a la sección “Mundo 52” no se sabe si se
encuentra en el mismo periódico o es otro periódico.
 No están tan claros los nombres del menú.
 El portal cuenta con muchos menús de navegación.
 Hay muchas cosas en la portada.
 Esperaba más secciones, más detallado.
 La publicidad de arriba no es atractiva.

71. Percepción del usuario
¿Qué es lo que más le gusto del periód

72. Percepción del usuario
¿Qué es lo que más le gusto del periód

73. Percepción del usuario
¿Qué es lo que más le gusto del periód

74. Percepción del usuario
¿Qué es lo que más le gusto del periód

75. Percepción del usuario
¿Qué es lo que más le gusto del periód

76. Percepción del usuario
¿Qué es lo que más le gusto del periód

77. Percepción del usuario
¿Qué es lo que más le gusto del periód

78. Percepción del usuario
¿Qué es lo que más le gusto del periód

79. Tarea 2. Fotografía
Fotografía
“Entré a la noticia y de la noticia brinqué a la fotogalería, ya
sabiendo que era una fotogalería, la encontré.”

80. Tarea 3. Noticia antigua
Noticia antigu
“No aparece nada mediante las palabras clave marihuana,
olimpiadas o Michael Phelps.”

81. Tarea 4. Noticia actual
Noticia actual
“Son pocas las noticias que se muestran, alrededor de 6 o menos.”

82. Tarea 5. RSS
RSS
Mejor tiempo 00:15
“Dice que es pero no viene una guía de cómo utilizarlo,
no le entendí.”

83. Tarea 6. Contacto
Contacto
Mejor tiempo 00:08
“Yo me fui hasta debajo de la página, porque siempre
vienen esas opciones de contáctanos.”

84. Tarea 7. Editorial
Editorial
Mejor tiempo 00:25
“Yo estaba buscando algo que dijera editorial, y después
de leer todas las opciones me fui a opinión.”

85. Tarea 8. Caricatura
Caricatura
Mejor tiempo 00:36
“Entré directamente a la sección cartones.”
“No identifico el nombre de la sección cartones con dibujos”.

86. Posicionamiento en buscadores
 “En el buscador de Google de Estados Unidos
nunca apareció.”
 “Yo no busqué más allá de la primera página de
los resultados.”
 A pesar de sugerir otros buscadores, el 98% de la
gente utilizó Google.

87. PRUEBAS AUTOMATIZADAS
Pruebas automatizadas

88. Pruebas automatizadas
Diagnóstico y análisis
de Usabilidad
Pruebas con Pruebas con Pruebas
expertos usuarios automatizadas
Actividades Actividades
Diseño visual
previas previas
Actividades Actividades
Navegación
durante durante
Actividades Actividades
Diseño de Interacción
posteriores posteriores
Accesibilidad
Estándares Web
E-marketing

89. Mapas de calor (Heatmaps)

90. Secuencia de fijación (Gazeplots)

91. Resultados de pruebas
automatizadas
PRUEBAS AUTOMATIZADAS
-Resultados

92. Elementos más vistos

93. Elementos más vistos

94. Secuencias de fijación

95. Secuencia de fijación

96. Sesión de preguntas
¿Preguntas?

97. Preguntas
Más información:
Luis Carlos Aceves:
laceves@udem.edu.mx | luis.aceves@webusability.com.mx
Marta Sylvia del Río:
mdelrio@udem.edu.mx
José Manuel Argüello:
josem.arguello@webusability.com.mx

98. Perfil
La Crónica de Hoy
18-22
22.2 %
Edad
Edad Formato del periód
23-26
33.3 %
44.4 %
Formato del perió
27-30
31-34 66.7 %
35 o
33.3 % más
18-22 años
18-22 años 44.4%
44.4% Impreso
Impreso
11.1 %
Grado máximo de estudios
Frecuencia con la la q
Frecuencia con que
Grado máximo de estudios
11.1 %
23-26 años
23-26 años
11.1 %
33.3%
33.3% En línea
En línea 44.4 %
44.4 %
Secundaria
Secundaria
77.8 %
0%
Sólo 0%
cuando es nec
Sólo cuando es n
27-30 años
27-30 años 0% 0% Ambas
Ambas

99. Perfil
El Universal
Edad
Edad
16.7 %
25 %
33.3%
8.3 %
41.7 %
Formato del periód
Formato del perió
50 %
18-22 años
18-22 años 25 %
41.7%
41.7%
Impreso
Impreso
23-26 años
23-26 años 25%25%
Grado máximo de estudios
Grado máximo de estudios P
Frecuencia con la la q
Frecuencia con que
11.1
r %
e
En línea
En línea
33.3 % p 33.3 %
41.7 %
41.7 % a 44.4
r %
Preparatoria
Preparatoria
27-30 años
27-30 años
a
t
o
0%
8.3% 0%
8.3% Sólo cuando es n
Sólo cuando es nec
8.3 %
44.4
%
25 % 16.7 %
ri
Ambas
Ambas
Profesional (trunco/pasante) 41.7%