Este documento propone un método para generar la interfaz de usuario de negocio (BUI) a partir de la asociación de tres elementos: patrones de datos, plantillas de presentación y modelos de interacción. El método identifica patrones de datos recurrentes, sus variaciones y asocia plantillas de presentación y modelos de interacción definidos con usuarios. Esto permite generar de forma automática prototipos funcionales de BUI que mejoren la calidad y tiempo de diseño, facilitando una validación temprana con clientes.

1. IEEE 11CCC 2016
978-1-5090-2966-2/16/$31.00 ©2016 IEEE
Generación de la Interfaz de Usuario de Negocio a
Partir de la Asociación de Patrones de Datos, Plantilla
de Presentacion y Modelo de Interacción
Jorge I. Triviño
Programa de Ingeniería de Sistemas y Computación
Universidad Del Quindío
Armenia, Quindío
jitrivino@uniquindio.edu.co
William J. Giraldo
Programa de Ingeniería de Sistemas y Computación
Universidad Del Quindío
Armenia, Quindío
wjgiraldo@uniquindio.edu.co
Helmuth Trefftz
Programa de Ingenieria de Sistemas
Universidad EAFIT
Medellin, Colombia
htrefftz@eafit.edu.co
Abstract—El diseño de la IU suele ser basado en la
experiencia del desarrollador, y por lo tanto de ella depende la
calidad del prototipo, uno de los principales métodos usados en
el ámbito de la ingeniería para plasmar el conocimiento
adquirido por la experiencia es el uso de patrones. En este
trabajo se propone un método orientado desde los datos, que
permita a partir de una triada formada por patrón de datos,
plantilla de presentación y modelo de interacción y haciendo
uso de los fundamentos metodológicos de TD-MBUID (Task &
Data – Model Based User Interface Development) lograr la
generación automática de un prototipo funcional de la interfaz
de usuario de negocio – BUI (por sus siglas en ingles); con el fin
de mejorar el tiempo y calidad del diseño de los prototipos;
para generar en cuestión de minutos propuestas de BUI que
faciliten una validación temprana con los clientes.
Keywords— MDE, TD-MBUID, Interfaz de Usuario de
Negocio, Data Form, patrones de datos
I. INTRODUCCIÓN
El desarrollo de la interfaz de usuario (IU) es una tarea de
gran impacto dentro del proceso de construcción de software,
ya que ofrece la interacción entre la persona y computador, y
por lo tanto constituye la cara visible de las aplicaciones y es
responsable de la percepción del software, que tenga el
cliente [1]. No obstante, el diseño de la IU suele estar basado
en la experiencia del desarrollador, y por lo tanto de ella
depende la calidad del prototipo. Uno de los principales
métodos usados en el ámbito de la ingeniería, es el uso de
patrones para plasmar el conocimiento reutilizable adquirido
por la experiencia. Su utilización de forma reiterada, es
garantía de éxito.
Para apoyar el desarrollo de IU dentro del ámbito del
Ingeniería dirigida por Modelos - MDE, en los últimos años
se ha realizado un gran esfuerzo en la investigación de
métodos que permitan la inclusión del diseño de la interfaz
de usuario dentro de un proceso de desarrollo basado en
modelos, intentando obtener beneficios tales como la
automatización de la generación de la interfaz de usuario [2-
4], y de esta manera disminuir la brecha entre el modelo
mental del usuario y el modelo de la solución de la interfaz
final del usuario, lo que permite aumentar el grado de
satisfacción del usuario con respecto al producto final.
Dentro de este enfoque se encuentra la aproximación
metodológica TD-MBUID (Task & Data – Model Based
User Interface Development), la cual se centra en la
combinación del diseño de las interfaces basadas en modelos
de datos y de tareas. A diferencia de otros métodos MBUID,
la interfaz de usuario se divide en dos: la interfaz de usuario
de negocio - BUI y la interfaz abstracta, concreta y final. La
BUI generalmente representa formularios en papel, que
soportan la entrada de información a los procesos, de manera
que sean realistas e independientes de la tecnología, así como
de la navegación [5], sirviendo de soporte para el diseño de
la GUI del sistema.
Para apoyar el desarrollador de la BUI, y teniendo en
cuenta que muchos negocios manejan datos similares, se
propone un proceso orientado desde los datos, que haciendo
uso de patrones de datos, asociándoles plantillas de
presentación y modelos de interacción, conformando así una
triada que dirija el desarrollo de la interfaz de usuario, la cual
sirva como un activo de valor que sea utilizada por todos
aquellos que componen el equipo de desarrollo de un
producto software, teniendo en cuenta que normalmente los
desarrolladores no construyen programas o soluciones desde
cero, sino que suelen emplear patrones apropiados, dentro
del contexto de una problemática en particular [6].
Esta propuesta soportada por el marco metodológico TD-
MBUID y su herramienta CIAT que brinda soporte a este
proceso de desarrollo de la interfaz de usuario mediante el

