Taller Evento TestingUY 2018 - Probando la experiencia de usuario

Expositores: Claudia Badell, Joanna Arnaiz, Martín Loskin y Patricia Duarte

Duración: 4 horas

Resumen: Si te perdiste este taller en el 2016, ¡tenés la oportunidad de sumarte este año! Durante el taller veremos una introducción sobre qué son usabilidad y experiencia de usuario. Luego haremos una reseña de las distintas heurísticas de usabilidad propuestas por Jakob Nielsen junto con un ejercicio práctico. Finalmente hablaremos sobre pruebas de usabilidad con usuarios. En particular, nos vamos a enfocar en las pruebas de usabilidad basadas en tareas realizando un ejercicio práctico.

Objetivos del taller:
– entender de qué hablamos cuando nos referimos a experiencia de usuario y cuál es nuestro rol en ella.
– incorporar distintas heurísticas de usabilidad para mejorar nuestras pruebas como testers al momento de evaluar el software bajo prueba.
– conocer qué son las pruebas de usabilidad basadas en tareas y qué beneficios nos brindan.

1. PROBANDO
LA EXPERIENCIA DE
USUARIO
Claudia Badell
[email protected]
@claubs_uy
21 y 22 de mayo, 2018
www.testinguy.org
#testinguy|@testinguy
Joanna Arnaiz
[email protected]
@joiarnaiz
Martín Loskin
[email protected]
Patricia Duarte
[email protected]

2. QUIÉNES SOMOS
MARTÍN LOSKINJOANNA ARNAIZCLAUDIA BADELL PATRICIA DUARTE

3. AGENDA
INTRODUCCIÓN1
HEURÍSTICAS DE USABILIDAD
Y EJERCICIO
2
TÉCNICAS CON USUARIOS3
TÉCNICAS CON USUARIOS:
TAREAS Y EJERCICIO
4
5
¿QUÉ NOS GUSTARÍA QUE
TE LLEVES?

4. AGENDA
INTRODUCCIÓN1
HEURÍSTICAS DE USABILIDAD
Y EJERCICIO
2
TÉCNICAS CON USUARIOS3
TÉCNICAS CON USUARIOS:
TAREAS Y EJERCICIO
4
5
¿QUÉ NOS GUSTARÍA QUE
TE LLEVES?

5. INTRODUCCIÓN
¿QUÉ ES UX?

6. USABILIDAD

7. EXPERIENCIA DE USUARIO

8. EXPERIENCIA DE USUARIO

9. EXPERIENCIA DE USUARIO

10. EXPERIENCIA DE USUARIO

11. EXPERIENCIA DE USUARIO

12. EXPERIENCIA DE USUARIO

14. Todosdiseñamos
la experiencia
Regla 1

15. Usablees distinto
de Útil
Regla 2

16. Diseñamos, construimos, probamos para
resolver necesidades de los usuarios.
Por eso necesitamos
conocery entendersusproblemas
y necesidades.
Regla 3

17. EL UNIVERSO DE UX

18. Sin embargo…

19. A LOS USUARIOS LES IMPORTA…
Nuestrasolución
Nuestroproceso

20. CON EL EQUIPO CON LOS CLIENTESCON NOSTROS
MISMOS
CON LOS USUARIOS
VALIDAR NUESTRA SOLUCIÓN

21. INTRODUCCIÓN
¿CÓMO EVALUAMOS?

22. ¿CÓMO EVALUAMOS?
TESTER USUARIO

23. PROS:
•Son usuarios reales.
•El equipo puede veral
usuariousando su solución.
•Lo encontrado es menos
discutible.
CONTRAS:
•La logísticaque puede tener.
•Necesitamos más tiempo y
recursos para prepararlo.
USUARIO
PROS:
•Esmásrápido.
•Podemosencontrar
problemasde
consistencia.
•Podemoschequearque el
diseñosigacriterios, como
guíasde estilo.
CONTRAS:
•No somosusuarios.
•Lo que encontremos
depende mucho de
nuestra experienciay
conocimientos en la lógica
del negocio bajo prueba.
TESTER

