Panama Miranda Luis

UNIVERSIDAD VERACRUZANA
FACULTAD ESTADÍSTICA E INFORMÁTICA
“Diseño de interacciones para superficies

grandes: caso de estudio pizarras digitales
interactivas”
TESIS
Que para obtener el grado de:

MAESTRO EN SISTEMAS INTERACTIVOS
CENTRADOS EN EL USUARIO
PRESENTA:
LUIS DAVID PANAMÁ MIRANDA
DIRECCIÓN:
DRA. MARÍA DEL CARMEN MEZURA GODOY
XALAPA, VER. 2021

Agradecimientos
Agradezco a mi familia por siempre apoyarme
y animarme a cumplir mis metas. Este logro
se los dedico con mucho amor.
A mi directora de tesis, dra. Ma. Del Carmen

Mezura Godoy, por todos sus consejos, por su
asesoría y por su paciencia en estos años.
A los sinodales, por su tiempo dedicado.
A mis amigos, por su ayuda incondicional y

por compartir sus conocimientos.
A la Universidad Veracruzana y al personal de

la MSICU por hacer posible esta investigación.
Al Consejo Nacional de Ciencia y Tecnología

(CONACYT), por la beca otorgada que me
permitió realizar los estudios de posgrado
(número de apoyo 715369).
ii
Resumen
Actualmente existen dispositivos que utilizan supercies para interactuar con los
usuarios tales como mesas interactivas, paredes interactivas, suelo interactivo o pizarras
digitales interactivas. Las características principales de estos dispositivos son su tamaño,
la resolución de pantalla, la relación de aspecto, la orientación, la cantidad de usuarios
simultáneos que pueden hacer uso de ella, la tecnología de visualización que utiliza y el
tipo de interacción que utilizan.
El caso de estudio se enfoca en los pizarrones o pizarras digitales interactivas
(PDI) que son sistemas tecnológicos que generalmente se encuentran integrados por:
una computadora, un videoproyector, una supercie de proyección y un dispositivo de
control de apuntador (también llamado puntero).
Sus principales características son que se puede interactuar con su supercie de
proyección directamente (utilizando los dedos si se trata de una PDI multitáctil) y
que se puede visualizar el contenido digital proyectado de manera grupal y a distancia
(debido a su amplio tamaño).
Se ha observado que, si se proyectan aplicaciones que únicamente fueron diseñadas
para computadoras y sin tomar en cuenta las supercies de interacción grandes (como
en la PDI) durante el proceso de desarrollo, entonces es posible que se disminuya la
percepción de usabilidad que tiene el usuario del sistema. Esto se debe a que el diseño
de interacciones no fue el adecuado.
Conviene subrayar, que el diseño de interacciones es el encargado de denir tanto la
estructura como el comportamiento de los sistemas interactivos. Por tanto, una mala
implementación en su diseño puede provocar que la eciencia y la aceptación del sistema
se vean afectadas negativamente.
iii
Resumen
Afortunadamente, en la actualidad los desarrolladores tienen una amplia gama de
herramientas para diseñar las interacciones de los sistemas. Así mismo, se pueden
utilizar modelos y arquitecturas durante el desarrollo de sistemas para crear una interfaz
de usuario distribuida.
A pesar de ello, estas propuestas son limitadas cuando se quiere desarrollar
una aplicación para supercies grandes de interacción (como la PDI) en ambientes
multidispositivo, en el que los usuarios nales se desplazan físicamente en su espacio de
trabajo (un salón de clases, por ejemplo).
Esto se debe a que los trabajos analizados no toman en cuenta (y si lo hacen es
de manera limitada) a la interfaz de usuario distribuida ni a la proximidad que tiene
el usuario respecto a la PDI. La interfaz de usuario distribuida puede utilizarse en los
dispositivos externos conectados al sistema tales como celulares inteligentes o tablets.
Como consecuencia de ello, se realizó la presente investigación para proponer una
solución a este problema. En este estudio, se realizó un análisis sistemático de la
literatura en el que se identicaron los tipos de interacciones, mediante las cuales se
utilizan las PDI (un dispositivo que utiliza una supercie grande de interacción). Así
mismo, se identicaron los dispositivos que se utilizan en conjunto con las PDI, y a
las reglas de diseño que se han propuesto para el desarrollo de aplicaciones en PDI.
Posteriormente, se clasicaron y analizaron los documentos investigados.
A partir de la información obtenida, es que se propone un modelo de interacciones
que ayude al desarrollador a crear sistemas para PDI con una interfaz de usuario
distribuida, multidispositivo y que toma en cuenta la proximidad del usuario, durante
la fase de análisis de la aplicación. De modo que, los sistemas realizados con este modelo
permitan que el usuario nal de la aplicación interactúe con la PDI a distancia mediante
los dispositivos conectados a la aplicación.
Con base en el modelo propuesto se creó el prototipo de una aplicación web en la que
los usuarios realizan, modican o borran trazos en el área de dibujo de la PDI, así como
cambiar el grosor y/o color del trazo. Los usuarios pueden conectar su celular inteligente
al sistema para realizar acciones estando cerca de la PDI (como cambiar el color del
trazo) o lejos de la PDI (como cerrar la sesión). Así mismo, se describieron las fases
de desarrollo del prototipo incluyendo la implementación del modelo y su respectiva
evaluación de usabilidad.
iv
Resumen
Finalmente, en las conclusiones se habla del estado del arte respecto a las supercies
grandes de interacción: los tipos de interacción, los dispositivos más utilizados y las
reglas de diseño. Se menciona al modelo propuesto MIISuG (Modelo de Interacción
para Interfaces en Supercies Grandes) y a los resultados de su evaluación, los cuales
conrman que los usuarios tienen una percepción positiva de usabilidad del sistema.
Además, se obtuvieron siguientes productos: artículo (Panamá L., 2019), el modelo
MIISuG, el sistema PDI ROOM (prototipo de aplicación web para PDI y celulares).
Finalmente, como trabajo a futuro se contempla un estudio sobre el cómputo ubicuo
y las aplicaciones multiusuarios en trabajos colaborativos, para integrarlas al modelo
MIISuG.
v
Índice
Agradecimientos ii
Resumen iii
1. Introducción 1
1.1. Contexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2. Problema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3. Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.4. Hipótesis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.5. Alcances y limitaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.6. Estructura del documento . . . . . . . . . . . . . . . . . . . . . . . . . 8
2. Marco teórico y estado del arte 9

2.1. Marco teórico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.1. Diseño de interacciones . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.2. Dispositivos con supercies grandes de interacción . . . . . . . . 24
2.2. Estado del arte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2.3. Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
vi
Índice
3. Modelo de interacción para interfaces en supercies grandes 48
3.1. Modelo de interacciones . . . . . . . . . . . . . . . . . . . . . . . . . . 50
3.2. Elementos del modelo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
3.3. Arquitectura funcional . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
3.4. Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
4. Prototipo: PDI ROOM 69

4.1. Contexto de uso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
4.1.1. Características del usuario de la aplicación . . . . . . . . . . . . 70
4.1.2. Tareas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
4.1.3. Equipamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
4.1.4. Entorno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
4.1.5. Método de recolección . . . . . . . . . . . . . . . . . . . . . . . 71
4.2. Requerimientos del usuario . . . . . . . . . . . . . . . . . . . . . . . . . 71
4.2.1. Personas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
4.2.2. Ambiente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
4.2.3. Casos de uso . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
4.3. Soluciones de diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
4.3.1. Arquitectura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
4.3.2. Diseño de interacciones . . . . . . . . . . . . . . . . . . . . . . . 77
4.3.3. Diseño de las vistas . . . . . . . . . . . . . . . . . . . . . . . . . 90
4.4. Evaluación del prototipo . . . . . . . . . . . . . . . . . . . . . . . . . . 97
4.4.1. Técnica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
4.4.2. Implementación de la evaluación . . . . . . . . . . . . . . . . . . 99
4.4.3. Población . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
4.4.4. Obtención y análisis de datos . . . . . . . . . . . . . . . . . . . 99
4.5. Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
vii
Índice
5. Conclusiones y trabajo futuro 111
5.1. Resumen general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
5.2. Principales contribuciones . . . . . . . . . . . . . . . . . . . . . . . . . 116
5.3. Trabajos futuros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
A. Anexos 117
A.1. Diagrama y descripción de casos de uso . . . . . . . . . . . . . . . . . . 117
A.2. Evaluación de usabilidad . . . . . . . . . . . . . . . . . . . . . . . . . . 126
A.2.1. Documentos contestados por el evaluador 1 . . . . . . . . . . . . 126
Referencias 173
viii
Índice de guras
1.1. F.H.U Interbis (2015). Touch Board 1078 plus [Imagen]. Recuperado de
www.tanietablice.pl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1. Agrupación por tipo de interacción de PDI . . . . . . . . . . . . . . . . 37
2.2. Agrupación por artefactos utilizados para interactuar con PDI . . . . . 37
2.3. Agrupación por regla de diseño . . . . . . . . . . . . . . . . . . . . . . 39
2.4. Artefactos para interactuar con la PDI . . . . . . . . . . . . . . . . . . 40
2.5. Lápiz electrónico sin y con botón (Kravvaris et al., 2011). . . . . . . . . 40
2.6. Interacción mediante gestos (Klemann et al., 2014). . . . . . . . . . . 41
3.1. Modelo de Interacción para Interfaces en Supercies Grandes (MIISuG). 51
3.2. Arquitectura funcional . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
4.1. Espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
4.2. Arquitectura del sistema PDI ROOM . . . . . . . . . . . . . . . . . . . 74
4.3. Diagrama de objetos Agregar anotación, cerca . . . . . . . . . . . . . . 79
4.4. Diagrama de objetos Modicar anotación, zona Cerca . . . . . . . . . . 81
4.5. Diagrama de objetos Eliminar anotación, zona Cerca . . . . . . . . . . 83
4.6. Diagrama de objetos Eliminar anotación, zona Lejos . . . . . . . . . . 85
4.7. Diagrama de objetos Guardar anotación, zona Cerca . . . . . . . . . . 87
4.8. Diagrama de objetos Guardar anotación, zona Lejos . . . . . . . . . . . 89
ix
Índice de figuras
4.9. Sketch, wireframe, mockup y prototipo del sistema respectivamente . . . 90
4.10. Vista de registro de usuarios en la PDI . . . . . . . . . . . . . . . . . . 91
4.11. Vista de registro de usuarios en el celular . . . . . . . . . . . . . . . . . 91
4.12. Vista de inicio de sesión en la PDI . . . . . . . . . . . . . . . . . . . . 92
4.13. Vista de inicio de sesión en el celular . . . . . . . . . . . . . . . . . . . 92
4.14. Vista anotaciones de la pizarra digital interactiva . . . . . . . . . . . . 93
4.15. Mensaje de ayuda en la PDI . . . . . . . . . . . . . . . . . . . . . . . . 94
4.16. Vistas Modo cerca y Modo a distancia en el celular . . . . . . . . . . . 95
4.17. Mensajes de ayuda del Modo cerca y Modo a distancia en el celular . . 95
4.18. Ejemplo de agregar, modicar, eliminar y guardar anotaciones . . . . . 96
4.19. Archivo guardado en carpeta . . . . . . . . . . . . . . . . . . . . . . . . 96
4.20. Escala de puntuación SUS (Sauro, 2018). . . . . . . . . . . . . . . . . . 100
5.1. Dispositivos utilizados para interactuar con supercies grandes. . . . . 113
A.1. Diagrama de casos de uso del sistema . . . . . . . . . . . . . . . . . . . 117
x
Índice de Tablas
2.1. Software y hardware utilizados en PDI . . . . . . . . . . . . . . . . . . 33
2.2. Cadena de búsqueda utilizada en las fuentes de investigación . . . . . . 35
2.3. Cantidad de documentos resultantes . . . . . . . . . . . . . . . . . . . . 36
2.4. Agrupación de documentos por proximidad, tipo de interacción, ambiente
educativo y multidispositivo. . . . . . . . . . . . . . . . . . . . . . . . . 42
2.5. Agrupación de documentos por entrada y salida de datos, adaptación a
la proximidad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
4.1. Resultados del cuestionario SUS . . . . . . . . . . . . . . . . . . . . . . 100
4.2. Formas de describir la puntuación del cuestionario SUS (Sauro, 2018). . 101
4.3. Resultados del cuestionario CSUQ . . . . . . . . . . . . . . . . . . . . . 102
4.4. Resultados del cuestionario QUIS. Reacciones al software en general . . 103
4.5. Resultados del cuestionario QUIS. Pantalla . . . . . . . . . . . . . . . . 104
4.6. Resultados del cuestionario QUIS. Terminología e información . . . . . 104
4.7. Resultados del cuestionario QUIS. Aprendizaje . . . . . . . . . . . . . . 104
4.8. Resultados del cuestionario QUIS. Capacidades del sistema . . . . . . . 105
A.1. Caso de uso Agregar anotación . . . . . . . . . . . . . . . . . . . . . . 119
A.2. Caso de uso Modicar anotación . . . . . . . . . . . . . . . . . . . . . . 121
A.3. Caso de uso Eliminar anotación . . . . . . . . . . . . . . . . . . . . . . 123
A.4. Caso de uso Guardar anotación . . . . . . . . . . . . . . . . . . . . . . 125
xi
Capítulo 1
Introducción
1.1. Contexto
Los sistemas interactivos ayudan a las personas a realizar sus tareas gracias a la
usabilidad y a la experiencia de usuario que brindan. Sus usuarios están en comunicación
continua con el sistema, ya que los retroalimenta de manera oportuna para ayudar en
el ujo de trabajo de los usuarios. Aunado a los sistemas interactivos, se encuentra el
diseño de interacciones:
El diseño de interacción dene la estructura y el comportamiento

de sistemas interactivos. Los diseñadores de interacción buscan crear
relaciones signicativas entre las personas y los productos o servicios que
estos usan, desde computadoras hasta dispositivos móviles, aparatos y más
- The Interaction Design Association (IxDA)
El diseño de interacciones crea sistemas que no solo se encargan de cumplir con
los requerimientos del cliente, sino que además reaccionan y se comunican de manera
intuitiva ante las acciones de sus usuarios, de este modo disminuye la cantidad de errores
potenciales que el usuario podría cometer durante el uso del sistema. Su objetivo es
proponer formas de interacción que permitan al usuario alcanzar sus objetivos de la
mejor manera posible.
1
1.1. Contexto
Por otro lado, existen dispositivos que utilizan supercies grandes para interactuar
con los usuarios tales como mesas interactivas, paredes interactivas, suelo interactivo
o pizarras digitales interactivas, cuya supercie llega a ser de 1.5m de alto y 4.5m de
ancho (Seifried et al., 2012). Las características principales de estos dispositivos son su
tamaño, la resolución de pantalla, la relación de aspecto, la orientación, la cantidad de
usuarios simultáneos que pueden hacer uso de ella, la tecnología de visualización que
utiliza y el tipo de interacción.
Cuando se hace uso de este tipo de dispositivos deben de considerarse las limitaciones
físicas del usuario y de su espacio de trabajo, pues factores como la altura en la que se
encuentran los elementos de la pantalla (o supercie) puede impedir que los usuarios
interactúen con parte de ella. En el caso de paredes interactivas y de pizarras digitales
interactivas se toma en cuenta la cantidad de tiempo que los usuarios permanecerán
de pie utilizando el dispositivo, pues hay personas que por la edad (o por diferentes
capacidades físicas) no pueden resistir de pie más de media hora para realizar sus
actividades.
El caso de estudio del presente documento se enfoca en la Pizarra Digital Interactiva
(PDI), la cual es un sistema tecnológico que generalmente está integrado por una
computadora, un videoproyector, una supercie de proyección y un dispositivo de
control de puntero (o apuntador), cuyo uso principal es proyectar contenidos digitales
en un formato idóneo para la visualización en grupo, así como permitir a los usuarios
interactuar directamente sobre la supercie de proyección (Marques, 2008a).
De igual modo, este recurso tecnológico ha sido utilizado en gran medida en el
contexto de la educación y formación en el siglo XXI (gura 1.1). Todo centro educativo
que trata de mostrar el nivel tecnológico de sus enseñanzas, que se encuentra en la
punta de la calidad educativa, arma disponer de un buen número de pizarras digitales
(Domingo Gallego, 2010).
2
1.1. Contexto
Figura 1.1: F.H.U Interbis (2015). Touch Board 1078 plus [Imagen]. Recuperado de
www.tanietablice.pl
Las PDI tienen efectos positivos en la educación porque llaman la atención de los
estudiantes y los motivan a participar activamente en las lecciones (Mora Chavarría,
2017). Su uso ha ido en aumento y actualmente pueden encontrarse en lugares como:
colegios, museos y empresas.
De manera similar a otros dispositivos, la interfaz es la pieza fundamental en el
proceso de interacción entre la PDI y sus usuarios, lamentablemente puede llegar a
volverse una limitante por culpa de un diseño incorrecto (Domingo Gallego, 2010).
Debido a ello es que los sistemas interactivos van de la mano de un diseño de interfaces
apropiado. También es importante que los sistemas tomen en cuenta la interacción
humano computadora, ya que se encarga de estudiar la ergonomía del hardware, la
usabilidad del software y cómo ambas intervienen dentro de la interacción (Muñoz
et al., 2014).
Por consiguiente, el objeto de estudio es la unión del diseño de interacciones y del
caso de estudio de dispositivos que poseen supercies grandes: las pizarras digitales
interactivas. Con la nalidad de ayudar a los desarrolladores a realizar el diseño de
interacciones que tendrá el software especializado para dispositivos con supercies
grandes de interacción, tales como las pizarras digitales interactivas.
3
1.2. Problema
1.2. Problema
En la actualidad, los desarrolladores cuentan con diversas herramientas que les
ayudan a diseñar las interacciones de sus sistemas. Entre las cuales destacan los
principios de diseño, los patrones de interacciones, los principios heurísticos y las leyes
(ley de Hick y ley de Fitts) que mejoran la interacción humano-computadora con base
en principios psicológicos y en la percepción de los usuarios.
Como consecuencia, surge la inquietud de corroborar si un sistema desarrollado para
computadoras portátiles puede utilizarse en supercies grandes de interacción (como la
PDI) de manera óptima. Por lo que, a partir de un estudio experimental (Panamá L.,
2019) se evaluó la usabilidad de aplicaciones de escritorio tanto en computadoras
portátiles como en PDI. Los resultados demostraron que la percepción de usabilidad
que tuvieron los usuarios al utilizar la computadora se redujo cuando las aplicaciones
se utilizaron en la PDI.
Por otra parte, se notó que la interfaz de usuario utilizada en distintos dispositivos
(por ejemplo, en el área de proyección de la PDI y en la pantalla de la computadora)
debe adaptarse al tamaño de la supercie para mantener su usabilidad, puesto que las
interacciones en las aplicaciones son diferentes dependiendo del dispositivo utilizado.
Por lo tanto, para que las aplicaciones aprovechen el hardware de los dispositivos que
se encuentran conectados, es necesario que el diseñar interacciones especícas para
dispositivos con supercies grandes.
Afortunadamente, existen modelos y arquitecturas de software que permiten
desarrollar sistemas con interfaz de usuario distribuida, lo cual permite que los usuarios
accedan y controlen supercies grandes de interacción (como la PDI) mediante distintos
dispositivos, tales como tablets o celulares inteligentes.
En el análisis del estado del arte, se encontraron trabajos que abordan el diseño
de interacciones en dispositivos que poseen grandes supercies de interacción. En los
cuales se utilizan dispositivos externos para interactuar con PDI, por ejemplo: el lápiz
electrónico, la supercie de proyección multitáctil, el sensor de proximidad, la tablet,
el celular inteligente, el apuntador láser, el guante con luz infrarroja, el Kinect y el
Wiimote.
Partiendo de los trabajos analizados, se notó que sus propuestas:
4
1.2. Problema
Utilizan el sistema en un ambiente multidispositivo, ya que se pueden integrar
dispositivos externos a la PDI.
Interactúan con el usuario mediante clics y mediante gestos, gracias a que se
desarrollan acciones predenidas para dispositivos como el Kinect o los sensores
de proximidad.
Admiten la entrada de datos a distancia, debido a que la información entre
dispositivos se realiza de manera remota mediante tablets o celulares inteligentes.
A pesar de que las propuestas funcionan en los casos de estudio donde se
implementaron, se observó que no toman en cuenta los siguientes aspectos o si lo hacen
es de manera limitada:
No realizan diferentes tareas en los dispositivos dependiendo de la proximidad a
la que se encuentre el usuario de la supercie grande de interacción.
No distribuyen la interfaz de usuario gráca de la supercie grande de interacción
hacia dispositivos externos.
No adaptan la interacción de los dispositivos según la proximidad del usuario que
tiene respecto a la supercie grande de interacción.
El problema de los sistemas que poseen supercies grandes y que carecen de estos
aspectos, es que pueden limitar la interacción de los usuarios cuando están lejos del
dispositivo ya que están obligados a realizar sus tareas cerca del dispositivo. Además,
cuando los sistemas no tienen dispositivos externos conectados, los usuarios solo pueden
interactuar con el lápiz electrónico (el caso de la PDI) por lo que métodos de entrada
diferentes (tales como voz a texto desde un celular) no son aprovechados.
Es decir, si se quiere desarrollar un sistema para supercies grandes, en el que los
usuarios interactúen con múltiples dispositivos y desde diferentes lugares en el espacio
de trabajo, entonces se deben diseñar interacciones con base en el dispositivo utilizado
y en la distancia que hay entre el usuario y los dispositivos.
Un ejemplo de este tipo de sistemas puede ser empleado en el ámbito escolar, en que
los profesores pueden impartir las lecciones a sus alumnos mediante una PDI. Además,
el profesor tendrá la capacidad vincular otros dispositivos al sistema de la PDI, tales
5
1.2. Problema
como su celular, tablet o reloj inteligente. Esto con la nalidad de utilizarlos dentro del
aula para controlar el sistema, ya sea que el usuario se encuentre cerca (frente a la PDI)
o lejos (en el escritorio del profesor, en los asientos libres de los alumnos o mientras
el usuario camina dentro el aula con un dispositivo móvil). Ya que el tamaño las PDI
permite su visualización desde distintas zonas dentro del espacio de trabajo, en este
caso un salón de clases.
Para ello, se debe diseñar la interacción de manera que se adapte al dispositivo
utilizado, es decir que si se hace uso de una tablet las interacciones serán diferentes a
las de un reloj inteligente, ya que en el tablet puede utilizarse su pantalla para modicar
el contenido del sistema, mientras que en el reloj podría hacerse uso de la voz para enviar
comandos a la PDI.
También es importante que en este tipo de sistemas se tome en cuenta la proximidad
que tiene el usuario respecto a la supercie grande de interacción (en el caso de estudio
la PDI), debido a que el profesor realiza acciones como cambiar de color o el tamaño de
los trazos que dibuja cuando está frente a ella, a diferencia de las tareas que el profesor
realiza cuando está lejos de ella como acercar o alejar el contenido de la interfaz para
visualizarlo mejor, así como desplazarse en el sistema o realizar cambios de vistas y
diapositivas.
Como se mencionó previamente, los sistemas que no toman en cuenta la proximidad
del usuario para la realización de las tareas restringen la comunicación humano-
computadora a distancia, pues los usuarios sólo pueden realizar sus actividades estando
cerca del dispositivo. Así mismo, en el caso de los sistemas no contemplan el uso de
dispositivos externos, limitan los métodos de entrada y salida que podría utilizar el
usuario, por ejemplo, ingresar texto mediante la voz mediante un celular o dibujar a
distancia desde una tableta gráca.
6
1.3. Objetivos
1.3. Ob jetivos
General
Desarrollar un modelo de interacción y una arquitectura funcional para múltiples
dispositivos que apoye en la construcción de aplicaciones usables que poseen interfaces
en supercies grandes.
Especícos
Analizar el marco teórico y estado del arte, referente al diseño de interacciones
en dispositivos que poseen supercies grandes de interacción, en especíco las
pizarras digitales interactivas (PDI), para detectar sus áreas de oportunidad y de
mejora.
Denir el modelo y la arquitectura de las aplicaciones para grandes supercies
considerando los aspectos de usabilidad.
Validar la propuesta de solución mediante la implementación de un prototipo.
1.4. Hipótesis
Las interacciones realizadas desde múltiples dispositivos mejoran la usabilidad en
aplicaciones que poseen interfaces en supercies grandes.
1.5. Alcances y limitaciones
Se propone un modelo de interacción que apoye a los desarrolladores a construir
sistemas multidispositivo que consideren supercies grandes de interacción. Este modelo
se utiliza durante la fase de análisis de las aplicaciones.
En la presente investigación no se contemplan las aplicaciones multiusuario. El caso
de estudio se centra únicamente en la Pizarra Digital Interactiva (PDI) ya que cuenta
con una supercie grande de interacción.
7
1.6. Estructura del documento
1.6. Estructura del documento
El documento está estructurado de la siguiente manera:
El capítulo 1 es la introducción, la cual muestra al lector los elementos necesarios
para que se familiarice con la investigación.
El capítulo 2 habla sobre el diseño de interacciones, su denición y objetivos, las
5 dimensiones del diseño de interacción y sus partes. Posteriormente se describen
las interfaces de usuario, así como la usabilidad y ejemplos de herramientas de
diseño. También se habla de los dispositivos con supercies grandes de interacción,
especícamente de las pizarras digitales (PD) y las pizarras digitales interactivas
(PDI), los artefactos con los que se pueden utilizar las PDI, los tipos en que se
dividen las PDI, las funcionalidades y características que ofrecen. Se presenta
el estado del arte, en el cual se explica qué preguntas de investigación fueron
utilizadas, cómo se obtuvieron los documentos (los criterios de selección, la cadena
de búsqueda, las fuentes de investigación), el análisis de la literatura (que incluye
a las categorías según las preguntas de investigación) y la discusión (en la cual se
clasican y analizan los documentos).
El capítulo 3 contiene la propuesta de solución al problema identicado, la cual
consiste en el modelo de interacción, su descripción, sus clases y su arquitectura
de sistema.
El capítulo 4 explica la creación del prototipo. Incluye su escenario, la metodología
que se siguió, el desarrollo del prototipo, su evaluación y los resultados obtenidos.
El capítulo 5 contiene las conclusiones obtenidas referente a los objetivos de la
investigación y la hipótesis planteada, de igual manera se incluyen los productos
obtenidos y el trabajo a futuro.
Posteriormente se encuentran los anexos, en los cuales se adjuntan los documentos
que contestaron los evaluadores para vericar si el prototipo es usable.
8
Capítulo 2
Marco teórico y estado del arte
En el presente capítulo se habla de los temas principales para la realización del
documento, los cuales son el diseño de interacciones, la interfaz de usuario distribuida,
las pizarras digitales interactivas (los cuales son dispositivos que poseen supercies
grandes de interacción), así como el estado del arte.
Primero se dene al diseño de interacciones y su objetivo, se muestran las 5
dimensiones del diseño de interacción: palabras, representaciones visuales, objetos
físicos y espacio, tiempo, comportamiento (Siang, 2019), las partes en que se divide la
interacción, la importancia de la usabilidad para los sistemas, así como las herramientas
de diseño que apoyan a los desarrolladores.
Después de ello, se habla sobre las interfaces de usuario distribuidas, las interfaces
migratorias y migrables, la plasticidad en interfaces, ambientes multidispositivo,
técnicas de interacción multidispositivo.
Posteriormente, se habla sobre los dispositivos con grandes supercies de interacción,
es especíco las pizarras digitales (PD) y las pizarras digitales interactivas (PDI). Se
habla de su denición, cómo se componen y sus diferencias. Así mismo se mencionan los
dispositivos con los que se pueden utilizar las PDI, los tipos en que se dividen las PDI,
las funcionalidades y características que la mayoría de las PDI ofrecen. Finalmente se
habla sobre el software que contienen las PDI y algunos ejemplos de ellos.
Finalmente, en el estado del arte se encuentra la revisión sistemática de la literatura,
en la que se muestra la metodología con la que se realizó la obtención y el análisis de
los documentos.
9
2.1. Marco teórico
2.1. Marco teórico
2.1.1. Diseño de interacciones

