Charla en el Día Mundial de la Usabilidad (Ciudad de México, 16 nov 2013). Los estilos emergentes de interfaces de usuario, tales como la realidad aumentada, las superficies multi-táctiles y las interfaces gestuales y corporales, plantean retos importantes para el diseño y evaluación de la experiencia del usuario. En esta charla se presentan los enfoques que se han seguido para enfrentar dichos retos en el Laboratorio de Tecnologías Interactivas y Cooperativas de la Universidad de las Américas Puebla (http://ict.udlap.mx), particularmente en el contexto de proyectos en desarrollo en las áreas de procesos de innovación, visualización de información, y puntos de interés en ciudades para grupos de visitantes.

1. UUX para interfaces
naturales y realidad
aumentada
Alfredo Sánchez
Laboratorio de Tecnologías Interactivas y Cooperativas
Universidad de las Américas Puebla

7. Laboratorio de Tecnologías
Interactivas y Cooperativas
(Laboratorio ICT)
http://ict.udlap.mx

8. Laboratorio ICT en breve
• Establecido en 1996
• Misión:
Ofrecer un ambiente para la investigación, avance y comprensión de
actividades humanas apoyadas por las TICs
• Áreas de interés
•
•
•
•
Interacción humano-computadora
Sistemas colaborativos
Bibliotecas digitales / espacios de conocimiento
Tecnologías de aprendizaje

9. Laboratorio ICT en breve
• Más de 40 graduados de licenciatura, maestría y doctorado
• Más de 120 publicaciones (congresos, revistas, capítulos de libros)
• 12 proyectos financiados externamente
•
•
•
•
Visualización de información
Salas multimediales
Aprendizaje en ambientes de inmersión
Superficies interactivas
• Colaboración con UASLP, UCOL, UDG, UV, BUAP, ITESM, U Valladolid,
TAMU,…
• Estancias de investigadores visitantes de ITO (Orizaba), TUM e
Innovationsmanufaktur (Munich), Unicauca (Colombia), URW (Alemania)

10. Laboratorio ICT físicamente
ICT está en el 4º piso de la biblioteca central de la UDLAP

17. Agenda
• Evaluación de usabilidad
• Protocolo
• Exploración de nuevas interfaces de usuario
• Recomendaciones basadas en etiquetado colaborativo
• Visualización de información
• Superficies interactivas
• Diseño de la experiencia del usuario
• Ambientes abiertos y diversidad de usuarios
• Realidad aumentada

18. Elementos generales
para estudios de
usabilidad
•
•
•
•
•
•
•
•
•
•
Usuarios
Software a evaluar
Software de apoyo (ej. Morae)
Equipo de grabación
Guía para los evaluadores
(productor, facilitador,
observadores)
Carta de derechos del usuario
Carta de consentimiento
Cuestionario previo
Hoja de tareas
Cuestionario posterior

19. Ejemplo de guía
para evaluadores

20. Ejemplo de
carta de
derechos del
participante

21. Ejemplo de
carta de
consentimiento

22. Ejemplo de
cuestionario
previo

23. Ejemplo de
hoja de tareas

24. Ejemplo de
cuestionario
posterior

25. Protocolo
Para cada sesión:
0. Preparación del escenario
1.Recepción de usuario(s)
2.Lectura de carta de derechos
3.Firma de carta de consentimiento
4.Llenado de cuestionario previo
5.Ejecución de tareas (con el
facilitador)
6.Llenado de cuestionario posterior
…y esto sólo es la base para el análisis

26. Exploración de interfaces
en el Laboratorio ICT

27. Etiquetado inducido

28. REC – Recomendaciones basadas en
etiquetado colaborativo
[Sánchez et al. 2007, 2008]

29. REC – Recomendaciones basadas en
etiquetado colaborativo
[Sánchez et al. 2007, 2008]

30. REC – Recomendaciones basadas en
etiquetado colaborativo

31. REC - Facebook
[Sánchez et al. 2007, 2008]

32. Diseño de la experiencia del usuario
• Basada en la investigación del área
foafing
movielens
phoaks
delicious

33. Etiquetado (“bookmarking” social)
• Cuatro categorías de etiquetas:
[Cañada 2006]
• Egoísta: “mi viaje a China”
• Amiguista: “Hangzhou”
• Altruísta:
“Hangzhou”, “West Lake”,
“Pleasure boats”
• Populista : “Imperdible”, “sexy”
• ¿Por qué no todo mundo es altruísta?
• Se desconoce el potencial del etiquetado colaborativo
• No hay incentivos claros
• … la gente es cruel 

34. Etiquetado inducido
especialista
Etiquetas
Etiquetas
especialista
especialista
[Sánchez et al. 2007, 2008]

35. Etiquetado inducido
• Todos pueden etiquetar, pero:
• 1) hay un grupo bien definido de usuarios expertos en los recursos a
etiquetar y en las necesidades de la comunidad; y
• 2) el etiquetado es parte de las responsabilidades de este grupo
[Sánchez et al. 2007, 2008]