24. Algunosproblemassolo pueden ser encontrados
porlosusuarios.

25. Entonces…

26. SE PUEDEN APLICAR
AMBOSENFOQUES
Aplicar heurísticas de usabilidad, guías para detectar
problemas de consistencia.
Arreglar los defectos encontrados.
Realizar pruebas con los usuarios para detectar
problemas que solo ellos pueden detectar.

27. AGENDA
INTRODUCCIÓN1
HEURÍSTICAS DE USABILIDAD
Y EJERCICIO
2
TÉCNICAS CON USUARIOS3
TÉCNICAS CON USUARIOS:
TAREAS Y EJERCICIO
4
5
¿QUÉ NOS GUSTARÍA QUE
TE LLEVES?

28. ¿CÓMO EVALUAMOS?
TESTER USUARIO

29. Revisionesde la interfazpara versi
se violanprincipiosde usabilidad.

30. ¿Cómo?
Aplicandoheurísticas.

31. Las heurísticasnosproveenuna
dirección, guíay enfoquepara
resolver un problema.

32. •Fáciles de aplicar.
•Ayudan a identificar inconsistencias.
PROS:
•Pueden ser muy generales.
•No garantizan una solución.
•Dos heurísticas pueden contradecirse.
CONTRAS:

33. HEURÍSTICAS DE TESTING
CEM KANER
Consistencia con:
•El producto.
•La historia.
•Productos similares.
•La imagen.
•Las regulaciones.
•Su propósito.
http://testingeducation.org/BBST/foundations/

34. HEURÍSTICAS DE USABILIDAD
JAKOB NIELSEN
1.Visibilidad del estado del sistema.
2.Relación entre el sistema y el mundo real.
3.Control y libertad por parte del usuario.
4.Consistencia y estándares.
5.Prevención de errores.
6.Reconocimiento antes que recuerdo.
7.Flexibilidad y eficiencia de uso.
8.Estética y diseño minimalista.
9.Ayudar a los usuarios a reconocer,
diagnosticar y recuperarse de los errores.
10.Ayuda y documentación.
www.useit.com/papers/heuristic/heuristic_list.html

35. HEURÍSTICAS DE USABILIDAD
CADA HEURÍSTICA

36. ¿ALGUNA VEZ TUVIERON PROBLEMA SAL
MOMENTO DE ELEGIR UNA CONTRASEÑA ?

37. El sistema siempre debería mantener
informados a los usuarios de lo que
está ocurriendo, a través de
retroalimentación apropiada dentro
de un tiempo razonable.
VISIBILIDAD DEL
ESTADO DEL SISTEMA
01

38. El sistema siempre debería mantener
informados a los usuarios de lo que
está ocurriendo, a través de
retroalimentación apropiada dentro
de un tiempo razonable.
VISIBILIDAD DEL
ESTADO DEL SISTEMA
01

39. ¿PARA QUÉ SIRVE ESTE SITIO?

40. RELACIÓN ENTRE
EL SISTEMA Y EL
MUNDO REAL
02
El sistema debería hablar el lenguaje
de los usuarios mediante palabras,
frases y conceptos que sean familiares
al usuario, más que con términos
relacionados con el sistema. Seguir las
convenciones del mundo real,
haciendo que la información aparezca
en un orden natural y lógico.

41. RELACIÓN ENTRE
EL SISTEMA Y EL
MUNDO REAL
02
El sistema debería hablar el lenguaje
de los usuarios mediante palabras,
frases y conceptos que sean familiares
al usuario, más que con términos
relacionados con el sistema. Seguir las
convenciones del mundo real,
haciendo que la información aparezca
en un orden natural y lógico.

42. RELACIÓN ENTRE
EL SISTEMA Y EL
MUNDO REAL
02
El sistema debería hablar el lenguaje
de los usuarios mediante palabras,
frases y conceptos que sean familiares
al usuario, más que con términos
relacionados con el sistema. Seguir las
convenciones del mundo real,
haciendo que la información aparezca
en un orden natural y lógico.

