Reportes Tcnicos en Ingeniera del Software.

8(2): 30-35
ISSN 1667-5002. CAPIS-EPG-ITBA (http://www.itba.edu.ar/capis/rtis)
Patrn de Diseo de Vistas Adaptables

Merlino, H.

Centro de Ingeniera del Software e Ingeniera del Conocimiento. Escuela de Postgrado. ITBA
Laboratorio de Sistemas Inteligentes. Facultad de Ingeniera. Universidad de Buenos Aires.
hmerlino@programmer.net



RESUMEN

El presente artculo detalla los problemas inherentes a la creacin de interfaces de usuario
sumado a la gran diversidad de tecnologas y dispositivos desde donde se puede acceder a
un sistema. Por otra parte se esboza una solucin, representada por un patrn de diseo HCI
(Human Computer Interface).


1. Introduccin

1.1. Interaccin entre el humano y la computadora
(HCI)

La interaccin computador humano es la disciplina
concerniente al diseo, evaluacin e implementacin de
interfaces no ambiguas entre los sistemas de computacin
y los seres humanos. [1]. Como HCI comprende el
estudio de la relacin entre humanos y maquinas, esto
necesita tener soporte sobre varias reas; en el mbito de
la computacin se deben incluir: (a) tcnicas de
computacin grafica, (b) sistemas operativos, (c)
lenguajes de programacin, (d) metodologas de
desarrollo; sobre los aspectos humanos: (a) teora de la
comunicacin, (b) diseo industrial y grafico, (c)
lingstica, (d) ciencias sociales, (d) psicologa
cognitiva. [1]. Esto provoca la interaccin entre
profesionales de distintas disciplinas. Se puede decir que
el principal objetivo de HCI es el de reducir la
ambigedad entre las computadoras y los seres humanos,
siendo una consecuencia de la profundizacin del HCI el
surgimiento de una nueva rama de la ingeniera llamada
ingeniera semitica, que intenta describir los fenmenos
de la comunicacin entre ambos [2]. Algunos de las
razones por lo cual se ha impulsado el HCI es [3]:

Les resulta difcil a los diseadotes entender las tareas
que el usuario realiza.
Las tareas en ciertos dominios son muy complejas.
Se deben balancear diferentes aspectos, uso de
estndares, diseo de grficos, internacionalizacin,
performance, factores sociales, aspectos legales.

1.2. Patrones de Diseo

Un patrn de diseo es una abstraccin de una solucin
dada a un problema conocido con anterioridad [4].
Algunas caractersticas deseables en todo patrn de
diseo son [5]:

Consistencia: Todo el modelo presentado debe tener
una consistencia entre sus distintos componentes.
Familiaridad: debe ser conocido y usado por la
comunidad de inters.
Simplicidad: de fcil utilizacin, no debe agregar
complejidad al diseo.

Uno de los patrones de diseo mas extendidos para el
desarrollo de aplicaciones en las cuales se debe manejar
interfaces de usuarios es el patrn Modelo, Vista y
Controlador (MVC), este patrn se centra en la
separacin de entre los datos o modelo, y la vista,
mientras que el controlador es el encargado relacionar a
estos dos. Su principal caracterstica es aislar la vista del
modelo. En la figura 1 se representa una simplificacin
del patrn asociado a las tecnologas mas utilizadas en los
ltimos tiempos en el mbito Web.




Figura 1. Representacin de un modelo MVC


Reportes Tcnicos en Ingeniera del Software. 8(2): 30-35
ISSN 1667-5002. CAPIS-EPG-ITBA (http://www.itba.edu.ar/capis/rtis) 31
Los beneficios del usar el patrn MVC:

Permitir la sustitucin de las interfaces de usuario.
Generar componentes de las interfases.
Diferentes vistas simultaneas del mismo modelo.
Aplicar fcilmente cambio de las interfaces.

Con el uso de este patrn se han identificado ciertos
problemas, como ser:

La complejidad aumenta rpidamente.
La vista y el modelo estn muy acopladas.

Por estas razones es que se han definido otros patrones
especficos para HCI, como ser el patrn Jerrquico de
MVC (HMVC), este patrn intenta principalmente
desacoplar la vista del controlador.

1.3. Patrones de Diseo del tipo MVC

El principal objetivo del diseo de patrones para el HCI es
el de dar soporte a los principios para la resolucin de
problemas recurrentes. [Mahemoff, 2002]. Algunas de las
caractersticas particulares de los patrones para HCI son:

Manipulacin Directa: el usuario directamente
interactu con la interface.
Flexibilidad: Debe poder cambiar su comportamiento
fcilmente.
Respuesta: Poder manejar distintos tipos de respuesta
hacia los usuarios.
Diseo visual: Principalmente estos patrones necesitan
un diseo visual
Robustez: Ante posibles errores inesperados.
Eficiencia: En la comunicacin con el usuario.


2. Problema

El constante avance en la tecnologa de la informacin, y
la aparicin de nuevas interfaces de usuario, como ser el
acceso a sistemas desde los telfonos celulares, nuevas
soluciones de software relacionadas con las interfaces de
usuarios, AJAX o XUL, entre otras, esto genera
modificaciones en los requisitos. En la figura 2 se
representa la relacin entre requisitos, HCI y Tecnologas.


Figura 2. Relacin entre requisitos, HCI y Tecnologas

Todo esto hace que se presenten ciertos problemas de
diseo de sistemas, que pueden ser agrupados en:

Los sistemas deben poder ser accedidos desde
mltiples interfaces.
Aumento de la complejidad de los sistemas.
Incremento del tiempo de desarrollo.

Por lo antes mencionado es necesario simplificar el
diseo de los sistemas, y uno de los aspectos que se puede
atacar es el diseo de un patrn basado en los
lineamientos de HCI. Las caractersticas deseables del
mismo sern:

Fcil adaptacin a diferentes interfaces de usuario.
Flexibilidad en el manejo de las interfases.
Rpida adaptacin a nuevos lineamientos de HCI.


3. Solucin Propuesta

Se propone abordar la construccin de un patrn de
diseo hbrido el cual permita adaptarse de manera fcil y
rpida a las nuevas tecnologas; adems de poder incluir
nuevos lineamientos de HCI. El primer punto a tener en
cuenta para el desarrollo del patrn deseado es definir el
dominio de accin, nos centraremos en un entorno del
tipo Web, donde principalmente se utilizan servidores
Web y servidores de aplicacin, y se mantiene la
separacin entre vista controlador y modelo. Con esto
podemos definir a un alto nivel de abstraccin que
cualquier aplicacin, perteneciente a este dominio, se
pueden definir como una secesin de maquina de estados,
el cual esta compuesto por una maquina de estados finitos
y un flujo (Workflow) de aplicacin, en la figura 3 se
detalla el mismo.



Figura 3. Abstraccin del dominio de sistema

Se pueden definir los distintos tipos de interaccin que
existen entre un sistema, perteneciente a este dominio, y
un usuario de aplicacin. Los mismos son:

Entradas
o Informacin Operativa
Salidas
o Informacin Operativas
o Mensajes del Sistema
Acciones
o Flujo por defecto


Reportes Tcnicos en Ingeniera del Software. 8(2): 30-35
ISSN 1667-5002. CAPIS-EPG-ITBA (http://www.itba.edu.ar/capis/rtis) 32
o Flujo por error
o Flujos alternativos

Por otra parte se debe profundizar ciertos conceptos de
HCI, necesarios para la creacin de un patrn de diseo.
En el HCI se trabaja en dos niveles: (a) conceptual, es el
que incluye a las buenas costumbres aceptadas de HCI,
como por ejemplo, si se esta haciendo un proceso que el
usuario reciba un mensaje de aviso y tiempo estimado de
finalizacin, y por otra parte los aspectos sociales de del
HCI, esto est readicionado a que no basta con aplicar
solamente las reglas de buenas costumbres sino que en
funcin del grupo de usuarios que acceder al sistema
pueden agregarse o quitarse reglas de HCI. (b)
implementacin, se refiere a la tecnologa sobre la cual
ser implementado el sistema, especficamente su
interfase de usuario. Para resumir en la figura 4 se
detallan todas las fuerzas que interactan en el diseo de
un sistema.

Figura 4. Aspectos que influyen en el diseo de
sistemas

En la figura 4 se puede observar como las distintas
fuerzas que interactan en el diseo de interface de
usuario de un sistema se complementan para obtener el
producto final. Los requisitos son adaptados por las
buenas costumbres en HCI y por los conocimientos de los
desarrolladores, a su vez los usuarios estn representados
por los aspectos sociales en HCI, todo esto determina la
interface final que obtendr el sistema. Se puede deducir
que los aspectos sociales en HCI, un punto muy subjetivo
y en consecuencia difcil de poder ser abstrado a un
patrn de diseo. A su vez las buenas costumbres en
HCI, ms viables que puedan ser abstrado. En la figura 5
se representa la siguiente funcionalidad se propone la
creacin de un lenguaje que represente los distintos tipos
de interaccin antes mencionados, este lenguaje estar
contenido en un documento XML, lo que permitir que el
arquitecto de sistemas se pueda abstraer de la interface de
usuario y concentrarse en la operacin del sistema. Por
otra parte se tendr un adaptador de interfaz de usuario
que es capaz de interpretar el documento XML con la
interfaz de usuario y escribir el cdigo para la interfaz
seleccionada, como ser HTML, AJAX, XAML, etc.


Figura 5. Funcionalidad de la interfaz de usuario

A los adaptadores se les debe agregar la funcionalidad de
ingeniera inversa, esto se debe a que al poder realizar
rpidamente un prototipo y poder ser probado con el
usuario (diseo centrado en el usuario) este puede asignar
cambios o sugerencias al diseo lo que se podrn hacer
sobre el cdigo generado; una vez finalizado esto el
adaptador debera ser capaz de tomar ese cdigo
modificado por un programador y generar una versin
actualizada del documento XML con la interfaz hbrida
de usuario. El objetivo final es poder desarrollar varios
tipos de interfaces de sistemas y que en tiempo real el
sistema detecte cual es la interfaz ms adecuada para el
usuario que esta accediendo al sistema.


4. Un Ejemplo

A continuacin se detalla un ejemplo en donde se
especifican los pasos para el diseo de una interfaz de
usuario basado en formularios de Windows y acceso a
telfono celular. En primer trmino se presentan los
templates de los documentos XML para la construccin
de una interfase hbrida de sistemas. Para simplificar el
ejemplo se ha evitado incluir los esquemas de XML para
la validacin de los documentos. Primero se presenta el
template de interfaz (tabla 1). El template bsico donde se
construye toda interfase de usuario es el que ha sido
llamado Campo, el cual contiene un conjunto de
caractersticas que son comunes a todos los elementos de
una interfase (tabla 2). Por otra parte se tiene distintos
tipos de especializaciones del template campo un de ellos
es el Alfanumrico (tabla 3). En la tabla 4 se detalla la
especializacin para el template Numrico. En la tabla 5
la especializacin para el template Booleano. En la tabla 6
la especializacin para el template Carcter (tabla 6). En
la tabla 7 la especializacin para el template Accin (tabla
7)


<interfase>
<nombre/>
<campos>
<campo/>
</campos>
</interfase>

Tabla 1. Template de
interfaz






Reportes Tcnicos en Ingeniera del Software. 8(2): 30-35
ISSN 1667-5002. CAPIS-EPG-ITBA (http://www.itba.edu.ar/capis/rtis) 33


<campo>
<longitud/>
<valorXdefecto/>
<valorCargado/>
<visible/>
<validaciones>
<obligatorio/>
<soloLectura/>
</validaciones>
<mensajes>
<obligatorio/>
<soloLectura/>
<mensajes/>
</campo>

Tabla 2. Template
Campo


<alfanumerico>
<nombre/>
<hereda>campo</hereda>
<validaciones>
<soleLetras/>
<soloNumeros/>
<mensajes>
<soleLetras/>
<soloNumeros/>
<mensajes/>
</validaciones>
</alfanumerico>

Tabla 3. Template
Alfanumrico


<numerico>
<nombre/>
<hereda>campo</hereda>
<configuracion>
<longEntero/>
<longDecimal/>
<separador/>
</configuracion>
<validaciones>
<valorMaximoEntero/>
<valorMinimoDecimal/>
</validaciones>
<mensajes>
<valorMaximoEntero/>
<valorMinimoDecimal/>
<mensajes/>
</numerico>

Tabla 4. Template Numrico








<booleano>
<nombre/>
<hereda>campo</hereda>
</booleano>

Tabla 5. Template Booleano


<caracter>
<nombre/>
<hereda>campo</hereda>
</caracter>

Tabla 6. Template Carcter




<accion>
<nombre/>
<hereda>campo</hereda>
</accion>

Tabla 7. Template Accin

Se puede resumir el uso del los templete de la siguiente
manera una interfase de usuario esta constituida por el
template interfase y este esta compuesto por un conjunto
de campos especializados, como ser, alfanumrico,
numerico, etc. y al menos una accion. Luego del diseo
realizado por el arquitecto de sistemas obtenemos los
siguientes documentos XML (Tablas 8a a 8d).


Tabla 8a. Detalle de la interfase de sistemas



Reportes Tcnicos en Ingeniera del Software. 8(2): 30-35
ISSN 1667-5002. CAPIS-EPG-ITBA (http://www.itba.edu.ar/capis/rtis) 34

Tabla 8b. Detalle de la interfase de sistemas


Tabla 8c. Detalle de la interfase de sistemas



Tabla 8d. Detalle de la interfase de sistemas
En los documentos XML detallados se observa como una
interfase de usuario es construida abstrayndose del
dispositivo en el cual se mostrara. Se implementa un
mecanismo de herencia el cual facilita la reutilizacin de
cdigo existente. A travs de la aplicacin de los
conectores especficos para telefona celular y formulario
de Windows, el resultado de esto se muestra en la figuras
6a y 6b. Como se puede observar en las interfases se
observan diferencias, por ejemplo: se puede observar que
en el botn de la interfase para Windows la leyenda de
uno de los botones es Aceptar, mientras que en la otra
es Enviar.


Figura 6a. Interfase realizada por el conector de
formularios Windows



Figura 6b. Conector de telefona celular



Reportes Tcnicos en Ingeniera del Software. 8(2): 30-35
ISSN 1667-5002. CAPIS-EPG-ITBA (http://www.itba.edu.ar/capis/rtis) 35
5. Conclusiones

Muchos de los fracasos en el uso de los sistemas se deben
a una pobre interface de usuario, la poca practicidad o
complejidad de la misma hace que los usuarios
simplemente no lo usen, aunque cumpla con todos los
requisitos solicitados. Por otra parte el constante avance
de la tecnologa de interfaces hace los desarrolladores no
lleguen a tener la experiencia suficiente antes de tener que
implementar una nueva tecnologa; todo esto justifica el
esfuerzo de realizar un patrn de diseo orientado a HCI.

En funcin de lo antes mencionado, se puede deducir que
los diseadores de sistemas gran parte de sus esfuerzos en
la creacin de internases, en tecnologas en las cuales por
su reciente aparicin no tengan la experticia necesaria;
este ha sido la razn principal del presente trabajo, la de
abstraer la interface de usuario y dejar que los
diseadores, se ocupen de la construccin del basamento
del sistema. Por otra parte este trabajo pregona por la
creacin de un nuevo rol en el diseo de sistemas es la del
arquitecto de interfaces, que no debe ser confundido con
los diseadotes grficos, que sern parte del equipo que
tiene a su disposicin, adems, el equipo debera ser
formado por una plantilla de profesionales
multidisciplinarios entre los cuales deberan existir
psiclogos, socilogos, antroplogos y programadotes,
entre los cuales se diferencian entre investigadores y
codificadores, los primeros se encargan de asimilar las
nuevas tecnologas, evaluarlas y generar un esquema de
transferencia de conocimiento a los codificadores

Se plantea como futura lnea de investigacin la
adaptacin del mismo para que pueda ser utilizado junto a
otros patrones, como ser HCI; sentar las bases para la
creacin de equipos multidisciplinarios que puedan
manejar un conjunto de conceptos en comn.

REFERENCIAS

[1] Hewett, Baecker, Card, Carey, Gasen, Mantei,
Perlman, Strong and Verplank, 1997. ACM SIGCHI
Curricula for Human-Computer Interaction.
http://sigchi.org/cdg/cdg2.html. Vigente al 2006-07-04

[2] de Paula, M., Junqueira Barbosa, S., Departamento de
Informtica, PUC-Rio, 2003. Using an Interaction
Model to Support Communication among HCI Design
Team Members From Multidisciplinary Backgrounds.

[3] Myers, B. Computer Science Department, Carnegie
Mellon University, 1993. Why are Human-Computer
Interfaces Difficult to Design and Implement?
http://citeseer.ist.psu.edu/myers93why.html Vigente al
2006-07-04

[4] Kotze, P., School of Computing University of South
Africa; Karen Renaud, Department of Computing
Science, University of Glasgow, Koulouletsos, K.,
Khazaei, B, Darden, A., Communications and
Computing Research Centre Sheffield Hallam
University, UK., 1999. Patterns, Anti-Patterns and
Guidelines Effective Aids to Teaching HCI
Principles

[5] Michael J. Mahemoff and Lorraine J. Johnston,
Computer Science Dept. University of Melbourne,
Australia., 2002. Principles for a Usability-Oriented
Pattern language