El diseño de interacción se centra en crear interfaces atractivas con comportamien-
tos intuitivos. También le es fundamental entender cómo los usuarios y la tecnología se
comunican entre sí, porque al comprenderlo es posible anticipar cómo una persona pue-
de interactuar con el sistema, solucionar problemas inmediatamente e inventar nuevas
formas de realizar las cosas (usability.gov, 2000).
Dimensiones del diseño de interacción

El objetivo del diseño de interacción es crear productos para que los usuarios
alcancen sus objetivos de la mejor manera posible. Las 5 dimensiones del diseño de
interacción son un modelo útil para comprender qué implica el diseño de interacción.
Inicialmente se introdujeron cuatro dimensiones de un lenguaje de diseño de interacción,
pero posteriormente se agregó la quinta dimensión Comportamiento (Siang, 2019):
1D: Palabras. Son aquellas que se usan en las interacciones, como las etiquetas
de los botones, deben ser signicativas y fáciles de entender. Deben comunicar
información a los usuarios, pero no demasiada información que vaya a abrumar
al usuario.
2D: Representaciones visuales. Esto se reere a elementos grácos como imágenes,
tipografías e íconos con los que los usuarios interactúan. Estos usualmente
complementan las palabras usadas para comunicar información a los usuarios.
3D: Objetos físicos y espacio. Los usuarios interactúan con el producto mediante
ellos, tales como un mouse, un panel táctil para computadora portátil o los dedos
del usuario para un teléfono inteligente. También involucra dentro de qué tipo de
espacio físico se encuentra el usuario. Por ejemplo, si el usuario está parado en un
tren mientras usa la aplicación de su teléfono inteligente o si está sentado frente al
escritorio de la ocina navegando en un sitio web. Todo esto afecta la interacción
entre el usuario y el producto.
10
2.1. Marco teórico
4D: Tiempo. Se reere principalmente a los medios que cambian con el tiempo
(animación, videos, sonidos). El movimiento y los sonidos desempeñan un papel
crucial en la retroalimentación visual y de audio de las interacciones de los
usuarios. También es preocupante la cantidad de tiempo que un usuario pasa
interactuando con el producto, saber si los usuarios pueden hacer un seguimiento
de su progreso o reanudar su interacción algún tiempo después.
5D: Comportamiento. Esto incluye el mecanismo de un producto, el cómo realizan
las acciones los usuarios en el sistema y cómo utilizan los usuarios el producto. En
otras palabras, es cómo las dimensiones anteriores denen las interacciones de un
producto. También incluye las reacciones, por ejemplo, respuestas emocionales o
comentarios, de los usuarios y el producto.
Las dimensiones deben ser consideradas en todos los sistemas. La dimensión de obje-
tos físicos y espacio toma aún más relevancia en los dispositivos con supercies grandes,
pues se pueden aprovechar los periféricos que se encuentren conectados al sistema, así
como considerar lugar de trabajo de los usuarios para que no sean limitados por el
espacio físico (por ejemplo, una PDI colocada muy alto en la pared).
Interfaz de usuario
Se puede denir a la interfaz de usuario como el medio por el cual los usuarios
y las máquinas interactúan entre sí (Barrera, 2015). La interfaz de usuario o UI
(User Interface) ha sufrido cambios a través del tiempo. En un principio, existió la
interfaz de línea de comandos (CLI), en la que los sistemas se utilizaban introduciendo
órdenes mediante el teclado, hoy en día se sigue utilizando este tipo de interfaces.
Posteriormente, se crearon las interfaces de usuario grácas (GUI), en las cuales ya es
posible usar el ratón para controlar los elementos en pantalla, tales elementos están
orientados a representar objetos de la vida real mediante íconos tales como carpetas y
documentos. Después, con el avance de la tecnología se crearon las interfaces naturales
de usuario (NUI), caracterizadas por ser intuitivas y no necesitar aprendizaje previo,
interactuando por medio del tacto, los gestos o la voz (Barrera, 2015).
La interfaz de usuario natural debe imitar la interacción del usuario con el mundo
físico teniendo una correlación directa entre la acción del usuario y la reacción de la
NUI. Tanto el iPad de Apple como el Kinect de Microsoft son buenos ejemplos de una
11
2.1. Marco teórico
NUI, donde la relación entre nuestras acciones y lo que sucede en la pantalla se siente
directa. Se puede dividir a la interacción directa en tres partes (Mortensen, 2019):
Cercanía: Signica que el usuario está físicamente cerca de la NUI con la que
interactua. Las acciones de la NUI se producen al mismo tiempo que las acciones
del usuario y los movimientos de los elementos en la NUI siguen los movimientos
del usuario. Algunas NUI, como el iPad de Apple, contienen todas las formas
de direccionamiento, mientras que otras, como el dispositivo de detección de
movimiento Microsoft Kinect, contienen uno o dos elementos de direccionamiento,
el cuál detecta el movimiento de los usuarios, interactuando con el contenido de
la pantalla a través de movimientos. La interacción no está cerca de la pantalla,
pero responde en tiempo real y sigue los movimientos del usuario.
Interacción de alta frecuencia: Signica que hay un ujo constante de acción y
reacción entre el usuario y la NUI. Esto imita las actividades en el entorno físico
donde recibimos constantemente información sobre nuestro equilibrio, velocidad,
temperatura, etc. Si el usuario puede ver constantemente la consecuencia directa
de sus acciones, también está recibiendo retroalimentación constante. Un ejemplo
de ello es al acercar y alejar en Google Maps en una pantalla táctil, ya que los
movimientos del mapa siguen de cerca los movimientos de los dedos del usuario.
Interacción contextual: Para evitar abrumar al usuario en las interacciones de alta
frecuencia, es importante que su NUI también use interacciones contextuales. En
lugar de mostrar todas las opciones a la vez, la NUI debe mostrar principalmente
información relevante para la interacción actual del usuario. Google Maps, por
ejemplo, hace esto solo mostrando la escala del mapa cuando el usuario está
acercando o alejando la imagen. La escala desaparece poco después de que el
usuario haya detenido el zoom. El usuario no necesita mucho tiempo para registrar
el punto desde el que se ha movido.
Como se puede observar, la interfaz puede controlarse a distintas distancias: tan-
to cerca (por ejemplo, un reloj inteligente) como lejos (por ejemplo, el Kinect) de los
dispositivos. La interacción debería ser constante, cada acción con su respectiva re-
troalimentación para el usuario. Además, se debe utilizar interacciones basadas en el
contexto del usuario para evitar confundirlo o distraerlo.
12
2.1. Marco teórico
Interfaz de usuario distribuida (DUI)

Hoy en día los sistemas pueden hacer uso de varios dispositivos, un ejemplo de
ello es la aplicación móvil para celulares inteligentes Mi Fit la cual integra múltiples
dispositivos (bandas inteligentes, relojes inteligentes e incluso básculas) para llevar el
registro de nuestra actividad física y calidad de sueño. Así mismo, algunas aplicaciones
poseen interfaces pueden implementarse de manera distribuida, tal es el caso del
videojuego BombSquad ya que distribuye el contenido de la interfaz en diferentes
dispositivos (televisiones inteligentes, TV Box, computadoras, tablets o celulares) y
desde ellos visualizar y/o controlar la aplicación.
La interfaz de usuario distribuida (DUI) puede ser denida como una interfaz
de usuario cuyos componentes se encuentran distribuidos sobre una o más de las
dimensiones de entrada, salida, plataforma, espacio y tiempo. Las dimensiones de
distribución son las siguientes (Elmqvist, 2011):
Entrada. Sucede cuando el método de entrada de la aplicación se encuentra en
uno o más dispositivos, también se le llama redirección de entrada.
Salida. Surge al mostrar el contenido del software en uno o más dispositivos,
también se le conoce como redirección de contenido.
Plataforma. Ocurre cuando la interfaz del programa se ejecuta en una o más
plataformas, como por ejemplo en distintas redes o en sistemas operativos.
Espacio. Pasa cuando se la interfaz está restringida a lugar en concreto o si por
el contrario este se encuentra distribuido geográcamente, en el caso de sistemas
locales o remotos.
Tiempo. Se produce cuando los elementos de la interfaz se pueden ejecutar de
manera simultánea (síncrona) o distribuida en el tiempo (asíncrona).
La DUI es una respuesta natural a los sistemas interactivos que se usan actualmente,
pues factores como la colaboración mediante internet y la existencia de múltiples
dispositivos requieren de mecanismos para ser interoperables.
Como consecuencia de esto, es que la DUI se debe tomar en cuenta en el diseño
de interacciones, pues gracias a ella se puede utilizar la PDI a través de múltiples
13
2.1. Marco teórico
dispositivos, usuarios y plataformas, ya sea en un mismo lugar o desde diferentes
espacios geográcos, al mismo tiempo o en distintos momentos.
Aunado a ello, este tipo de interfaces se encuentran relacionadas con temas de las
subáreas de la interacción humano computadora (IHC), tales como: interacción multi-
dispositivo, migración de interfaces, plasticidad y adaptabilidad de interacciones.
Modelos y arquitecturas de DUI

Los modelos y arquitecturas de las interfaces de usuarios distribuidas son utilizados
para realizar la abstracción de las operaciones y los requerimientos necesarios en los
sistemas con DUI. Algunos ejemplos de ellos son:
Cameleon. Es una arquitectura de referencia que se utiliza en interfaces de usuario
distribuidas, migrables y plásticas (Coutaz et al., 2004). Se divide en cuatro capas
de abstracción. La primera capa es de tareas y conceptos, en la cual se hace uso
del modelo de tareas. La segunda capa es la interfaz de usuario abstracta, siendo
la representación de las subtareas sin tomar en cuenta el tipo de interacción ya
que es independiente de la plataforma. Después se encuentra la capa de interfaz
de usuario concreta, en la que se realiza el diseño de los elementos de la interfaz
en un contexto especíco ya que es dependiente de la plataforma. Finalmente, en
la capa de interfaz de usuario nal se genera la IU a partir de un lenguaje de
programación y esta será dependiente del dispositivo.
Modelo 4C. Con la nalidad de comprender y clasicar las interfaces de usuarios
distribuidas, este modelo las examina por medio de 4 dimensiones: Computación
(comprender qué se distribuye), Comunicación (saber cuándo se distribuye),
Coordinación (percibir quiénes realizan la distribución) y Conguración (conocer
en dónde se distribuye la interfaz de usuario) (Demeure et al., 2008).
Modelo Vista Controlador (MVC). Es una arquitectura que separa la parte
gráca de una aplicación, de los procesos lógicos y de su base de datos. Se
aplica principalmente en la arquitectura Cliente-Servidor. Se compone por tres
elementos: La vista (la interfaz gráca con la que el usuario interactúa), el
controlador (modica los valores de las variables, objetos y datos en general)
y el modelo (representación de la información). En el caso de que se requiera
14
2.1. Marco teórico
almacenamiento de la información se hace uso de una base de datos (López S.,
2009).
Arquitectura VIGO. Esta arquitectura implementa los siguientes elementos:
vistas, instrumentos, controladores y objetos. Surge como alternativa al MVC
con la particularidad de crear interfaces distribuidas, además admite la interacción
ubicua. Para lograrlo, los objetos del sistema son presentados al usuario mediante
distintas vistas, el usuario puede utilizar estos objetos por medio de instrumentos.
Los controladores (también denominados gobernadores) se asocian a objetos,
posteriormente observan los cambios que sufren dichos objetos y los manipulan
basándose en los efectos que pueden ocasionar en el sistema(Klokmose and
Beaudouin-Lafon, 2009).
Kit de herramientas para DUI

Los kits de herramientas son importantes para el cómputo ubicuo, donde los datos
y la computación se integran a los objetos y actividades que se realizan diariamente.
Algunos de ellos están centrados en el hardware, tales como: The ConnecTable (Prante
et al., 2001), iStu (Ballagas et al., 2003), u-Texture (Ideuchi et al., 2004). Mientras
que otros toman en cuenta la arquitectura del software: The BEACH system (Tandler,
2001), Aura (Sousa and Garlan, 2002), Gaia (Roman et al., 2002), MediaBroker (Mo-
dahl et al., 2004).
Interfaces migratorias y migrables

Las aplicaciones migratorias son aquellas que son capaces de desplazarse libremente
por la red en lugar de connarse a una única computadora en particular. Esto con el
objetivo de migrar aplicaciones completas entre servidores que corren el mismo sistema
operativo. Un ejemplo de ello es el marco de trabajo Java Beans.
Por otro lado, las interfaces de usuario migrables admiten la distribución (hacia la
migración) a nivel de componentes de la interfaz utilizando una capa de abstracción
que redirige partes de la interfaz a otra aplicación mediante los servidores.
Plasticidad en interfaces multidispositivo
15
2.1. Marco teórico
La plasticidad de una interfaz de usuario se reere a la capacidad de las interfaces de
usuario para soportar cambios entre diferentes dispositivos (o en un mismo dispositivo)
y ambientes conservando la usabilidad. Esto implica por ejemplo que una interfaz se
adapte a diferentes tamaños de pantalla (tales como dispositivos móviles, computado-
ras portátiles e incluso supercies de proyección) utilizando distintos mecanismos de
entrada (p. ej. táctil, ratón, voz, gestos).
Modelos de ambientes multidispositivo

Los ambientes multidispositivo, como su nombre lo indica, consisten en múltiples
dispositivos heterogéneos (diferentes pantallas, entradas, salidas, métodos de interac-
ción) en las que las DUI se ejecutan. Como respuesta a este tipo de ambientes, se han
utilizado modelos ontológicos para la interacción de múltiples supercies, distribuida en
tiempo y espacio, los cuales son modelos taxonómicos que clasican a los ecosistemas
multiusuarios.
Ambientes multidispositivo
Como se mencionó previamente, los ambientes multidispositivo utilizan dispositivos
heterogéneos para realizar diferentes métodos de entrada (como gestos y comandos de
voz).
Algunos ejemplos de estos ambientes son: DigitalDesk es un sistema que combina
una mesa, una cámara, tablet y un proyector (Wellner, 1993), i-LAND que integra una
pantalla, una mesa interactiva y sillas (Streitz et al., 1999), UbiTable es una pantalla
por partes en la que se realiza colaboración cara a cara (Shen et al., 2003), MultiSpace
es una plataforma que controla documentos a través de mesas, paredes y dispositivos
móviles (Everitt et al., 2006), WeSpace combina una pantalla vertical con una mesa
multitáctil para compartir información en trabajos colaborativos (Wigdor et al., 2009).
Técnicas de interacción multidispositivo

Una pieza clave en los ambientes multidispositivo es cómo se administra la
interacción, por lo que se han creado técnicas que proveen la redirección de entrada
(también conocida como redirección de aplicación) para mandar el contenido de los
métodos de entrada desde un dispositivo a otros.
16
2.1. Marco teórico
La técnica más utilizada es hacer uso de múltiples cursores que se muestren en
todas las pantallas del ambiente distribuido. Por el contrario, la técnica PointRight
redirige las entradas del cursor y del teclado hacia diferentes pantallas. No todas las
interacciones en un ambiente multidispositivo son mediante el uso de cursores, pues
existen por ejemplo DataTiles (Rekimoto et al., 2001), que son tejas físicas hechas de
acrílico transparente que pueden ser utilizadas para unir la interacción gráca y virtual
en las pantallas. De igual manera XWand (Wilson and Wilson, 2004) es un dispositivo
inalámbrico que se usa para la interactuar en entornos inteligentes.
Así mismo la redirección de salida (o de contenido) ayuda a redirigir el contenido de
entrada a las múltiples pantallas y dispositivos del ambiente. Ejemplos que hacen uso
de esta redirección son: Icrafter es un marco de trabajo para ambientes de computación
ubicua (Ponnekanti et al., 2001), ARIS controla a las aplicaciones en un ambiente de
múltiples dispositivos heterogéneos (Biehl and Bailey, 2004).
La interfaz de usuario distribuida crea sistemas interactivos utilizando diversos dis-
positivos. Existen diferentes modelos y arquitecturas que pueden ser utilizadas para
realizar la DUI, así como kits de herramientas, pero estos no contemplan la proximidad
del usuario con el dispositivo. Esto toma relevancia con los dispositivos que poseen su-
percies de interacción grandes pues los usuarios pueden interactuar cerca o lejos del
dispositivo gracias a que el contenido puede visualizarse a mayor distancia que en dispo-
sitivos pequeños como un celular. Los sistemas tienen interfaces migratorias y migrables
para distribuir la aplicación completa o sus componentes en el ambiente multidisposi-
tivo, que el usuario utiliza mediante técnicas de interacción que redirijan el contenido
del sistema entre los dispositivos conectados.
Usabilidad
De igual modo, para tener un buen diseño de interacciones es importante tomar
en cuenta la usabilidad, la cual se dene en el estándar ISO 9241-11:2018 como el
grado en que un producto puede ser usado por usuarios especícos para conseguir
metas especícas con efectividad, eciencia y satisfacción dado un contexto especíco
de uso. Como se puede apreciar, en esta denición se liga la usabilidad de un sistema
a usuarios, necesidades y condiciones especícas. Por tanto, la usabilidad del sistema
no es un atributo inherente al software, no puede especicarse independientemente del
entorno de uso y de los usuarios concretos que vayan a utilizar el sistema (Grau, 2000).
17
2.1. Marco teórico
La usabilidad es importante porque si los usuarios no pueden lograr sus objetivos
de manera eciente, efectiva y satisfactoria, es probable que busquen una solución
alternativa para alcanzar sus objetivos (Komninos, 2019).
Una interfaz con usabilidad tiene tres características principales (Foundation, 2019):
1. Debe ser fácil para el usuario familiarizarse y ser competente en el uso de la
interfaz de usuario durante el primer contacto con el sistema.
2. Debería ser fácil para los usuarios lograr su objetivo a través del uso del sistema.
3. Debería ser fácil recordar la interfaz de usuario y cómo utilizarla en visitas
posteriores.
Para poder estudiar la usabilidad, esta se descompone habitualmente en los
siguientes cinco atributos básicos (Grau, 2000):
Facilidad de aprendizaje: Cuán fácil es aprender la funcionalidad básica del
sistema, como para ser capaz de realizar correctamente la tarea que desea realizar
el usuario. Se mide normalmente por el tiempo empleado con el sistema hasta ser
capaz de realizar ciertas tareas en menos de un tiempo dado (el tiempo empleado
habitualmente por los usuarios expertos). Este atributo es muy importante para
usuarios noveles.
Eciencia: El número de transacciones por unidad de tiempo que el usuario
puede realizar usando el sistema. Lo que se busca es la máxima velocidad de
realización de tareas del usuario. Cuanto mayor es la usabilidad de un sistema,
más rápido es el usuario al utilizarlo, y el trabajo se realiza con mayor rapidez.
Nótese que eciencia del software en cuanto su velocidad de proceso no implica
necesariamente eciencia del usuario en el sentido en el que aquí se ha descrito.
Recuerdo en el tiempo: Para usuarios intermitentes (que no utilizan el sistema
regularmente) es vital ser capaces de usar el sistema sin tener que aprender cómo
funciona partiendo de cero cada vez. Este atributo reeja el recuerdo acerca de
cómo funciona el sistema que mantiene el usuario, cuando vuelve a utilizarlo tras
un periodo de no utilización.
18
2.1. Marco teórico
Tasa de errores: Este atributo contribuye de forma negativa a la usabilidad de un
sistema. Se reere al número de errores cometidos por el usuario mientras realiza
una determinada tarea. Un buen nivel de usabilidad implica una tasa de errores
baja. Los errores reducen la eciencia y satisfacción del usuario, y pueden verse
como un fracaso en la transmisión al usuario del modo de hacer las cosas con el
sistema.
Satisfacción: Éste es el atributo más subjetivo. Muestra la impresión subjetiva
que el usuario obtiene del sistema.
Por tanto, la usabilidad no es una simple adición del valor de estos atributos, sino
que se dene para cada sistema como un nivel a alcanzar para algunos de ellos. Es
importante aspirar al mayor nivel posible, ya que se facilita la interacción que hay entre
el usuario y el sistema desarrollado.
Afortunadamente y como se mencionó antes, hoy en día los desarrolladores tienen
acceso a herramientas de diseño que los apoyan en la creación de sistemas interactivos
y usables, tales como: principios de diseño, patrones de interacciones, principios heurís-
ticos y leyes para mejorar el diseño de interacciones.
Principios de diseño
Los principios de diseño son las mejores prácticas en el diseño de interacciones,
que ayudan a desarrollar productos digitales con elementos interactivos. Los cuales se
presentan a continuación (Preece et al., 2015):
1. Denir cómo se interactúa. Es importante denir cuáles serán los métodos de
entrada que tendrá el sistema, así como los gestos que se utilizarán y las reacciones
que sucederán cuando los usuarios utilizan el sistema. También se deben tomar
en cuenta qué tipo de usuarios usaran el sistema, para ofrecer tanto comandos
sencillos como las teclas de acceso rápido copiar y pegar, o comandos complejos
para usuarios avanzados.
2. Dar pistas del comportamiento. Los sistemas deben mostrar mensajes de ayuda
que guíen al usuario a entender cómo funciona el sistema. Para ello, también se
puede hacer uso de la apariencia de los elementos como el color, tamaño o forma,
19
2.1. Marco teórico
así como combinarlos con sonidos. Claro está que las pistas deben ser utilizadas
con moderación, pues el exceso podría llegar a confundir a los usuarios.
3. Anticipar los errores potenciales. Mientras menos errores cometa el usuario
conará más en el sistema, por lo que se deben prevenir los errores comunes
que puedan cometer, ejemplos de ello es usar validaciones en los formularios para
advertir al usuario sobre fallos en su llenado antes de que lo envié. Otro ejemplo
es usar listas cuando se ingresen datos constantes en lugar campos de texto, tal
como la selección del país de origen del usuario.
4. Brindar retroalimentación oportuna. Cuando los usuarios realizan acciones en los
sistemas, esperan una reacción por parte de ellos, por lo que se debe mantener
informado al usuario sobre los resultados obtenidos, tales como operaciones
realizadas correctamente o cuando se encontraron errores que impidieron realizar
la operación solicitada, así los usuarios podrán tomar las medidas respectivas para
solucionar el problema.
5. Diseñar de manera estratégica. Se reere a que los elementos de la interfaz que
más se utilicen deben estar en el lugar más accesible, a diferencia de los menos
utilizados. También se debe tomar en cuenta la forma y tamaño de los elementos,
ya que si son muy grandes podrían limitar la interacción del usuario con los
demás elementos y si son pequeños es posible que el usuario no pueda utilizarlos
rápidamente, e incluso podrían ignorarlos.
6. Simplicar al máximo. Mientras más acciones tenga que realizar un usuario para
alcanzar su objetivo, mayor tiempo le tomará, además puede confundirse u olvidar
las funciones de los elementos si se le presentan demasiados. Debido a ello, la
interfaz debe ser lo más minimalista posible, gracias a esto el usuario tendrá que
memorizar menos y tener una comunicación más rápida con el sistema.
Los principios de diseño pueden utilizarse para diseñar las interacciones que hay en
supercies grandes, pues en todos los sistemas es importante: guiar al usuario de ma-
nera sutil durante el uso de la aplicación, evitar errores que el usuario podría cometer,
dar retroalimentación al usuario para cada acción realizada, mostrar solo el contenido
relevante para cada contexto y colocar los elementos de la interfaz de modo accesible.
20
2.1. Marco teórico
Patrones de interacciones
Por otro lado, los patrones de interacciones son soluciones a problemas comunes,
ayudando a agilizar el diseño de las aplicaciones, pero deben ser tratados como guías
y no como leyes absolutas, entre los más comunes. A continuación, se muestran los
patrones y sus subdivisiones (Cuello and Vittone, 2013):
Navegación. Un elemento esencial que facilita a los usuarios a recorrer la
aplicación. Para ello se hace uso de: pestañas, listas, galerías de imágenes, menú
tipo cajón, volver y panorama.
Acciones. Ayudan al usuario alcanzar sus objetivos, no todas las acciones se
encuentran en la misma vista, para acceder a todas las posibles será necesario
hacer uso de la navegación. Las más conocidas son: barra de acciones, desborde
de acciones, accesos rápidos, compartir, buscar y edición de listas.
Cuadros de diálogo. Son útiles cuando se requiere que el usuario tome decisiones
importantes, por lo que se posicionan sobre los demás elementos. Lo recomendable
es utilizarlas al mínimo ya que puede afectar la experiencia del usuario.
Noticaciones dentro de la aplicación. Sirven para informar al usuario sobre
las operaciones que se realizaron correctamente, en las que hubo errores, o
información sobre el estado del sistema.
Introducción de datos. Se hace uso de ellos cuando se solicita al usuario que llene
campos, o cuando por iniciativa propia el usuario quiere realizar acciones como
buscar o ltrar.
Gestos. Empleados para facilitar la interacción con el sistema ya que al realizar
gestos especícos se obtienen acciones rápidas, algunos de los gestos simulan lo
que ocurriría en la vida real si se realiza determinado gesto. Algunos ejemplos
son los siguientes: tocar, arrastrar, deslizar, mantener pulsado, doble toque,
juntar/separar y girar.
Estos patrones pueden ser aplicados a las interfaces de supercies grandes pues so-
lucionan problemas frecuentes a los que los usuarios podrían enfrentarse. Pero debe
tomarse en cuenta el lugar y la manera en que se implementan, pues el espacio de inter-
acción podría suponer problemas si no se utilizan correctamente. Por ejemplo, utilizar
21
2.1. Marco teórico
los cuadros de dialogo en zona alta de una PDI puede ser inalcanzable (o al menos
extenuante) para algunos usuarios.
Principios heurísticos
Los principios heurísticos también son conocidos como las heurísticas de usabilidad
ya que son reglas generales y no pautas de uso especícas. El n de estos principios es
que los usuarios y los sistemas se entiendan y trabajen juntos para lograr un objetivo
en concreto, además ayudan a los equipos de desarrollo durante las etapas de diseño y
evaluación ya que muestran las deciencias de usabilidad y detallan las causas por las
que los usuarios cometen errores (María Paula González, 2006).
En 1990 R. Molich y J. Nielsen presentaron las denominadas heurísticas, después de
cuatro años J. Nielsen estudio 249 problemas de usabilidad y creó el siguiente conjunto
de principios heurísticos (Nielsen, 1994a):
1. Visibilidad del estado del sistema. El sistema debe siempre mantener a los usuarios
informados del estado del sistema, con una realimentación apropiada y en un
tiempo razonable.
2. Coincidencia entre el sistema y el mundo real. El sistema debe hablar el lenguaje
de los usuarios, con las palabras, las frases y los conceptos familiares, en lugar
de que los términos estén orientados al sistema. Utilizar convenciones del mundo
real, haciendo que la información aparezca en un orden natural y lógico.
3. Control y libertad del usuario. Los usuarios eligen a veces funciones del sistema
por error y necesitan a menudo una salida de emergencia claramente marcada,
esto es, salir del estado indeseado sin tener que pasar por un diálogo extendido.
Es importante disponer de deshacer y rehacer.
4. Consistencia y estándares. Los usuarios no deben tener que preguntarse si las
diversas palabras, situaciones, o acciones signican la misma cosa. En general siga
las normas y convenciones de la plataforma sobre la que se está implementando
el sistema.
5. Prevención de errores. Es importante prevenir la aparición de errores que mejor
que generar buenos mensajes de error.
22
2.1. Marco teórico
6. Reconocimiento mejor que recuerdo. El usuario no debería tener que recordar la
información de una parte de diálogo a la otra Es mejor mantener objetos, acciones,
y las opciones visibles que memorizar.
7. Flexibilidad y eciencia de uso. Las instrucciones para el uso del sistema deben
ser visibles o fácilmente accesibles siempre que se necesiten. Los aceleradores no
vistos por el usuario principiante mejoran la interacción para el usuario experto de
tal manera que el sistema puede servir para usuarios inexpertos y experimentados.
Es importante que el sistema admita la personalización de acciones frecuentes.
8. Diseño estético y minimalista. No deben contener la información que sea
inaplicable o se necesite raramente. Cada unidad adicional de la información en
un diálogo compite con las unidades relevantes de la información y disminuye su
visibilidad relativa.
9. Ayudar a reconocer, diagnosticar y recuperarse de errores. Que los mensajes de
error se deben expresar en un lenguaje claro (no haya códigos extraños), se debe
indicar exactamente el problema, y deben ser constructivos.
10. Ayuda y documentación. Aunque es mejor si el sistema se pueda usar sin
documentación, puede ser necesario disponer de ayuda y documentación. Ésta
ha de ser fácil de buscar, centrada en las tareas del usuario, tener información de
las etapas a realizar y que no sea muy extensa.
Los principios heurísticos pueden ser utilizadas para corroborar si un sistema que
posee una supercie grande de interacción es usable, debido a que son reglas generales
que pueden aplicarse en cualquier aplicación.
Leyes para mejorar el diseño de interacciones