44. CONTROL Y LIBERTAD
POR PARTE DEL
USUARIO
03
Hay ocasiones en que los usuarios elegirán
las funciones del sistema por error y
necesitarán una “salida de emergencia”
claramente marcada para dejar el estado
no deseado al que accedieron, sin tener que
pasar por una serie de pasos. Se deben
apoyar las funciones de deshacer y rehacer.

45. CONTROL Y LIBERTAD
POR PARTE DEL
USUARIO
03
Hay ocasiones en que los usuarios elegirán
las funciones del sistema por error y
necesitarán una “salida de emergencia”
claramente marcada para dejar el estado
no deseado al que accedieron, sin tener que
pasar por una serie de pasos. Se deben
apoyar las funciones de deshacer y rehacer.

47. CONSISTENCIA Y
ESTÁNDARES
04
Los usuarios no deberían
cuestionarse si acciones, situaciones
o palabras diferentes significan en
realidad la misma cosa; siga las
convenciones establecidas.

48. CONSISTENCIA Y
ESTÁNDARES
04
Los usuarios no deberían
cuestionarse si acciones, situaciones
o palabras diferentes significan en
realidad la misma cosa; siga las
convenciones establecidas.

49. CONSISTENCIA Y
ESTÁNDARES
04
Los usuarios no deberían
cuestionarse si acciones, situaciones
o palabras diferentes significan en
realidad la misma cosa; siga las
convenciones establecidas.

50. CONSISTENCIA Y
ESTÁNDARES
04
Los usuarios no deberían
cuestionarse si acciones, situaciones
o palabras diferentes significan en
realidad la misma cosa; siga las
convenciones establecidas.

51. CONSISTENCIA Y
ESTÁNDARES
04
Los usuarios no deberían
cuestionarse si acciones, situaciones
o palabras diferentes significan en
realidad la misma cosa; siga las
convenciones establecidas.

53. Muchomejor que un buen diseño
de mensajes de error es realizar un
diseño cuidadoso que prevenga la
ocurrencia de problemas.Hay que
eliminar acciones predispuestas al
error o, en todo caso, localizarlas y
preguntar al usuario si está seguro
de realizarlas.
PREVENCIÓN DE
ERRORES
05

54. Muchomejor que un buen diseño
de mensajes de error es realizar un
diseño cuidadoso que prevenga la
ocurrencia de problemas.Hay que
eliminar acciones predispuestas al
error o, en todo caso, localizarlas y
preguntar al usuario si está seguro
de realizarlas.
PREVENCIÓN DE
ERRORES
05

55. Muchomejor que un buen diseño
de mensajes de error es realizar un
diseño cuidadoso que prevenga la
ocurrencia de problemas.Hay que
eliminar acciones predispuestas al
error o, en todo caso, localizarlas y
preguntar al usuario si está seguro
de realizarlas.
PREVENCIÓN DE
ERRORES
05

56. ¿POR QUÉSESUGIERE
EL CONTACTO?

57. Se deben hacer visibles los objetos,
acciones y opciones. El usuario no
debería tener que recordar la
información que se le da en una
parte del proceso para seguir
adelante. Las instrucciones para el
uso del sistema deben estar a la
vista o ser fácilmente recuperables
cuando sea necesario.
RECONOCIMIENTO
ANTES QUE
RECUERDO
06

58. Se deben hacer visibles los objetos,
acciones y opciones, El usuario no
debería tener que recordar la
información que se le da en una
parte del proceso para seguir
adelante. Las instrucciones para el
uso del sistema deben estar a la
vista o ser fácilmente recuperables
cuando sea necesario.
RECONOCIMIENTO
ANTES QUE
RECUERDO
06

60. FLEXIBILIDAD Y
EXPERIENCIA DE
USO
07
Los aceleradores permiten aumentar
la velocidad de interacción para el
usuario experto tal que el sistema
pueda atraer a usuarios principiantes
y experimentados. Es importante que
el sistema permita personalizar
acciones frecuentes para así acelerar
el uso de éste.