36. [Arzamendi 2006]
Prototipos de baja y alta fidelidad

37. Visualización de
información
y minería visual de colecciones
[Sánchez 2013]

38. Grafos egocéntricos
Instituciones
[Bolaños 2010]
Autores

39. Escalabilidad…
[Bolaños 2010]

40. Grafos egocéntricos + filtros

41. Diseño de la experiencia de usuario
• Investigación de trabajo relacionado

42. Diseño de la experiencia de usuario
• Prototipos
[Bolaños 2010]

43. Evaluación de usabilidad y experiencia de
usuario

44. Visualización de relaciones
en campos de estrellas
ontológicos

45. Localizando investigadores
[Sánchez et al. 2011]

46. Localizando colaboradores potenciales
es
ion
tuc
sti
in
países
[Sánchez et al. 2011]

47. Expansión de ambos ejes
autores
instituciones
países
[Sánchez et al. 2011]

48. OntoStarFish: Investigación y prototipos
y
r
t
n
u
o
c
Fisheye lens 1

o
u
t
s
n
i


Fisheye lens 2
r
o
h
t
u
a

Starfield
overview
Ontological
axes
more specific subjects
general subjects
[Sánchez et al. 2011; Ramos et al. 2010]

49. Evaluación (con 28 sujetos, verbalización
constructiva)
[Sánchez et al. 2011; Ramos et al. 2010]

50. Visualización de
colecciones usando
mapas

51. VoroSOM: mapas auto-organizables
+ diagramas de Voronoi
• Mapas auto-organizados (SOMs)
• Funcionan como clasificadores, produciendo jerarquías de categorías – ideal
para navegar
• Preservan propiedades topológicas de relaciones existentes en los metadatos
• Diagramas de Voronoi
• Se pueden construir sobre una representación espacial 2D de las categorías
SOM
• Reflejan visualmente las relaciones semánticas de las categorías adyacentes

52. Alternativas de representación
“Continentes”
“Islas”
[Gutiérrez et al. 2012; Gutiérrez et al. 2013]

53. VoroSOM - Continentes

54. Navegación jerárquica
(aplicación consistente de la metáfora)

55. VoroSOM - Islas

56. Navegación islas

57. Prototipos disponibles
• VoroSOM – Continentes:
• http://ict.udlap.mx/remeri/vorosom1
• http://ict.udlap.mx/remeri/vorosom2
• VoroSOM – Islas
• http://ict.udlap.mx/remeri/vorosom3

58. Diseño de la experiencia del usuario
• Herramienta principal: Prototipos de baja y alta fidelidad
[Gutiérrez 2012]

59. Los mapas pueden ser una metáfora clave
para comprensión de colecciones
[Gutiérrez et al. 2012; Gutiérrez 2013]

60. Navegación jerárquica
(aplicación consistente de la metáfora)
Nivel de documentos
[Gutiérrez et al. 2012; Gutiérrez 2013]

61. Filtros por institución o tema
[Gutiérrez et al. 2012; Gutiérrez 2013]

62. Evolución en el tiempo
2004
2007
2010
2013

63. Evaluación
(8 sujetos, verbalización
constructiva)
Panorama general
Claridad de las categorías
Claridad en el tamaño
Relaciones entre categorías
Exploración fácil e intuitiva
Semántica y relación de docs
Uso para investigación
Descubrimiento de información
0

64. Visualización de
colecciones adaptando
SunBurst

65. SunGroups
[Galán 2013]

66. SunGroups
Profundidad controlada

67. SunGroups

68. Investigación previa
Sunburst
Docuburst

69. Evaluación de usabilidad y experiencia de
usuario
(10 sujetos, verbalización individual)
“… es muy simple de manipular"
grande, es
bilidad más
ó una posi
“Se abri
ernativas”
da otras alt
decir, te
"Se siente cool…”
tán de
rque es
leer p o
rabajo
e s t an t
"Cu
abeza"
c

70. Interfaces naturales

71. www.baby-food-halal.com
¿Qué es natural?

72. Superficies interactivas
• Usadas principalmente para visualizar información
• Interacción motivante, a pesar de ser limitada