2. 978-1-5090-2966-2/16/$31.00 ©2016 IEEE
uso de modelos, busca promover la usabilidad mediante la
combinación de modelos de DataForm y de la triada
conformada por patrones de Datos-Presentación-Interacción.
Asimismo, con este método se busca mejorar el tiempo y
calidad del diseño de los prototipos, así como generar, en
cuestión de minutos, propuestas de BUI que permitan su
validación con los clientes, de manera temprana.
Este artículo se encuentra estructurado de la siguiente
manera: Inicialmente se introducen los conceptos de Interfaz
de usuario de negocio y DataForm; a continuación, se
describe los elementos que conforman la triada propuesta y
el proceso para identificar sus elementos; posteriormente se
explica el proceso de generación de la Interfaz de usuario de
negocio a partir de la triada y finalmente se exponen las
conclusiones y los trabajos futuros.
II. INTERFAZ DE USUARIO DE NEGOCIO
La interfaz de usuario de negocio – BUI- fue definida en
el marco metodológico TD_MBUID, representa una
presentación de los datos persistentes, orientada al usuario y
soporta el contexto de uso relacionado con un grupo de
actividades y que posee la información necesaria para
ejecutar dichas actividades [5].
El diseño de la BUI se lleva a cabo a partir de los datos
del modelo de dominio de negocio: el modelo de datos y las
descripciones de las tareas, a partir de estos y basados en el
modelo mental del usuario se realiza el diseño de ventanas
que permitan la presentación realista de los datos del
dominio que soportan las tareas e independiente de la
tecnología. Si una tarea requiere una ventana ya identificada,
simplemente se reutiliza dicha ventana.
Esta interfaz, se bosqueja en términos de elementos de
interfaz de usuario concretos (pantallas en papel) debido a
que se asemejan a las pantallas finales en el ordenador, con
detalles gráficos y con contenidos realistas de los datos. La
organización de la interfaz de usuario de negocio se realiza
preservando las diferentes leyes de Gestalt: la ley de
proximidad, ley de cierre, la ley de la buena continuación y
la ley de la similitud. Contrariamente a la mayoría de
enfoques de diseño, en TD-MBUID se planifican las
funciones después de haber diseñado las presentaciones
iniciales de los datos (IU de negocio). La experiencia ha
demostrado que esta secuencia ofrece mejores resultados en
sistemas complejos [7].
III. DATA FORM
Este componente definido por [8], es el encargado de
darle persistencia a la forma (interfaz de usuario de negocio)
y es una parte fundamental en el desarrollo de interfaz de
usuario de negocio TD-MBUID. En él se especifican las
relaciones de contención y adyacencia entre los datos y los
elementos de la forma involucrados en la interfaz, en él se
captura la semántica de los datos y la semántica de la forma.
El DataForm se convierte en una pieza clave en el
modelado de la interfaz de usuario ya que se puede tener
fragmentos de los datos que serán de interés para el usuario
y serán mostrados en la interfaz, ya que es un modelo de
información de contexto que representa los datos persistentes
en la interfaz que serán mostrados al usuario y es muy útil
para la especificación de la información que será visualizada
y manipulada en la interfaz de usuario independiente de la
manera en cómo son modelados y utilizados en el dominio.
Los componentes que intervienen en la creación del
Modelo Data Form (ver Figura 1) son: Domain data es el
componente donde se encuentra todos los datos del negocio
la cual es capturada por el diseñador o desarrollador, El User
Interface, representan la interfaz en papel de acuerdo a la
visión que el usuario tenga del negocio(Mental Models), de
cómo percibe y estructura la información; y por otro lado el
componente DataForm que se crea haciendo un proceso de
mapeo (mapping) haciendo uso del lenguaje del DataForm
de acuerdo a la interfaz de usuario y los datos provenientes
del dominio que serán visibles en la interfaz de usuario
Figura 1 Componentes intervienen en la creación del
Modelo Data Form[8]
Para el desarrollo de la interfaz de usuario basado en el
modelo DataForm se utiliza el patrón MVVM (Modelo -
Vista - Modelo de la Vista). Este patrón de diseño propuesto
por Microsoft, proporcionar una separación entre los
controles de la interfaz de usuario y su lógica [9].
IV. COMPOSICIÓN DE LA TRIADA
El proceso de generación de la interfaz de usuario de
negocio que se propone a partir de una triada conformada por
patrón de datos, el cual representa una solución a un
problema de modelado de un concepto de negocio; plantilla
de presentación, ofrece una propuesta de formulario para
representar los conceptos del patrón de datos; y por último
un modelo de interacción, que indica como el usuario puede
interactuar con el formulario (ver Figura 2).
Se busca proponer un enfoque de ingeniería en el cual
todas las actividades se desarrollen a partir de esta terna de
elementos.