61. FLEXIBILIDAD Y
EXPERIENCIA DE
USO
07
Los aceleradores permiten aumentar
la velocidad de interacción para el
usuario experto tal que el sistema
pueda atraer a usuarios principiantes
y experimentados. Es importante que
el sistema permita personalizar
acciones frecuentes para así acelerar
el uso de éste.

63. Los diálogos no deben contener
información que es irrelevante o
poco usada. Cada unidad extra de
información en un diálogo compite
con las unidades de información
relevante y disminuye su visibilidad
relativa.
ESTÉTICA Y
DISEÑO
MINIMALISTA
08

64. Los diálogos no deben contener
información que es irrelevante o
poco usada. Cada unidad extra de
información en un diálogo compite
con las unidades de información
relevante y disminuye su visibilidad
relativa.
ESTÉTICA Y
DISEÑO
MINIMALISTA
08

67. Los mensajes de error se deben entregar en un
lenguaje claro y simple, indicando en forma precisa
el problema y sugiriendo una solución constructiva
al problema.
AYUDAR A LOS
USUARIOS A RECORDAR,
DIAGNOSTICAR Y
RECUPERARSE DE LOS
ERRORES
09

69. AYUDA Y
DOCUMENTACIÓN
10
Inclusoen los casos en que el sistema
pueda ser usado sin documentación,
podría ser necesario ofrecer ayuda y
documentación. Dicha información debería
ser fácil de buscar, estar enfocada en las
tareas del usuario, con una lista concreta
de pasos a desarrollar y no ser demasiado
extensa.

70. AYUDA Y
DOCUMENTACIÓN
10
Inclusoen los casos en que el sistema
pueda ser usado sin documentación,
podría ser necesario ofrecer ayuda y
documentación. Dicha información debería
ser fácil de buscar, estar enfocada en las
tareas del usuario, con una lista concreta
de pasos a desarrollar y no ser demasiado
extensa.

71. HEURÍSTICAS DE USABILIDAD
JAKOB NIELSEN
1.Visibilidad del estado del sistema.
2.Relación entre el sistema y el mundo real.
3.Control y libertad por parte del usuario.
4.Consistencia y estándares.
5.Prevención de errores.
6.Reconocimiento antes que recuerdo.
7.Flexibilidad y eficiencia de uso.
8.Estética y diseño minimalista.
9.Ayudar a los usuarios a reconocer,
diagnosticar y recuperarse de los errores.
10.Ayuda y documentación.
www.useit.com/papers/heuristic/heuristic_list.html

72. HEURÍSTICAS DE USABILIDAD
¿CÓMO HACEMOS UN
ANÁLISIS HEURÍSTICO?

73. ANÁLISIS HEURÍSTICO

74. ANÁLISIS HEURÍSTICO
PASO 2
•Cada uno por
separado.
•Hacemos una
exploración para
conocer el producto.
•Hacemos una o
varias iteraciones
enfocándonos en
las funcionalidades
bajo prueba.
PASO 3
•Puesta en común
(si hay más de una
persona analizando).
•Compartir los
hallazgos con el
equipo.
PASO 1
•Es recomendable
definir las áreas
que nos interesan
particularmente
revisar.

75. ESCALA DE SEVERIDAD
1.
No es un problema.
2.
Problema estético.
3.
Problema de usabilidad menor.
4.
Problema de usabilidad
mayor, se debe arreglar.
5.
Problema catastrófico de
usabilidad, bloqueante.

76. HEURÍSTICAS DE USABILIDAD
EJERCICIO

77. BREAK!

78. AGENDA
INTRODUCCIÓN1
HEURÍSTICAS DE USABILIDAD
Y EJERCICIO
2
TÉCNICAS CON USUARIOS3
TÉCNICAS CON USUARIOS:
TAREAS Y EJERCICIO
4
5
¿QUÉ NOS GUSTARÍA QUE
TE LLEVES?

79. ¿CÓMO EVALUAMOS?
TESTER USUARIO