73. meier-mueller.com
Potencial para trabajo colaborativo
Capturar y compratir datos– texto, imágenes, dibujos– aún es complicado

74. InnovaTouch – Un lenguaje de ademanes para
apoyar la innovación
[Fuentes et al. 2011]

75. [Huerta et al. 2011]
http://www.youtube.com/watch?v=ryeA2oGTfm4
Vozze – Voz como mecanismo de
entrada para superficies táctiles

76. Evaluación del prototipo
Vozze/Innovatouch

77. Innovimm: Ademanes + interfaces
gráficas
http://vimeo.com/24255533
[Magallanes et al. 2012]

78. Experiencia de los usuarios de Innovimm
8 sujetos, verbalización constructiva, tareas colaborativas
En general, evaluación muy positiva… a pesar de múltiples problemas

79. Experimentación adicional
• Validación usando una adaptación de PrEmo [Desmet 2003]

80. Validación afectiva con 7 sujetos
En general, valoraciones
positivas
Muy posiblemente
la interfaz novedosa
genera
sujetos receptivos y
tolerantes
[Magallanes et al. 2012]

81. Experimentación adicional con superficies
táctiles
¿Horizontal o vertical?
[Magallanes et al. 2013]

82. Implicaciones para ubicación de
elementos de control
Horizontal
Vertical

83. Realidad aumentada

84. Celedex
• Aplicación de RA utilizando códigos QR
[Gutiérrez et al. 2012]

85. Evaluación de la experiencia del usuario
“shadowing”
Grupo focal

86. Reaumobile (en proceso)
• Realidad aumentada para “puntos de interés” en una ciudad
inteligente
[Thovex 2013]

87. Reto: Diseñar la experiencia del usuario
• Algunas características de la población objetivo
• Diversidad de usuarios en todos los órdenes
•
•
•
•
•
•
Edad
Género
Nivel educativo
Intereses
Tiempo disponible
…
• Sitios abiertos, diversidad de características físicas,…

88. Adaptaciones del Diseño Contextual
[Beyer & Holtzblatt 1998]
•
•
•
•
•
•
•
•
Indagación contextual
Modelado
Validación
Transformación del entorno
Formulación de escenarios
Diseño del nuevo entorno
Prototipos de baja fidelidad
Diseño de la interacción

89. Indagación contextual

90. Modelado

91. Transformación del entorno

92. Escenarios

93. Evaluación formativa

94. Reaumobile… en proceso
•
•
•
•
•
•
•
Validación con usuarios expertos
Diseño de la interacción
Diseño de prototipos de baja y alta fidelidad
Estudios de usabilidad y experiencia de usuario
Desarrollo
Pruebas con usuarios
…

95. Conclusiones
• La investigación enriquece y da sustento a nuevos estilos de interacción
• La formulación de escenarios y prototipos es fundamental en el diseño
de la experiencia del usuario para nuevos estilos de interacción
• Los métodos conocidos, como el diseño contextual, pueden
aprovecharse, con adaptaciones, en el diseño y evaluación de la
experiencia del usuario con nuevos estilos de interacción

96. UUX para interfaces
naturales y realidad
aumentada
Alfredo Sánchez
Laboratorio de Tecnologías Interactivas y Cooperativas
Universidad de las Américas Puebla
http://ict.udlap.mx

97. Agradecimientos
• Varios de los proyectos presentados han recibido apoyo de UDLAP, la
Corporación Universitaria para el Desarrollo de Internet (CUDI) y el
Consejo Nacional de Ciencia yTecnología (Conacyt)
• Los logros del Laboratorio ICT son posibles gracias al talento y
compromiso de un gran número colaboradores. En lo proyectos
mencionados en esta presentación participaron principalmente
Emanuel Aquino, Adriana Arzamendi, Ofelia Cervantes, Salvador
Fuentes, Nilda Galán, Ernesto Gutiérrez, Francisco Gutiérrez, Federico
Hernández, Osvaldo Huerta, Lukas Imrich, Yazmín Magallanes, Yenny
Méndez, Ariel Molina, Lizbeth Peralta, Alfredo Ramos, Antonio Razo,
Diana Selfa, Omar Valdiviezo, y Fernando Vera.

98. Referencias (REC, etiquetado)
• Sánchez, J. A., Valdiviezo, O. 2011. Enhancing productivity through social
computing. Book chapter. In Social Computing Theory And Practice:
Interdisciplinary Approaches. Papadopoulou, P., Kanellis, P., and Martakos, D.
(Eds.). IGI Global. 133-153.
• Sánchez, J. A., Valdiviezo, O., Aquino, E., Paredes, R. 2008. REC: Improving the
utilization of digital collections by using induced tagging. Research in
Computing Science 39, 83-93.
• Sánchez, J. A., Arzamendi-Pétriz, A., Valdiviezo, O. 2007. Induced tagging:
Promoting resource discovery and recommendation in digital libraries.
Proceedings of the Joint Conference on Digital Libraries (JCDL 2007,
Vancouver ), 396-397.