A continuación, se presentan dos leyes importantes para el diseño de experiencia de
usuario y de la usabilidad (Artigas, 2017):
1. Ley de Hick. Esta ley menciona que mientras más opciones le demos a los usuarios,
más tiempo tardarán en tomar una decisión. Su formulación redactada sería: El
tiempo que se tarda en tomar una decisión aumenta a medida que se incrementa
23
2.1. Marco teórico
el número de alternativas. Por lo que se debe simplicar la interfaz de los sistemas
lo más que sea posible.
2. Ley de Fitts. La ley es sobre el tiempo que les toma a las personas seleccionar
un punto determinado. La formulación de la ley de Fitts sería: El tiempo que se
requiere para alcanzar a pulsar un objetivo depende de una relación logarítmica
entre su supercie y la distancia a la que se encuentra. Esta ley considera aspectos
de los principios del diseño (Cantú, 2017):
Los botones y widgets deben de tener un tamaño apropiado.
Los botones más usados deben estar más cerca del cursor (o del alcance de
los dedos para pantallas táctiles)
Tanto la ley de Hick como la ley de Fitts son puntos clave para que los sistemas con
supercies grandes de interacción sean accesibles. Ya que, aseguran que el usuario uti-
lice de manera eciente los elementos de la interfaz, por ejemplo, al colocar los botones
más utilizados cerca del usuario. Así como acelerar la toma de decisiones del usuario
al reducir la cantidad de botones que hay en la interfaz según el contexto del usuario,
por ejemplo, mostrar distintos botones al usuario cuando se encuentra cerca o lejos de
la PDI, en lugar de siempre mostrar todos los botones ya que mientras más opciones
se le da al usuario más tardará se tardará en decidir qué hacer.
2.1.2. Dispositivos con supercies grandes de interacción

En la actualidad existen dispositivos que utilizan supercies grandes para interactuar
ancho (Seifried et al., 2012). Las características principales de estos dispositivos son su
tamaño, la resolución de pantalla, la relación de aspecto, la orientación, la cantidad
de usuarios simultáneos que pueden hacer uso de ella, la tecnología de visualización
que utiliza y el tipo de interacción. La presente investigación se enfocó en las pizarras
digitales interactivas, puesto que ellas poseen una supercie de proyección grande en la
que interactúan los usuarios.
24
2.1. Marco teórico
Las pizarras o pizarrones digitales pueden dividirse en dos grupos propuestos a par-
tir del modo en que se interactúa con las imágenes proyectadas: las pizarras digitales y
las pizarras digitales interactivas (Domingo Gallego, 2010).
Pizarras digitales
Se puede denir a las pizarras o pizarrones digitales (PD) como un sistema
tecnológico que generalmente está integrado por una computadora y un videoproyector,
con el cuál se proyectan los contenidos digitales. Es útil para la visualización grupal. Se
puede interactuar por medio de periféricos de la computadora como por ejemplo el uso
del ratón o del teclado (Marques, 2008b).
La funcionalidad de las pizarras digitales consiste en proyectar cualquier tipo de
información procedente de la computadora, de internet o de cualquier otro dispositivo
conectado al sistema. Para ello, se hace necesita de una supercie de proyección, esta
puede ser un pizarrón blanco, una pantalla o incluso una pared blanca, situada en un
lugar relevante del aula.
Componentes básicos
A continuación, se presentan los elementos básicos que constituyen una pizarra
digital (Marques, 2008b):
Una computadora que opcionalmente cuente con acceso a internet. Incluir
periféricos inalámbricos como el teclado y ratón pueden facilitar la interacción
a distancia, cabe mencionar que los sistemas inalámbricos bluetooth brindan
mejores prestaciones que los sistemas de infrarrojos.
Un videoproyector (cañón electrónico de proyección, mínimo 1.500 lúmenes y
resolución XVGA 1024x768) y su respectivo control remoto.
La supercie de visualización. Es preferible un pizarrón blanco, ya que se pueden
realizar anotaciones sobre las imágenes y textos que se están proyectando.
Otros elementos que a menudo se integran a las pizarras, para aumentar su
funcionalidad, son los siguientes:
25
2.1. Marco teórico
Una webcam, para realizar eventuales videoconferencias y también para proyectar
directamente o digitalizar fotografías, objetos o pequeñas secuencias.
Un lector de documentos o escáner, con el cual se puede visualizar y digitalizar
los documentos.
Una impresora.
Un micrófono.
Un sistema de amplicación de sonido, con altavoces de potencia.
La pizarra digital es un dispositivo que puede ayudar a su usuario a mostrar el con-
tenido a múltiples espectadores, pues su interfaz es lo sucientemente grande para ser
vista a distancia, pero la interacción no puede realizarse directamente sobre la supercie
de interacción.
Pizarras digitales interactivas

Los avances tecnológicos han hecho que las pizarras digitales hayan evolucionando
hasta convertirse en pizarras interactivas, en las que se utiliza una supercie táctil que
controla el sistema a través de una imagen proyectada (Bouso, 2012).
La pizarra o pizarrón digital interactivo (PDI) es un sistema tecnológico,
generalmente integrado por una computadora, un videoproyector y un dispositivo de
control de puntero, que proyecta en una supercie interactiva contenidos digitales en
un formato idóneo para visualización en grupo.
Se puede interactuar directamente sobre la supercie de proyección, para escribir
directamente sobre ella y controlar los programas informáticos con un puntero (a veces
incluso con los dedos) (Marques, 2008a).
La diferencia principal entre las PD y las PDI, es que mientras en las PD se hace uso
de los periféricos de la computadora para interactuar, en las PDI se interactúa direc-
tamente sobre la supercie de proyección utilizando un dispositivo control de puntero
(también llamado apuntador o simplemente puntero) o usando los dedos si es que se
trata de una PDI táctil.
26
2.1. Marco teórico
Componentes básicos
Los elementos básicos que constituyen una pizarra digital interactiva son (Marques,
2008a):
Una computadora que opcionalmente cuente con acceso a internet. Incluir
periféricos inalámbricos como el teclado y ratón pueden facilitar la interacción
a distancia, cabe mencionar que los sistemas inalámbricos bluetooth brindan
mejores prestaciones que los sistemas de infrarrojos.
Un videoproyector (cañón electrónico de proyección, mínimo 1.500 lúmenes y
resolución XVGA 1024x768) y su respectivo control remoto.
Una supercie interactiva (capaz de detectar la posición y presión de un puntero
en su supercie). La cuál debe tener instalado y activado en la computadora el
software especíco que proporciona el fabricante del equipo.
Dispositivo control de puntero o apuntador (incluso con los dedos si es una PDI
táctil).
Adicionalmente y al igual que en las PD, a menudo se integran en las PDI otros
elementos que aumentan su funcionalidad, por ejemplo: una webcam, un lector de do-
cumentos o escáner, una impresora, un micrófono, un sistema de amplicación de sonido.
Medios de interacción
Para interactuar con las PDI es posible utilizar diversos dispositivos, tales como
(Gómez García, 2012a):
Punteros o dedos. En el caso de las PDI táctiles, los punteros no requieren ninguna
funcionalidad adicional, puesto que es posible interactuar con la pizarra usando
los punteros o bien usando los dedos (si se trata de una PDI multitáctil). En
cualquier caso, un toque sobre la pizarra (usando el dedo o la punta del puntero)
equivale a hacer un clic con el botón izquierdo del ratón, mientras que el botón
secundario del apuntador o mantener presionado hace las funciones del botón
derecho del ratón.
27
2.1. Marco teórico
Tableta gráca. Es un dispositivo inalámbrico que combina una pequeña pizarra
digital portátil, su apuntador y un ratón. De este modo los usuarios pueden
interactuar desde su lugar, sin la necesidad de acercarse a la pizarra.
Sistemas de votación. El cual se basa en el uso de mandos inalámbricos, un
receptor conectado la computadora y un software que conecta el mando de voto
con la computadora y gestiona los datos recibidos. De esta manera el programa
asignará el resultado obtenido a cada usuario identicándolo por su nombre o de
forma anónima, dependiendo de cómo haya sido congurado.
Sistemas inalámbricos. Existen numerosos periféricos que proporcionan utilidades
importantes a la PDI sin necesidad de cables como los teclados y ratones. Para tal
n, basta con conectar el receptor inalámbrico a la computadora, de esta manera
los usuarios pueden interactuar con la pizarra a distancia.
El uso de estos dispositivos incrementa las capacidades del sistema, permitiendo
que el sistema sea utilizado tanto cerca como lejos de la PDI (por ejemplo, al utilizar
dispositivos inalámbricos como la tableta gráca), algunos de ellos (como los sistemas
de votación) habilitan el uso multiusuario de los sistemas compatibles.
Tipos de PDI
Se pueden diferenciar cinco tipos de pizarras interactivas (Gómez García, 2012b):
Membrana resistente. Estas pizarras tienen una supercie suave y exible. Su
panel está formado por dos capas separadas, la exterior es deformable al tacto. La
presión aplicada facilita el contacto entre la lámina exterior e interior, provocando
una variación de la resistencia eléctrica y ayuda a localizar el punto señalado. Se
pueden usar los dedos o plumones, para realizar trazos de diferentes colores a
través de selección de software. El movimiento es seguido por la detección de la
presión del objeto sobre la supercie. Las coordenadas corresponden a la zona en
la pantalla de la computadora. Es una tecnología utilizada por Smart Board.
Electromagnética. Estas pizarras son similares a las pizarras tradicionales en
que tienen una supercie dura. Para trabajar de forma interactiva requieren
unos plumones, lápices o punteros especiales que emiten un pequeño campo
28
2.1. Marco teórico
magnético detectado, ya sea por el marco de la pizarra o por una rejilla de
alambre no incrustados debajo de la supercie de proyección. Esta tecnología
es utilizada por las pizarras de Numonics, e-Instruction, Qualication Technology
Ltd, Promethean y multiCLASS.
Ultrasonidos-infrarroja. Cuando el marcador entra en contacto con la supercie
de la pizarra, se envía una señal ultrasónica y otra de tipo infrarrojo para
sincronizarse. Dos receptores que se colocan en dos lados de la supercie de
proyección reciben las señales y calculan la posición del puntero, para proyectar
en ese punto lo que envía el puntero. Gracias a esta tecnología las pizarras pueden
ser de cualquier material (siempre y cuando sea blanca y lisa para una correcta
proyección). Esta tecnología es utilizada por eBeam y MIMIO y iBoard.
Resistiva: El panel de la pizarra está formado por dos capas separadas, la exterior
es deformable al tacto. La presión aplicada facilita el contacto entre las láminas
exteriores e interiores, provocando una variación de la resistencia eléctrica y
también ayuda a localizar el punto señalado. Esta tecnología es utilizada por
TeamBoard, Polyvision, Smart Board y por multiCLASS.
Óptica: El perímetro del área interactiva de la pizarra está cubierto por barras
de luz infrarroja y en la parte superior en cada lado se encuentran dos cámaras
infrarrojas mismas que están monitoreando que no se rompa la línea de vista entre
las cámaras y las barras infrarrojas, en el momento en que el usuario presiona
sobre alguna zona del área interactiva, el sistema calcula el área donde se ha
distorsionado la señal y calcula la posición x, y en un plano cartesiano sobre el
punto donde se presionó, cabe hacer mención que no es necesario que exista una
presión determinada ya que la interactividad es óptica, por lo que inclusive se
pueden utilizar objetos como pelotas de esponja tiradas por las personas para
activar el campo. Esta tecnología es usada por iBoard.
Como se puede observar, las PDI pueden utilizar diferentes tecnologías para llevar
a cabo la interacción con el usuario, lo cual inuye directamente sobre la supercie de
proyección pues dependiendo de la tecnología se puede usar plumones, lápices interac-
tivos o los dedos.
29
2.1. Marco teórico
Funciones y características
Las funcionalidades básicas que aportan las PDI son las siguientes (Marques, 2008a):
Proyectar en la pizarra cualquier tipo de información procedente de la
computadora o de cualquier otro dispositivo conectado al sistema. La pizarra
se convierte en un segundo monitor en el que se visualiza el contenido de manera
colectiva.
Utilizar un puntero a modo de ratón para controlar la computadora.
Utilizar el puntero a modo de lápiz para hacer anotaciones sobre ella (que luego
podrán almacenarse como un documento, imagen o presentación multimedia, en
la computadora).
Utilizar los fondos de pizarra, bancos de imágenes y multimedia, así como los
recursos didácticos interactivos que se proporcionan en el software de las PDI o
en los portales de las empresas distribuidoras.
Hacer uso de funcionalidades especícas del software que acompaña a las PDI,
tales como una grabadora en vídeo de secuencias didácticas, zoom de pantalla,
cortinas y focos para focalizar la atención, captura de imágenes y pantallas,
conversión texto manual a texto impreso.
Así mismo, entre algunas características de la mayoría de las PDI nos encontramos
con las siguientes:
Utilizar la barra de herramientas. Basta pulsar sobre la opción elegida para
ejecutar la función deseada. Las barras de herramientas suelen ser completamente
congurables.
Crear perles de usuario. En muchas pizarras casa usuario tiene la posibilidad de
crear su propio perl de usuario.
Grabar actividades. Las PDI graban en la computadora todas las actividades
realizadas sobre la pantalla.
30
2.1. Marco teórico
Integrar múltiples aplicaciones. Esta funcionalidad muestra automáticamente el
trabajo realizado, por ejemplo, es posible abrir un documento de texto usando
Microsoft Word, abrir un archivo con un visor PDF o abrir una página Web y
realizar anotaciones sobre ésta.
Escribir sobre imagen o vídeo. Se interactúa sobre una imagen proyectada,
realizando anotaciones sobre ésta, o incluso sobre un vídeo y se realizan
anotaciones sobre alguno de los fotogramas.
Convertir de escritura manual a texto. A través de un programa de reconocimiento
es posible convertir texto manuscrito en texto editable por la computadora.
Utilizar un teclado virtual en pantalla. De esta manera es posible introducir texto
desde la propia PDI sin necesidad de usar un teclado físico.
Enviar correos electrónicos. Si se tiene conexión a internet, es posible mandar por
correo cualquier archivo desarrollado mediante el uso de la PDI.
Cambiar el idioma. Las pizarras digitales interactivas se pueden congurar en
diferentes idiomas e incluso existen modelos que pueden cambiar su conguración
en diferentes idiomas.
Administrar el formato de salida. El software asociado a la pizarra aporta la
posibilidad de importar y exportar desde o hacia diferentes formatos: JPG, TIF,
HTML, PDF, etc.
Utilizar plantillas e imágenes. La mayoría de las PDI ofrecen una colección
de recursos, plantillas e imágenes, que nos ayudarán al desarrollo de nuestras
actividades.
Agregar recursos propios. Además de aportarnos recursos para generar nuestras
actividades, en la mayoría del software de las PDI se pueden importar nuestras
propias imágenes o recursos multimedia y generar nuestras propias actividades.
Crear plantillas personalizadas. Las plantillas pueden ser reutilizadas y editadas
por los usuarios.
31
2.1. Marco teórico
Gracias a las funcionalidades y a las características básicas de las PDI es que los
usuarios pueden realizar sus actividades directamente sobre la supercie de proyección,
estando cerca de la PDI. Por el contrario, estas funciones y características no contem-
plan la interacción con el usuario cuando se encuentra lejos de la PDI.
Software
Normalmente la PDI se recibe con todos los archivos necesarios para la instalación
del paquete software. No obstante, se recomienda estar atento a posibles actualizaciones
de éste que estarán normalmente disponibles desde el sitio web asociado a cada modelo
de PDI (Gómez García, 2012b). El software asociado a las PDI comprende a:
Los controladores (drivers) que son encargados de la comunicación entre la PDI
y la computadora, de forma que reconozca a la pizarra y realice la sincronización
necesaria para su correcto funcionamiento.
Las herramientas de trabajo, que normalmente se dispondrán en un panel o barra
de herramientas otante y que contendrá plumones, borrador, y otra serie de
utilidades.
El software de autor: la mayoría de las herramientas de autor asociadas a la PDI
crean el contenido y ofrecen la posibilidad de interactuar con él desde la pizarra.
La tabla 2.1 presenta artículos en los que hicieron uso de pizarras digitales
interactivas, indicando el tipo de software que ha sido utilizado en ellas, así como el
hardware que necesitaron para la integración de la PDI.
32
2.1. Marco teórico
Tabla 2.1: Software y hardware utilizados en PDI
En la publicación de Campuzano (2014) se utilizó el software del autor que ya viene
de fábrica: Ebeam (Ebeam Interact Software), Panasonic (Elite Panaboard Software),
Smartboard (SmartBoard Notebook Software), Promethean (Promethean ActivInspire
Software), Interwrite (Interwrite Workspace), Teamboard (Teamboard Software) y
Open-Sankoré (software libre). Por otro lado, Baek et al. (2014) implementó software
propio con OpenGL, el cual realiza el renderizado en 3D a partir del Kinect. Así mismo,
Madni et al. (2014) también empleó software propio que ayuda a sus usuarios trabajar
de manera colaborativa mediante LAN. Finalmente, Ramsundar (2015) utilizó software
propio, el cual se implementó por medio de LabVIEW (es una plataforma y entorno de
desarrollo), Vision and Motion toolkits.
A partir de ello, se observa que se ha utilizado el software desarrollado por ellos
mismos ya que el software que viene preinstalado en las PDI no es suciente para
cubrir todas las necesidades.
33
2.2. Estado del arte
En la presente sección se explica cómo se realizó el mapeo sistemático de la literatura
(Petersen et al., 2008). Para ello, se detallan las preguntas de investigación que fueron
utilizadas, el cómo se obtuvieron los documentos (los criterios de selección, la cadena de
búsqueda, las fuentes de investigación), el análisis de la literatura (las categorías según
las preguntas de investigación) y la discusión (con documentos clasicados).
El objetivo de este análisis fue conocer cómo se realiza el diseño de interacciones en
dispositivos que poseen supercies grandes de interacción (en especíco las PDI), por
lo que se clasicaron y analizaron los documentos seleccionados.
Preguntas de investigación
Con el n de conocer cómo se diseñan las interacciones de las aplicaciones para las
PDI, se buscaron documentos que ayudaran a responder las siguientes preguntas:
¾Cuáles son los tipos de interacciones que se utilizan en interfaces con supercies
grandes (en especíco las PDI)?
¾Cuáles son los artefactos utilizados para interactuar en interfaces con supercies
grandes (en especíco las PDI)?
¾Qué reglas de diseño de interacciones se han propuesto para interfaces con
supercies grandes (en especíco las PDI)?
Criterios de selección
Para ello, se establecieron los criterios de exclusión para descartar aquellos
documentos que no fueran relevantes en la investigación:
Documentos que son únicamente resúmenes o presentaciones.
Documentos que no pertenezcan a una revista, foro o congreso.
Documentos que no realicen propuestas
Documentos que no hablen de las PDI
34
Documentos fuera del área de informática o anes
Así como criterios de inclusión, los cuales ayudaron a elegir aquellos documentos
con información que resolviera las dudas planteadas sobre el diseño de interacciones en
PDI. Tales criterios son los siguientes:
Artículos publicados desde 2002 hasta 2019
Artículos que describen su contribución
Artículos que incluyan Trabajos futuros
Artículos en español y/o inglés
Cadena de búsqueda
La cadena de búsqueda sirve para obtener el listado de documentos cuando se ingresa
a los motores de búsqueda de las fuentes de investigación. Tal cadena se denió a partir
de las palabras clave involucradas en la investigación: pizarra interactiva, usabilidad,
diseño de interacciones, heurísticas de diseño, reglas de diseño, principios de diseño,
reglas de diseño, guías de diseño y estándares de diseño. Adicionalmente se utilizaron
operadores lógicos que mejoraran la precisión de los documentos encontrados.
Con base en estas características, se utilizó la cadena de búsqueda de la tabla 2.2:
Tabla 2.2: Cadena de búsqueda utilizada en las fuentes de investigación
35
Fuentes de investigación
Posteriormente, se eligieron las fuentes de investigación: la ACM Digital Library (la
biblioteca virtual de la Asociación de Maquinaria Computacional) y la IEEE Xplore
Digital Library (la biblioteca virtual del Instituto de Ingeniería Eléctrica y Electrónica).
Se eligieron estas plataformas debido a que brindan información de contenido cientíco
(nacional e internacional), sus documentos están relacionados a las palabras claves
de la cadena de búsqueda y además existen artículos tanto antiguos como actuales.
Se omitieron bibliotecas virtuales tales como Springer debido a que los documentos
resultantes están fuera del área de informática o anes (uno de los criterios de exclusión),
ya que las propuestas se enfocan en el punto de vista escolar y de aprendizaje pero no
en el software y/o hardware utilizado en la PDI.
A partir de los documentos obtenidos de la cadena de búsqueda en cada fuente de
investigación, se descartaron aquellos que no cumplieran con los criterios de selección.
La tabla 2.3 muestra la cantidad de los documentos encontrados, los descartados y los
seleccionados.
Tabla 2.3: Cantidad de documentos resultantes
Análisis de la literatura
Con el n de responder a las preguntas planteadas previamente, los documentos se
agruparon por: Tipo de interacción, Artefactos para interactuar, Reglas de diseño.
Tipo de interacción
En la gura 2.1 se muestran los documentos agrupados por tipo de interacción, lo
cual responde a la pregunta sobre cuáles son los tipos de interacciones de las PDI.
36
Figura 2.1: Agrupación por tipo de interacción de PDI
Como se puede observar, se puede interactuar mediante clics o por medio de gestos
en los sistemas que poseen supercies grandes. El uso de los clics es la forma tradicional
y más usada. Por el contrario, con el uso de gestos se realizan acciones rápidas sin la
necesidad de presionar botones de la interfaz gráca.
Artefactos para interactuar

A continuación, se muestran los documentos agrupados por los artefactos que
utilizaron para interactuar con la PDI (gura 2.2). Algunos de los documentos hicieron
uso de más de un artefacto.
Figura 2.2: Agrupación por artefactos utilizados para interactuar con PDI
37
Existen múltiples artefactos para utilizar la PDI. La mayoría de los documentos que
utilizaron el lápiz electrónico, dando recomendaciones y proponiendo arquitecturas de
dónde deberían ubicarse físicamente los componentes de la PDI y los usuarios.
En la supercie de proyección multitáctil, los usuarios realizan gestos y actividades
simultaneas gracias a sus puntos de contacto. Así mismo, los sensores de proximidad
fueron usados para proponer sistemas colaborativos de manera local y simultánea, en
los que la cercanía del usuario afecta la interfaz gráca.
Por el contrario, en los artículos que utilizaron tablets explican las zonas desde las
que los usuarios pueden utilizar las PDI y sus implicaciones, llegando incluso a proponer
colaboración de equipos remotos.
El artículo que hace uso del celular inteligente lo utiliza con la mano no dominante
para cambiar el color en que dibuja con la mano dominante con un lápiz electrónico, así
como hacer o deshacer las acciones. En el caso de los apuntadores láser son para que dos
usuarios simultáneos (cada uno con su propio apuntador) controlen la PDI a distancia.
El guante IR fue utilizado para simular la interacción de una supercie multitáctil con
el uso de leds en la punta de cada dedo del guante, con el n de llamar la atención
de los niños estudiantes y de abaratar los costos que conlleva una PDI táctil. Por otro
lado, el Kinect se utiliza para interactuar mediante gestos con el cuerpo, debido a que
su cámara detecta a los usuarios en tres dimensiones. Finalmente, el Wiimote se usó
para detectar la punta IR de distintos lápices electrónicos mientras eran utilizados en
las PDI, con el objetivo fue identicar cuál de ellos era el mejor.
Cada uno de los dispositivos posee métodos de entrada y salida diferentes, los cuales
pueden ayudar al usuario a realizar sus actividades de manera más eciente (en cuanto
al tiempo que les demora realizar la misma actividad en la PDI utilizando únicamente
el lápiz electrónico). Un ejemplo de ello es utilizar el celular inteligente para cambiar
los colores de escritura, en lugar de desplazarse en la PDI para seleccionarlo con el lápiz
electrónico.
Reglas de diseño
Las reglas de diseño contemplan a las heurísticas, los principios, las guías y los
estándares. Pero como se puede observar en la gura 2.3, en los documentos resultantes
38
únicamente brindan a los lectores heurísticas y guías para realizar el diseño de las
interacciones.
Figura 2.3: Agrupación por regla de diseño
Las heurísticas son abstractas y de carácter general, por lo que pueden utilizarse en
la mayoría de los casos, pero no explican a detalle cómo realizar el diseño. Mientras que
las guías son más especícas, lo cual reduce el número de casos en los que se pueden
aplicar y, a diferencia de las heurísticas, brindan más detalles de cómo llevar a cabo el
diseño de las interacciones.
Tal como se puede observar en la gura 2.3, en los documentos fue mayor el uso
de las heurísticas que el de las guías. Esto implica que en los documentos analizados
existe mayor información de carácter general (heurísticas) que descripciones detalladas
(guías).
Discusión
Tal como se observó previamente, los documentos analizados proponen heurísticas
y guías de diseño, en las que se utilizan artefactos (en la gura 2.4 se muestra: lápiz
electrónico, supercie de proyección multitáctil, sensor de proximidad, tablet, celular
inteligente, apuntador láser, Guante IR, Kinect y Wiimote) para interactuar con la PDI
mediante clics o por medio de gestos.
39
Figura 2.4: Artefactos para interactuar con la PDI
Si se quiere desarrollar aplicaciones para PDI es necesario realizar el diseño de
interacciones adecuado, en cual se utilicen artefactos como intermediarios para controlar
las PDI mediante distintos tipos de interacción.
De igual manera, se puede realizar un determinado tipo de interacción con la PDI
dependiendo del artefacto que se utilice. Por lo que se realizó la clasicación por tipo
de interacción, en la que se muestra con qué artefactos se llevan a cabo las interacciones
en los documentos analizados. La clasicación contempla interacciones mediante clics
y mediante gestos.
Interacción mediante clics

Este tipo de interacción es el tradicional y más usado, requiere de un punto de
contacto para realizar un clic primario o un clic secundario como si se utilizará un
ratón (gura 2.5). Para seleccionar, subrayar, arrastrar, dibujar.
Figura 2.5: Lápiz electrónico sin y con botón (Kravvaris et al., 2011).
40
Los artefactos que se utilizaron en los documentos para realizar este tipo de inter-
acción: lápiz electrónico, supercie de proyección multitáctil, tablet, celular inteligente,
apuntador láser, guante IR, wiimote.
Interacción mediante gestos

