=Paper=
{{Paper
|id=Vol-159/paper-4
|storemode=property
|title=Integrate Model-driven UI with Business Transformations: Shifting focus of Model-driven UI
|pdfUrl=https://ceur-ws.org/Vol-159/paper4.pdf
|volume=Vol-159
|dblpUrl=https://dblp.org/rec/conf/uml/SukaviriyaKNH05
}}
==Integrate Model-driven UI with Business Transformations: Shifting focus of Model-driven UI==
https://ceur-ws.org/Vol-159/paper4.pdf
Integrate Model-driven UI with Business Transformations:
Shifting Focus of Model-driven UI
Noi Sukaviriya, Santhosh Kumaran, Prabir Nandi, Terry Heath
IBM T.J. Watson Research Center
19 Skyline Drive
Hawthorne, NY 10532
{noi, sbk, prabir, theath}@us.ibm.com
ABSTRACT solutions. It proposes to capitalize on formal business process
This paper is not a technical paper that presents a new model- modeling, turning formal specifications of process inputs and
based UI technique. It is about a project that revisits model- outputs into transition-based business objects. These objects are
driven UI design techniques in the context of business process used to automate code generation and service mapping deemed
modeling and business transformation. We have embarked on necessary to retrieve and save information for such processes. By
model-driven business transformation research and are beginning tying business solutions close to business process descriptions,
business process models become a kind of high-level
to tackle the model-driven UI design portion of it. For this aspect,
programming tool.
the approach we are taking is drawn based on our extensive
experience as user interface designers, as well as our experience Model-driven UI has always been about explicitly representing
within the past few years with business transformation components that makes up UIs from user tasks to interaction
engagements with real customers. The paper describes 4 different techniques. According to Myers, Hudson & Pausch [5], the
perspectives in our approach that shift the focus of model-based motivation behind model-based UI design tools was to enable
UI tools from just producing the end results to better supporting programmers who, without user interface design experience,
UI designers with a faster, model-driven UI design process. could implement only the functionality and let user interfaces be
automatically generated. This attempt to automate from
functionality specification is parallel to model-driven business
Categories and Subject Descriptors transformation research. The UI models and the automation, one
H1.2 [Models and Principles]: User/Machine Systems – could say, entitle model-based UI as “the” approach to add agility
Software psychology. H5.2 [Information Interfaces and to building UI solutions. But we still have more work to do to
Presentations]: User Interfaces – Graphical user interfaces, turn this concept into reality.
methodology, user-centered design. D.2.2 [Software
In the industry, UI design and development still lacks models and
Engineering]: Design Tools and Techniques – User interfaces.
automation. Based on our experience for the past few years, the
traditional UI design and development process typically takes 65-
General Terms 80% of the overall development time in a model-driven business
Design, Human Factors. transformation project. While model-based UI has the potentials
to provide an impact in large IT projects, its approach in past
research focusing UI design and development as a stand-alone
Keywords process (ranging from task modeling to data modeling all the way
Model-based UI; Business Process Integration; UI Design Process
to UI implementation and application action binding) is not quite
appropriate. The UI design and development process has to be an
1. INTRODUCTION integral part of and contribute appropriately at various places in
Model-driven architecture [1, 2] addresses the need for the the development cycle. This paper addresses the approaches we
industry to add agility to technology solutions. By are taking to establish the model-driven UI process in this
componentizing IT solutions into reusable components, IT direction.
solutions can supposedly be reconfigured to meet the changing
demand of the world. On-going research on model-driven 2. APPROACHES
business transformations [3, 4] embraces model-driven As mentioned earlier, we have been involved with and have
architecture; it attempts to use business processes to automate IT delivered business transformation projects. These projects start
off with modeling customer’s business processes, both the
Permission to make digital or hard copies of all or part of this work for processes as they exist today and the new processes which we
personal or classroom use is granted without fee provided that copies are help design to address customers’ problems. The projects then
not made or distributed for profit or commercial advantage and that
proceed to designing, building, and delivering IT solutions
copies bear this notice and the full citation on the first page. To copy
otherwise, or republish, to post on servers or to redistribute to lists, according to the new business design. This process also includes
requires prior specific permission and/or a fee. designing and implementing user interfaces. Our basis for
MDDAUI’05, October 2, 2005, Montego Bay, Jamaica. competition in the marketplace is speed and quality of services of
Copyright 2004 ACM 1-58113-000-0/00/0004…$5.00. this kind of business engagements. While model-driven business
transformations [3, 4] tools are being developed to speed up the
process, not much is happening to support the UI design side. complex interactions such as games and multimedia. However,
The UI design process has become relatively time-consuming, we believe the work on traditional GUIs is not done yet. As a
especially when other parts of the solutions can be automated matter of fact, model-based UI has not started as a common
through models. Our goal is to reduce the time and increase the practice in the industry as a whole.
agility to the UI design process. Our approach is to underlay the
Most of the IT solutions our company delivers are still desktop
traditional UI design process with UI models and interweave the
applications, more likely web-based applications in recent years.
model-driven UI process with the business transformation
The good news is that the design of web-based UIs, particularly in
practice. Notice the significance of the term “underlay” we use as
business applications, has somewhat converged making the scope
it implies that we do not intend to change the UI design practice;
of interface designs rather well-defined. Business applications
we’d rather enhance it.
deal with lots of data entering and display, giving model-based UI
In this section, we will discuss in more detail about our an opportunity to do what it can do best - automation. Please
approaches as following. First we explain why we believe that see Section 2.3 for more detail on this subject matter.
model-based UI still needs to address traditional GUIs. Then we
Interestingly, there is a drive towards role-specific UIs from two
discuss how model-driven UI design and business process
different sources. First, the rise of portal-based style of design is
modeling have much in common, hence should leveraged off each
amplifying the requirements to build user-role specific interfaces.
other. Then we follow on to address how and where some of the
Secondly, when modeling business process, user roles are
known model-based UI techniques would be applicable. Finally
specifically defined for each business task. This makes it easy to
we discuss the importance of understanding and focusing on the
understand and separate out user roles – who are conducting
users of the model-based UI design tools and close the paper with
which tasks in the process – hence making it rather easy to define
a hint on how model-based UI would be a probable approach for
the scope of role-specific user interfaces. In a project in which
reusable UI patterns.
multiple user roles must be specially designed for, it is very
2.1 Traditional GUIs is still in High Demand tedious and time-consuming design process – a pain point for user
While earlier model-based UI design tools focused on automatic interface designers. Managing the design is more complex.
generation of user interface [6, 7], we have seen the shift in later While the principal of the user interface design has not changed
model-based UI research to address limited automatic generation, over the years; the design process has become richer with more
emphasizing user interface transformations among small devices depth. Designers often have to juggle to maintain consistency
[8]. This shift grew out of the popularity in PDAs and cellular among user roles while they can, at the same time attempt to pan
phones hence increased the need to quickly create similar UI on off each design to appropriately support the unique set of
several platforms. These research prototypes centered on functionality required by each user role. Tweaking the design in
generating multiple small platform interfaces off of common UI this case is extremely cumbersome. This is one area where
models [9, 10, 11, 12]. Though this is mostly GUIs, the smaller having a model of user roles and user tasks with some automation
interfaces make automatic generation more manageable, we can help provide a semantic structure to support the design
believe. On one hand, it is essential that this MDDAUI workshop process.
pushes model-based UI agenda further into multi-modal and more
Table 1. Diagram Showing Parallel Activities between Business Analysts and UI Designers
Business Analysts UI Designers
Conduct business analysis and model business
Conduct user research and model user tasks
process & tasks
Document user roles quite extensively including
background, motivations, and role descriptions
Have interests in what information people need to
Have interests in task inputs & outputs as
perform tasks and what they need to perform a task
business transactions
and to complete a goal
Identify and model business artifacts Identify business artifacts and personal artifacts
Pay attention to overall user experience as well as
task interaction experience
Demonstrable through low-fidelity mock-ups and
Demonstrable by use case scenarios
storyboard, and high-fidelity mock-ups
Outputs validated by domain experts and
Outputs validated by domain experts, and end-users
business stakeholders
End results must meet business objectives and enable
End results must meet business objectives –
users to perform tasks with better effectiveness,
business objectives vary from solution to solution
efficiency and experience
can be systematically complex, is an easily achievable task by
2.2 Work with Business Process Modeling human designers with proper visual design training. There is no
Business transformation projects are becoming common in the
point in creating such a complex system that doesn’t do a good
IT industry. Explicitly capturing business process models has
job for skills that are not lacking. As a matter of fact from the
become a common practice to capture and analyze parameters
author’s 10-year experience as a UI designer, this is a rather fun
that drive strategic analyses behind business transformations.
part of the work that should not be taken away from the
As mentioned earlier, model-driven business transformation
designers. So much creativity can be used in this part of the
research [3, 4] uses business processes to help automate IT
design process making automatic generation of large UI layouts
solution composition. Our experience with business
not a probable goal.
transformation projects showed that business process modeling
has many common components with the user interface design Tools commonly used to deliver UI design today such as Adobe
process. Table 1 compares business process modeling and the Illustrator, Photoshop, Macromedia Director, Flash, etc. are
UI design process – the elements in the same row are those visual layout tools and focus their support for designing high
components that are very similar. As we can see, these common definition visual UI designs. Our current study of the UI design
elements in fact complement each other. As a matter of fact, process shows that designers tend to go to these tools when their
our study of UI designers showed that the task model UI hand sketches start to get messy or they start to loose sense of
designers often draw before starting the design look very similar the screen boundary. Since these tools are visual design tools,
to business processes and vice versa. Business processes can they tend to distract the designers with visual details but yet
indeed serve as an almost perfect starting point for the UI design their precise layout support is valuable. The designers in the
process. study commonly agreed that the level of visual detail was not
necessary at this stage of the design. They also voiced in unison
While business processes provide a framework for how business
that there was lack of support for the UI design in the early
tasks are sequenced and who perform them, they are also
phase. The UI mocking up process in general is still rather
considered part of the business requirements – this is how
cumbersome today.
business strategist and analysts believe the organization should
be structured. Very importantly, UI designs are required to This is where we believe model-based UI techniques can come
follow these process models. Significantly, the UI design in handy. Automatically mapping data components to UI
process comes in to enhance the process model with human components at times can be very useful if designers can use it
aspects necessary to create richer user experience design. It can piecemeal as part of the design process. Such a system was
also enhance the data aspect of the business process to cover all built many years back [7] that would be a straightforward
necessary data items deem necessary for the end-users to carry integration into a design tool. Design transformations such as
out business tasks. Collaboration from the business and user- those for small devices [8, 9, 10, 11, 12] can be used to
centered perspectives in general enhances the quality of the transform a small portion of a design at a time. Regeneration of
solution being designed. Being able to understand the UI from common UI models such as those in [9, 10, 11, 12] can
relationship among UI designs and business processes is crucial be used to help designers cranking up design alternatives.
in keeping IT design align with business requirements. However, these techniques have to be an integral part of the
design process that is driven by the designers. Model-based UI
Some model-based UI research systems use the reverse-
research tends to address the design process as a black box.
engineering approach to extract semantic model of existing UIs
That is, some information is given to model-based systems on
then map them to new designs [13, 14, 15]. Business process
one end; the automatic generations then produce the UIs on the
models can be very similar to the semantic model of these
other end and the process is done. This monolithic approach
systems. It consists of user tasks, task inputs and outputs, input
needs to be teased apart and brought in to support the design
and output attributes and the role players. Techniques for
process at various points when they are really needed. It should
mapping from common semantic/task models to new UI design
be up to the designers to call on an appropriate technique when
can be useful in bootstrapping the UI design from business
they need it, and for them to call out when a design is “done.”
process models.
One caution though – it is not always the case that business 2.4 Differentiate and Support the Role
process models will end up being defined at the same level as Players in the Tools
the semantic model in model-based UIs. Our experience Model-based UI design and development spans from integrating
showed that in some cases business processes are stated at a high-level information such as user tasks, to recording UI design
much higher level and may need to be decomposed to be choices for interaction techniques, screen layouts, to generating
comparable to those of user tasks in model-driven UI. code and system elements for supporting the design at run-time.
That is quite a wide coverage. We often look at the model-
2.3 Focus on Current Lack of Support for based UI systems as single systems. They need certain inputs,
UI Designers we give the right information to them, and they produce UIs.
An earlier model-based UI design tool was very ambitious Model-based UI researchers are often designers, software
attempting to intelligently map UI components from (enhanced) engineers, and sometimes programmers too. The interfaces to
data type definitions and automatically laying out the entire these model-based UI research prototypes reflect this
screen [6]. While the attempt was noble, it is not likely to be improbable continuum of skills in the real world.
practical today. There has been a surge in user interface design
talents within the past decade. Designing screen layouts, while
We are taking the approach that there are different role players [2] Kleppe, A., Warmer, J., Bast, W. MDA Explained: The
in making IT solutions, from business analysts, to UCD Model Driven Architecture – Practice and Promise.
practitioners, UI designers, solution architects, application Addison-Wesley, Reading, MA (2003)
developers, deployment and testers, etc. This approach is not a [3] Kumaran, S. Model-Driven Enterprise. Proceedings of the
revolutionary thought, but it is a thought that is often neglected. Global EAI (Enterprise Architecture Integration) Summit.
Exercising this thought throughout the process of designing (2004) 166-180
model-based UI tools are very critical to general acceptance of [4] Kumaran, S., Nandi, P.; Adaptive Business Objects: A
the tools by practitioners. Currently, we are very cautious of New Component Model for Business Integration.
every interaction step we call upon in our model-based tool Proceedings of ICEIS 2005: 7th International Conference
design. We attempt to be clear who the role players for these on Enterprise Information Systems (2005)
steps are. This fundamental grounding will allow us to [5] Myers, B.; Hudson, S.E., Pausch, R. Past, Present, and
choreograph the UI design process appropriately to our user Future of User Interface Software Tools. TOCHI : ACM
roles. For example, we only expose design steps for the UI Transactions on Computer-Human Interaction. Volume 7
designers and back end steps to solution architects. We can hide (2000) 3-28.
unnecessary technical information from UI designers and at the [6] Kim, W.C., Foley, J.D.; Providing High-level Control and
same time expose the needed information about the UI design to Expert Assitance in the User Interface Presentation Design.
solution architects who will finish up the design and Proceedings of CHI 93: ACM Conference on Human
implementation for the overall IT solution. Factors in Computing Systems (1993) 430-437
[7] de Baar, D., Foley, J.D., Mullet, K.E.; Coupling
2.5 Model-based UI as an Infrastructure for Application Design and User Interface Design.
Proceedings of CHI 92: ACM Conference on Human
Reusable Components Factors in Computing Systems (1992) 259-266
Finally, we are seeing a shift in the industry towards reusing [8] Nichols, J., Myers, B.A., Litwack, K.; Improving
assets to increase competition through competency. Software Automatic Generation with Smart Templates. Proceedings
engineering is a crucial part in driving this effort. Similarly to of ACM Conference on Intelligent User Interfaces (2004)
how model-driven UI can be thought of as the approach to 286-288
enable agility in the UI design process, UI models are also the [9] Banavar, G., Bergman, L.D., Gaeremynck, Y., Soroker, D.,
appropriate step towards capturing reusable UI components and Sussman, J.: Tooling and System Support for Multi-device
patterns. It is essential that the models that we design today will Applications. Journal of Systems and Software, Vol. 69
support reusable UI design patterns in the future. Issue 3. (2004) 227-242
[10] Mori, G., Paterno, F., Santoro, C.; Tool Support for
3. SUMMARY Designing Nomadic Applications. Proceedings of ACM
Our motivation to make the model-driven UI design process Conference of Intelligent User Interfaces (2003) 141-148
work stems from the need to reduce the time and the need to [11] Nichols, J., Myers, B.A., Higgins, M., Hughes, J., Harris,
increase the speed and quality of the IT design services in T.K., Rosenfeld, R., Pignol, M.; Generating Remote
business transformation engagements. Model-based UI research Control Interfaces for Complex Appliances. Proceedings
has been around for almost two decades; its research potentials of ACM Conference on user Interface Software and
have been demonstrated through numerous publications. We Technology (2002) 161-170
have an opportunity to bring model-driven UI into model-driven [12] Eisenstein, J., Vanderdonckt, J., Puerta, A.; Applying
environments for creating IT solutions. However, more work Model-based Techniques to the Development of UIs for
needs to be done. Mobile Computers. Proceedings of ACM Conference of
We draw upon our experience as user interface designers to Intelligent User Interfaces (2001) 69-76
revisit model-based UI techniques as well as to consider future [13] Bouillon, L., Vanderdonckt, J., Chow, K.C.; Flexible Re-
benefits model-based UI has to offer. As we are designing a engineering of Web Sties. Proceedings of ACM
model-driven UI design process and integrating it with the Conference on Intelligent Interfaces (2004) 132-139
business transformation practice, we draw out essential [14] Bandelloni, R., Paterno, F.; Flexible Interface Migration.
considerations that we believe will make this effort work. Proceedings of ACM Conference of Intelligent User
These considerations on 1) dealing with complexity and breadth Interfaces (2004) 148-155
of designing graphical UIs today, 2) integration with business [15] Gaeremynck, Y., Bergman, L.D., Lau, T.; MORE for Less:
process modeling, 3) picking the right spots to support in the Model Recovery from Visual Interfaces for Multi-device
design process, and 4) clarity of users of the model-driven UI Application Design. Proceedings of ACM Conference of
tools, are drawn from our past UI design experience, our recent Intelligent User Interfaces (2003) 69-76
business transformation experience, as well as our initial study [16] Puerta, A., Cheng, E., Ou, T., Min, J. ; MOBILE : User-
to understand the design process. centered Interface Building. Proceedings of CHI 99: ACM
Conference on Human Factors in Computing Systems
(1999) 426-433
REFERENCES [17] Paterno, F., Mancini, C. Model-based Design of
[1] Miller, J., Mukerji, J. (ed.): MDA Guide Version 1.0.1. Interactive Applications. ACM Intelligence Magazine
Object Management Group (2003) Winter (2000) 26-37.
http://www.omg.org/docs/omg/03-06-01.pdf