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