3. 978-1-5090-2966-2/16/$31.00 ©2016 IEEE
Figura 2 Componentes del Método
Para su definición, como se aprecia en la Figura 3, se
define un proceso que permita a partir de un patrón de datos
y a partir del modelo mental del usuario identificar los
conceptos que pueden variar del patrón y el Paper Form
(plantilla de presentación) para representarlos, para
posteriormente capturar la forma como el usuario quiere
interactuar con el formulario.
Figura 3 Proceso para la definición de la plantilla de
presentación y del modelo de interacción
Este proceso busca promover la usabilidad, al vincular al
usuario en las actividades necesarias para la definición de los
datos, formularios y modelos de interacción a partir de los
cuales se logra la generación de la interfaz de usuario de
negocio.
A. Definición de Patrones de datos y variabilidades
Un patrón de datos es un modelo que representa una
solución recurrente a un dominio de problema específico, es
decir, describe y especifica cómo se puede modelar un
concepto de negocio, ofrece una solución probada a un
problema común documentado individualmente en un
formato consistente [10].
Como se puede observar en la Figura 3, el proceso inicia
con la identificación o especificación de patrones de datos,
para esto, se puede recurrir a dos caminos: la observación y
experiencia, que permita encontrar semejanzas en diferentes
soluciones de un mismo problema y a partir de esto lograr la
abstracción de la esencia de la solución [11]; la utilización de
colecciones existentes definidos por autores de reconocida
experiencia y conocimiento.
En este trabajo se utiliza esta segunda opción,
identificando a través de una revisión del estado del arte las
colecciones de patrones de datos propuestas en [10, 12-14], a
partir de las cuales se clasifican y se seleccionan los patrones
a usar (ver tabla 1 ). En la Figura 4, parte superior se puede
observar un ejemplo, el patrón Ubicación geográfica.
Clasificación Patrón
Que Producto
Orden – Detalle
Documento
Empleo
Cómo Pago
Dónde Ubicación Geográfica
Dirección Postal
Quién Actor
Unidad Organizacional
Tabla 1 Catalogo de Patrones
Una vez identificado el patrón, se analiza su aplicación
en diferentes contextos para determinar su variabilidad, es
decir, se analiza los cambios a nivel de datos o relaciones
que requiere el patrón para satisfacer las especificidades de
problemas específicos, pero sin perder la esencia de la
estructura del patrón en sí, en la Figura 4 parte inferior (a y
b) se exponen dos variabilidades del patrón, cada una para
contextos diferentes.
Figura 4 Patrón de Datos Ubicación Geográfica
B. Plantilla de Presentación
La presentación de la interfaz de usuario de negocio está
dada por los datos y la forma, esta última capturada por el
Paper Form (Formulario en Papel). El Paper Form describe
la estructura de la presentación, ligada a la semántica de los
datos, y muestra un diseño visual de manera realista de los
datos que soportan la tarea [5].
En consecuencia, por cada variabilidad del patrón de
datos un diseñador visual interactúa con usuarios
solicitándoles que a partir de una tarea, por ejemplo, defina
una dirección postal, que identifique los conceptos que
necesita y un formulario en papel para representar dichos
conceptos (Figura 5.Plantilla de Presentación).