80. ALGUNAS TÉCNICAS
UsabilityLabStudies
EthnographicField Studies
ParticipatoryDesign
FocusGroupInterviews
Eyetracking
UsabilityBenchmarking (in lab)
RemotePanel Studies Diary/Camera Studies
CustomerFeedback
Concept Testing
DesirabilityStudies
CardSortingClickstreamanalysis
A/B Testing
UnmoderatedUX Studies
True IntentStudies
InterceptSurveys
Email Surveys
Analytics
UsabilityTests

81. ¿Cómo selecciono?

82. Segúnenquépartedel procesoestoy.
Según lo que quiero averiguar.
¿CÓMO
SELECCIONO?
ES IMPORTANTE:
Cómo preguntar, cómo armar y
cómo conducir.

83. ALGUNAS TÉCNICAS
UsabilityLabStudies
EthnographicField Studies
ParticipatoryDesign
FocusGroupInterviews
Eyetracking
UsabilityBenchmarking (in lab)
RemotePanel Studies Diary/Camera Studies
CustomerFeedback
Concept Testing
DesirabilityStudies
CardSortingClickstreamanalysis
A/B Testing
UnmoderatedUX Studies
True IntentStudies
InterceptSurveys
Email Surveys
Analytics
UsabilityTests

84. AGENDA
INTRODUCCIÓN1
HEURÍSTICAS DE USABILIDAD
Y EJERCICIO
2
TÉCNICAS CON USUARIOS3
TÉCNICAS CON USUARIOS:
TAREAS Y EJERCICIO
4
5
¿QUÉ NOS GUSTARÍA QUE
TE LLEVES?

85. TÉCNICAS CON USUARIOS
PRUEBAS BASADAS
EN TAREAS

86. ¿QUÉ ES EL TEST BASADO
EN TAREAS?
Testearla usabilidadde unainterfazpidiendoa
usuariosrealesque hagantareasrealesutilizandola
interfaz, yasea con el software real o prototipos.

87. Usuarios reales
Tareasreales

88. PRUEBAS BASADAS EN TAREAS
¿QUÉ INFORMACIÓN SE OBTIENE?

89. ¿QUÉ INFORMACIÓN SE OBTIENE?
•Tareascompletas
•Tiempo
•Errores
•Opiniónde la interfaz
•Evaluacióngeneral de UX

90. PRUEBAS BASADAS EN TAREAS
¿CON QUÉ SE PRUEBA?

91. ¿CON QUÉ
SE PRUEBA?

92. PRUEBAS BASADAS EN TAREAS
¿QUÉ MODALIDADES HAY?

93. PRUEBAS DE USABILIDAD MODERADAS
Laboratorio On site Remoto

94. NO MODERADAS
•Se utilizaunaherramientade testeoonline.
•Los participantescompletanel estudioensupropio
tiempo.
•La informaciónse puedevisualizarde diferentes
maneraspara seranalizada.
MODERADAS
•El facilitadorestápresenteentiemporeal, hablacon
el participantey observa.
¿QUÉ MODALIDADES
HAY?

95. ALGUNAS HERRAMIENTAS:
•Indigo Studio (indigodesigned.com)
•Loop11 (loop11.com)
•Try My UI (trymyui.com)
•Usertesting(usertesting.com)
•User Zoom (userzoom.com)
PRUEBAS DE USABILIDAD
NO MODERADAS

96. •Feedback visual
•Preguntasfollow-up
•Tareasmáscomplejas
•Informacióncualitativa
MODERADAS
•Muchos participantes a la vez
•Encualquierparte del mundo
•Económico
•Menos tiempo
•Información cuantitativa
NO MODERADAS

97. PRUEBAS BASADAS EN TAREAS
EL PROCESO

98. PASO 4
EL PROCESO
¿Qué quiero
probar?
PASO 1
Crear las tareas
PASO 2
Probar
PASO 3
Analizar

99. EL PROCESO
PASO 4
¿Qué quiero
probar?
PASO 1
Crear las tareas
PASO 2
Probar
PASO 3
Analizar

100. ¿QUÉ QUIERO PROBAR?
Aplicación Historias / Flujos