Estas interacciones hacen uso de movimientos corporales predenidos. Se realizan
acciones rápidas como acercar, alejar, girar, deslizar, bajar o subir el contenido de la
interfaz (gura 2.6). No es necesario presionar botones de la interfaz por lo que se
pueden usar sin que el usuario tenga que desplazarse.
Figura 2.6: Interacción mediante gestos (Klemann et al., 2014).
En los documentos se utilizan los siguientes artefactos para brindar al usuario una
interacción por gestos: supercie de proyección multitáctil, sensor proximidad, tablet,
kinect.
Propuestas en los documentos

Los documentos resultantes se agruparon según su propuesta. En la tabla 2.4 se
separaron los documentos por:
La proximidad. Se reere a la distancia que hay entre el usuario y la PDI, las
cuales son cerca (interactuando directamente sobre la supercie de proyección) o
lejos de la PDI (interactuando de manera remota con la PDI).
41
El tipo de interacción. La manera en que se comunica el usuario con el sistema,
el cual puede realizarme mediante clics o mediante el uso de gestos predenidos.
El ambiente educativo. Son aquellas propuestas de los documentos que se
enfocaron en casos de estudio relacionados a la educación.
El sistema multidispositivo. Son las propuestas de los documentos en los que el
sistema es controlado por distintos dispositivos de manera simultanea.
Tal como se observa en la tabla 2.4, los documentos utilizan mayormente principios
de diseño. A pesar de que algunos autores tomaron en cuenta la proximidad del
usuario tanto cerca como lejos, los dispositivos son utilizados desde cerca con mayor
frecuencia. Así mismo, el tipo de interacción mediante clics es el modo en que más
se interactúa. Adicionalmente, se muestra que algunas de las propuestas (de los
documentos analizados) son implementados en ambientes educativos y en sistema
multidispositivo.
Tabla 2.4: Agrupación de documentos por proximidad, tipo de interacción, ambiente
educativo y multidispositivo.
42
Así mismo, se vericó si en los documentos tomaron en cuenta la entrada y/o salida
de datos mediante dispositivos externos, y si adaptan su interacción de acuerdo con la
proximidad (tabla 2.5). Es decir, se dividen en:
La entrada de datos. Se reere a que el usuario pueda ingresar información
mediante uno o más dispositivos.
La salida de datos. Se reere a que el usuario obtenga la información mediante
uno o más dispositivos.
La adaptación a la proximidad. Se reere a que la interacción que realiza el usuario
y el sistema sea usable tanto cerca como lejos de la PDI.
Tabla 2.5: Agrupación de documentos por entrada y salida de datos, adaptación a la
proximidad.
En la tabla 2.5 se puede apreciar que la mayoría de los documentos consideran la
entrada de datos en ambientes multidispositivo, pero la salida de datos en diferentes
dispositivos fue menos contemplado en las propuestas de los documentos. Finalmente,
algunos autores tomaron en cuenta la adaptabilidad de la proximidad del usuario, con
la cual la interfaz del sistema cambia cuando el usuario está cerca y cuando está lejos
de la PDI.
La propuesta del presente documento consiste en un modelo y una arquitectura, los
cuales se utilizan para diseñar la interacción en sistemas que poseen supercies grandes
43
2.3. Resumen
(por ejemplo, la PDI). Pueden utilizarse para desarrollar sistemas que utilizan múltiples
dispositivos, para que el usuario pueda interactuar tanto cerca (con dispositivos como
el lápiz electrónico) como lejos (con dispositivos como la tableta gráca) de la supercie
grande. Para ello, se utiliza entrada y salida de datos desde cada dispositivo. Así mismo,
se contempla interacciones mediante clics y mediante gestos, para que el usuario se
comunique con el sistema de la manera que él considere conveniente.
2.3. Resumen
El objetivo del diseño de interacción es crear interfaces atractivas con comporta-
mientos intuitivos, para ello estudia cómo se comunican los usuarios y los sistemas.
De esta manera se pueden anticipar errores potenciales, así como crear nuevas formas
de trabajar con el usuario. Las dimensiones del diseño de interacción son un modelo
para comprender los elementos que implica el diseño de interacción, los cuales son 5:
palabras, representaciones visuales, objetos físicos y espacio, tiempo, comportamiento.
La interfaz de usuario es el medio por el cual los usuarios y las máquinas interactúan
entre sí. Ha sufrido cambios con el paso del tiempo: línea de comandos (CLI), interfaces
de usuario grácas (GUI), interfaces naturales de usuario (NUI).
Por otro lado, la interfaz de usuario distribuida (DUI), como su nombre lo indica, es
una interfaz cuyos componentes están repartidos en al menos una de las dimensiones de
distribución: entrada, salida, plataforma, espacio y tiempo. Existen diferentes modelos
y arquitecturas que pueden ser utilizadas para realizar la DUI, así como kits de
herramientas, pero estos no contemplan la proximidad del usuario con el dispositivo.
Lo cual toma relevancia con aquellos dispositivos que poseen supercies de interacción
grandes pues los usuarios pueden interactuar cerca o lejos del dispositivo gracias a que
el contenido puede visualizarse a mayor distancia que en dispositivos pequeños como
un celular.
De igual modo, los sistemas pueden usar interfaces migratorias y migrables
para distribuir la aplicación (completa o solo sus componentes) en un ambiente
multidispositivo. Para comunicarse con el usuario se utilizan técnicas de interacción
que redirigen el contenido del sistema entre los dispositivos conectados.
44
2.3. Resumen
En cambio, la usabilidad de un sistema es el grado en que un producto puede ser
utilizado por usuarios para conseguir sus metas con efectividad, eciencia y satisfacción.
Los sistemas usables tienen tres características: los usuarios se familiarizan (y vuelven
competentes) desde el primer contacto con el sistema, los usuarios logran sus objetivos
a través del sistema, los usuarios recuerdan la interfaz de usuario y cómo utilizarla en
visitas posteriores.
En la actualidad, los desarrolladores tienen acceso a herramientas de diseño que
los apoyan en la creación de sistemas interactivos y usables, tales como: principios de
diseño, patrones de interacciones, principios heurísticos y leyes para mejorar el diseño
de interacciones.
Los principios de diseño pueden utilizarse para diseñar las interacciones que hay
en supercies grandes, pues en todos los sistemas es importante: guiar al usuario de
manera sutil durante el uso de la aplicación, evitar errores que el usuario podría cometer,
dar retroalimentación al usuario para cada acción realizada, mostrar solo el contenido
relevante para cada contexto y ubicar los elementos de la interfaz de manera accesible
para el usuario.
Los patrones de interacciones pueden ser aplicados a las interfaces de supercies
grandes pues solucionan problemas frecuentes a los que los usuarios podrían enfrentarse.
Pero debe tomarse en cuenta el lugar y la manera en que se implementan, pues el espacio
de interacción podría suponer problemas si no se utilizan correctamente. Por ejemplo,
utilizar los cuadros de dialogo en zona alta de una PDI puede ser inalcanzable (o al
menos extenuante) para algunos usuarios.
Los principios heurísticos, también conocidos como heurísticas de usabilidad, son
reglas generales que tienen como objetivo ayudar a que los usuarios y los sistemas
se entiendan y trabajen juntos para lograr un objetivo en concreto. Pueden utilizarse
durante las etapas de diseño y de evaluación, ya que validan si en el sistema existen
deciencias de usabilidad.
La ley de Hick y la ley de Fitts son puntos clave para que los sistemas con supercies
grandes de interacción sean accesibles. Ya que, aseguran que el usuario utilice de manera
eciente los elementos de la interfaz, por ejemplo, al colocar los botones más utilizados
cerca del usuario. Así como acelerar la toma de decisiones del usuario, para ello se
reduce la cantidad de botones que hay en la interfaz a partir del contexto del usuario.
Por ejemplo, mostrar algunos botones correspondientes a la interacción cerca de la PDI
45
2.3. Resumen
y mostrar otros botones cuando el usuario se encuentre lejos de la PDI, de esta manera
no se muestran todos los botones al mismo tiempo. De este modo, el usuario tendrá
menos carga cognitiva ya que hay menos opciones en la interfaz (solo las relevantes para
el contexto en que se esté utilizando el sistema), por lo que tardará menos en decidir
qué hacer.
ancho.
Tal es el caso de las pizarras digitales (PD) y las pizarras digitales interactivas, las
cuales son un sistema tecnológico, generalmente integrado por una computadora, un
videoproyector y un dispositivo de control de puntero, que proyecta los contenidos
digitales en un formato idóneo para visualización en grupo. En el caso de la PDI
(a diferencia de la PD), se puede interactuar directamente sobre la supercie de
proyección con dispositivos como un lápiz electrónico o con los dedos (cuando es una
PDI multitáctil).
Las funcionalidades y características básicas de las PDI (con las que vienen de
fabrica) ayudan a los usuarios a realizar sus actividades directamente sobre la supercie
de proyección, estando cerca de la PDI. A pesar de que las PDI integren el software
desde fábrica, puede ser insuciente para realizar las actividades de los usuarios. Por lo
que, diferentes autores han desarrollado software propio.
Aunado a ello, estas funciones y características básicas no contemplan la interacción
con el usuario cuando se encuentra lejos de la PDI. Esto supone una desventaja para
los usuarios que se alejan de la PDI ya que no pueden interactuar, pues tienen que
estar frente a la PDI para realizar sus actividades. Lo cual puede ocasionar que el
contenido proyectado no sea visualizado en su totalidad por los espectadores (ya que el
usuario frente a la PDI obstruye la visión). Así mismo, los usuarios pueden cansarse al
permanecer de pie en sesiones largas de actividades, o se les diculta alcanzar algunas
zonas de la pizarra tales como las barras de herramientas (o botones) que se ubican en
la parte alta de la PDI.
A partir de esto, se realizó un mapeo sistemático de la literatura para buscar
documentos en los que se resolvieron problemas similares. Para ello, se plantearon
preguntas de investigación, criterios de selección (de inclusión y de exclusión), cadena de
46
2.3. Resumen
búsqueda y fuentes de investigación. Los documentos analizados proponen heurísticas y
guías de diseño, en las que se utilizan dispositivos externos (lápiz electrónico, supercie
de proyección multitáctil, sensor de proximidad, tablet, celular inteligente, apuntador
láser, Guante IR, Kinect y Wiimote) para interactuar con la PDI mediante clics o por
medio de gestos.
La interacción mediante clics es el más usado, requiere de un punto de contacto
para realizar un clic primario o un clic secundario como si se utilizará un ratón. Para
seleccionar, subrayar, arrastrar, dibujar. Por el contrario, las interacciones mediante
gestos utilizan movimientos corporales predenidos, para realizar acciones rápidas
como: acercar, alejar, girar, deslizar, bajar o subir el contenido de la interfaz.
En los documentos analizados se utilizan mayormente principios de diseño. A pesar
de que algunos autores tomaron en cuenta la proximidad del usuario tanto cerca como
lejos, los dispositivos son utilizados desde cerca (directamente frente a la PDI) con
mayor frecuencia. Así mismo, el tipo de interacción mediante clics es el modo en
que más se interactúa. Adicionalmente, se muestra que algunas de las propuestas son
implementadas en ambientes educativos y en sistemas multidispositivo. Además, se
observó que la mayoría de los documentos consideran la entrada de datos en ambientes
multidispositivo, pero la salida de datos se contempló en menor medida. Finalmente,
algunos autores tomaron en cuenta la adaptabilidad de la proximidad del usuario, con
la cual la interfaz del sistema cambia cuando el usuario está cerca y cuando está lejos
de la PDI.
47
Capítulo 3
Modelo de interacción para interfaces

en supercies grandes
En este capítulo se muestra el modelo MIISuG (Modelo de Interacción para
Interfaces en Supercies Grandes) cuya nalidad es ayudar a los desarrolladores a crear
sistemas con distribución de entrada y salida de datos entre los dispositivos conectados,
así como adaptabilidad a la proximidad en que el usuario se encuentra respecto a
la supercie de interacción, que en el caso de estudio es respecto a la supercie de
proyección de la PDI.
En la actualidad los desarrolladores tienen a su alcance diversas herramientas que
los ayudan a crear sistemas interactivos, tales como: principios de diseño, patrones de
interacciones, principios heurísticos, leyes, modelos y arquitecturas.
De igual manera, cuando los usuarios nales hacen uso las aplicaciones en sus
dispositivos (tales como celulares inteligentes, tablets y computadoras) perciben que les
son útiles para llevar a cabo sus actividades, ya que estas aplicaciones les proporcionan
funcionalidad.
Sin embargo, la percepción de la usabilidad que tienen los usuarios de los sistemas
puede verse afectada negativamente cuando se hace uso de una pizarra digital interactiva
(PDI), debido a que no basta con proyectar un sistema (que fue desarrollado para
computadoras) ni con transmitir una aplicación (de dispositivos móviles) en la PDI.
Cada dispositivo tiene características diferentes. En el caso especíco de las PDI,
cuentan con una supercie grande de interacción (la cual se reere a su supercie de
48
proyección) que permite a sus usuarios interactuar directamente sobre ella mediante
controladores de apuntador (como un lápiz electrónico, o usando los dedos si te trata
de una PDI táctil). Así mismo, la supercie de proyección es lo sucientemente amplia
para visualizar su contenido digital de manera grupal y a distancia.
Como consecuencia de ello, cuando los usuarios interactúan directamente con
la supercie de proyección tienen que manipular elementos dispersados en un área
rectangular de aproximadamente 88 pulgadas (185 cm de largo y 140 de alto y con una
diagonal de 224 cm), que poseen algunas PDI, como la pizarra TeamBoard con formato
16/10 (widescreen).
Esto supone problemas tanto para el usuario que está utilizando la supercie de
proyección como para el público que visualiza la PDI. El usuario podría tener que
desplazarse en ocasiones de una esquina a otra (más de dos metros) o alcanzar elementos
del área superior, lo cual puede agotar al usuario pues la interacción se realiza estando
de pie. Por otro lado, tanto el usuario como su sombra (que él mismo proyecta sobre la
pizarra) obstaculiza la visión que tiene la audiencia del contenido digital mostrado en
la PDI.
Por ello, es que se han propuesto soluciones especializadas en el desarrollo de
aplicaciones para las PDI. Sin embargo, cuando las soluciones involucran únicamente
un dispositivo (como el lápiz electrónico) se presentan inconvenientes cuando el usuario
de la aplicación se acerca o aleja del pizarrón (por ejemplo, un profesor que se mueve
dentro del salón durante las clases) pues el usuario solo podrá interactuar con la PDI
estando cerca de ella. Por ello se observa que la interacción debería poder realizarse
desde el lugar donde se encuentre el usuario ya sea cerca o lejos de la PDI.
Por esta razón es que la propuesta de solución que se plantea en el presente
documento contempla un modelo de interacciones para el diseño de interfaces en
supercies grandes, que permita al desarrollador crear sistemas para dispositivos que
poseen supercies de interacción (como la PDI), los cuales cuenten con interfaces de
usuario distribuidas y que se adapten a la proximidad que haya entre el usuario y el
dispositivo.
Debido a que la inclusión de dispositivos externos a la PDI puede facilitar la
interacción con los elementos de la interfaz con el usuario. Un ejemplo de esto es la
de un profesor impartiendo clases a su grupo de alumnos mediante una PDI, la cual
49
3.1. Modelo de interacciones
controla con ayuda de sus dispositivos móviles como su celular, su tablet y su reloj
inteligente.
Así el profesor podrá acceder a elementos de la interfaz en la PDI desde
los dispositivos externos para facilitar la interacción, como utilizar el celular para
seleccionar colores de escritura o el grosor del lápiz digital (estando cerca de la PDI).
De igual modo, el profesor puede ir a su escritorio, a alguna silla desocupada de los
alumnos o caminar dentro del aula, y desde la distancia controlar el desplazamiento del
contenido, acercar o alejar las vistas, cambiar de diapositivas, etc. Mediante comandos
de voz con su reloj inteligente (estando lejos de la PDI).
Tomando en cuenta tales características, se propone el Modelo de Interacción para
Interfaces en Supercies Grandes (MIISuG).
3.1. Modelo de interacciones
El modelo MIISuG (Modelo de Interacción para Interfaces en Supercies Grandes)
surge como propuesta para que los desarrolladores hagan uso del él durante la etapa
de análisis. El objetivo de dicho modelo es ayudar a desarrollar aplicaciones para
dispositivos que poseen supercies grandes de interacción, tales como las pizarras
digitales interactivas (PDI), que se encuentran en ambientes multidispositivo y en el
que sus usuarios se desplazan dentro de su espacio de trabajo.
El modelo propuesto consiste en un diagrama de clases en UML (gura 3.1), que
permite al desarrollador identicar la estructura de un sistema en especíco gracias
al modelado de sus clases, atributos, operaciones (o métodos) y relaciones (que hay
entre sus clases). El desarrollador también lo puede implementar en la etapa de diseño
mediante diagramas de objetos, que servirán posteriormente para realizar programación
orientada a objetos.
50
3.2. Elementos del modelo
Figura 3.1: Modelo de Interacción para Interfaces en Supercies Grandes (MIISuG).
El modelo MIISuG (gura 3.1) contiene los siguientes elementos: Usuario, Arqueti-
po, Interacción, Rol, Escenario, Objeto, Dispositivo y Zona_trabajo.
Usuario
El elemento Usuario representa a las personas que utilizan el sistema, para ello se
registran e inician sesión en él. Además, hace uso de los atributos: un Id que lo diferencia
de los demás usuarios, un Nombre con el cual el usuario sabrá con qué cuenta ha iniciado
51
sesión el sistema, una contraseña que servirá para vericar que realmente es el usuario
indicado.
Un ejemplo de ello puede ser Soa, una usuaria a la cual se le asigna el identicador
numérico 1 y su contraseña EtG2sH4t3.

Adicionalmente, durante la implementación del elemento se pueden agregar más
atributos especícos para cada sistema, como por ejemplo un correo electrónico o
número de teléfono para contactar al usuario o su fecha y lugar de nacimiento.
Los atributos del elemento son privados, pero se pueden consultar o modicar
datos en el sistema gracias a sus métodos de acceso públicos que se encuentran en
la operación denominada Metodos_acceso() y que utilizan el identicador del elemento
para modicar a un usuario en concreto.
Así mismo, el elemento usuarios se relacionan con los elementos Arquetipo, Interac-
cion y Dispositivo.
Arquetipo
Los usuarios del sistema tienen asociados al menos un arquetipo. El elemento
Arquetipo (también podría denominarse perl) se reere al conjunto de usuarios que
poseen características comunes y permite reconocer las funciones que tiene permitido
realizar dentro del sistema. Para ello, hace uso de los atributos: un Id que lo identica
de los demás arquetipos, un Nombre con el cual el usuario sabrá con qué arquetipo
ha iniciado sesión el sistema, un conjunto (arreglo) de Permisos que contiene palabras
clave que son utilizadas para autorizar o no autorizar al usuario a realizar actividades
en el sistema.
Un ejemplo de ello puede ser el arquetipo llamado Profesor cuyo identicador sea el 1
y que sus permisos Escribir, Consultar, Borrar, como su nombre lo indica permitirá que
el usuario escriba, consulte o borre documentos. Otro ejemplo puede ser un arquetipo
Alumno, el cual posea únicamente el permiso Consultar.

atributos especícos para cada sistema, como por ejemplo agregar el atributo Tema el
cual contenga la lista de personalización visual de los colores principales y secundarios
que el usuario verá durante el uso del sistema, es decir que mientras el profesor tenga
colores más formales en su interfaz (negro, blanco), los alumnos tengan colores más
52
informales y llamativos (Azul,Negro) pero que hagan correcto contraste y que no
lastimen la vista.
Los atributos del elemento son privados, pero se pueden consultar o modicar datos
en el sistema gracias a sus métodos de acceso públicos que se encuentran en la operación
denominada Metodos_acceso() y que utilizan el identicador de del elemento para
modicar a un arquetipo en concreto.
El elemento Arquetipo se relaciona con el elemento Usuario. Esta relación tiene car-
dinalidad de muchos a muchos, debido a que múltiples usuarios pueden ser del mismo
arquetipo (por ejemplo Profesor ) y que además los usuarios podrían tener más de un
arquetipo asociado (por ejemplo, ser profesores y alumnos), en cuyo caso el inicio de
sesión permitiría elegir el arquetipo con el que entrará al sistema en cada sesión, o bien
estando dentro del sistema utilizar algún interruptor que le permita al usuario cambiar
entre sus arquetipos asociados.
Interacción
Los usuarios pueden interactuar con el sistema. El elemento Interacción representa
a las posibles acciones que el usuario lleva a cabo. Para ello, hace uso de los atributos:
un Id que lo diferencia de las demás interacciones, un Nombre con el cual el usuario
sabrá con qué interacción está realizando (para mejorar la retroalimentación al usuario
sobre el estado del sistema).
Un ejemplo de ello puede ser la interacción insertarLinea, cuyo identicador en el
sistema sea el número 1 y como su nombre lo indica inserte una línea en el sistema.
De igual manera, el elemento Interacción está relacionado consigo misma, pues una
interacción puede estar integrada por otras interacciones, este tipo de interacciones
son denominadas Interacciones complejas ya que contienen interacciones atómicas
(las cuales no tienen agregadas más interacciones) denominadas Interacciones simples.

Un ejemplo de ello es la interacción dibujarMapaSinoptico pues tiene asociada otras
interacciones internas como insertarLinea e insertarRectangulo. Esto es útil cuando se
quiere consultar las actividades de un usuario, pues el registro de interacciones puede
ltrarse para mostrar solo las iteraciones complejas.
atributos especícos para cada sistema, como por ejemplo agregar el atributo Tiempo y
53
el atributo Estado (por ejemplo: en proceso, nalizada, cancelada) para que los sistemas
que lleven a cabo un registro de actividades puedan saber qué tareas realizó el usuario
y cuándo se llevaron a cabo.
Los atributos de lal elemento son privados, pero se pueden consultar o modicar
datos en el sistema gracias a sus métodos de acceso públicos que se encuentran en la
operación denominada Metodos_acceso() y que utilizan el identicador del elemento
para modicar a una interacción en concreto.
El elemento Interacción se relaciona con el elemento Usuario. Esta relación tiene
cardinalidad de muchos a muchos, debido a que múltiples usuarios pueden realizar la
misma interacción (por ejemplo, escribir una línea) y que además los usuarios podrían
realizar más de una interacción mientras usan el sistema (por ejemplo, insertar una línea
y cambiar color de escritura). De igual modo, el elemento Interacción está relacionado
con los elementos: Rol, Escenario, Objeto y Dispositivo.
Rol
Cada interacción tiene asociado un rol. El Rol se asigna al momento de realizar la
interacción, es decir mientras el usuario realiza interacciones el rol se modicará. Tiene
propiedades como: un Id que lo diferencia de los demás roles, un Nombre con el cual el
sistema asociará las interacciones.
Un ejemplo de ello puede ser el rol de Creador cuyo identicador de rol sea el
1. Ese rol se asignó debido a que la usuaria Soa realizó la interacción insertarLinea,
entonces el rol que toma en ese momento aparecerá en el registro de actividades y servirá
como ltro para saber qué interacciones realiza un usuario mientras desempeña un rol
determinado, con la nalidad de ofrecer posteriormente atajos personalizados a los
usuarios avanzados que hayan utilizado el sistema y tengan un patrón de interacciones
cada vez que cambian su rol.
atributos especícos para cada sistema, como por ejemplo agregar el atributo Duración
para que los sistemas que lleven a cabo un registro de actividades puedan saber cuánto
tiempo le dedicó el usuario al sistema siendo un rol en especíco, con la nalidad de
conocer las preferencias de cada usuario, por ejemplo identicar a los profesores que
54
preeren dar clases exponiendo (rol Lector ) o qué profesores explican mediante el uso
actividades ( Creador ).
para modicar a un rol en concreto.
El elemento Rol se relaciona con el elemento Interacción. Esta relación tiene cardi-
nalidad de muchos a 1, debido a que múltiples interacciones pueden denir al mismo
Rol (por ejemplo, tanto escribir una línea y como escribir un rectángulo denen al rol
Creador ).
Escenario
Las interacciones del sistema tienen asociados al menos un escenario. El elemento
Escenario se reere al contexto en el que es llevada a cabo una interacción, tomando
en cuenta las condiciones actuales del sistema. Para ello, hace uso de los atributos: un
Id que lo diferencia de los demás escenarios, un Nombre con el cual el sistema asociará
las interacciones, una lista dePrecondiciones que sirven para reconocer qué escenario
es el que se llevará acabo, una lista de Postcondiciones que permite identicar cuando
una interacción se realizó de la manera en que se esperaba (con la nalidad de informar
al usuario sobre el error y cómo recuperarse o solucionarlo).
Un ejemplo de ello puede ser el escenario cuyo identicador sea el 1, su nombre
EscenarioCreadorVoz. Este escenario fue elegido pues la usuaria Soa realizó la

interacción insertarLinea con un comando de voz (desde un asistente de voz), entonces
el rol que toma en ese momento será el de Creador y el dispositivo será AsistenteVoz. Es
decir, mediante las precondiciones se buscará el escenario que contemple el uso del Rol
Creador ) y Dispositivo AsistenteVoz. Posteriormente se vericará si las condiciones de

salida se llevaron a cabo correctamente, en este caso si se inserta la línea de la manera
en que se esperaba entonces se retroalimentará al usuario informándole que su acción
se realizó de manera satisfactoria.
atributos especícos para cada sistema, como por ejemplo agregar el atributo
MensajeExito para guardar el texto que contenga la información sobre el caso exitoso de
55
la acción realizada y el atributo MensajeError que guarde la información relevante sobre
el fallo y cómo solucionarlo, con el objetivo de mostrar estos mensajes en el sistema
cuando se lleven a cabo las interacciones (en el caso de tablets se podrían mostrar el
mensaje en ventanas mientras que en el caso de asistentes de voz podría reproducirse
el mensaje).
para modicar a un rol en concreto.
El elemento Escenario se relaciona con el elemento Interacción. Esta relación tiene