4. 978-1-5090-2966-2/16/$31.00 ©2016 IEEE
En este paso se lleva a cabo el diseño previo de las
pantallas1
que el usuario debe imaginar que están detrás de la
pantalla física - en la parte posterior del sistema. a partir de
los datos del patrón, de los conceptos y el paper form que el
usuario identificó.
Figura 5 Ejemplo Plantilla de Presentación Dirección
Postal
Este proceso puede dar lugar a que un patrón de datos se
le asocien múltiples plantillas de presentación, las cuales
pueden ser sometidas a prueba de recorrido cognitivo para
validarla y promover su usabilidad.
C. Modelo de interacción
Con el formulario en papel definido y a través del apoyo
tecnológico, se le solicita al usuario que interactúe con el
formulario que definió y que exprese que le gustaría que el
sistema realizara cuando lo está diligenciando, un ejemplo de
las funcionalidades que puede pedir un usuario se expone en
la Figura 5, esto es grabado en video para ser revisada y
analizada; a partir de la forma como el usuario diligencio el
formulario se determina el modelo de interacción.
Se pretende genera un modelo simple de la interacción
que permite generar un realismo mayor cercano a la interfaz
final que el usuario se imagina que tendrá el Sistema,
buscando promover la usabilidad de las interfaces de usuario
finales.
D. Definición de la combinación entre patrones
Una vez definidas las variabilidades y presentaciones de
cada patrón se examinan cada una de ellas para consolidar
cuáles patrones y/o variabilidades se relacionan entre sí y por
lo tanto qué presentaciones se pueden reutilizar en el
formulario de otro patrón. Por ejemplo, como se muestra en
la Figura 6, el patrón dirección postal, se puede relacionar
con el patrón ubicación geográfica.
1
Se usa el término pantalla para referirse al modelo mental
que se forma el usuario respecto de los datos que
manipula. No se quiere utilizar el término ventana como
componente concreto de interfaz de usuario.
Figura 6 Ejemplo Combinación de Patrones
Las combinaciones entre patrones surgen como resultado
del proceso de definición de los elementos de la triada y de la
documentación de la fuente del patrón, en la cual indica con
qué otros patrones se pueden relacionar, esto es fundamental
para definir y restringir cuales combinaciones serán
soportadas y evitar relaciones incoherentes entre los patrones.
V. PROCESO DE GENERACIÓN DE LA INTERFAZ DE
USUARIO
Definida la forma de implementar los elementos de la
triada se procede a definir el proceso de generación de la UI
a partir de estos elementos, se busca proponer un enfoque de
ingeniería en el cual todo el proceso de desarrollo sea guiado
por la triada.
El proceso de generación de la interfaz de usuario de
negocio propuesto se centra en los datos y en la forma de los
datos, por lo tanto se adopta para su automatización el
DataForm y en consecuencia la aplicación de patrón Model
View View Model[9].
A. Definición de DataForm para cada triada
El DataForm es un componente fundamental en el
proceso propuesto de generación de la interfaz de usuario, su
importancia radica en el hecho de que separa los datos del
dominio de los datos de la interfaz, representa la información
que será visualizada y manipulada en la interfaz de usuario
independiente de la manera en cómo es modelada en el
dominio [8].
Por lo tanto, un mismo dominio puede soportar múltiples
presentaciones, siendo el DataForm quien funciona como
intermedio entre estos componentes, además permite
mantener una correcta relación e integridad entra los datos
que se muestran provenientes del dominio de la aplicación.
Una vez definido los elementos de la triada, se continua
con la construcción de un modelo DataForm, el cual como
se menciona en la sección 0, se compone de tres elementos:
Domain data que representa todos los datos del negocio, el
User Interface (Form), representa la forma de la interfaz de
acuerdo a la visión que el usuario; y por otro lado el
componente DataForm quien representa los datos de la

