Identificacin de Patrones de Diseo de Interfaz de Usuario para aplicar Realidad Aumentada Rogelio-Daryl Barbosa-Trujillo 1 y Mara-Antonieta Abud-Figueroa 2 1 y 2 Instituto Tecnolgico de Orizaba, Orizaba, Veracruz, Mxico 1 rbarbosatrujillo@acm.org 2 aabud@prodigy.net.mx
Abstract. En el presente trabajo se muestra el resultado del anlisis de una variedad de patrones de diseo de interfaz grfica de usuario de los cuales se identificaron los patrones a los cuales es posible incluir realidad aumentada. Los patrones aportados ofrecen soluciones ptimas a problemas recurrentes de visualizacin, pero se considera especficamente los problemas que se presentan en aplicaciones e-learning, tales como baja interactividad y exceso de informacin en la pantalla, entre otras. Keywords: Realidad Aumentada, Patrones de diseo de interfaz grfica. 1 Introduccin El uso de realidad aumentada tiene un gran auge actualmente en varios mbitos, entre los cuales destacan mercadotecnia, video juegos y educacin. En el caso de mercadotecnia un claro ejemplo es la marca Lego que utiliza realidad aumentada en sus tiendas para mostrar los productos armados a sus clientes para incrementar sus ventas. En el caso de video juegos est el juego de tarjetas de realidad aumentada que incluye la consola Nintendo 3DS. En la educacin hay diversas aplicaciones con realidad aumentada, por mencionar algunas: MARIE[1] la cual es una interfaz interactiva en e-learning utilizando realidad aumentada con la biblioteca ArtoolKit mediante la cual los profesores adaptan sus contenidos para utilizarlos como auxiliar en la enseanza con sus alumnos, MARS[2] que son sistemas mviles de realidad aumentada las cuales ofrecen mayor movilidad al estudiante y tener las manos libres durante la interaccin con la computadora, entre otros; pero en cuanto a aplicaciones de internet no se encuentran evidencias hasta la fecha del uso de realidad aumentada.
Por otro lado los patrones de diseo de interfaz grfica de usuario son de gran ayuda para facilitar la interaccin y convivencia del usuario con la aplicacin. Este tipo de patrones tienen muchas aplicaciones ya sea para pginas Web o aplicaciones de escritorio.
El combinar patrones de diseo de interfaz de usuario con realidad aumentada es de gran utilidad ya que se ofrece un ambiente ms atractivo para los usuarios al utilizar las aplicaciones, como es el caso de aplicaciones Web con realidad aumentada con fines educativos.
El objetivo de este trabajo es analizar e identificar los patrones de diseo de interfaz grfica en los cuales es posible incluir realidad aumentada debido a la naturaleza de los mismos, para posteriormente utilizarlos en una aplicacin e-learning con realidad aumentada.
2 Clasificacin de Patrones Son varios los autores que han realizado una clasificacin y anlisis de los patrones de diseo de interfaz. De acuerdo con Sari A. Laakso[3] los patrones de diseo de interfaz grfica para la visualizacin de pginas Web se clasifican en: Bsqueda Vista de Datos Almacenamiento Seleccin y manipulacin de objetos. Tiempo Jerarquas y conjuntos Guardar y deshacer actividades o acciones
Una clasificacin de los patrones se presenta en la pgina del framework Primefaces[4] en la cual se clasifican los patrones por su naturaleza en: patrones de entrada de datos, de botones, para mostrar datos, patrones de panel, de superposicin, de mens, mensajes, multimedia, archivos, arrastrar y soltar, grficos, miscelneos, entre otros.
En el trabajo Una clasificacin de patrones de interaccin para dispositivos mviles[5] en el que participan el Dr. Muoz Arteaga et al., se catalogan los patrones que ofrecen al diseador soluciones ptimas a problemas recurrentes que se tiene en el diseo de las interfaces grficas en dispositivos mviles que ayudan a resolver problemas como falta de espacio, memoria limitada y la interaccin con el usuario.
En Patrones de interaccin para el diseo de la retroalimentacin visual de sitios Web seguros [6] se catalogan los patrones en base a tres niveles, los cuales son: informacin, interaccin e interactividad. En la primer clasificacin se determina la manera de cmo mostrar al usuario la informacin sobre la seguridad que tiene el sitio sobre las operaciones internas que efecta; algunos patrones son: veracidad de la informacin que tiene un pequeo candado en la parte inferior de la pgina, cdigos de acceso, que son las creaciones de contraseas al crear usuarios nuevos en un sitio Web, entre otros. En la segunda clasificacin se presentan un conjunto de patrones de seguridad que especifica el estado de dilogo entre el usuario y el sitio Web por medio de la interaccin con los elementos (servicios) de seguridad que se exponen en la interfaz. En la ltima clasificacin reagrupa los patrones de seguridad que especifican las acciones del usuario utilizando los dispositivos de entrada para manipular directamente los objetos de una aplicacin.
Otro trabajo relacionado se titula Patterns of Mobile Interaction [7], en ste el autor analiza y explica las limitaciones que tienen los dispositivos mviles, por lo que el autor propone un tipo especial de patrones llamados MobilityPatterns, los cuales buscan atacar varios problemas que tienen los dispositivos mviles desde el diseo, ya que menciona que en ocasiones, por enfocarse mucho a una sola rea (por mencionar algunas: seguridad, interfaz de usuario, transmisin, entre otras), se dejan de tomar en cuenta otras que pueden afectar de gran manera el desempeo de la aplicacin en dispositivos mviles.
3 Realidad Aumentada y Patrones GUI Antes de entrar en detalles acerca de los patrones con realidad aumentada, se explicarn los conceptos necesarios para entender el tema.
Existen varias definiciones de realidad, pero se consider la de la real academia de la lengua espaola, la cual la define como la existencia real y efectiva de algo [8]. Acercando la definicin a trminos informticos se llega a la definicin de realidad virtual la cual es un sistema informtico que genera entornos sintticos en tiempo real y que se rigen en una realidad ilusoria, pues trata de una realidad perceptiva sin soporte objetivo, ya que existe slo dentro de la computadora [9].
Ya llegando a la definicin que utiliza el presente trabajo, la realidad aumentada describe la combinacin de tecnologas que permiten mezclar en tiempo real contenido generado por computadora con video en vivo. La realidad aumentada se utiliza en mltiples campos como medicina, entretenimiento como son los videojuegos, en el entrenamiento como puede ser la simulacin, en arquitectura para reconstruir o construir edificios antiguos o de nuevo diseo y en la educacin, entre otros. La realidad aumentada se diferencia de la realidad virtual en que sta ltima es un ambiente completamente virtual y sinttico ya que todo ocurre dentro de la computadora sin interaccin con el exterior y la realidad aumentada hace una combinacin de elementos del mundo real con elementos virtuales. [10]
Hay dos tipos de realidad aumentada, la que usa marcadores (markers) y la que no los usa (sin marcadores). La principal caracterstica de la primera es que utiliza imgenes, llamadas marcadores, que la cmara puede reconocer, buscar la imagen asociada y colocarla sobre el marcador. El marcador debe estar impreso en un papel de preferencia blanco para que la cmara logre reconocer la imagen ya que sta se ve afectada por el brillo y contraste que existe en el ambiente. El otro tipo de realidad aumentada se caracteriza en que no utiliza marcadores, ya que busca patrones para reconocer el entorno y aplicar la realidad aumentada sobre stos, adems de que se puede auxiliar de acelermetro, GPS, entre otros.
Los patrones de diseo son soluciones a problemas recurrentes que ocurren en contextos similares con algunas variantes de implementacin [11]; los ms conocidos son los que catalog Eric Gamma. Por otra parte existen los patrones de interfaz de usuario (GUI) que son soluciones a problemas recurrentes especficos al contexto visual.
2.1 Tecnologa Utilizada
Para la aplicacin de realidad aumentada con los patrones de diseo de interfaz grfica se utiliz la biblioteca SLARToolkit[12] la cual hace uso del Framework Silverlight en su versin 4, como IDE de desarrollo se utiliz Microsoft Visual Estudio 2010, adems de Microsoft ExpresionBlend 4, ste ltimo teniendo caractersticas similares a Photoshop ya que permite mover elementos visuales con mucha facilidad. 3 Importancia de los patrones de diseo de interfaz grfica Los patrones diseo de interfaz grfica ayudan, tanto a los usuarios como a los desarrolladores, a solucionar problemas referentes a las interfaces de usuario, ya que permiten agrupar y mostrar la informacin de una mejor manera, ya que sin ellos toda la informacin sera demasiada y sin orden lo cual provoca que sea cansado para el usuario final su visualizacin; estos patrones ayudan al desarrollador a determinar la mejor manera de colocar la informacin. Los patrones ofrecen distintas maneras de ordenar la informacin, por ejemplo agrupndola como es el caso del acorden, que a la vez la separa para un mejor entendimiento. Hay otros como el patrn ampliar el contexto que evita la sobre saturacin de imgenes en la pantalla, ya que muestra informacin conforme se va requiriendo al pasar el mouse sobre el elemento que se desea obtener mayor informacin.
3.1 Clasificacin de patrones de interaccin con uso de realidad aumentada. Del anlisis realizado a los patrones de diseo de interfaz grfica de usuario, se encontr que es factible incluir elementos de realidad aumentada en los patrones: acorden, carrusel y aumentar contexto, entre otros. En el presente trabajo se muestran acorden, carrusel y expandir contexto. En la siguiente seccin se detalla el anlisis realizado.
Patrn Acorden En la tabla 1 se presentan las caractersticas del patrn acorden, y en la tabla 2 una comparativa de su uso normal y con realidad aumentada. Tabla 1. Analisis del Patrn GUI Acorden Nombre del patrn Acorden Funcionamiento Permite agrupar informacin del mismo tema, pero a la vez permite separarla para que sea legible y fcil de entender. Por ejemplo: Mostrar informacin de un estado, cada divisin muestra algo diferente por ejemplo, flora, fauna, detalles geogrficos, etc. Modo de interaccin bsico Mouse Modo de interaccin con AR Mouse y marcador
Como se puede visualizar en la Tabla 2, cuando se emplea el patrn en forma normal la informacin que se despliega es en formato de texto de manera que se requiere seleccionar la opcin con el apuntador del mouse para que se desplieguen las opciones; en cambio si se utiliza realidad aumentada, es posible controlar el despliegue a travs de presentar un marcador ante la cmara y se puede desplegar el objeto virtual en lugar de texto. Tabla 2. Comparacin de patrones Acorden Simple y con realidad Aumentada Patrn sin realidad Aumentada Patrn con realidad aumentada
Continuacin tabla 2 Patrn sin realidad Aumentada Patrn con realidad aumentada Beneficios obtenidos Mejora en la interaccin y visualizacin en cuanto a la informacin Ventajas Con los marcadores pueden utilizarse acordeones sensibles al contexto y mostrar la informacin de manera dinmica Desventajas La limitacin del espacio podra ser un problema ya que la informacin a mostrar por el espacio sera limitada
Patrn Carrusel
En la Tabla 3 se muestra el anlisis de las caractersticas del patrn carrusel, y en la Tabla 4 el anlisis del mismo con realidad aumentada. Tabla 3. Anlisis del Patrn GUI Nombre del patrn Carrusel Funcionamiento Agrupa un conjunto de objetos que giran en un permetro determinado; los objetos pueden ser imgenes y figuras, entre otros. Modo de interaccin bsico Mouse Modo de interaccin con AR Mouse y marcador
En la Tabla 4 se muestra cmo con la realidad aumentada es posible que el manejo del patrn carrusel se lleve a cabo a travs de visualizar marcadores, de modo que ofrece la posibilidad de extender la interaccin con elementos fsicos externos a la computadora y enriquecer as la interaccin humano-computadora. Tabla 4. Comparacin de patrones Carrusel Simple y con realidad Aumentada Ejemplo clsico
Continuacin tabla 4
Ejemplo con realidad Aumentada
Beneficios obtenidos Mejora la interaccin del carrusel, ya que adems de la realidad aumentada puede tenerse otro tipo de objetos relacionados con interaccin (movimiento) Ventajas Muestra objetos relacionados en un mismo componente, que pueden ser otros videos, imgenes, cajas de texto, entre otros. Desventajas Si se utilizan mucas ventanas para realidad aumentada, puede volverse pesada la aplicacin.
En la tabla 5 se presentan las caractersticas del patrn ampliar contexto, y en la tabla 6 una comparativa de su uso normal y con realidad aumentada.
Tabla 5. Anlisis del Patrn GUI Ampliar Contexto Nombre del patrn Ampliar contexto Funcionamiento Muestra informacin extra de un elemento seleccionado Modo de interaccin bsico Mouse Modo de interaccin con AR Mouse y marcador
Como se ve en la Tabla 6, igual que en el caso del carrusel, al incluir realidad aumentada en el patrn ampliar contexto se extiende la interaccin del usuario hacia elementos externos a la aplicacin lo que puede incrementar el inters del usuario que utiliza la aplicacin.
Tabla 6. Comparacin del patrn Ampliar Contexto simple y con realidad Aumentada Ejemplo simple Ejemplo con realidad aumentada
Beneficios obtenidos Evita la saturacin de informacin ya que es cargada hasta el momento en que se solicita. Ventajas Facilidad de ordenar la informacin, adems de que la informacin slo se carga cuando es solicitada. Desventajas Saturacin de ventanas emergentes si se usa en exceso el patrn
4 Resultados Obtenidos El resultado del anlisis y clasificacin de los patrones de diseo es un catlogo de patrones a los cuales se les puede agregar realidad aumentada, siendo aplicables en cualquier contexto, ya sea educativo industrial u otro. En el presente artculo se presentan tres: acorden, carrusel y ampliar contexto, sin embargo se est trabajando en otros ms.
Este anlisis nos permite concluir que agregando realidad aumentada a patrones de diseo de interfaz es posible crear aplicaciones ms flexibles al permitir una mejor interaccin con el usuario ya que no solo convive con un ambiente virtual, sino que interacta a su vez con el mundo real.
5 Conclusiones La realidad aumentada es una tecnologa que tiene mucho potencial en campos como educacin, video juegos e industria entre otros. Adems, si se aplica ese potencial en patrones de diseo de interfaz grfica de usuario se pueden obtener aplicaciones ms atractivas para los usuarios. Es importante destacar que a pesar de que todos los patrones de diseo de interfaz grfica permiten una mejor interaccin con el usuario, tienen limitantes que se busca superar con la aplicacin de realidad aumentada. El anlisis presentado permite reconocer aquellos patrones donde es factible incorporar realidad aumentada.
Se present el anlisis de los patrones acorden, carrusel y ampliar contesto.En el caso del acorden, si la tecnologa lo permite es posible controlar el acceso a las partes de la aplicacin relacionada con la imagen virtual; en el caso del carrusel hay que evitar saturar demasiado el patrn ya que el tamao de los elementos puede ser demasiado pequeo o ser tan grande que no se visualice correctamente en la pantalla del usuario, finalmente en el caso de ampliar contexto se permite ampliar la informacin mostrada, pero siempre evitando los excesos.
6 Trabajo Futuro Como trabajo futuro se tiene planeado analizar los patrones restantes y probarlos en cdigo. Posteriormente con los patrones seleccionados y probados se elaborar una gua para el desarrollo de interfaces grficas con realidad aumentada para aplicaciones e-learning.
Referencias 1. F. Liarokapis, P. Petridis, P. F. Lister, and M. White, Multimedia augmented realityinterface for e-learning (MARIE),World Transactions on Engineering and Technology Education, 2002 2. J. T. Doswell, M. B. Blake, and J. Butcher-Green, Mobile augmented reality system architecture for ubiquitous e-learning, Proceedings of the Fourth IEEE International Workshop on Wireless, Mobile and Ubiquitous Techno-logy in Education , 2006 3. User Interface Design Patterns. Sari A. Laakso. http://www.cs.helsinki.fi/u/salaakso/patterns/index.html Accedido 18 septiembre 2012 4. Prime Faces. Prime Faces http://www.primefaces.org/showcase/ui/home.jsf Accedido 15 septiembre 2012. 5. Muoz Arteaga, J., Martnez-Ruiz, J., Guerrero, J., Aguilar, H. Una clasificacin de patrones de interaccin para dispositivos mviles. Proc. of First International Mexican Workshop in Human-Computer Interaction MexIHC'2006. 6. Muoz-Arteaga, J., Medina, A., Guerrero, J. and MuozLpez, J. Patrones de Interaccin para el Diseo de la Retroalimentacin Visual de Sitios Web Seguros, IX Congreso Internacional Interaccin, Albacete 9-11 de Junio de 2008 Grupo LoUISE-Universidad de Castilla-La Mancha. 7. Jrg Roth. Patterns of Mobile Interaction. Journal Personal and Ubiquitous Computing archive Volume 6 Issue 4, September 2002 Pages 282 - 289 Springer-Verlag London, UK. 8. Real academia de la lengua Espaola. RAE http://lema.rae.es/drae/?val=realidad Accedido 17 septiembre 2012 9. G. M. Alfonso, Educacin multimedia y nuevas tecnologas. Ediciones de la torre, 2002. 10. M. Tony, Prototyping Augmented Reality. John Willey and Sons, 2011. 11. G. Erich, H. Richard, and V. John, Design Patterns: Elements of Reusable Object-Oriented Software. Addison Wesley, 1994 12. SlarToolKit. Rene Schulte. http://slartoolkit.codeplex.com/ Accedido 15 septiembre 2012