cardinalidad de 1 a muchos, debido a que una interacción puede ejecutarse en múltiples
escenarios (por ejemplo, escribir una línea puede hacerse desde un escenario en el que
una condición sea utilizar una tablet, mientras que hay otro escenario en el que una
de las condiciones es que se utilice un asistente de voz). Con el objetivo de adaptar las
interacciones a diferentes escenarios en que se utiliza el sistema, tales las condiciones
podrían ser el dispositivo y la proximidad.
Objeto
Las interacciones del sistema tienen asociados al menos un objeto. El elemento
Objeto se reere a los elementos del sistema que el usuario manipula para realizar sus
actividades. Para ello, hace uso de los atributos: un Id que lo diferencia de los demás
objetos, un Nombre con el cual el sistema asociará los objetos las interacciones.
Un ejemplo de ello puede ser el objeto (por ejemplo un botón) cuyo identicador
sea el número 1 y el nombre del objeto sea btnInsertarLinea. La usuaria Soa realiza
la interacción insertarLinea presionando el botón btnInsertarLinea.
VecesUtilizado para que el sistema lleve un registro de la cantidad de ocasiones que
se utiliza un objeto en usa sesión, o el atributo combinacionTeclas para establecer el
conjunto de teclas que puede realizar la acción en caso de que se utilice algún teclado.
Con la nalidad de ofrecer atajos al usuario (tales como teclas de acceso rápido o
56
reubicando el objeto, de manera que los objetos utilizados con mayor frecuencia se
encuentren más cerca del usuario).
para modicar a un objeto en concreto.
El elemento Objeto se relaciona con el elemento Interacción. Esta relación tiene
cardinalidad de 1 a muchos, debido a que una interacción puede realizarse mediante
diversos objetos (por ejemplo, la interacción insertarLinea puede llevarse a cabo desde
un botón cuyo identicador sea el 1, o mediante otro objeto que tenga el identicador
25). De igual modo, el elemento Objeto está relacionado con el elemento Dispositivo.
Dispositivo
Los objetos del sistema tienen asociados al menos un dispositivo. Como su nombre lo
indica, el elemento Dispositivo se reere a los dispositivos que se encuentran conectados
al sistema y que además contiene Objetos que le permiten interactuar con el usuario.
Para ello, hace uso de los atributos: un Id que lo diferencia de los demás dispositivos,
un Nombre con el cual el sistema asociará los dispositivos a sus respectivos Objetos.
También tienen como atributo a la Proximidad, la cual se obtiene al comparar la
distancia que existe entre un dispositivo y otro (por ejemplo, entre una PDI y un
celular inteligente), ya que dicho valor será utilizado posteriormente para determinar la
zona de trabajo.
Un ejemplo de ello puede ser la PDI cuyo identicador sería el número 1 mientras
que el nombre del dispositivo sería pdi. Por otro lado, el identicador del celular sería el
número 2 mientras que el nombre del dispositivo sería celular. La usuaria Soa puede
realizar la interacción insertarLinea, presionando un botón (objeto) de su celular para
que se inserte una línea en la PDI. En este caso, para calcular la proximidad se mide la
distancia que hay entre los dispositivos involucrados en la interacción, en este ejemplo
Sofía sostenía su celular a 20 cm de distancia respecto a la PDI, por lo que la proximidad
(que por defecto es 0 unidades) de ambos dispositivos ahora es de 20 unidades (cm en
el contexto actual).
57
NumeroAcciones que consiste en contador de las interacciones que el usuario tuvo con el
dispositivo, esto permite identicar qué dispositivos son utilizados con mayor frecuencia
por cada usuario y así ofrecer accesos directos que mejoren la eciencia del sistema de
manera personalizada.
para modicar a un dispositivo en concreto.
El elemento Dispositivo se relaciona con el elemento Objeto. Esta relación tiene
cardinalidad de muchos a 1, debido a que múltiples objetos pueden pertenecer
a un mismo dispositivo (por ejemplo, btnInsertarLinea

el objeto y el objeto
btnInsertarRectangulo se encuentran en el mismo dispositivo celular ).

De igual modo, el elemento Dispositivo está relacionado con el elemento Interacción.
Esta relación tiene cardinalidad de muchos a muchos, debido a que múltiples
interacciones pueden realizarse en un mismo dispositivo (por ejemplo, la interacción
insertarLinea y la interacción insertarRectangulo se pueden realizar desde el mismo

dispositivo celular ), además signica que una interacción puede llevarse a cabo desde
diversos dispositivos (por ejemplo, la interacción insertarLinea se puede ejecutar tanto
en la PDI como en el Celular).
De la misma forma, el elemento Dispositivo está relacionado con el elemento Usuario.

Esta relación tiene cardinalidad de 1 a muchos, debido a que un usuario puede utilizar
múltiples dispositivos (por ejemplo, la profesora Lucy puede utilizar tanto la PDI como
en el Celular).
Así mismo, el elemento Dispositivo está relacionado con el elemento Zona_trabajo.
Zona trabajo
Los dispositivos conectados al sistema tienen asociados una zona de trabajo. El
elemento Zona_trabajo se reere al espacio físico en el que se ubica un Dispositivo

respecto a otro, basándose en la proximidad que hay entre ellos. Es decir que la zona
de trabajo en la que se encuentra un dispositivo se dene con comparando el atributo
58
Proximidad con los rangos de proximidad que le corresponden a cada zona. Para ello,
hace uso de los atributos: un Id que lo diferencia de las zonas de trabajo, un Nombre con
el cual el sistema asociará los dispositivos que se encuentren en su rango de proximidad.
También tienen como atributos a la Proximidad_min y a la Proximidad_max, las cuales

denen el rango de la zona de trabajo.
Un ejemplo de ello puede ser la Zona_trabajo cuyo identicador sería el número

1, que tiene asignado como nombre Cerca, su Proximidad_min es de 0 cm y a la
Proximidad_max es de 100 cm. Se asignó esta zona debido a que la usuaria Soa utilizó
su celular para insertar una línea en la PDI, entonces se calculó la proximidad que existe
entre la PDI y el celular, la cual es de 20 unidades (centímetros en el contexto actual).
Como consecuencia el celular está siendo utilizado desde la zona denominada Cerca,
pues los 20 cm se encuentran dentro del rango de 0-100 establecidos, de lo contrario le
correspondería otra zona.
La nalidad de utilizar zonas de trabajo es que el sistema adapte sus interacciones
con el usuario con base en la proximidad que tenga entre los dispositivos que esté
utilizando. Es decir, si se hace uso de un celular estando en una zona cerca de la
PDI, entonces se muestren Objetos que permitan al usuario realizar acciones como
escribir, dibujar, cambiar color, cambiar grosor de escritura. Por otro lado, si se utiliza
el celular desde una zona lejana a la PDI entonces el sistema mostrara en la pantalla
del celular acciones como pasar diapositivas, acercar/alejar el contenido o desplazarse
entre documentos. Debido a que si colocamos todos los botones en una misma interfaz
podemos incrementar la carga cognitiva del usuario, les tomará más tiempo tomar su
decisión, tardarán en llegar a un punto determinado de la interfaz o podrá confundirlos
al mostrarle todas las opciones. En el caso de dispositivos como el reloj inteligente
es más notorio este efecto, pues su pantalla reducida (comparada a la supercie de
proyección de una PDI) limita la cantidad de elementos que se pueden integrar en ella.
Además, si se les permite a los usuarios personalizar las interacciones que realizan en
cada zona, entonces se mejorará más eciencia que brinda el sistema.
Otra ventaja de utilizar las zonas de trabajo es que se puede estimar la proximidad
que tiene el usuario respecto a la PDI, esto se debe a que cada vez que el usuario utiliza
un dispositivo se toma la distancia de este último y se compara con la PDI. Es decir, si
un usuario toca la PDI entonces la proximidad del usuario es cercana, pero si se usa un
59
3.3. Arquitectura funcional
celular que se encuentra a 200 centímetros de distancia de la PDI, entonces se estima
que el usuario también está en la zona de trabajo del celular.
atributos especícos para cada sistema, como por ejemplo agregar el atributo Duración
que consiste en registrar el tiempo que usuario ha permanecido en la zona para conocer
los patrones de uso de cada usuario y ofrecerle ayuda con base en esos datos.
la operación denominadaMetodos_acceso() y que utilizan el identicador del elemento

para modicar a una Zona_trabajo en concreto.
El elemento Zona_trabajo se relaciona con el elemento Diapositivo. Esta relación
tiene cardinalidad de muchos a 1, debido a que múltiples dispositivos pueden encontrarse
en una misma Zona_trabajo (por ejemplo, el dispositivo celular y el dispositivo reloj

se ubiquen en la misma zona denominada cerca ).
La arquitectura planteada tiene como objetivo ayudar a diseñar sistemas para
dispositivos que poseen supercies grandes de interacción, como las pizarras digitales
Interactivas (PDI), utilizados en un ambiente multidispositivo, haciendo uso de una
interfaz de usuario distribuida, de manera que la interacción se adapte según el
dispositivo utilizado y a la proximidad en que se encuentre el usuario respecto a los
dispositivos.
Es decir, los sistemas basados en la arquitectura pueden:
Agregar dispositivos externos que permitan la entrada y salida de datos entre
ellos.
Utilizar a los elementos de la interfaz en una supercie grande de manera accesible.
Adaptar la interacción del usuario a la proximidad en la que se encuentran los
usuarios respecto a los dispositivos utilizados.
60
Para ello, se utiliza una interfaz de usuario distribuida (DUI), ya que los usuarios
cuentan con múltiples dispositivos externos que pueden utilizar para interactuar tanto
cerca como lejos de los dispositivos que poseen supercies grandes.
La interfaz de usuario estará distribuida en las dimensiones de entrada y salida
(Elmqvist, 2011):
Redirección de entrada. Debido a que los métodos de entrada de la aplicación se
realizan a través de uno o más dispositivos.
Redirección de contenido. Puesto que los métodos de salida de la interfaz gráca
de usuario están disponibles en uno o más dispositivos.
En tal escenario, los componentes de la interfaz en la PDI se pueden controlar desde
los dispositivos externos que se conecten al sistema. Esto con el n de delegar actividades
y elementos de la interfaz a diferentes dispositivos, dependiendo de la proximidad que
haya entre el usuario y la PDI.
La arquitectura está basada en capas: capa de interacción, capa de adaptación y
capa de funcionalidad (gura 3.2).
Figura 3.2: Arquitectura funcional
61
Capa de interacción
En la capa de interacción se lleva a cabo la comunicación entre el usuario y el
sistema. Esta capa se comunica con la capa de adaptación mediante la interfaz.
• El usuario
Es la persona que interactúa con los dispositivos que están conectados al sistema.
Un ejemplo de ello puede ser Soa (una usuaria del sistema).
• Los dispositivos
Son los aparatos conectados al sistema y que se comunican con el usuario mediante
su interfaz. Algunos dispositivos son la PDI y un celular inteligente.
• La interfaz
La interfaz contiene los elementos con los que el usuario interactúa y está relaciona-
da con el gestor de interfaz de usuario. La interfaz pueden ser por ejemplo los botones
ubicados en la supercie de proyección de la PDI, los cuales el usuario presionará con
sus dedos (en el caso de que la PDI sea táctil). Otro ejemplo son los menús que posee
la pantalla del celular inteligente, con los que el usuario podrá controlar el sistema.
Capa de adaptación
La capa de adaptación es la encargada de modicar la interacción del sistema
basándose en la proximidad que hay entre los dispositivos y el usuario. Para lograrlo
hace uso del gestor de interfaz, el gestor de distribución, el gestor de proximidad y el
gestor de eventos. Esta capa se comunica con la capa de interacción por medio del gestor
de interfaz, mientras que el gestor de eventos se comunica con la capa de funcionalidad.
• El gestor de interfaz
Es el encargado de modicar y administrar la interfaz de los dispositivos conectados
al sistema, está relacionado con la interfaz de la capa de interacción y al gestor de
eventos. Cada vez que hay una interacción en la interfaz, el gestor de la interfaz se
62
comunica con el gestor de eventos para informarle lo sucedido. Un ejemplo de esto puede
ser que el gestor de eventos detecta que la usuaria Soa presionó el botón insertar línea
en la interfaz mostrada en su celular inteligente, por lo que informa al gestor de eventos
sobre esta interacción.
Así mismo, es el encargado de la redirección de entrada y de contenido, es decir que
recibe y muestra la información de diferentes dispositivos. Por ejemplo, identicar el
gesto de zoom en una PDI, por lo que acerca la información de la pantalla para que se
vea más grande, o que identique en el celular un comando de voz que indique hacer
zoom, por lo que se realizará el acercamiento y en el celular se hará retroalimentación
sonora al usuario sobre el estado actual del sistema.
• El gestor de eventos
El gestor de eventos se encarga de analizar las interacciones que realiza el usuario
(gracias al gestor de la interfaz), consultar la proximidad desde la que se realizó la
interacción (con el gestor de proximidad) y de saber en qué dispositivos se mostrará el
resultado de la interacción (mediante el gestor de distribución). A partir de ello guardará
la información relevante de la interacción (qué es lo que el usuario está haciendo, así
como brindar los parámetros necesarios según la interacción que se haya realizado) y
del contexto actual del sistema (con ayuda de los datos temporales) y se la enviará a
la capa de funcionalidad (a la funcionalidad de la aplicación).
Por ejemplo, si el gestor de eventos nota que el usuario presionó el botón de iniciar
sesión (gracias a que se lo informó el gestor de interfaz de usuario) en el celular
inteligente a dos metros de distancia de la PDI, entonces le avisará a la capa de
funcionalidad (con la funcionalidad de la aplicación) que el usuario intenta iniciar sesión
y le enviará el usuario y contraseña respectivo. A partir de ello, la capa de funcionalidad
evaluará si el usuario podrá o no ingresar al sistema, comunicándose con la base de
datos (para buscar las credenciales). Después el gestor de eventos con ayuda del gestor
de distribución informará a los dispositivos implicados en la interacción del resultado
obtenido. En este caso, el gestor de eventos se comunicará con el gestor de interfaz de
para mostrar la pantalla de bienvenido en el celular o decirle al usuario que sus datos
no son válidos cuando las credenciales no fueron las correctas.
Así mismo, el gestor de eventos es el encargado de denir el contexto actual en
que se encuentra el sistema, estos son datos como los dispositivos con los que se están
63
interactuando, datos del usuario, proximidad que hay entre los dispositivos y el usuario.
Cada vez que cambia el contexto actual del sistema el gestor de eventos informará al
gestor de funcionalidad para que este último realice las acciones correspondientes.
Un ejemplo de ello es que el gestor de eventos notique al gestor de funcionalidad
que la interfaz de usuario de un celular debe cambiar, pues el contexto actual del
sistema ya no es el mismo debido a que la proximidad del usuario cambio. Es decir, si
el usuario estaba escribiendo en la PDI frente a ella y luego se aleja para realizar una
presentación entonces el gestor de cambios nota que la proximidad ya no es la misma,
por lo que cambia la interfaz del celular conectado al sistema para que muestre botones
relacionados a llevar a cabo una presentación a distancia de la PDI.
• El gestor de distribución
El gestor de distribución es el encargado de administrar los dispositivos que están
conectados al sistema y de transmitir la información relevante a los dispositivos que
les concierne. Es decir, envía datos a los dispositivos especícos dependiendo de las
interacciones realizadas en el sistema, para ello se comunica con el gestor de eventos.
Por ejemplo, el gestor de distribución se comunica con el gestor de eventos de
usuario para indicar que en la supercie de proyección de la PDI y en la pantalla
de la computadora debe insertarse un círculo azul, ya que el gestor determinó que esos
son los dispositivos que actualmente están conectados.
• El gestor de proximidad
El gestor de proximidad administra la distancia que hay entre los dispositivos y el
usuario. Para lograrlo se comunica con el gestor de eventos, el cual le informa cada vez
que el usuario interactúa con un dispositivo. Cada vez que un dispositivo se utiliza, el
gestor de proximidad lo compara con los demás dispositivos de tal manera que guarda
temporalmente la distancia entre cada uno de ellos y se lo manda al gestor de eventos.
Así mismo, para calcular la distancia del usuario el gestor de proximidad le asigna la
distancia del último dispositivo con el que interactuó.
Un ejemplo de ello es que el gestor de proximidad determine que el celular y la PDI
están a 40 cm de distancia, dado que el gestor de interfaz de usuario detectó que el
usuario presionó el botón de iniciar presentación, lo cual activó al gestor de eventos
64
y este informa al gestor de proximidad que hubo una interacción. Por ello el gestor
de proximidad calcula la distancia entre el celular y la PDI que hay en ese momento,
además esa distancia será la que el gesto de proximidad le asigne al usuario pues esta
fue la última interacción que el usuario llevó a cabo. Para calcular la proximidad el
sistema puede utilizar sensores de cercanía o el bluethoot de ambos dispositivos, por
ejemplo. Otro caso podría ser que el usuario especique manualmente que ha cambiado
de lugar mediante algún botón o comandos de voz.
• Los datos temporales
Los datos temporales guardan la información del contexto actual de la aplicación
por medio del gestor de eventos. Estos datos pueden ser información del usuario actual
que utiliza el sistema, dispositivos conectados y proximidad de los dispositivos. Cuando
el gestor de eventos detecta nuevas interacciones mediante el gestor de interfaz, entonces
consulta y modica los datos temporales basado en la información que le brindan los
gestores de proximidad y de distribución.
Por ejemplo, los datos temporales del contexto actual de una aplicación en determi-
nado momento sean que el usuario sea Soa, los dispositivos conectados sean una PDI
y un celular inteligente y que la proximidad que hay entre el usuario y la PDI sea de 2
metros, ya que la última interacción que el usuario realizó fue desde el celular el cual
se encuentra a dos metros de distancia de la PDI.
Capa de funcionalidad
La capa de funcionalidad, como su nombre lo indica, contiene las funciones que
permiten realizar las interacciones en el sistema y de guardar información en la base
de datos. Esta asociada a la capa de adaptación por medio de la funcionalidad de la
aplicación.
• La funcionalidad de la aplicación
La funcionalidad de la aplicación es la encargada de realizar las operaciones del
sistema basándose en la información que solicita al gestor de eventos (de la capa
de adaptación) y también le brinda datos a dicho gestor cuando se lo solicita.
65
3.4. Resumen
Adicionalmente, se comunica con la base de datos para consultar, agregar, modicar o
eliminar información de ella.
Un ejemplo es cuando el gestor de funcionalidad ejecuta la creación de un rectángulo
en el lienzo de la aplicación. Entonces el gestor de funcionalidad le da los parámetros de
salida al gestor de eventos para que este último se encargará de mandar la información
a aquellos dispositivos que posean el lienzo en sus pantallas y que en la interfaz de
los dispositivos se actualicen las pantallas para que el usuario visualice que se agregó
correctamente el rectángulo.
• La base de datos
La base de datos es la encargada de conservar los datos de la sesión, de manera
que no se pierdan al cerrar la aplicación, para ello se comunica con la funcionalidad
de la aplicación, quien le da la instrucción de consultar, guardar, modicar o eliminar
información de la base de datos. De igual manera, puede guardarse en un servidor o de
manera local en archivos propios de la base de datos.
Un ejemplo de esto es que al registrar un usuario nuevo la base de datos conserva
el id, el nombre y la contraseña del usuario. Posteriormente informa a la funcionalidad
de la aplicación si el guardado fue exitoso para que se le notique al usuario mediante
la interfaz del dispositivo que esté utilizando.
3.4. Resumen
En la actualidad los desarrolladores tienen a su alcance diversas herramientas que
los ayudan a crear sistemas interactivos, tales como: principios de diseño, patrones de
interacciones, principios heurísticos, leyes, modelos y arquitecturas. De igual manera,
se han propuesto soluciones especializadas en el desarrollo de aplicaciones para las PDI.
Sin embargo, cuando las soluciones involucran únicamente un dispositivo (como
el lápiz electrónico) se presentan inconvenientes cuando el usuario de la aplicación se
acerca o aleja del pizarrón (por ejemplo, un profesor que se mueve dentro del salón
durante las clases) pues el usuario solo podrá interactuar con la PDI estando cerca de
ella. Por ello se observa que la interacción debería poder realizarse desde el lugar donde
se encuentre el usuario ya sea cerca o lejos de la PDI.
66
3.4. Resumen
surge como propuesta para que los desarrolladores hagan uso del él durante la etapa
de análisis. El objetivo de dicho modelo es ayudar a desarrollar aplicaciones para
dispositivos que poseen supercies grandes de interacción, tales como las pizarras
digitales interactivas (PDI), que se encuentran en ambientes multidispositivo y en el
que sus usuarios se desplazan dentro de su espacio de trabajo.
El modelo propuesto consiste en un diagrama de clases en UML, que permite al
desarrollador identicar la estructura de un sistema en especíco gracias al modelado de
sus clases, atributos, operaciones (o métodos) y relaciones (que hay entre sus clases). El
desarrollador también lo puede implementar en la etapa de diseño mediante diagramas
de objetos, que servirán posteriormente para realizar programación orientada a objetos.
El modelo MIISuG contiene los siguientes elementos:
Usuario representa a las personas que utilizan el sistema, para ello se registran e
inician sesión en él.
Arquetipo (también podría denominarse perl) se reere al conjunto de usuarios
que poseen características comunes y permite reconocer las funciones que tiene
permitido realizar dentro del sistema.
Interacción representa a las posibles acciones que el usuario lleva a cabo.
Rol es el papel o función que un usuario desempeña. Se asigna al momento de
realizar la interacción, es decir mientras el usuario realiza interacciones el rol se
modicará.
Escenario se reere al contexto en el que es llevada a cabo una interacción,
tomando en cuenta las condiciones actuales del sistema.
Objeto se reere a los elementos del sistema que el usuario manipula para realizar
sus actividades.
Dispositivo se reere a los dispositivos que se encuentran conectados al sistema y
que además contiene Objetos que le permiten interactuar con el usuario.
Zona_trabajo se reere al espacio físico en el que se ubica un Dispositivo respecto
a otro, basándose en la proximidad que hay entre ellos.
67
3.4. Resumen
Por otro lado, la arquitectura planteada tiene como objetivo ayudar a diseñar
sistemas para dispositivos que poseen supercies grandes de interacción, como las
pizarras digitales Interactivas (PDI), utilizados en un ambiente multidispositivo,
haciendo uso de una interfaz de usuario distribuida, de manera que la interacción se
adapte según el dispositivo utilizado y a la proximidad en que se encuentre el usuario
respecto a los dispositivos. Los métodos de entrada y salida de la aplicación (hecha a
partir de la arquitectura) se pueden realizar a través de uno o más dispositivos.
La arquitectura está basada en capas:
La capa de interacción se lleva a cabo la comunicación entre el usuario y el sistema.
La capa de adaptación es la encargada de modicar la interacción del sistema
basándose en la proximidad que hay entre los dispositivos y el usuario.
La capa de funcionalidad (como su nombre lo indica) contiene las funciones que
permiten realizar las interacciones en el sistema y de guardar información en la
base de datos.
Mediante la arquitectura, los componentes de la interfaz en la supercie grande de
interacción se pueden controlar desde los dispositivos externos conectados al sistema.
Esto con el n de delegar actividades y elementos de la interfaz a diferentes dispositivos,
dependiendo de la proximidad que haya entre el usuario y la supercie grande de
interacción.
68
Capítulo 4
Prototipo: PDI ROOM
En el presente capítulo se muestra la creación del prototipo para pizarras digitales
interactivas (PDI) nombrado PDI ROOM, en el cual se utilizó el modelo propuesto
MIISuG (Modelo de Interacción para Interfaces en Supercies Grandes). Así mismo, el
desarrollo fue centrado en el usuario siguiendo el estándar internacional de Ergonomía

de la interacción humano-computadora, parte 210: Diseño centrado el usuario para los
sistemas interactivos (ISO 9241-210:2010), el cual incluye las siguientes fases:
1. Entender y especicar el contexto de uso
2. Especicar los requerimientos del usuario de la aplicación
3. Producir soluciones de diseño
4. Evaluar el prototipo
La implementación del modelo propuesto está ubicada en la fase 4.3 Soluciones

de diseño, Diseño de interacciones. Adicionalmente, la evaluación se
en el punto 4.3.2
encuentra en la fase 4.4 Evaluación del prototipo, cuyos resultados están presentes en
el punto 4.4.4 Obtención y análisis de datos.
69
4.1. Contexto de uso
4.1. Contexto de uso
En esta fase se describe a los usuarios del sistema, su entorno y las actividades que
realizan.
4.1.1. Características del usuario de la aplicación

Los usuarios son profesores que cumplen con las siguientes características: imparten
clases de programación (computación o anes), trabajan en centros de enseñanza
públicos o privados, dan clases en secundarias o en instituciones de enseñanza de
nivel superior, son mayores de edad, son mexicanos, hablan español, trabajan a tiempo
completo o parcial, imparten clases en un espacio de trabajo amplio (un salón de clases
para al menos 10 alumnos), mientras dan la clase se trasladan de un lugar a otro dentro
del salón, les gusta utilizar la tecnología para enseñar y saben utilizar dispositivos
móviles.
4.1.2. Tareas
Las tareas habituales que realizan los profesores son las siguientes: conectar su
computadora al videoproyector, proyectar en el pizarrón el contenido educativo que
mostrará a sus alumnos, escribir nuevos elementos en el pizarrón, editar y/o borrar
elementos del pizarrón.
4.1.3. Equipamiento
Los profesores hacen uso de: computadora, videoproyector, celular inteligente,
pizarrón, plumones y borrador.
4.1.4. Entorno
Los profesores dan clases en salones amplios, a los que asisten al menos 10 alumnos,
en los cuales hay asientos, un escritorio, pizarrones, videoproyectores. Al ser una
institución de educación hay poco ruido y los alumnos prestan atención al profesor.
70
4.2. Requerimientos del usuario
4.1.5. Método de recolección

La información se obtuvo mediante la técnica de observación realizada a profesores
de las licenciaturas de Informática y de Tecnologías Computacionales de Facultad de
Estadística e Informática de la Universidad Veracruzana. Tal observación se llevó a cabo
a los profesores mientras impartían clases sobre programación, tales como: Algoritmos,
Bases de datos, Arquitectura de computadoras, Compiladores, Programación avanzada
y Taller de integración.
Esta fase consiste en la estructuración de la información obtenida de la fase previa,
con el n de especicar al usuario.
4.2.1. Personas
Es una descripción especíca de una persona cticia que tiene las mismas caracte-
rísticas que los usuarios.
Docente
Lucy es una mujer oriunda de la ciudad de Xalapa. Tiene 40 años. Es de estatura
baja, complexión mediana y su largo cabello es color castaño oscuro. Su profesión es
ser profesora y trabaja desde hace 8 años en la facultad de estadística e informática
impartiendo Algoritmos I. A ella le gusta utilizar su pizarrón para impartir sus clases,
pero hay ocasiones en que su baja estatura le diculta llegar a todas las áreas, espe-
cialmente la parte superior del pizarrón.
Aspectos psicológicos
Lucy a la que le gusta mantenerse a la vanguardia con las nuevas tecnologías e inno-
vaciones que van surgiendo en el mercado. Es una eciente programadora, diseñadora
y administradora de bases de datos.
71
Modelo mental
Lucy es capaz de administrar recursos informáticos, lo cual involucra evaluar, ad-
ministrar, instalar, operar y supervisar: sistemas informáticos, redes, bases de datos
locales o distribuidas, así como herramientas informáticas.
Diferencias sociales
Lucy es una mujer conservadora, su religión es católica y le gusta mucho realizar
actividades caritativas y solidarias, esa es la razón por la que nace su amor de ser
profesora.
4.2.2. Ambiente
En esta fase se denen las tareas que realizan los usuarios con la pizarra digital
interactiva (PDI) en un contexto de uso en concreto.
El espacio de trabajo que se tiene contemplado es un salón de clases (gura 4.1). El
profesor es el usuario de la aplicación desarrollada (sistema monousuario), en el cual
se interactúa con la PDI y con los dispositivos externos que se conecten al sistema.
Estando en las zonas de trabajo: cerca (de 1 cm a 100 cm) y lejos (de más de 100 cm
hasta 500 cm), de distancia entre la PDI y el usuario.
Figura 4.1: Espacio de trabajo
72
4.3. Soluciones de diseño
El objetivo del usuario es realizar anotaciones en la PDI con ayuda de dispositivos
externos (celulares). Para ello, el usuario realizará las siguientes tareas:
Agregar anotaciones a la supercie de la PDI (mediante la creación de líneas,
rectángulos o escritura a mano alzada)
Modicar anotaciones (cambiando el color o el grosor del trazo) de la PDI
Borrar anotaciones de la supercie de la PDI (de manera parcial o total)
Guardar las anotaciones realizadas en la supercie de la PDI
4.2.3. Casos de uso