5. 978-1-5090-2966-2/16/$31.00 ©2016 IEEE
forma, estos componentes se definen a partir de los
elementos de la triada.
En la Figura 7 se puede observar este proceso, en el cual
el patrón de datos corresponde al componente del domain
data, ya que representa los datos a nivel de negocio, la
plantilla de presentación representa la Form, modelo mental
capturado del usuario y el modelo DataForm que se
construye a partir de estos dos elementos, en este último se
implementa la lógica de programación necesaria para
exponer las funcionalidades del modelo de interacción, en
caso de mezclar varios patrones, el DataForm será el
resultado de la combinación de las presentaciones
seleccionadas de cada uno de ellos.
En consecuencia, se debe realizar, tal como se puede
apreciar en la Figura 7, un domain data por cada variabilidad
de un patrón de datos y un DataForm por cada plantilla de
presentación definida, en el cual se implementa el modelo de
interacción haciendo uso de las funcionalidades que ofrece
este componente, el cual permite incluir bloques de lógica de
programación que implementen la funcionalidad requerida
en el comportamiento de algún elemento, por ejemplo, un
listado municipios se filtre por el valor de un departamento.
Figura 7 Proceso de construcción del DataForm a partir
de la triada.
B. Generación de internfaz de usuario
Definidos los datos del dominio, la plantilla de
presentación y el modelo de interacción (las dos últimas
implementadas directamente en el DataForm), se puede
derivar de esta triada el prototipo de interfaz, automatizando
su generación a través de herramientas basada en modelos,
derivando a partir de transformaciones los componentes del
patrón Model View View Model.
Como se expone en la Figura 8, a partir del domain se
deriva el model, que incluye todos los datos requeridos para
modelar el dominio de la aplicación. Del DataForm se deriva
la view, responsable de definir la estructura, el diseño y el
aspecto de lo que el usuario ve en la pantalla, representando
el prototipo de la interfaz de usuario de negocio, asimismo de
este componente se deriva el view model, que actúa como
intermediario entre la view y el model, recuperando y
persistiendo los datos del modelo, de acuerdo a la forma de
la vista.
Figura 8 Proceso de Generación de la BUI a partir de la
Triada
El proceso de generación de la interfaz de usuario esta
soportado por una herramienta implementada (Figura 9)
como un plugin de Eclipse mediante el uso de EMF (Eclipse
Modeling Framework) y GMF (Graphical Editing
Framework), la cual permite visualizar y seleccionar las
distintas triada y a partir de ellas haciendo uso de
transformaciones generar los componentes del view (Figura
11.a), model (ver Figura 11), y view model.
Figura 9 Herramienta de Soporte al Proceso