101. TIPS PARA DEFINIR QUÉ TESTEAR
Elegir la historia más valiosa, más riesgosa, más compleja.
Diseños o conceptos nuevos.
No pretender cubrir demasiado.

102. EL PROCESO
PASO 4
¿Qué quiero
probar?
PASO 1
Crear las tareas
PASO 2
Probar
PASO 3
Analizar

103. PLANTEAR IDEAS REALISTAS
El fraseo debe ser simple, pensando en escenarios realistas:
“Mostramequé harías si querésbuscar zapatos de hombre.”
“Querésreservar una habitación en un hotel en Montevideo, cerca del
centro de la ciudad. Mostramecómo lo harías.”

104. “MOSTRAR” ES EL VERBO CLAVE
“¿Cómo harías si querésencontrar un hotel en Montevideo?”
“Buscar Montevideo.”
Buscamos que el usuario lleve a cabo las acciones, no que
nos de explicaciones verbalmente.

105. EVITAR EXPLICITAR LA TAREA
“Mostramecómo harías si quisieras agregar
esos zapatos al carrito de compra.”
“Mostramequé harías si decidieras comprar
esos zapatos.”

106. SER ESPECÍFICO
“Mostramecómo encontrarías un hotel que te guste.”
“Buscáuna habitación por menos de 100 dólares la
noche.”
Es necesario definir una meta clara para el usuario.

107. MÁS TIPS…
No plantear tareas secuenciales.
Tener tareas y material adicional impreso para darle
al participante.
Usar un lenguaje entendible por el usuario.
Definir tareas que tengan sentido para los usuarios.

108. EL PROCESO
PASO 4
¿Qué quiero
probar?
PASO 1
Crear las tareas
PASO 2
Probar
PASO 3
Analizar

109. RECLUTAR
USUARIOS
PROBAR EL TEST
CÓMO PREPARARSE
TENER LOS
MATERIALES
NECESARIOS

110. CÓMO PREPARARSE
RECLUTAR
USUARIOS
PROBAR EL TEST TENER LOS
MATERIALES
NECESARIOS

111. CÓMO PREPARARSE
RECLUTAR
USUARIOS
PROBAR EL TEST TENER LOS
MATERIALES
NECESARIOS

112. SESIONES UNO A UNO
•Presentar la dinámica.
•Dar al participante las tareas a realizar.
•Incentivar el pensamiento en voz alta.
•Observar y tomar notas.
CÓMO PROBAR:
LA DINÁMICA

113. •Posee conocimiento del diseño.
•Es empático.
•Es observador.
•Mantiene la comunicación fluida.
•Escucha.
CARACTERÍSTICAS
DEL FACILITADOR

114. •Evitar preguntas cerradas.
•No mostrar aprobación o
desaprobación.
•Reformula / genera nuevas preguntas.
•Redirigirpreguntas.
•Estaratentosa cuándoinsistir,
abandonar, ayudar.
•Hacerpreguntasfinales.
LA INTERACCIÓN
CON EL USUARIO

115. EL PROCESO
PASO 4
¿Qué quiero
probar?
PASO 1
Crear las tareas
PASO 2
Probar
PASO 3
Analizar

116. ANALIZAR

117. PRUEBAS BASADAS EN TAREAS
EJERCICIO

118. AGENDA
INTRODUCCIÓN1
HEURÍSTICAS DE USABILIDAD
Y EJERCICIO
2
TÉCNICAS CON USUARIOS3
TÉCNICAS CON USUARIOS:
TAREAS Y EJERCICIO
4
5
6
¿QUÉ NOS GUSTARÍA QUE
TE LLEVES?

119. ¿QUÉ NOS GUSTARÍA
QUE TE LLEVES?
Todos trabajamos para generar la experiencia del usuario.

120. ¿PREGUNTAS?
¡MUCHAS GRACIAS!
21 y 22 de mayo, 2018
www.testinguy.org
#testinguy|@testinguy
Claudia Badell
[email protected]
@claubs_uy
Joanna Arnaiz
[email protected]
@joiarnaiz
Martín Loskin
[email protected]
Patricia Duarte
[email protected]