Los casos de uso muestran cómo es la interacción del usuario con el sistema, en la
que las intenciones del usuario y las responsabilidades del sistema se ven implicadas.
Así mismo, pueden utilizarse como complemento al modelo MIISuG, ya que el modelo
muestra a la interacción de manea gráca mientras que los casos de uso la describen
textualmente.
Debido a ello, la creación de los casos de uso es opcional cuando se utiliza el modelo
propuesto, ya que se puede diseñar a los diagramas de objetos utilizando únicamente al
modelo MIISuG. Sin embargo, si se quiere observar a los casos de uso y su respectiva
descripción, estos se encuentran en el anexo A.1.
En esta fase se crea el diseño del sistema a partir de los requerimientos de uso
descritos en la fase anterior, con el objetivo de mostrar las ideas y crear el prototipo.
Para el desarrollo de la aplicación PDI ROOM, se plantearon los datos técnicos
del sistema, se realizaron diagramas de objetos para implementar el modelo MIISuG
propuesto y se diseñaron las vistas de la aplicación (haciendo uso de Sketch, Wireframe,
MockUp y Prototipos).
73
4.3.1. Arquitectura
La arquitectura del sistema PDI ROOM se realizó con base en la arquitectura
funcional propuesta (gura 3.2). El prototipo es un sistema web, utilizado tanto en
pizarras digitales interactivas (PDI) como en dispositivos móviles (celulares inteligentes)
desde un navegador. Para ello, el usuario interactúa con alguno de los dispositivos
conectados al sistema (la PDI o un celular inteligente). Los cambios realizados se
verán reejados en los demás dispositivos gracias al servidor, pues es el encargado
de comunicar y gestionar los dispositivos del sistema PDI ROOM (gura 4.2).
Figura 4.2: Arquitectura del sistema PDI ROOM
La aplicación se ejecuta en los dispositivos conectados al sistema, los cuales son
los clientes del sistema tales como una pizarra digital interactiva (PDI) y un celular
inteligente. Por el contrario, el servidor utilizado para el prototipo es una computadora
que recibe mediante el área de red local las peticiones de los clientes.
La capa de interacción contiene solo un profesor (el usuario de la aplicación) pues
el sistema es monousuario. Los dispositivos conectados en la aplicación es una PDI y
un celular inteligente, los cuales contienen las vistas para interactuar con el usuario y
son los clientes del servidor. En el prototipo, ambos dispositivos tienen una interfaz de
usuario distribuida (DUI) donde sus componentes se distribuyen tanto en la Interfaz
74
de usuario de PDI como en la pantalla del celular inteligente, ya que existe entrada y
salida de datos desde ambos dispositivos.
La capa de adaptación contiene al Gestor de vistas, gracias a él se muestra el lienzo

de dibujo y sus botones en la DUI mediante HTML, CSS y Bootstrap. Las interacciones
que realiza el usuario son noticadas al Ejecutor de eventos de la aplicación usando
JavaScript y jQuery. Así mismo, el Ejecutor de eventos de la aplicación guarda en la

Memoria local dispositivo variables como el grosor de trazo, color de trazo y forma de
trazo, utilizando las variables locales de JavaScript. Cuando el usuario cambia su zona
de trabajo utilizando los botones de la interfaz, el Control de proximidad cambia la
interacción a modo cerca o modo lejos de la PDI, para ello se comunica con el Ejecutor
de eventos de la aplicación (con funciones de JavaScript ) y se modica el Gestor de

vistas. Cuando el textitManejador de contenido es informado que hubo cambios en el
lienzo de dibujo o en sus parámetros, entonces prepara una petición post para que el
Ejecutor de eventos de la aplicación se la envíe al servidor utilizando sockets.

La capa de funcionalidad contiene al servidor de la aplicación, para ello se
utiliza Apache. Así mismo, contiene al Administrador PDI_ROOM que atiende a las
solicitudes del cliente, como por ejemplo noticar a todos los dispositivos conectados
que hay una nueva imagen en el lienzo o que un parámetro cambió (tales como el color
o la forma del trazo). Se utilizanPHP, Laravel y websockets para que los clientes se
comuniquen con el servidor y viceversa. El Administrador de dispositivos gestiona cada
uno de los dispositivos que se conectan para que el servidor actualice el lienzo (y sus
conguraciones) en todos los dispositivos cada vez que hay un cambio en alguno de
ellos. Por ejemplo, si un cliente envía al servidor palabras clave como rect, entonces el
servidor noticará a los demás clientes la palabra clave (o parámetros), posteriormente
cada cliente pintará un rectángulo como se le indicó con la palabra clave rect. El
servidor también se encarga de consultar, agregar, modicar y eliminar información en
laBase de datos PDI_ROOM, tales como las credenciales de inicio de sesión, utilizando
consultas de MySQL. Adicionalmente para realizar las pruebas del sistema se utilizó
Postman y Google Chrome.

Es decir, para la creación del sistema se hizo uso de:
PHP como lenguaje de programación para construir el sistema web del lado del
Backend y el consumo de nuestros servicios, ya que es multiplataforma y se integra
normalmente con Apache y MySQL.
75
MySQL, pues la aplicación cuenta con una base de datos para el almacenamiento
de la información de los usuarios registrados y de sus credenciales para iniciar
sesión en el sistema. Aunado a ello, MySQL es multiplataforma, tiene licencia de
código abierto GPL y consta de una herramienta interactiva para hacer consultas
y crear bases de datos.
JavaScript y jQuery, debido a que se hace uso de ellos para darle múltiples opciones
de efectos visuales al sistema web y poder consumir los servicios creados con
PHP, es soportado por los navegadores más populares y es compatible con los
dispositivos modernos (incluyendo la PDI y los dispositivos móviles).
Laravel, ya que es un framework que ayuda a diseñar aplicaciones web en PHP,
brindando seguridad y mantenimiento al sistema desarrollado.
Apache, puesto que es necesario un servidor para montar el sistema web y que
también sea accedido desde internet por los dispositivos externos conectados a la
PDI. Además, es un software de código abierto y gratuito.
HTML, se integró para presentar la información y elementos del sistema, tales
como botones, mensajes, títulos e imágenes del sistema web.
CSS y Bootstrap, se implementaron para el diseño de los elementos y su estilo
con colores, tipos de letra, fondos, efectos que tiene el Frontend de la aplicación
web.
Postmam, se utilizó para probar las peticiones y generar colecciones de peticiones
para generar la url y se pueda consumir en el navegador los servicios.
Google Chrome, puesto que se necesita un navegador para poder acceder al
sistema web. De igual manera, se utilizó para realizar pruebas ya que ofrece a los
desarrolladores un motor de JavaScript, herramientas de desarrollo, extensiones
y es uno de los navegadores web más usados en la actualidad.
76
4.3.2. Diseño de interacciones

El modelo MIISuG se implementó durante el desarrollo del sistema PDI ROOM
para ayudar a diseñar las interacciones de la aplicación. A partir del modelo propuesto
(gura 3.1) se realizaron diagramas de objetos.
Los diagramas de objetos son instancias de diagramas de clases de un momento en
concreto cuando se utiliza del sistema, por ello se da la similitud visual entre ambos
tipos de diagramas. Así mismo, los diagramas de objetos se enfocan en los atributos de
cada objeto y en las relaciones que hay entre ellos. Para ello, cada objeto corresponde a
una clase, en la que se debe respetar a los atributos y a las relaciones que se establecieron
en el diagrama de clases. De igual manera, son útiles al diseñar sistemas para tener una
visión de alto nivel de la estructura del sistema, también hace revisiones especícas de
iteraciones del sistema.
Dichos diagramas se crearon a partir de las tareas que el usuario realizará en el siste-
ma: Agregar anotación, Modicar anotación, Eliminar anotación y Guardar anotación.
Agregar anotación
El diagrama de objetos se muentra en la gura 4.3. De manera opcional, tal diagrama
puede complementarse con el caso de uso Agregar anotación (gura A.1).
En dicho diagrama de objetos se observa que la usuaria Lucy es una profesora
cuyo arquetipo le da permisos de agregar, modicar, eliminar y guardar anotaciones
del sistema PDI ROOM. Ella utiliza los dispositivosPDI y Celular. Además, está
realizando la interacción denominada AgregarAnotacion, la cual dene al rol actual
como Creador.
Por otro lado, para interactuar se puede manipular a los objetos (botones en este
contexto): btnLinea, btnRectangulo y btnFormaLibre, que pertenecen al dispositivo PDI,

también se puede manipular a los objetos del dispositivo Celular (cuyos nombres son
iguales pero con Id diferente). Debido a que la distancia que existe entre el celular y la
PDI es de 20.0 centímetros, es que ambos se ubican en la zona de trabajo Cerca, pues
pertenecen a su rango de proximidad.
77
Como consecuencia de ello, la interacción se ejecuta en el escenario EscCreadorCerca.

Este escenario recibe la información del estado actual del sistema (referente a la
interacción que se está llevando a cabo) como parámetros de entrada.
Finalmente, el escenario valida las Precondiciones : si es que el rol actual es el de un

creador y si la interacción se está realizando cerca de la PDI. Después de ello, se verica
si se cumplieron las condiciones de salida exitosa (llamadas Postcondiciones ): guardar
la anotación de manera satisfactoria. De lo contrario el sistema informará al usuario
el motivo por el que no se pudo realizar la interacción y brindarle ayuda respecto a lo
sucedido.
78
Figura 4.3: Diagrama de objetos Agregar anotación, cerca
79
Modicar anotación
El diagrama de objetos se muentra en la gura 4.4. De manera opcional, tal diagrama
puede complementarse con el caso de uso Modicar anotación (gura A.2).
En dicho diagrama de objetos se observa que la usuaria Lucy es una profesora
cuyo arquetipo le da permisos de agregar, modicar, eliminar y guardar anotaciones
del sistema PDI ROOM. PDI y Celular. Además, está

Ella utiliza los dispositivos
realizando la interacción denominada ModicarAnotacion, la cual dene al rol actual

como Modicador.
contexto): btnColor btnGrosor, que pertenecen al dispositivo PDI, también se puede

y
manipular a los objetos del dispositivo Celular (cuyos nombres son iguales pero con
Id diferente). Debido a que la distancia que existe entre el celular y la PDI es de 20.0
centímetros, es que ambos se ubican en la zona de trabajo Cerca, pues pertenecen a su

rango de proximidad.
Como consecuencia de ello, la interacción se ejecuta en el escenario EscModicador-

Cerca. Este escenario recibe la información del estado actual del sistema (referente a la

modicador y si la interacción se está realizando cerca de la PDI. Después de ello, se
verica si se cumplieron las condiciones de salida exitosa (llamadas Postcondiciones ):

modicar la anotación de manera satisfactoria. De lo contrario el sistema informará
al usuario el motivo por el que no se pudo realizar la interacción y brindarle ayuda
respecto a lo sucedido.
80
Figura 4.4: Diagrama de objetos Modicar anotación, zona Cerca
81
Eliminar anotación
Los diagramas de objetos de eliminar anotación están divididos según la proximidad
que hay entre el usuario y la PDI: Cerca y Lejos. De manera opcional, tales diagramas
pueden complementarse con el caso de uso Eliminar anotación (gura A.3).
En el diagrama de objetos Cerca (gura 4.5) se observa que la usuaria Lucy es
una profesora cuyo arquetipo le da permisos de agregar, modicar, eliminar y guardar
anotaciones del sistema PDI ROOM. Ella utiliza los dispositivos PDI y Celular. Además
está realizando la interacción denominada EliminarAnotacion, la cual dene al rol actual
como Eliminador.
contexto): btnBorrador y btnLimpiar, que pertenecen al dispositivo PDI, también se
puede manipular a los objetos del dispositivo Celular (cuyos nombres son iguales pero
con Id diferente). Debido a que la distancia que existe entre el celular y la PDI es de
20.0 centímetros, es que ambos se ubican en la zona de trabajo Cerca, pues pertenecen
a su rango de proximidad.
Como consecuencia de ello, la interacción se ejecuta en el escenario EscEliminador-

Finalmente, el escenario valida las Precondiciones : si es que el rol actual es el de
un eliminador y si la interacción se está realizando cerca de la PDI. Después de ello, se

eliminar la anotación de manera satisfactoria. De lo contrario el sistema informará al
usuario el motivo por el que no se pudo realizar la interacción y brindarle ayuda respecto
a lo sucedido.
82
Figura 4.5: Diagrama de objetos Eliminar anotación, zona Cerca
83
En el diagrama de objetos Lejos (gura 4.6) se observa que la usuaria Lucy es
anotaciones del sistema PDI ROOM. Ella utiliza el dispositivo Celular. Además está
realizando la interacción denominada EliminarAnotacion, la cual dene al rol actual
como Eliminador.
Por otro lado, para interactuar se puede manipular al objeto (botón en este contexto)
btnLimpiar que pertenece al dispositivo Celular. Debido a que la proximidad que tiene
el celular es de 200.0 centímetros (el usuario lo utiliza a esa distancia de la PDI), es que
se encuentra en la zona de trabajo Lejos, pues pertenece a su rango de proximidad.