6. 978-1-5090-2966-2/16/$31.00 ©2016 IEEE
En la Figura 10 se puede observar que el modelo de datos
generado incluye la combinación de los conceptos de los
patrones seleccionados: producto (a), orden detalle (b),
persona natural(c) y dirección postal (d). Asimismo, en la
Figura 11.a se puede observar un ejemplo de la interfaz
generada (view) a partir del DataForm (del cual deriva
también el view model) en la cual se exponen de manera
realista registros en los formularios y asimismo la interacción.
Figura 10 Ejemplo del Modelo de datos Generado a
partir del patron.
Los registros mostrados son tomados de un conjunto de
producciones. Al referirnos a producciones hacemos alusión
a la creación de instancias (objetos) de las clases de los
patrones de datos (de las cuales se deriva el model), de tal
manera, que en el formulario se puedan precargar y
visualizar dichos registros.
Cada patrón de datos tiene asociado un banco de datos,
por lo tanto, las producciones se cargan al domain de manera
automática al usar la herramienta propuesta, no obstante,
pueden ser creada de manera manual haciendo uso de la
facilidad del eclipse (ver Figura 11.b) que nos permite
visualizar el modelo y adicionar instancias a cada una de las
clases.
Figura 11 Ejemplo Interfaz Generada
Esta propuesta de generación de interfaz y la herramienta
de soporte permite realizar una validación casi inmediata con
el usuario, esto en razón a que se presenta el prototipo con
datos realistas. Dicha prueba se podrá hacer de muchas
maneras; por ejemplo, aplicando pruebas de
comprensibilidad (una prueba de usabilidad simplificada), en
la cual se verifican los accesos e interacción a los elementos
de las pantallas y los datos que se requieren para llevar a
cabo la tarea.
VI. CONCLUSIONES
La incorporación al proceso de desarrollo de la interfaz
de usuario de negocio de los elementos de la triada,
contribuye a la disminuir la dificultad de capturar el modelo
mental de los usuarios, ya que el desarrollador de la interfaz
de usuario no empieza desde cero su labor, ya que dispone de
un catálogo de soluciones preestablecidas para modelar los
conceptos del negocio, asimismo una propuesta que brinde
una presentación realista de los datos que los conforman.
Luego de la realización de diferentes pruebas de
factibilidad se logró concluir que la generación de prototipos
de interfaces de usuario a partir de la triada propuesta y de
DataForm, permite alcanzar interfaces de usuario de negocio
funcionales y con datos reales en menos tiempo en
comparación a otros métodos convencionales como la
realización de forma manual.
Esta facilidad permite validar casi inmediatamente el
prototipo de interfaz de usuario de negocio, permitiendo
mejorar la calidad y precisión de la interfaz de usuario final.
Como trabajo futuro u oportunidades de mejora se
identifica la posibilidad de ampliar el catálogo de patrones e
incluir modelos independientes que representen patrones de
interacción que permita la implementación automática de la
lógica de programación requerida para exponerla en la
interfaz generada, asimismo, realizar una validación del
método propuesto con desarrolladores para evaluar su
aplicabilidad en empresas de desarrollo de software.
REFERENCES
1. Constantine, L.L. and L.A.D. Lockwood, Software for
use: a practical guide to the models and methods of
usage-centered design1999: ACM Press/Addison-
Wesley Publishing Co. 579.
2. Moreno, P.J.M., Especificación de la Interfaz de
Usuario: De los Requisitos a la Generación
Automática, in Departamento de Sistemas
Informáticos y Computación2002, Universidad
Politecnica de Madrid.
3. Tran, V., UI generation from task, domain and user
models: the DB-USE approach, in Proceedings of
the 2nd ACM SIGCHI symposium on Engineering
interactive computing systems2010, ACM: Berlin,
Germany. p. 353-356.
4. Vanderdonckt, J. and F.M. Simarro, Generative pattern-
based design of user interfaces, in Proceedings of
the 1st International Workshop on Pattern-Driven
Engineering of Interactive Computing Systems2010,
ACM: Berlin, Germany. p. 12-19.

7. 978-1-5090-2966-2/16/$31.00 ©2016 IEEE
5. Orozco, W.J.G., Marco de Desarrollo de Sistemas
Groupware Interactivos Basado en la Integración
de Procesos y Notaciones, 2010, Escuela Superior
de Informática de Ciudad Real.
6. Kaisler, S.H., Software Paradigms2005, London: John
Wiley & Sons, Inc.
7. Lauesen, S., User Interface Design:A Software
Engineering Perspective2005, Harlow: Addison-
Wesley. 623.
8. Muñoz, R.A. and W.J.G. Orozco, Framework para la
ejecución de modelos ejecutables específicos del
dominio, 2014: Universidad del Quindío. p. 33.
9. Microsoft. The MVVM Pattern. 2012 [cited 2015; The
MVVM Pattern]. Available from:
https://msdn.microsoft.com/en-
us/library/hh848246.aspx.
10. Eriksson, H.-E. and M. Penker, Business Modeling With
UML: Business Patterns at Work1998: John Wiley
& Sons, Inc. 480.
11. Jaquero, V.M.L., Interfaces de Usuario Adaptativas
Basadas en Modelos y Agentes de Software, in
Sistemas Informáticos2005, Universidad Castilla -
La Mancha. p. 326.
12. Silverston, L. and P. Agnew, The Data Model Resource
Book: Universal Patterns for Data Modeling2009:
Wiley Publishing. 648.
13. Blaha, M., Patterns of Data Modeling2010: CRC Press.
14. Hay, D.C., Data Model Patterns: A Metadata Map: A
Metadata Map2010: Elsevier Science.