You are on page 1of 10

adfa, p. 1, 2011.

Springer-Verlag Berlin Heidelberg 2011


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

You might also like