Como consecuencia de ello, la interacción se ejecuta en el escenario EscEliminador-
Lejos. Este escenario recibe la información del estado actual del sistema (referente a la
Finalmente, el escenario valida las Precondiciones : si es que el rol actual es el de
un eliminador y si la interacción se está realizando lejos de la PDI. Después de ello, se

eliminar la anotación de manera satisfactoria. De lo contrario el sistema informará al
a lo sucedido.
84
Figura 4.6: Diagrama de objetos Eliminar anotación, zona Lejos
85
Guardar anotación
Los diagramas de objetos de guardar anotación están divididos según la proximidad
que hay entre el usuario y la PDI: Cerca y Lejos. De manera opcional, tales diagramas
pueden complementarse con el caso de uso Guardar anotación (gura A.4).
En el diagrama de objetos Cerca (gura 4.7) se observa que la usuaria Lucy es
anotaciones del sistema PDI ROOM. Ella utiliza los dispositivos PDI y Celular. Además
está realizando la interacción denominada GuardarAnotacion, la cual dene al rol actual
como Respaldador.
btnGuardar que pertenece al dispositivo PDI, también se puede manipular al objeto
del dispositivo Celular (cuyo nombre es igual pero con Id diferente). Debido a que la
distancia que existe entre el celular y la PDI es de 20.0 centímetros, es que ambos se
ubican en la zona de trabajo Cerca, pues pertenecen a su rango de proximidad.

Como consecuencia de ello, la interacción se ejecuta en el escenario EscRespaldador-

respaldador y si la interacción se está realizando cerca de la PDI. Después de ello, se

guardar la anotación de manera satisfactoria. De lo contrario el sistema informará al
a lo sucedido.
86
Figura 4.7: Diagrama de objetos Guardar anotación, zona Cerca
87
En el diagrama de objetos Lejos (gura 4.8) se observa que la usuaria Lucy es
anotaciones del sistema PDI ROOM. Ella utiliza el dispositivo Celular. Además está
realizando la interacción denominada GuardarAnotacion, la cual dene al rol actual
como Respaldador.
btnGuardar que pertenece al dispositivo Celular. Debido a que la proximidad que tiene
el celular es de 200.0 centímetros (el usuario lo utiliza a esa distancia de la PDI), es que
se encuentra en la zona de trabajo Lejos, pues pertenece a su rango de proximidad.

Como consecuencia de ello, la interacción se ejecuta en el escenario EscRespaldador-
Lejos. Este escenario recibe la información del estado actual del sistema (referente a la

respaldador y si la interacción se está realizando lejos de la PDI. Después de ello, se

guardar la anotación de manera satisfactoria. De lo contrario el sistema informará al
a lo sucedido.
88
Figura 4.8: Diagrama de objetos Guardar anotación, zona Lejos
89
4.3.3. Diseño de las vistas

Para realizar el diseño visual del sistema se realizaron Sketch, wireframe, mockup y
prototipos (gura 4.9) del sistema (previamente llamado HandToIWB). Posteriormente,
se realizó el método de ordenación de tarjetas ( card sorting ) con expertos de usabilidad

con la nalidad de denir la organización de los objetos (botones en el contexto actual)
en el sistema, tanto estando cerca como lejos de la PDI. Así mismo, este método sirvió
para asignar las etiquetas y los nombres de los elementos del sistema de modo que
fueran fáciles de entender, fáciles de recordar y que tuvieran relación con objetos de la
vida real mediante metáforas.
Figura 4.9: Sketch, wireframe, mockup y prototipo del sistema respectivamente
Con base en la información de las fases de análisis y diseño previas, se crearon las
vistas del sistema PDI ROOM. La primera vista de ellas es la de registro en el sistema,
gracias a ella los usuarios pueden obtener sus credenciales de inicio de sesión. Para ello,
los usuarios deben agregar su nombre, correo electrónico, contraseña y la conrmación
de contraseña. Esta vista se encuentra tanto en la PDI (gura 4.10) como en el celular
(gura 4.11).
90
Figura 4.10: Vista de registro de usuarios en la PDI
Figura 4.11: Vista de registro de usuarios en el celular
Posteriormente, los usuarios ingresaran a la vista de inicio de sesión, en donde deben
ingresar su correo electrónico y contraseña. En la gura 4.12 se muestra la vista en la
PDI, mientras que en la gura 4.13 se muestra la vista en el Celular.
91
Figura 4.12: Vista de inicio de sesión en la PDI
Figura 4.13: Vista de inicio de sesión en el celular
92
Una vez que el usuario ha iniciado sesión en el sistema se muestra la vista
anotaciones. Aquí se encuentra el lienzo de la PDI (gura 4.14), en el cual se realizaran

las operaciones de agregar, modicar, eliminar y guardar anotaciones.
Figura 4.14: Vista anotaciones de la pizarra digital interactiva
Así mismo se encuentra el botón de ayuda para que el usuario consulte información
relevante del sistema tal como se muestra en la gura 4.15.
93
Figura 4.15: Mensaje de ayuda en la PDI
Por otro lado, el usuario tiene las vistas Modo cerca y Modo a distancia en el celular
(gura 4.16). Así mismo se encuentra el botón de ayuda en ambas vistas del celular,
para que el usuario consulte información relevante del modo que están utilizando como
se muestra en la gura 4.17.
94
Figura 4.16: Vistas Modo cerca y Modo a distancia en el celular
Figura 4.17: Mensajes de ayuda del Modo cerca y Modo a distancia en el celular
95
Por otro lado, se puede observar un ejemplo de uso del sistema en la gura 4.18
en el cual se insertó una forma libre, una línea y un rectángulo, así mismo se modicó
el grosor del trazo estableciéndolo en 6, además se cambió el color de trazo a verde y
se utilizó el borrador para borrar parcialmente (a la mitad) los elementos insertados
previamente.
Figura 4.18: Ejemplo de agregar, modicar, eliminar y guardar anotaciones
Adicionalmente, en la gura 4.19 se muestran las anotaciones guardadas del lienzo
mediante el botón guardar.
Figura 4.19: Archivo guardado en carpeta
En el caso del botón limpiar se elimina todo el contenido del lienzo, quedando como
en la gura 4.14. Por último el botón salir de la vista cierra la sesión del usuario y se
muestra la vista de inicio de sesión (gura 4.12 en la PDI y gura 4.13 en el celular).
96
4.4. Evaluación del prototipo
La última fase es la evaluación, en la cual se pone a prueba la aplicación desarrollada.
Para ello, se explica la técnica de la evaluación, cómo se llevó a cabo la evaluación,
quiénes participaron en ella y el análisis de los datos obtenidos.
4.4.1. Técnica
El objetivo de la evaluación es determinar si el prototipo desarrollado (haciendo uso
del modelo propuesto) tiene usabilidad.
La usabilidad según el estándar ISO 9241-11:2018 se dene como el grado en que un
producto puede ser utilizado por usuarios especícos para conseguir metas especícas
con efectividad, eciencia y satisfacción dado un contexto especíco de uso, por lo
que se encuentra asociada a condiciones y necesidades de usuarios especícas. Debido
a ello, la usabilidad de las aplicaciones no es un atributo que se analiza de manera
independiente a sus usuarios y a su entorno (Grau, 2000).
La usabilidad es importante pues los usuarios quieren cumplir sus metas y sentirse
productivos con el software, de lo contrario buscarán alternativas al sistema ofrecido o
dejarán de utilizarlo (Komninos, 2019).
Una interfaz con usabilidad tiene tres características principales (Foundation, 2019):
Fácil de aprender, para que el usuario se familiarice y sea competente en el uso
de la interfaz de usuario durante el primer contacto con el sistema
Fácil de usar, para que los usuarios logren su objetivo a través del uso del sistema
Fácil de recordar, para que el usuario pueda utilizarla en visitas posteriores.
Para su evaluación se han denido, diferentes métodos, los cuales pueden clasicarse
según el tipo de evaluación: Inspección, Indagación y Test (Saltiveri et al., 2011).
En los métodos de inspección para evaluar la usabilidad se utilizan expertos en
usabilidad llamados evaluadores, los cuales realizan un examen de la interfaz del sistema.
Algunos de estos métodos son: Evaluación Heurística, Recorrido Cognitivo, Recorrido
de Usabilidad Plural, Recorrido Cognitivo con Usuarios, Inspección de estándares.
97
Por otro lado, los métodos de indagación intentan llegar al conocimiento por
medio de conjeturas. Dichos métodos requieren hablar con los usuarios y observarlos
detenidamente utilizando la aplicación en trabajo real y obteniendo respuestas de sus
preguntas formuladas. Ejemplos de este tipo de métodos son: Observación de Campo,
Grupo de Discusión Dirigido ( Focus Group ), Entrevistas ( Interviews ), Grabación del
uso ( logging ).
Finalmente, se encuentran los métodos de usabilidad por test. Tales métodos
necesitan usuarios representativos que trabajan en tareas haciendo uso de la aplicación y
los evaluadores utilizan los resultados para ver cómo la interfaz de usuario soporta a los
usuarios con sus tareas. Entre los cuales se encuentran los siguientes métodos: Medida
thinking aloud ), Interacción

de las prestaciones, Pensando en voz alta ( constructiva,
Método del Conductor, Ordenación de Tarjetas (Card Sorting ).
A partir de ello, se seleccionaron los siguientes métodos de inspección:
Cuestionario de escala de usabilidad de un sistema (SUS)
Cuestionario de usabilidad en sistemas informáticos (CSUQ)
Cuestionario para medir satisfacción de interacción del usuario (QUIS)
Lista de vericación de heurísticas de Nielsen
Se eligieron estos métodos debido a que pueden identicarse problemas de usabilidad
en los sistemas evaluados utilizando expertos en usabilidad. Una ventaja de ello es que
el número de participantes requeridos oscila entre tres y cinco, lo cual reduce el tiempo
invertido para su realización. Además, es fácil de guiar a los participantes pues ellos
conocen de antemano las técnicas de evaluación, por lo que no requiere de planicación
avanzada ni de capacitación. Así mismo, es posible utilizarla en diferentes etapas del
desarrollo, lo cual es útil pues el sistema que se evaluará es un prototipo. Por otro lado,
el porcentaje de errores de usabilidad encontrados supera el 70 % cuando se utilizan
cinco evaluadores (Nielsen, 1994b), los cuales encuentran tanto problemas críticos como
problemas menores. Aunado a ello, el costo de implementación es menor que de otros
métodos de evaluación.
98
4.4.2. Implementación de la evaluación

La duración del experimento fue de aproximadamente 50 minutos por participante.
Los participantes primero utilizaron el sistema de la PDI en conjunto a un dispositivo
externo conectado (un celular), estando cerca de la PDI (de 1cm a 100 cm), durante 10
minutos. Posteriormente utilizaron el celular para controlar la PDI a distancia (entre
101 cm a 500 cm) durante 10 minutos. Finalmente respondieron los documentos (anexo
A.2) para evaluar la usabilidad del sistema, durante aproximadamente 30 minutos.
4.4.3. Población
La evaluación heurística se realizó con cinco participantes que son de nacionalidad
mexicana, de los cuales una es mujer mientras que cuatro son hombres, tienen edades en
un rango de 24 a 35 años y son expertos en usabilidad. Debido a que Nielsen menciona
que en las evaluaciones heurísticas es conveniente una cantidad de entre tres y cinco
evaluadores (que sean expertos en usabilidad), ya que agregar más evaluadores reduciría
la relación costo-benecio y que la proporción de errores de usabilidad encontrados
serían menores, pues los evaluadores extra repetirían errores ya encontrados (Nielsen,
1994b).
4.4.4. Obtención y análisis de datos

En este punto se muestran los resultados que se obtuvieron a partir de los cuestio-
narios SUS, CSUQ, QUIS y de las heurísticas de usabilidad de Nielsen.
SUS
El cuestionario de escala de usabilidad de un sistema (SUS por sus siglas en
inglés) es una medida que calcula la percepción de usabilidad que tienen los usuarios
(Sauro, 2018). La puntuación obtenida de este cuestionario puede interpretarse de cinco
formas (gura 4.20): Rango percentil, Nota, Adjetivos, Aceptabilidad, Promotores y
detractores.
99
Figura 4.20: Escala de puntuación SUS (Sauro, 2018).
El puntaje obtenido de prueba por cada evaluador y su media se muestran en la
tabla 4.1.
Tabla 4.1: Resultados del cuestionario SUS
A partir del puntaje SUS de la media se puede observar que se encuentra en el rango
percentil 96-100 (tabla 4.2) ya que el resultado fue de 89.5.
El rango percentil indica que tan bien se compara la puntuación obtenida respecto
a otros en la base de datos.
De igual modo, se observa que la nota obtenida es de A+, esta nota está relacionada
a al rango percentil e indica como fue el desempeño del sistema evaluado.
100
Tabla 4.2: Formas de describir la puntuación del cuestionario SUS (Sauro, 2018).
Respecto al adjetivo que se obtuvo es: mejor deseable, dichos adjetivos son utilizados
para describir la experiencia que se tuvo al utilizar el sistema mediante palabras en lugar
de números. De manera similar, la aceptabilidad describe la percepción de usabilidad
en términos de si es o no aceptable el sistema, en este caso fue aceptable.
Por otro lado, el NPS (Net Promoter Score) de la gura 4.2 se reere a la probabi-
lidad que hay de que los usuarios recomienden la aplicación. La categoría Promotor
signica que los usuarios recomendarían activamente el sistema a sus conocidos, la
categoría Pasiva signica que los usuarios hablarían bien de la aplicación si les pre-
guntan su opinión, la categoría Detractor se reere a aquellas aplicaciones a las que
sus usuarios desalentarían su uso y que por lo tanto no la recomendarían. Puesto que
existe una fuerte correlación entre el SUS y el NPS se puede armar que el sistema desa-
rrollado se ubica en la categoría Promotor, por lo que es recomendado por los usuarios.
101
CSUQ
El Cuestionario de Usabilidad en Sistemas Informáticos (CSUQ por sus siglas en
inglés), se enfoca en evaluar la percepción de la usabilidad de la interfaz de los sistemas.
Surgió a partir del Estudio Posterior del Cuestionario de Usabilidad en Sistemas
Informáticos (PPSUQ).
Dicho cuestionario analiza la calidad del sistema, la calidad de la información y la
calidad de la interfaz. Para ello se tomaron en cuenta las características del sistema
tales como la facilidad de uso, facilidad de aprendizaje, sencillez, ecacia, información
e interfaz de usuario. El cuestionario CSUQ tiene un alto nivel de conabilidad (de
0.95). Además, este cuestionario tiene buen desempeño aun cuando se tienen muestras
pequeñas (Hedlefs Aguilar et al., 2016).
Como se puede observar en la tabla 4.3, el sistema obtuvo una puntuación del 92 %.
Tabla 4.3: Resultados del cuestionario CSUQ
102
QUIS
El cuestionario para medir satisfacción de interacción del usuario (QUIS, por sus
siglas en inglés Questionnaire for User Interface Satisfaction) se utiliza para evaluar la
usabilidad y satisfacción, el cual fue desarrollado por Ben Shneiderman en 1987 (Barajas
et al., 2017).
El QUIS contiene preguntas, agrupadas en secciones, que están asociadas a los
aspectos del sistema que son evaluados. Tales aspectos que se miden en el cuestionario
son: reacciones al software en general, pantalla, terminología e información, aprendizaje
y capacidades del sistema.
La medición se realiza por medio de la escala de Likert, en la que el usuario selecciona
un valor en la escala de 1 a 9. En esta escala, el 1 es la calicación más baja indicando
que el sistema evaluado es valorado como malo ya que produce insatisfacción en el
usuario. Por el contrario, el 9 representa la valoración más alta que puede recibir el
sistema, lo cual indica que el usuario estuvo satisfecho respecto al tema tratado de la
pregunta en cuestión.
Como se mencionó previamente, el QUIS se enfoca en la percepción del usuario de
la satisfacción y de la usabilidad del software para la evaluación de la interfaz. Esto lo
hace de una manera estándar, conable y válida (Sánchez León et al., 2017), mismo
que además cuenta con una abilidad de 0.94 (Karwowski, 2006).
En la tabla 4.4, se puede observar que el sistema tuvo una puntuación de 94 %, en
cuanto al aspecto de reacciones de software en general.
Tabla 4.4: Resultados del cuestionario QUIS. Reacciones al software en general
103
Así mismo, en la tabla 4.5 se muestra la calicación obtenida en la sección de
pantalla: 93 %.
Tabla 4.5: Resultados del cuestionario QUIS. Pantalla
De igual modo, se muestra el puntaje de 91 % que obtuvo el sistema sobre la sección
de terminología e información (tabla 4.6).
Tabla 4.6: Resultados del cuestionario QUIS. Terminología e información
En el caso de la sección de aprendizaje, el sistema tuvo una puntuación de 93 %,
como se ve en la tabla 4.7.
Tabla 4.7: Resultados del cuestionario QUIS. Aprendizaje
104
De igual manera, el sistema obtuvo una puntuación de 93 % respecto a la sección
de capacidades del sistemas (tabla 4.8).
Tabla 4.8: Resultados del cuestionario QUIS. Capacidades del sistema
Por otro lado, en el QUIS se consultó a los evaluadores cuales consideran que son
los aspectos más negativos del sistema, a lo que ellos respondieron que: los márgenes
superiores del pizarrón no están delimitados correctamente, el color de la simulación
del pizarrón no es adecuado, el texto indicativo del tipo de herramienta es muy grande,
la sombra colocada en las letras puede reducir la visibilidad de las palabras, se podría
agregar un botón de rehacer y deshacer.
En el caso de los aspectos más positivos (que los evaluadores notaron del sistema)
son los siguientes: admite la operación a distancia según la proximidad, ayuda a mejorar
la realización de la tarea principal, el uso del móvil ayuda a realizar muchas tareas, es
fácil usar todas las herramientas, hay constante retroalimentación en la pantalla princi-
pal, existe buen manejo de elementos y espacio, las validaciones de errores son correctas,
es intuitivo, tiene muchas metáforas por lo que es fácil comprender qué hacer y puede
servir para distintas áreas (profesional, escolar o entretenimiento).
Heurísticas de Nielsen
La lista de vericación de heurísticas de Nielsen ayuda a evaluar el diseño de
interacciones de un sistema en especíco (Nielsen, 1994a).
Tal como se habló previamente (en la sección 2.1.1), esta lista contiene un conjunto
de diez principios generales.
105
En cada lista que respondieron los evaluadores (ubicadas en el anexo A.2), se
anotaron aquellas heurísticas que ellos consideraron que el sistema debía mejorar, así
como su respectiva justicación.
A continuación, se presenta un resumen de la retroalimentación que los evaluadores
escribieron respecto al sistema desarrollado:
1. Visibilidad del estado del sistema: En la versión móvil de la aplicación no se
muestra la herramienta que se está utilizando hasta que se da clic en el pizarrón.
2. Coincidencia entre el sistema y el mundo real: Los evaluadores consideraron que
el sistema si cumple con esta heurística.
3. Control y libertad del usuario: En el sistema no existen los botones de rehacer y
deshacer acciones.
4. Consistencia y estándares: Los evaluadores marcaron que esta heurística se
cumple.
5. Prevención de errores: Los evaluadores mencionaron que esta heurística se cumple.
6. Reconocimiento mejor que recuerdo: En la versión móvil de la aplicación no se
muestra la herramienta que se está utilizando hasta que se da clic en el pizarrón.
7. Flexibilidad y eciencia de uso: No cuenta con atajos, sería útil establecerlos o
personalizarlos al momento de entrar al sistema.
8. Diseño estético y minimalista: Los evaluadores consideran que esta heurística se
cumple en el sistema.
9. Ayudar a reconocer, diagnosticar y recuperarse de errores: El sistema no presentó
errores por lo que no se mostraron mensajes.
10. Ayuda y documentación. Los evaluadores consideraron que el sistema cumple con
esta heurística.
106
4.5. Resumen
Resultados generales
A partir de la información recabada de los cuestionarios SUS, CSUQ, QUIS y de
la lista de vericación de heurísticas, se puede observar que el prototipo desarrollado
tiene usabilidad pero que hay aspectos del sistema que se pueden mejorar.
Dichos aspectos que el sistema puede mejorar son que se debería implementar más
retroalimentación al usuario sobre las acciones que está realizando en la versión móvil,
de este modo se reducirá su carga cognitiva. Así mismo, sería óptimo agregar botones
de rehacer y deshacer que le den al usuario mayor control del sistema.
De igual manera, es importante establecer atajos de tal modo que los usuarios
expertos mejoraren su eciencia y que además sean personalizables. Por otro lado, en
caso de que se presentaran errores se debería noticar al usuario en los dispositivos
que esté utilizando, evitando en lo mayor posible que sean intrusivos para que no
interrumpan las actividades que se estén realizando.
A pesar de estos aspectos por mejorar, se puede armar mediante los resultados
obtenidos que el producto resultante (a partir del modelo MIISuG) es usable. Por lo
que la hipótesis fue corroborada, ya que las interacciones en aplicaciones (que poseen
interfaces en supercies grandes) desde múltiples dispositivos mejoraron la usabilidad
del sistema.
4.5. Resumen
En el presente capítulo se muestra la creación del prototipo para pizarras digitales
interactivas (PDI) nombrado PDI ROOM, en el cual se utilizó el modelo propuesto
MIISuG (Modelo de Interacción para Interfaces en Supercies Grandes) durante el
análisis y en el diseño de interacciones.
Los usuarios de la aplicación son profesores cuyas tareas habituales son: conectar
su computadora al videoproyector, proyectar en el pizarrón el contenido educativo
que mostrará a sus alumnos, escribir nuevos elementos en el pizarrón, editar
y/o borrar elementos del pizarrón. Dan clases en salones amplios (hay asientos,
escritorios y pizarrones) a los que asisten al menos 10 alumnos. Los profesores
utilizan: computadoras, videoproyectores, celulares inteligentes, pizarrones, plumones
y borradores.
107
4.5. Resumen
El espacio de trabajo que se tiene contemplado es un salón de clases. El profesor es
el usuario de la aplicación desarrollada (sistema monousuario), en la cual se interactúa
con la PDI y con los dispositivos externos que se conecten al sistema. Estando en las
zonas de trabajo: cerca (de 1 cm a 100 cm) y lejos (de más de 100 cm hasta 500 cm),
de distancia entre la PDI y el usuario. El objetivo del usuario es realizar anotaciones
en la PDI con ayuda de dispositivos externos (celulares).
El prototipo desarrollado es un sistema web, el cual es utilizado tanto en pizarras
digitales interactivas (PDI) como en dispositivos móviles (celulares inteligentes) desde
el navegador.
El modelo MIISuG se implementó durante el desarrollo del sistema PDI ROOM para
ayudar a diseñar las interacciones de la aplicación. A partir del modelo se realizaron
diagramas de objetos.
Los diagramas de objetos son instancias de diagramas de clases de un momento en
concreto cuando se utiliza del sistema, por ello se da la similitud visual entre ambos
tipos de diagramas. Así mismo, los diagramas de objetos se enfocan en los atributos de
cada objeto y en las relaciones que hay entre ellos. Para ello, cada objeto corresponde
a una clase, además contiene a los atributos y a las relaciones que se establecieron en
el diagrama de clases.
Dichos diagramas se crearon a partir de las tareas que el usuario realizará en el siste-
ma: Agregar anotación, Modicar anotación, Eliminar anotación y Guardar anotación.
Para realizar el diseño visual del sistema se realizaron Sketch, wireframe, mockup y
prototipos del sistema. Posteriormente, se realizó el método de ordenación de tarjetas

(card sorting ) con expertos de usabilidad con la nalidad de denir la organización de
los objetos (botones en el contexto actual) en el sistema, tanto estando cerca como lejos
de la PDI. Así mismo, este método sirvió para asignar las etiquetas y los nombres de
los elementos del sistema de modo que fueran fáciles de entender, fáciles de recordar
y que tuvieran relación con objetos de la vida real mediante metáforas. Con base en
la información de las fases de análisis y diseño, se crearon las vistas del sistema PDI
ROOM.
Posteriormente, se realizó la evaluación para determinar si el prototipo desarrollado
(haciendo uso del modelo propuesto) es usable. Para la evaluación de usabilidad se
108
4.5. Resumen
pueden utilizar diferentes métodos, los cuales pueden clasicarse según el tipo de
evaluación:
Los métodos de inspección son utilizados para evaluar la usabilidad se utilizan
expertos en usabilidad llamados evaluadores, los cuales realizan un examen de la
interfaz del sistema.
Los métodos de indagación intentan llegar al conocimiento por medio de
conjeturas, requieren hablar con los usuarios y observarlos detenidamente
utilizando la aplicación en trabajo real para obtener respuestas a las preguntas
formuladas.
Los métodos de usabilidad por test, se necesitan usuarios representativos que
trabajan en tareas haciendo uso de la aplicación y los evaluadores utilizan los
resultados para ver cómo la interfaz de usuario soporta a los usuarios con sus
tareas.
A partir de ello, se seleccionaron los siguientes métodos de inspección:
Se eligieron estos métodos debido a que pueden identicarse problemas de usabilidad
en los sistemas evaluados utilizando expertos en usabilidad. Una ventaja de ello es que
el número de participantes requeridos oscila entre tres y cinco, lo cual reduce el tiempo
invertido para su realización. Además, es fácil de guiar a los participantes pues ellos
conocen de antemano las técnicas de evaluación, por lo que no requiere de planicación
avanzada ni de capacitación. Así mismo, es posible utilizarla en diferentes etapas del
desarrollo, lo cual es útil pues el sistema que se evaluará es un prototipo. Por otro lado, el
porcentaje de errores de usabilidad encontrados supera el 70 % cuando se utilizan cinco
evaluadores, los cuales encuentran tanto problemas críticos como problemas menores.
Aunado a ello, el costo de implementación es menor que de otros métodos de evaluación.
109
4.5. Resumen
La evaluación se realizó con cinco participantes (expertos en usabilidad). Primero
utilizaron el sistema de la PDI en conjunto a un dispositivo externo conectado (un
celular), estando cerca de la PDI (de 1cm a 100 cm), durante 10 minutos. Posteriormente
utilizaron el celular para controlar la PDI a distancia (entre 101 cm a 500 cm) durante
10 minutos. Finalmente respondieron los documentos para evaluar la usabilidad del
sistema, durante aproximadamente 30 minutos.
A partir de la información recabada de los cuestionarios SUS, CSUQ, QUIS y de
la lista de vericación de heurísticas, se puede observar que el prototipo desarrollado
es usable pero que hay aspectos del sistema que se pueden mejorar. Por lo que la
hipótesis fue corroborada, ya que las interacciones en aplicaciones (que poseen interfaces
en supercies grandes) desde múltiples dispositivos mejoraron la usabilidad del sistema.
110
Capítulo 5
Conclusiones y trabajo futuro
5.1. Resumen general
El objetivo del diseño de interacción es crear interfaces atractivas con comporta-
mientos intuitivos, para ello estudia cómo se comunican los usuarios y los sistemas. De
esta manera se pueden anticipar errores potenciales, así como crear nuevas formas de
trabajar con el usuario.
La interfaz de usuario es el medio por el cual los usuarios y las máquinas interactúan
entre sí. Ha sufrido cambios con el paso del tiempo: línea de comandos (CLI),
interfaces de usuario grácas (GUI), interfaces naturales de usuario (NUI). Por otro
lado, la interfaz de usuario distribuida (DUI), es una interfaz cuyos componentes
están repartidos en al menos una de las dimensiones de distribución: entrada, salida,
plataforma, espacio y tiempo. De igual modo, los sistemas pueden usar interfaces
migratorias y migrables para distribuir la aplicación (completa o solo sus componentes)
en un ambiente multidispositivo.
En cambio, la usabilidad de un sistema es el grado en que un producto puede ser
utilizado por usuarios para conseguir sus metas con efectividad, eciencia y satisfacción.
Los sistemas usables tienen tres características: los usuarios se familiarizan (y vuelven
competentes) desde el primer contacto con el sistema, los usuarios logran sus objetivos
a través del sistema, los usuarios recuerdan la interfaz de usuario y cómo utilizarla en
visitas posteriores.
111
En la actualidad, los desarrolladores tienen acceso a herramientas de diseño que
los apoyan en la creación de sistemas interactivos y usables, tales como: principios de
diseño, patrones de interacciones, principios heurísticos y leyes para mejorar el diseño
de interacciones.
ancho.
Tal es el caso de las pizarras digitales (PD) y las pizarras digitales interactivas, las
cuales son un sistema tecnológico, generalmente integrado por una computadora, un
videoproyector y un dispositivo de control de puntero, que proyecta los contenidos
digitales en un formato idóneo para visualización en grupo. En el caso de la PDI
(a diferencia de la PD), se puede interactuar directamente sobre la supercie de
proyección con dispositivos como un lápiz electrónico o con los dedos (cuando es una
PDI multitáctil).
Las funcionalidades y características básicas de las PDI (con las que vienen de
fabrica) ayudan a los usuarios a realizar sus actividades directamente sobre la supercie
de proyección, estando cerca de la PDI. A pesar de que las PDI integren el software
desde fábrica, puede ser insuciente para realizar las actividades de los usuarios. Por lo
que, diferentes autores han desarrollado software propio.
Aunado a ello, estas funciones y características básicas no contemplan la interacción
con el usuario cuando se encuentra lejos de la PDI. Esto supone una desventaja para
los usuarios que se alejan de la PDI ya que no pueden interactuar, pues tienen que
estar frente a la PDI para realizar sus actividades. Lo cual puede ocasionar que el
contenido proyectado no sea visualizado en su totalidad por los espectadores (ya que el
usuario frente a la PDI obstruye la visión). Así mismo, los usuarios pueden cansarse al
permanecer de pie en sesiones largas de actividades, o se les diculta alcanzar algunas
zonas de la pizarra tales como las barras de herramientas (o botones) que se ubican en
la parte alta de la PDI.
A partir de esto, se realizó un mapeo sistemático de la literatura para buscar
documentos en los que se resolvieron problemas similares. Para ello, se plantearon
preguntas de investigación, criterios de selección (de inclusión y de exclusión), cadena
de búsqueda y fuentes de investigación.
112
Adicionalmente, por medio del estado del arte, se concluyó que:
Los tipos de interacción de las supercies grandes de interacción (como las PDI)
son mediante clics o por medio de gestos. La interacción mediante clics es el más
usado, requiere de un punto de contacto para realizar un clic primario o un clic
secundario como si se utilizará un ratón. Para seleccionar, subrayar, arrastrar,
dibujar. Por el contrario, las interacciones mediante gestos utilizan movimientos
corporales predenidos, para realizar acciones rápidas como: acercar, alejar, girar,
deslizar, bajar o subir el contenido de la interfaz.
Los artefactos (dispositivos) más utilizados para interactuar con las supercies
grandes de interacción, como las PDI (gura 5.1) son: el lápiz electrónico, la
supercie de proyección multitáctil, el sensor de proximidad, la tablet, el celular
inteligente, el apuntador láser, el guante IR (cada punta de los dedos posee un
LED infrarrojo), el Kinect y el Wiimote.
Las reglas de diseño de interacciones en supercies grandes de interacción (como
las PDI) que se utilizan en las propuestas son heurísticas (las cuales son abstractas
y de carácter general) y guías (las cuales son utilizadas para casos en concreto y
especican cómo implementar la propuesta de solución).
Figura 5.1: Dispositivos utilizados para interactuar con supercies grandes.
De igual manera, se observó que los sistemas especializados para dispositivos con
supercies grades, como las pizarras digitales interactivas (PDI), requieren de un diseño
de interacciones acorde al tamaño de su interfaz de usuario gráca. Esto es con la
nalidad de que los sistemas sean usables y que permitan a los usuarios interactuar con
los dispositivos estando cerca o a distancia de ellos.
113
se utiliza durante la fase de análisis y tiene como objetivo apoyar a los desarrolladores
a crear aplicaciones para dispositivos que poseen supercies grandes de interacción,
tales como las pizarras digitales interactivas (PDI), que se encuentran en ambientes
multidispositivo y en el que sus usuarios se desplazan dentro de su espacio de trabajo.
Consiste en un diagrama de clases en UML, que permite al desarrollador identicar
la estructura de un sistema en especíco gracias al modelado de sus clases, atributos,
operaciones (o métodos) y relaciones (que hay entre sus clases). El desarrollador también
lo puede implementar en la etapa de diseño mediante diagramas de objetos, que servirán
posteriormente para realizar programación orientada a objetos.
Por otro lado, la arquitectura planteada tiene como objetivo ayudar a diseñar
sistemas para dispositivos que poseen supercies grandes de interacción, como las
pizarras digitales Interactivas (PDI), utilizados en un ambiente multidispositivo,
haciendo uso de una interfaz de usuario distribuida, de manera que la interacción se
adapte según el dispositivo utilizado y a la proximidad en que se encuentre el usuario
respecto a los dispositivos. Los métodos de entrada y salida de la aplicación (hecha a
partir de la arquitectura) se pueden realizar a través de uno o más dispositivos.
Mediante la arquitectura, los componentes de la interfaz en la supercie grande de
interacción se pueden controlar desde los dispositivos externos conectados al sistema.
Esto con el n de delegar actividades y elementos de la interfaz a diferentes dispositivos,
dependiendo de la proximidad que haya entre el usuario y la supercie grande de
interacción.
Posteriormente, se creó el prototipo para pizarras digitales interactivas (PDI)
nombrado PDI ROOM, en el cual se utilizó el modelo propuesto MIISuG (Modelo
114
de Interacción para Interfaces en Supercies Grandes) durante el análisis y en el diseño
de interacciones (en el cual se realizaron diagramas de objetos).
Después se realizó la evaluación del prototipo, la cual fue realizada por expertos en
usabilidad mediante:
Gracias a la evaluación de usabilidad se validó la hipótesis: Las interacciones

realizadas desde múltiples dispositivos mejoran la usabilidad en aplicaciones que poseen
interfaces en supercies grandes. Ya que la información recabada de los cuestionarios
SUS, CSUQ, QUIS y de la lista de vericación de heurísticas, comprobó que la
interacción del prototipo (que posee interfaz de usuario en supercies grandes) mediante
múltiples dispositivos es usable, aunque hay aspectos del sistema que se pueden mejorar.
Además, se logró el objetivo general del Desarrollar un modelo de

sistema:
interacción y una arquitectura funcional para múltiples dispositivos que apoye en la

construcción de aplicaciones usables que poseen interfaces en supercies grandes. Debido
a que el modelo propuesto ayuda a que los sistemas desarrollados posean las siguientes
características:
Redirección de entrada. Debido a que los métodos de entrada de la aplicación se
realizaran a través de uno o más dispositivos.
Redirección de contenido. Puesto que los métodos de salida en la interfaz gráca
de usuario estarán disponibles en uno o más dispositivos.
Interacción a distancia. La interacción con el sistema se podrá desarrollar en un
ambiente multidispositivo y podrá controlar la PDI desde distintas zonas que se
encuentran dentro del espacio de trabajo del usuario.
Usabilidad. El usuario puede realizar sus actividades de manera fácil y eciente.
115
5.2. Principales contribuciones
5.2. Principales contribuciones
Durante la realización de la investigación se obtuvieron los siguientes productos:
Artículo titulado Evaluando la Usabilidad de Aplicaciones en Computadoras

Portátiles y Pizarras Digitales Interactivas (Panamá L., 2019).
Revisión sistemática de la literatura (sección 2.2).
Modelo MIISuG: Modelo de Interacción para Interfaces en Supercies Grandes
(capítulo 3) y arquitectura funcional (sección 3.3).
Sistema PDI ROOM para pizarras digitales interactivas y celulares.
5.3. Traba jos futuros
Como trabajo a futuro se contempla:
Realizar un estudio del arte sobre el cómputo ubicuo y sus áreas de oportunidad.
Validar el modelo de interacciones mediante otros dispositivos con supercies
grandes (tales como mesas o suelos interactivos), que ayuden a desarrollar sistemas
usables y atractivos.
Integrar el diseño de aplicaciones multiusuarios para el trabajo colaborativo al
modelo propuesto.
116
Apéndice A
Anexos
A.1. Diagrama y descripción de casos de uso
Los casos de uso muestran cómo es la interacción del usuario con el sistema, las
intenciones del usuario y las responsabilidades del sistema. Además, pueden utilizarse
como complemento al modelo MIISuG. En la gura A.1 se muestra el diagrama de casos
de uso para el sistema PDI ROOM.
Figura A.1: Diagrama de casos de uso del sistema
117
Agregar anotación
La descripción del caso de uso Agregar anotación se puede observar en la tabla A.1.
Como su nombre lo indica, el objetivo es que el profesor pueda insertar una anotación
en el lienzo (el área o supercie en el que se puede escribir) de la PDI.
Las condiciones previas del caso de uso son que el usuario tenga una sesión iniciada
en el sistema (de este modo se sabe si se tienen los permisos necesarios para realizar
la inserción de anotaciones), también se debe haber visitado la ventana en donde se
encuentra el lienzo para interactuar con él y nalmente se contempla que el profesor
está en la zona de trabajo Cerca (de 1 cm a 100 cm de proximidad respecto a la PDI)
ya que es requerido que el usuario haga clic en el lienzo luego de haber seleccionado
algún tipo de trazo (línea, rectángulo, forma libre) para realizar anotaciones en la PDI.
De igual modo, el curso normal de interacción entre el Actor Sistema

(Profesor) y el
(PDI ROOM) consiste en la selección del dispositivo PDI y de su botón btnLínea (que
le permite insertar líneas). Posteriormente, el profesor debe realizar el gesto de escritura
de anotación y el sistema validará si ocurrió dentro del lienzo, por lo que realizará la
adición correcta de la anotación en el área que el usuario seleccionó del lienzo de la
PDI.
Así mismo, el sistema contempla casos alternos a esta interacción. El primero de
ellos es utilizar el Celular como dispositivo de apoyo, en el que se presiona uno de
sus botones para controlar el tipo de trazo que se insertará en la PDI mediante el
envío de información que realiza el celular al sistema. Adicionalmente, se contempla
el uso alterno de botones para realizar anotaciones por medio de los tipos de trazo:
btnRectángulo (que insertará rectángulos) y btnFormaLibre (que permite al profesor
escribir a mano alzada). Por otro lado, el sistema lleva a cabo casos alternos en los que
no inserta la anotación debido a que el profesor no seleccionó el área del lienzo de la
PDI.
118
Tabla A.1: Caso de uso Agregar anotación
119
Modicar anotación
La descripción del caso de uso Modicar anotación se puede observar en la tabla
A.2. Como su nombre lo indica, el objetivo es que el profesor pueda editar el color o
grosor de una anotación que se colocará en el lienzo (el área o supercie en el que se
puede escribir) de la PDI.
la edición de anotaciones), también se debe haber visitado la ventana en donde se
encuentra el lienzo para interactuar con él y nalmente se contempla que el profesor
está en la zona de trabajo Cerca (de 1 cm a 100 cm de proximidad respecto a la PDI)
ya que es requerido que el usuario haga clic en el lienzo luego de haber seleccionado
algún tipo de color o tamaño de grosor para realizar modicaciones a las anotaciones
que se verán en la PDI.
De igual modo, el curso normal de interacción entre el Actor Sistema

(Profesor) y el
(PDI ROOM) consiste en la selección del dispositivo PDI y de su botón btnColor (que
le permite cambiar el color del trazo de la anotación). Posteriormente, el profesor debe
realizar el gesto de escritura de anotación y el sistema validará si ocurrió dentro del
lienzo, por lo que realizará la edición correcta de la anotación y la asignará en el área
que el usuario seleccionó del lienzo de la PDI.
ellos es utilizar el Celular como dispositivo de apoyo, en el que se presiona uno de sus
botones para controlar el color de trazo o grosor de trazo de las anotaciones mediante
el envío de información que realiza el celular al sistema. Adicionalmente, se contempla
el uso alterno del botón btnGrosor que permite al profesor cambiar el tamaño del trazo
de las anotaciones. Por otro lado, el sistema lleva a cabo casos alternos en los que no
inserta la anotación debido a que el profesor no seleccionó el área del lienzo de la PDI.
120
Tabla A.2: Caso de uso Modicar anotación
121
Eliminar anotación
La descripción del caso de uso Eliminar anotación se puede observar en la tabla A.3.
Como su nombre lo indica, el objetivo es que el profesor pueda eliminar (de manera
parcial o total) las anotaciones que se encuentran en el lienzo (el área o supercie en el
que se puede escribir) de la PDI.
encuentra el lienzo para interactuar con él. Es este caso, se contempla que el profesor
puede estar en la zona de trabajo Cerca (de 1 cm a 100 cm de proximidad respecto a la
PDI) cuando se quiere utilizar el botón btnBorrador ya que es requerido que el usuario
haga clic en el lienzo para eliminar a sus anotaciones. De la misma manera, es posible
que el usuario utilice el botón btnLimpiar del celular para quitar todas las anotaciones
que hay en el lienzo, ya sea en las zona de trabajo Cerca o Lejos (de 101 cm a 500 cm
de proximidad respecto a la PDI), debido a que no es necesario que el usuario utilice
directamente el lienzo de la PDI para realizar las acciones.
De igual modo, el curso normal de interacción entre el Actor (Profesor) y el Sistema

(PDI ROOM) consiste en la selección del dispositivo PDI y de su botón btnBorrador
(que le permite eliminar anotaciones del lienzo de la PDI). Posteriormente, el profesor
debe realizar el gesto de eliminar anotación y el sistema validará si ocurrió dentro del
lienzo, por lo que realizará la eliminación correcta de las anotaciones que se encuentran
en el área que el usuario seleccionó del lienzo de la PDI.
ellos es utilizar el Celular como dispositivo de apoyo cuando el profesor se encuentra
Cerca de la PDI, en el cual se presiona uno de sus botones para controlar la eliminación
de las anotaciones mediante el envío de información que realiza el celular al sistema.
Aunado a ello, el profesor puede utilizar el celular estando Lejos para presionar el
botón btnLimpiar para eliminar todas las anotaciones del lienzo, mediante el envío
de la instrucción (de dicho botón) desde el celular hasta sistema. Adicionalmente, se
contempla el uso alterno del botón btnLimpiar (cerca o lejos de la PDI) que, como se
acaba de mencionar, permite al profesor cambiar quitar todas las anotaciones existentes
del lienzo. Por otro lado, el sistema lleva a cabo casos alternos en los que no inserta la
anotación debido a que el profesor no seleccionó el área del lienzo de la PDI.
122
Tabla A.3: Caso de uso Eliminar anotación
123
Guardar anotación
La descripción del caso de uso Guardar anotación se puede observar en la tabla A.4.
Como su nombre lo indica, el objetivo es que el profesor pueda guardar las anotaciones
que se encuentran en el lienzo (el área o supercie en el que se puede escribir) de la
PDI.
encuentra el lienzo para interactuar con él. Es este caso, se contempla que el profesor
puede estar en la zonas de trabajo tanto Cerca (de 1 cm a 100 cm de proximidad
respecto a la PDI) como lejos Lejos (de 101 cm a 500 cm de proximidad respecto a la
PDI), debido a que no es necesario que el usuario utilice directamente el lienzo de la
PDI para guardar las anotaciones que hay en el lienzo.
De igual modo, el curso normal de interacción entre el Actor (Profesor) y el Sistema

(PDI ROOM) consiste en la selección del dispositivo PDI y de su botón btnGuardar,
por lo que realizará el guardado correcto de las anotaciones que se encuentran en el
área del lienzo de la PDI.
Así mismo, el sistema contempla casos alternos a esta interacción. Los cuales
consisten en utilizar el Celular como dispositivo de apoyo cuando el profesor se
encuentra Cerca o Lejos de la PDI, en el cual se presiona el botón btnGuardar para
guardar todas las anotaciones que hay en el lienzo, mediante el envío de la instrucción
(de dicho botón) desde el celular hasta sistema.
124
Tabla A.4: Caso de uso Guardar anotación
125
A.2. Evaluación de usabilidad
A continuación, se presentan los cuestionarios de usabilidad que se realizaron
para evaluar el prototipo del sistema PDI ROOM. Se encuentran ordenados por cada
participante que realizó la evaluación.
A.2.1. Documentos contestados por el evaluador 1

En este punto se muestran los documentos que respondió el participante 1:
Carta de consentimiento informado
126

%OS1/k 9&k O;/Dk ;C[;S&/Dk 'k G'LT;.;G&Lk 1Ck WC&k ;C[1OS;7&.;gCk /1k GLD^1.SEk /1kS1O;O k CS1Ok /1k JX1k XPS1/k /1.;/&k
G&NS;.;G&Lk 1Ck b?k1OSW/;Dk HDLk 4([DLk ?1&k 1OS1k .DCO1CS;A;1CSDk .W;/&/DO&A1CS1
k &8&kSD/&Ok ?&Ok GL17WCS&Ok JX1k
XOS1/kS1C7'kG&L&k&O17XL)LO1k/1kJW1k1CS;1C/&k?DOkGLD.1/;A;1CSDOk/1?k1OSX/;Dk
OS1kGLD^1.SDkS;1C1k.EADkD+=1S;[Ek1['?X&Lk?(kXO'+;?;/'/k/1k?&k&G?;.'.;gCkG&L&kH;_&LL&Ok/;7;S'?1Ok;CS1L'.S;[(Ok#k
jCk.DC=WCSFk.DCkXCkS1?c5DCEk;CS1?;71CS1k1OS'C/Dk.1L.&k^k?1=DQk/2k?&k# kk #&L'k?'kL1.K61..;gCk/1k :C5DLA&.;gCk
L1?&.;DC'/'k .DCk 1OS1k 1OSW/;Dk O1k OD?;.;S&L`k &k ?DQk [D?XCS&L;DOk G&LS;.;G'Lk 1CkGLX1+&Ok .DCk O;OS1A&k
#DOS1L;DLA1CS1kO1kG1/;LakJX1kL1OHDC/&Ck?DOk.X1OS;DC&L;DOk1\&?X&.;gCk/1kXO'+;?;/&/k
Ck1OS1k1OSW/;Dk?DOkG&LS;.;G'CS1OkGD/Ld&CkO1CS;Lk&?7hCkC;[1?k/1k&CO;1/'/kDkGL1O;gCkL1OG1.SDk'kOWk1]G1L;1C.;&k.DCk
/1O1AG1fDk1Ck1?kGLD^1.SD k $;Ck1A,&L7Dk 1CkC;C7iCkADA1CSDk/1?k1OSX/;Ek O1k=X_7&Lak?&kG1LS;C1C.;&k/1k?DQk
L1OW?S&/DOkD+S1C;/DOkGDLk?DOkG&LU;.;G&CS1Ok&?k4;C&?;_&Lk1?kGLD.1ODk
1-1k JW1/*Lk .?&LDk JW1k WOS1/k CDk L1.;+;L`k C;C7hCk +1C15;.;Dk 1.DCgA;.Ek GDLk G(LS;.;H&Lk 1Ck 1OS1k 1OSW/;Dk $Wk
G'NV;.;G(.;gCk1OkWC&k.DCSL;+X.;gCkG'L'k1?k/1O&LLD??Ek/1k?(Ok.;1C.;(Ok/1k?&k.DAGXS&.;gCk 1?k.DCD.;A;1CSDk/1?k
/;O1fDk/1k;CS1L&..;DC1OkG'L&kG;_&LL&Ok/;7;S&?1Ok;CS1L&.S;[&Ok$D?Ek.ECk?&k.DCSL;+X.;gCkOE?;/&L;&k/1kG1LQDC&Ok.DADk
XQS1/kR1L`kGDO;+?1k.DAGL1C/1LkA1>ELk?'Ok/;41L1C.;&Ok/1k?&kO&S;O5&..;gCk/1kXOX&L;DkL1OG1.SDk&?k/;OGDO;S;[Dk.DCk1?k

JX1kO1kCT1L&.SX&k
!&k;C5DLA(.;gCkG1LODC&?kJX1kWOS1/k/&L`k&kCX1OSLDOk;C[1OS;7'0DL1Ok1Ck1?k.YLODk/1k1OS1k1QSW/;DkG1LA&C1.1L`k1Ck
O1.L1SDk^kCDkO1LakGLDGDL.;DC&/&k&kC;C8XC'kG1LODC&k/;51L1CS1k&kWOS1/k1CkC;C7XC&k.;L.WCOS'C.;&k !DOkL1OZ?S&/EOk/1k
CX1OSL&k;C[1OS;7&.;gCkO1LaCkL17;OSL&/DOk.DCkXCk.g/;7DkCXAcL;.Dk1OSDOkCDkO1L`Ck.D?D.&/DOk1Ck1?kGLDUE.D?Ek/1k
;C[1OS;7'.;gCk !DOk L1OX@S&/DOk O1L`Ck GX+?;.&/DOk 1Ck &LSe.X?DOk /1k ?;S1L'SXL&k .;1CSe5;.&k 7&L&CS;_&C/Ek JX1k ?&k
;/1CS;5;.&.;gCk/1k?DOkG&LS;.;G'CS1OkCDk&G'L1.1L`k1Ck1OS&OkGX,?;.&.;DC1Ok
1OSW/;Dk1Ok.EAG?1S&A3CS1k[D?WCS&L;Dk %OS1/kGW1/1kG&LS;.;G&LDk'+&C/DC&Lk 1OSX/;Dk1Ck.X'?JW;1LkADA1CSDk

O;CkO1LkG1C&?;_&/Dk $;Ck1A+'L8Ek?DOk/&SDQkD+S1C;/EOk9&OS&k1O1kADA1CSDkO17X;M`Ck5DLA'C/DkG&LS1k/1?k1OSW/;Dk'k
A1CDOkJW1kWOS1/kOF?;.;S1k1]GL1O&B1CS1kJX1kOXk;C5ELA&.;gCkQ1&k+ELL&/'k/1kCW1OSL'k+&Q1k/1k/&SDOk ?kL1S;L&LkOXk
G&NU;.;G&.<gCkWOS1/k/1+1L`k;C5ELA(Lk&?k7LXGEk;C[1OS;7&/DLkO;k/1O1&kJX1kOXOkL1OIX1QS&OkQ1&Ck1?;A;C&/&Ok
"Dk 5;LA1k 1QS1k.DCQ1CS;A;1CSDk &k B1CDQk JX1k WOS1/k 9&^&k S1C;/Dk ?&k DGDLSXC;/&/k /1k 9&.1LkHL17WCS&Ok L1.;+;Lk
.DCS1OS&.;DC1OkO&S;O5&.SDL;&OkG'L(kSD/'QkOWOkGL17WCS'Ok

"DA+L1k5;LA&k/1?kG(LS;.;G&CS1k


134

142

150

158
Referencias
Ahsan, A., Najam, S., Ahmed, J., and Najam, Z. (2016). Interactive white board using
2016 International Conference on Electrical, Electronics, and

gestures with kinect. In
Optimization Techniques (ICEEOT), pages 9095.
Artigas, S. G. (2017). Ley de hick y ley de tts. url:
http://www.torresburriel.com/weblog/2017/04/04/ley-de-hick-y-ley-de-tts/.
Baek, Y., Choi, J., Park, J., and Park, H. (2014). 3d interactive whiteboard system using
rgb-d camera. In The 18th IEEE International Symposium on Consumer Electronics

(ISCE 2014), pages 12.
Ballagas, R., Ringel, M., Stone, M., and Borchers, J. (2003). istu: A physical user
interface toolkit for ubiquitous computing environments. pages 537544.
Barajas, M., Maria Reyes, R., De la Riva, J., and Aracely Maldonado-Macias, A. (2017).
Estudio comparativo de cuestionarios para la evaluación de la usabilidad en software.
Ingeniantes, 1:2.
Barrera, J. (2015). Evolución hacia las interfaces naturales de usuario. url:
https://www.fundacionayesa.org/evolucion-hacia-las-interfaces-naturales-de-
usuario/.
Biehl, J. and Bailey, B. (2004). Aris: An interface for application relocation in an
interactive space. pages 107116.
Bouso, J. (2012). Pizarra digital. Nuevas tecnologías. Ideaspropias Editorial.
Breuer, H., Sousa, C., Baloian, N., and Matsumoto, M. (2007). A lightweight open
space for the classroom collaborative learning with whiteboards and pen-tablets. In
166
REFERENCIAS
Seventh IEEE International Conference on Advanced Learning Technologies (ICALT

2007), pages 6670.
Campuzano, E. H. (2014). La pizarra digital interactiva desde la perspectiva
del profesorado y del equipo directivo en educación infantil y primaria. url:
http://dspace.unia.es/handle/10334/2836.
Cantú, A. (2017). Qué es: Diseño de interacción (ixd). url:
https://blog.acantu.com/que-es-diseno-interaccion/.
Coutaz, J., Demeure, A., Barralon, N., Balme, L., and Calvary, G. (2004). Cameleon-rt:
A software architecture reference model for distributed, migratable, and plastic user
interfaces. In Markopoulos, P., Eggen, B., Aarts, E., and Crowley, J. L., editors,
Ambient Intelligence, pages 291302, Berlin, Heidelberg. Springer Berlin Heidelberg.
Cuello, J. and Vittone, J. (2013). Diseñando apps para móviles. José Vittone.
Demeure, A., Calvary, G., Sottet, J., Ganneau, V., Coutaz, J., and Vanderdonckt,
J. (2008). The 4c reference model for distributed user interfaces. In 2008 4th
International Conference on Autonomic and Autonomous Systems, pages 6169, Los
Alamitos, CA, USA. IEEE Computer Society.
Domingo Gallego, María Cacheiro, J. I. (2010). La pizarra digital interactiva como
recurso docente. Education in the Knowledge Society (EKS), 10(2).
Elmqvist, N. (2011). Distributed User Interfaces: State of the Art.
Everitt, K., Shen, C., Ryall, K., and Forlines, C. (2006). Multispace: enabling electronic
document micro-mobility in table-centric, multi-device environments. First In
IEEE International Workshop on Horizontal Interactive Human-Computer Systems

(TABLETOP 06), pages 8 pp..
Foundation, I. D. (2019). What is usability? url: https://www.interaction-
design.org/literature/topics/usability.
Gómez García, S. (2012a). Conceptos y funcionalidades básicas. url:
http://cere.edu.gva.es/course/view.php?id=5339.
167
REFERENCIAS
Gómez García, S. (2012b). Introducción a la pdi en 10 pasos.
url: http://recursostic.educacion.es/observatorio/web/es/equipamiento-
tecnologico/aulas-digitales/1071-introduccion-a-la-pdi-en-10-pasos.
Grau, X. F. (2000). Principios básicos de usabilidad para ingenieros software. In
Delgado, C., Marcos, E., and Corral, J. M. M., editors, Principios Básicos de
Usabilidad para Ingenieros Software. Universidad de Valladolid, Departamento de
Informática.
Hedlefs Aguilar, M. I., de la Garza González, A., Sánchez Miranda, M. P., and
Garza Villegas, A. A. (2016). Adaptación al espa«ol del cuestionario de usabilidad
de sistemas informáticos csuq / spanish language adaptation of the computer
systems usability questionnaire csuq. RECI Revista Iberoamericana de las Ciencias

Computacionales e Informática, 4(8):84 99.
Hui-xian, T., Ming, S., Yan, C., and Chun-e, Z. (2009). Application of interactive
electronic whiteboard system in education. In 2009 International Conference on

Information Technology and Computer Science, volume 2, pages 457460.
Ideuchi, M., Maruyama, D., Murakami, T., Kohtake, N., Nakazawa, J., Takashio, K.,
and Tokuda, H. (2004). u-texture: A self-organizable material for building smart
furniture.
Ju, W., Lee, B. A., and Klemmer, S. R. (2008). Range: Exploring implicit interaction
through electronic whiteboard design. In Proceedings of the 2008 ACM Conference

on Computer Supported Cooperative Work, CSCW '08, pages 1726, New York, NY,
USA. ACM.
Ju, W. G., Lee, B. A., and Klemmer, S. R. (2007). Range: Exploring proxemics in
collaborative whiteboard interaction. In CHI '07 Extended Abstracts on Human

Factors in Computing Systems, CHI EA '07, pages 24832488, New York, NY, USA.
ACM.
Karwowski, W. (2006). International Encyclopedia of Ergonomics and Human Factors,

Second Edition - 3 Volume Set. CRC Press, Inc., Boca Raton, FL, USA.
168
REFERENCIAS
Klemann, M., Book, M., and Gruhn, V. (2014). Navigation among model sketches on
large interactive displays. 2014 IEEE 18th International Enterprise Distributed

In
Object Computing Conference Workshops and Demonstrations, pages 191200.
Klokmose, C. N. and Beaudouin-Lafon, M. (2009). Vigo: Instrumental interaction in
multi-surface environments. In Proceedings of the SIGCHI Conference on Human

Factors in Computing Systems, CHI '09, pages 869878, New York, NY, USA.
Association for Computing Machinery.
Komninos, A. (2019). An introduction to usability. url: https://www.interaction-
design.org/literature/article/an-introduction-to-usability.
Kravvaris, D., Thanou, E., and Chorianopoulos, K. (2011). Evaluation of tip-activated
and push-button infrared pens for interactive whiteboards. In 2011 15th Panhellenic
Conference on Informatics, pages 287291.
Kunz, A., Nescher, T., and Küchler, M. (2010). Collaboard: A novel interactive
electronic whiteboard for remote collaboration with people on content. In 2010

International Conference on Cyberworlds, pages 430437.
Leitner, J. and Haller, M. (2011). Harpoon selection: Ecient selections for ungrouped
content on large pen-based surfaces. Proceedings of the 24th Annual ACM

In
Symposium on User Interface Software and Technology, UIST '11, pages 593602,
New York, NY, USA. ACM.
López S., C. A. (2009). Cómo mantener el patrón modelo vista controlador en una
aplicación orientada a la web. INVENTUM, 4(7):7278.
Madni, T. M., Nayan, Y. B., Sulaiman, S. B., Tahir, M., and Iqbal, M. (2014). Design
of interactive whiteboard system for collaborative learning. In 2014 International

Conference on Computer and Information Sciences (ICCOINS), pages 15.
Mangano, N., LaToza, T. D., Petre, M., and van der Hoek, A. (2014). Supporting
informal design with interactive whiteboards. In Proceedings of the SIGCHI

Conference on Human Factors in Computing Systems, CHI '14, pages 331340, New
York, NY, USA. ACM.
169
REFERENCIAS
María Paula González, Jesús Lorés, A. P. (2006). Evaluación Heurística. AIPO Press
(electronic book).
Marques, P. (2008a). Las pizarras digitales interactivas. url:
http://peremarques.net//pizinteractiva.htm.
Marques, P. (2008b). ¾qué es una pizarra digital? url:
http://peremarques.net//guia.htm.
Matulic, F., Husmann, M., Walter, S., and Norrie, M. C. (2015). Eyes-free touch
command support for pen-based digital whiteboards via handheld devices. In
Proceedings of the 2015 International Conference on Interactive Tabletops & Surfaces,

ITS '15, pages 141150, New York, NY, USA. ACM.
Modahl, M., Bagrak, I., Wolenetz, M., Hutto, P., and Ramachandran, U. (2004).
Mediabroker: an architecture for pervasive computing. pages 253 262.
Mora Chavarría, G. L. (2017). Pdi: Ventajas y limitaciones de su uso en la educación
de jóvenes y adultos. Revista El Labrador, 1(02).
Mortensen, D. (2019). Natural user interfaces - what are they and how do
you design user interfaces that feel natural? url: https://www.interaction-
design.org/literature/article/natural-user-interfaces-what-are-they-and-how-do-you-
design-user-interfaces-that-feel-natural.
Moulin, C., Sugawara, K., Kaeri, Y., and Fujita, S. (2014). Synchronous interaction
Proceedings of the 2014 IEEE

for supporting remote multilingual brainstorming. In
18th International Conference on Computer Supported Cooperative Work in Design

(CSCWD), pages 135139.
Muñoz, J., Hernández, Y., Amador, V., Chavarría, A., Calderón, M., Collazos, C.,
Méndez, Y., Solano, A., Mendoza, J., Rodriguez, F., González, R., Gonzalez Calleros,
J., Callero, J., Rodríguez-Vizzuett, L., Granollers, T., Gil, R., and Céspedes-
Hernández, D. (2014). Temas de diseño en Interacción Humano-Computadora.
Nielsen, J. (1994a). 10 usability heuristics for user interface design. url:
https://www.nngroup.com/articles/ten-usability-heuristics/.
170
REFERENCIAS
Nielsen, J. (1994b). How to conduct a heuristic evaluation. url:
https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/.
Panamá L., Mezura C., B. E. (2019). Evaluando la Usabilidad de Aplicaciones en

Computadoras Portátiles y Pizarras Digitales Interactivas. XXXII Congreso nacional
de la ANIEI, Puebla, México.
Perteneder, F., Grossauer, E.-M. B., Leong, J., Stuerzlinger, W., and Haller, M. (2016).
Glowworms and reies: Ambient light on large interactive surfaces. In Proceedings of

the 2016 CHI Conference on Human Factors in Computing Systems, CHI '16, pages
58495861, New York, NY, USA. ACM.
Petersen, K., Feldt, R., Mujtaba, S., and Mattsson, M. (2008). Systematic mapping
studies in software engineering. In EASE.
Ponnekanti, S., Lee, B., Fox, A., Hanrahan, P., and Winograd, T. (2001). Icrafter: A
service framework for ubiquitous computing environments. pages 5675.
1
Prante, T., Tandler, P., MÃ ller-Tomfelde, C., Streitz, N., and Steinmetz, R. (2001).
4
Connectables: dynamic coupling of displays for the exible creation of shared
workspaces. pages 1120.
Preece, J., Rogers, Y., and Sharp, H. (2015). Interaction Design: Beyond Human-
Computer Interaction. Wiley, Hoboken, NJ, 4 edition.
Puckdeepun, T., Jaafar, J., Hassan, M. F., and Hussin, F. A. (2010). Design of
interactive board system for collaborative learning. In 2010 International Symposium

on Information Technology, volume 1, pages 15.
Ramsundar, K. G. (2015). 2015 2nd

Interactive touch board using ir camera. In
International Conference on Electronics and Communication Systems (ICECS),

pages 16901695.
Rekimoto, J., Ullmer, B., and Oba, H. (2001). Datatiles: A modular platform for mixed
physical and graphical interactions. Conference on Human Factors in Computing

Systems - Proceedings.
171
REFERENCIAS
Roman, M., CK, H., Cerqueira, R., Ranganathan, A., Campbell, R., and Nahrstedt, K.
(2002). A middleware infrastructure for active spaces. Pervasive Computing, IEEE,

1:74 83.
Saltiveri, T., Vidal, J., and Delgado, J. (2011). Diseño de sistemas interactivos centrados
en el usuario. Formació de postgrau (Universitat Oberta de Catalunya). Castellà.
Editorial UOC, S.L.
Sánchez León, N. S., Rivera Guzmán, M., Moreno Vargas, A. L., and Díaz Molina,
M. (2017). Heuristic evaluations: App movil para evaluaciones heurísticas de la
usabilidad e iso25010. Maskana, 7(Supl.):111.
Sauro, J. (2018). Midiendo U: 5 formas de interpretar una puntuación SUS.
Seifried, T., Rendl, C., Haller, M., and Scott, S. (2012). Regional undo/redo techniques
for large interactive surfaces. In Proceedings of the SIGCHI Conference on Human

Factors in Computing Systems, CHI '12, pages 28552864, New York, NY, USA.
ACM.
Serim, B., Pfeuer, K., Gellersen, H., and Jacucci, G. (2018). Visual attention-based
access: Granting access based on users'joint attention on shared workspaces. Proc.

ACM Interact. Mob. Wearable Ubiquitous Technol., 2(3):133:1133:23.
Shen, C., Everitt, K., and Ryall, K. (2003). Ubitable: Impromptu face-to-face
collaboration on horizontal interactive surfaces. volume 2864.
Siang, T. (2019). What is interaction design? url: https://www.interaction-
design.org/literature/article/what-is-interaction-design.
Aura: An Architectural Framework for User Mobility

Sousa, J. P. and Garlan, D. (2002).
in Ubiquitous Computing Environments, pages 2943. Springer US, Boston, MA.
Streitz, N., Geibler, J., Holmer, T., Konomi, S., Muller-Tomfelde, C., Reischl, W.,
Rexroth, P., Tandler, P., and Steinmetz, R. (1999). i-land: An interactive landscape
for creativity and innovation. pages 120127.
Tandler, P. (2001). Architecture of beach: The software infrastructure for roomware
environments.
172
REFERENCIAS
Tzu-Chien Liu, Hsue-Yie Wang, Jen-Kai Liang, Tak-Wai Chan, and Jie-Chi Yang
(2002). Applying wireless technologies to build a highly interactive learning
environment. In Proceedings. IEEE International Workshop on Wireless and Mobile

Technologies in Education, pages 6370.
usability.gov (2000). Interaction design basics. url: https://www.usability.gov/what-
and-why/interaction-design.html.
Vanderschantz, N., Timpany, C., and Hill, A. (2012). Children's reading of text on
interactive whiteboards. In Proceedings of the 24th Australian Computer-Human

Interaction Conference, OzCHI '12, pages 624632, New York, NY, USA. ACM.
Wellner, P. (1993). Interacting with paper on the digitaldesk. Communications of the

ACM, 36.
Wigdor, D., Jiang, H., Forlines, C., Borkin, M., and Shen, C. (2009). Wespace: The
design development and deployment of a walk-up and share multi-surface visual
collaboration system. pages 12371246.
Wilson, D. and Wilson, A. (2004). Gesture recognition using the xwand.
Yuan, Z. and Jin, G. (2008). Sketch recognition based intelligent whiteboard teaching
system. In 2008 International Conference on Computer Science and Software

Engineering, volume 5, pages 867870.
173

Panama Miranda Luis

Cargado por

Copyright:

Formatos disponibles

Panama Miranda Luis

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Panama Miranda Luis

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD VERACRUZANA

FACULTAD ESTADÍSTICA E INFORMÁTICA

“Diseño de interacciones para superficies

Que para obtener el grado de:

XALAPA, VER. 2021

A mi directora de tesis, dra. Ma. Del Carmen

A los sinodales, por su tiempo dedicado.

A mis amigos, por su ayuda incondicional y

A la Universidad Veracruzana y al personal de

Al Consejo Nacional de Ciencia y Tecnología

digitales interactivas. Las características principales de estos dispositivos son su tamaño,

la resolución de pantalla, la relación de aspecto, la orientación, la cantidad de usuarios

tipo de interacción que utilizan.

El caso de estudio se enfoca en los pizarrones o pizarras digitales interactivas

una computadora, un videoproyector, una supercie de proyección y un dispositivo de

control de apuntador (también llamado puntero).

Sus principales características son que se puede interactuar con su supercie de

proyección directamente (utilizando los dedos si se trata de una PDI multitáctil) y

que se puede visualizar el contenido digital proyectado de manera grupal y a distancia

(debido a su amplio tamaño).

Se ha observado que, si se proyectan aplicaciones que únicamente fueron diseñadas

en la PDI) durante el proceso de desarrollo, entonces es posible que se disminuya la

de interacciones no fue el adecuado.

Conviene subrayar, que el diseño de interacciones es el encargado de denir tanto la

implementación en su diseño puede provocar que la eciencia y la aceptación del sistema

se vean afectadas negativamente.

A pesar de ello, estas propuestas son limitadas cuando se quiere desarrollar

una aplicación para supercies grandes de interacción (como la PDI) en ambientes

multidispositivo, en el que los usuarios nales se desplazan físicamente en su espacio de

trabajo (un salón de clases, por ejemplo).

Esto se debe a que los trabajos analizados no toman en cuenta (y si lo hacen es

de manera limitada) a la interfaz de usuario distribuida ni a la proximidad que tiene

el usuario respecto a la PDI. La interfaz de usuario distribuida puede utilizarse en los

dispositivos externos conectados al sistema tales como celulares inteligentes o tablets.

Como consecuencia de ello, se realizó la presente investigación para proponer una

solución a este problema. En este estudio, se realizó un análisis sistemático de la

literatura en el que se identicaron los tipos de interacciones, mediante las cuales se

Posteriormente, se clasicaron y analizaron los documentos investigados.

A partir de la información obtenida, es que se propone un modelo de interacciones

distribuida, multidispositivo y que toma en cuenta la proximidad del usuario, durante

los dispositivos conectados a la aplicación.

de desarrollo del prototipo incluyendo la implementación del modelo y su respectiva

reglas de diseño. Se menciona al modelo propuesto MIISuG (Modelo de Interacción

para Interfaces en Supercies Grandes) y a los resultados de su evaluación, los cuales

Además, se obtuvieron siguientes productos: artículo (Panamá L., 2019), el modelo

Finalmente, como trabajo a futuro se contempla un estudio sobre el cómputo ubicuo

y las aplicaciones multiusuarios en trabajos colaborativos, para integrarlas al modelo

1.5. Alcances y limitaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.6. Estructura del documento . . . . . . . . . . . . . . . . . . . . . . . . . 8

2. Marco teórico y estado del arte 9

2.1.1. Diseño de interacciones . . . . . . . . . . . . . . . . . . . . . . . 10

2.1.2. Dispositivos con supercies grandes de interacción . . . . . . . . 24

2.2. Estado del arte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

3.2. Elementos del modelo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

3.3. Arquitectura funcional . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

4. Prototipo: PDI ROOM 69

4.1.1. Características del usuario de la aplicación . . . . . . . . . . . . 70

4.1.5. Método de recolección . . . . . . . . . . . . . . . . . . . . . . . 71

4.2. Requerimientos del usuario . . . . . . . . . . . . . . . . . . . . . . . . . 71

una computadora, un videoproyector, una supercie de proyección y un dispositivo de

Sus principales características son que se puede interactuar con su supercie de

Conviene subrayar, que el diseño de interacciones es el encargado de denir tanto la

implementación en su diseño puede provocar que la eciencia y la aceptación del sistema

una aplicación para supercies grandes de interacción (como la PDI) en ambientes

multidispositivo, en el que los usuarios nales se desplazan físicamente en su espacio de

literatura en el que se identicaron los tipos de interacciones, mediante las cuales se

Posteriormente, se clasicaron y analizaron los documentos investigados.

para Interfaces en Supercies Grandes) y a los resultados de su evaluación, los cuales

2.1.2. Dispositivos con supercies grandes de interacción . . . . . . . . 24

2.6. Interacción mediante gestos (Klemann et al., 2014). . . . . . . . . . . 41

3.1. Modelo de Interacción para Interfaces en Supercies Grandes (MIISuG). 51

4.4. Diagrama de objetos Modicar anotación, zona Cerca . . . . . . . . . . 81

4.18. Ejemplo de agregar, modicar, eliminar y guardar anotaciones . . . . . 96

5.1. Dispositivos utilizados para interactuar con supercies grandes. . . . . 113

A.2. Caso de uso Modicar anotación . . . . . . . . . . . . . . . . . . . . . . 121

el ujo de trabajo de los usuarios. Aunado a los sistemas interactivos, se encuentra el

El diseño de interacción dene la estructura y el comportamiento