99. Referencias (visualización de
información)
• Sánchez, J. A. 2013. Understanding collections and their implicit structures through information visualization. Book chapter. In Innovative
Approaches of Data Visualization and Visual Analytics. Huang, M. L. & Huang, W. (Eds.), Information Science Reference, 151-175.
• Gutiérrez, E., Sánchez, J. A., Cervantes, O. 2013. Using map representations to visualize, explore and understand large collections of dynamically
categorized documents. Proceedings of the Sixth Latin American Conference on Human-Computer Interaction (CLIHC 2013, Guanacaste, Costa Rica,
Dec. 4-6).
• Sánchez, J. A., Cervantes, O., Ramos, A., Medina, M. A., Lavariega, J. C., Balam, E. 2011. Visualizing collaboration networks implicit in digital libraries
using OntoStarFish. Proceedings of the Joint Conference on Digital Libraries (JCDL 2011, Ottawa). 213-222. (In the ACM Digital Library).
• Ramos Lezama, A., Sánchez, J. A., Hernández-Bolaños, F. 2010. OntoStarFish: Visualization of collaboration networks using starfields, ontologies and
fisheye views. In Proceedings of the Third Mexican Workshop on Human-Computer Interaction (MexIHC 2010, San Luis Potosí, Nov. 8-10), 44-53.
(In the ACM Digital Library).
• Gutiérrez, E., Sánchez, J. A., Galán, N., Razo, A., Cervantes, O. 2012. Visualizing and browsing document collections using self-organized maps.
Proceedings of the Fourth Mexican Conference on Human-Computer Interaction (MexIHC 2012, Oct. 3-5, Mexico City), 38-40.
• Gutiérrez, E. 2013. Visualización de información para entendimiento de colecciones usando VOROSOM. Master’s Thesis, Department of Computing,
Electronics and Mechatrinics, Universidad de las Américas Puebla (May).

100. Referencias (interfaces naturales)
• Molina-Rueda, A., Magallanes, Y., Sánchez, J. A., Enríquez, D. F. 2013. Using heat maps for studying user preferences
in vertical and horizontal multi-touch surfaces. In Proceedings of the 22nd International Conference on Electronics,
Communications and Computers (CONIELECOMP 2013, March 11-13). IEEE Computer Society Press. 21-26.
• Magallanes, Y., Molina, A., Méndez, Y., Sánchez, J. A. 2012. Combining gestures and graphical elements for
collaboration using multitouch surfaces. Proceedings of the 22nd International Conference on Electronics,
Communications and Computers (CONIELECOMP 2012, Feb.). IEEE Computer Society Press, 173-178.
• Magallanes, Y., Molina, A., Méndez, Y., Sánchez, J. A. 2012. Towards an emotional validation of heuristic approaches
for usability evaluation. Acta Universitaria 22, (March, Special issue on ENC 2012, Mexican International Conference
on Computer Science), 119-125.
• Fuentes, S., Sánchez, J. A., Huerta, O. and Cervantes, O. 2011. InnovaTouch: A multi-touch framework to support
gesture recognition for innovation activities. Companion Proceedings of the Fifth Latin American Conference on
Human-Computer Interaction (CLIHC 2011, Porto de Galinhas, Brazil, Oct. 25-28). 12-13. (In the ACM Digital Library)

101. Referencias (interfaces naturales)
• Huerta, O., Sánchez, J. A., Fuentes, S., Cervantes, O. 2011. Speak up your
mind: Using speech to capture innovative ideas on interactive surfaces.
Proceedings of the Fifth Latin American Conference on Human-Computer
Interaction (CLIHC 2011, Porto de Galinhas, Brazil, Oct. 25-28). 202-211.
• Méndez, Y. A., Collazos, C. A., Sánchez, J. A., Merchán Paredes, L. 2012.
Criterios para la evaluación de superficies multitáctiles y sus aplicaciones.
Lámpsakos 7 (Jan.), 64-68.
•
• Gutiérrez, F. S., Vera, F., Sánchez, J. A., Abud, M. A. 2013. Application of
contextual QR codes to augmented reality technologies. Proceedings of the
22nd International Conference on Electronics, Communications and
Computers (CONIELECOMP 2013, March 11-13). IEEE Computer Society Press.
264-269.