Skip to main content
SpringerLink
Log in

An empirical study of rules for mapping BPMN models to graphical user interfaces

  • Published:
Multimedia Tools and Applications Aims and scope Submit manuscript

Abstract

Generation of Graphical User Interfaces (GUIs) from Business Process Model Notation (BPMN) models is a step manually performed by an analyst in any information system development. By analyzing twelve BPMN projects and comparing them with their associated GUIs, a set of rules for mapping BPMN models expressed in terms of BPMN patterns to GUIs has been identified. This paper provides three main contributions: an empirical validation of these mapping rules; a classification of their alternatives to identify which ones support usability; and the validation of this classification. We conducted an experiment to study whether 43 participants apply the same rules as previously identified with response variables as: correctness of the rules, their completeness, perceived usefulness and intention to use. To select the mapping rules alternatives that effectively impact usability, we classified them according to empirically validated usability guidelines found in the literature. We also validated them with participants and response variables as: correctness of the guidelines, their perceived usefulness and intention to use. Correctness of the mapping rules was assessed positively (74%), as well as their completeness (76%), perceived usefulness (95%) and intention to use (68%). Correctness of the usability recommendations for using these mapping rules was also assesses positively (57%), as well as their perceived usefulness (86%) and intention to use (72%). This paper provides analysts with effective and efficient guidance on how to apply them consistently and to feed a software for semi-automatic transformation of BPMN models into their corresponding GUIs.

This is a preview of subscription content, log in via an institution to check access.

Access this article

Log in via an institution

Price excludes VAT (USA)
Tax calculation will be finalised during checkout.

Instant access to the full article PDF.

Institutional subscriptions

Fig. 1
Fig. 2
Fig. 3
Fig. 4
Fig. 5
Fig. 6
Fig. 7
Fig. 8
Fig. 9
Fig. 10
Fig. 11
Fig. 12
Fig. 13

Similar content being viewed by others

Notes

  1. See https://www.scopus.com/home.uri

References

  1. Acerbis R, Bongio A, Brambilla M, Butti S (2007) WebRatio 5: An eclipse-based CASE tool for engineering web applications. In: Proceedings of the 7th International conference on web engineering, Como, Italy, July 16-20, 2007, Lecture notes in computer science, vol 4607. Springer, Berlin, pp 501–505, DOI https://doi.org/10.1007/978-3-540-73597-7_44, (to appear in print)

  2. Barforooshi SY, Moghadam SM, Nasiri R (2010) Improvement of test management in bpmn with aris. In: 2010 2nd International conference on electronic computer technology. IEEE, pp 59–62

  3. Bizagi: Business Model Patterns. http://resources.bizagi.com/docs/Workflow_Patterns_using_BizAgi_Process_Modeler_Esp.pdf. Accessed: 2019-07-19

  4. Bonitasoft: Bonita Software. https://www.bonitasoft.com/downloads. Accessed: 2019-07-19

  5. Borst C, Visser RM, Van Paassen MM, Mulder M (2019) Exploring short-term training effects of ecological interfaces: A case study in air traffic control. IEEE Transactions on Human-Machine Systems 49(6):623–632

    Article  Google Scholar 

  6. Bouchelligua W, Mahfoudhi A, Mezhoudi N, Daassi O, Abed M Barjis J (ed) (2010) User interfaces modelling of workflow information systems. Springer, Berlin

  7. Bouillon L, Limbourg Q, Vanderdonckt J, Michotte B (2005) Reverse engineering of web pages based on derivations and transformations. In: Third Latin American Web Congress (LA-WEB’2005), pp 11 pp –. https://doi.org/10.1109/LAWEB.2005.29

  8. Bouzidi A, Haddar N, Abdallah MB, Haddar K (2018) Alignment of business processes and requirements through model integration. In: 2018 IEEE/ACS 15th International Conference on Computer Systems and Applications (AICCSA). IEEE, pp 1–8

  9. Brambilla M, Butti S, Fraternali P (2010) WebRatio BPM: A tool for designing and deploying business processes on the web. In: Benatallah B, Casati F, Kappel G, Rossi G (eds) Proceedings of International Conference on Web Engineering, ICWE ’10. Springer, Berlin, pp 415–429

  10. Brambilla M, Fraternali P, Vaca C (2012) BPMN and design patterns for engineering social BPM solutions. In: Daniel F, Barkaoui K, Dustdar S (eds) Business Process Management Workshops. Springer, Berlin, pp 219–230

  11. Bush A, Purao S (2011) Mapping uml techniques to design activities. In: Rossi M, Siau K (eds) Information Modeling in the New Millennium, chap. 12. IDEA Publishing Group, pp 199–217

  12. Calvary G, Coutaz J, Thevenin D, Limbourg Q, Bouillon L, Vanderdonckt J (2003) A unifying reference framework for multi-target user interfaces. Interacting with Computers 15(3):289–308

    Article  Google Scholar 

  13. de Carvalho EA, Gomes JO, Jatobá A, da Silva MF, de Carvalho PVR (2020) Employing resilience engineering in eliciting software requirements for complex systems: experiments with the functional resonance analysis method (fram). Cognition, Technology & Work 1–19

  14. Cruz EF, da Cruz AMR (2018) Deriving integrated software design models from bpmn business process models. In: ICSOFT, pp 605–616

  15. Davis FD, Bagozzi RP, Warshaw PR (1989) User acceptance of computer technology: A comparison of two theoretical models. Manag Sci 35 (8):982–1003. https://doi.org/10.1287/mnsc.35.8.982

    Article  Google Scholar 

  16. Diaz E, Panach JI, Rueda S, Pastor O (2018) Towards a method to generate gui prototypes from bpmn. In: 2018 12th International Conference on Research Challenges in Information Science (RCIS). IEEE, pp 1–12

  17. Driss M, Aljehani A, Boulila W, Ghandorh H, Al-Sarem M (2020) Servicing your requirements: An fca and rca-driven approach for semantic web services composition. IEEE Access 8:59326–59339

    Article  Google Scholar 

  18. Galitz WO (2002) The Essential Guide to User Interface design: An introduction to GUI design principles and techniques, 2nd edn. Wiley, New York

    Google Scholar 

  19. García JG, Lemaigre C, González-Calleros JM, Vanderdonckt J (2008) Model-driven approach to design user interfaces for workflow information systems. J UCS 14(19):3160–3173

    Google Scholar 

  20. Giner P, Torres V, Pelechano V (2007) Bridging the gap between BPMN and WS-BPEL. M2M transformations in practice. In: Koch N, Vallecillo A, Houben G (eds) Proceedings of the 3rd International Workshop on Model-Driven Web Engineering MDWE 2007, Como, Italy, July 17, 2007, CEUR Workshop Proceedings, vol. 261. CEUR-WS.org. http://ceur-ws.org/Vol-261/paper06.pdf

  21. Gonzalez-Huerta J, Boubaker A, Mili H Aïmeur E., Ruhi U., Weiss M. (eds) (2017) A business process re-engineering approach to transform bpmn models to software artifacts. Springer International Publishing, Cham

  22. Google Inc. Material design. https://material.io/design/. Accessed: 2019-07-19

  23. Han L, Zhao W, Yang J (2016) An approach towards user interface derivation from business process model. In: Cao J, Liu X, Ren K (eds) Process-aware systems. Springer, Singapore, pp 19–28

  24. International Organization for Standards: ISO/IEC/IEEE 24765:2017 Systems and software engineering – Vocabulary. https://www.iso.org/standard/71952.html. Accessed: 2019-07-19

  25. Johnson J (2007) GUI Bloopers 2.0: Common User Interface Design Don’ts and Dos (Interactive Technologies), 2nd edn. Morgan Kaufmann, Burlington

    Google Scholar 

  26. Juric MB, Mathew B, Sarang PG (2006) Business process execution language for web services: an architect and developer’s guide to orchestrating web services using BPEL4WS Packt Publishing Ltd

  27. Kieffer S (2017) Ecoval: Ecological validity of cues and representative design in user experience evaluations. AIS Transactions on Human-Computer Interaction 9(2):149–172. https://aisel.aisnet.org/thci/vol9/iss2/4

    Article  Google Scholar 

  28. Kolb J, Hübner P., Reichert M (2012) Automatically generating and updating user interface components in process-aware information systems. In: Meersman R., Panetto H., Dillon T., Rinderle-Ma S., Dadam P., Zhou X., Pearson S., Ferscha A., Bergamaschi S., Cruz I. F. (eds) On the Move to Meaningful Internet Systems: OTM 2012. Springer, Berlin, pp 444–454

  29. Kolb J, Hübner P, Reichert M (2012) Model-driven user interface generation and adaptation in process-aware information systems. Technical Report UIB-2012-04, University of Ulm, Ulm http://dbis.eprints.uni-ulm.de/828/

  30. Kotronis C, Routis I, Tsadimas A, Nikolaidou M, Anagnostopoulos D (2019) A model-based approach for the design of cyber-physical human systems emphasizing human concerns. In: 2019 IEEE International Congress on Internet of Things (ICIOT). IEEE, pp 100–107

  31. Kristiansen R, Trætteberg H Winckler M., Johnson H, Palanque P. (eds) (2007) Model-based user interface design in the context of workflow models. Springer, Berlin,

  32. Langer P, Mayerhofer T, Wimmer M, Kappel G, Fill H, Karagiannis D, Reimer U (2014) On the usage of UML: initial results of analyzing open UML models. In: Modellierung 2014, 19.-21. März 2014, Wien, Österreich, LNI, vol. 225, pp. 289–304. GI. http://subs.emis.de/LNI/Proceedings/Proceedings225/article21.html

  33. Li X, Liu Z, Schäf M, Yin L Margaria T., Steffen B. (eds) (2010) Autopa: Automatic prototyping from requirements. Springer, Berlin

  34. Likert R (1932) A technique for the measurement of attitudes. Archives of Psychology 22(140):55–. http://psycnet.apa.org/record/1933-01885-001

    Google Scholar 

  35. Limbourg Q, Vanderdonckt J (2004) USIXML: A user interface description language supporting multiple levels of independence. In: Matera M, Comai S. (eds) Engineering advanced web applications: Proceedings of workshops in connection with the 4th International Conference on Web Engineering (ICWE 2004), Munich, Germany, 28-30 July, 2004. Rinton Press, pp 325–338

  36. Lindland OI, Sindre G, Solvberg A (1994) Understanding quality in conceptual modeling. IEEE Softw 11(2):42–49. https://doi.org/10.1109/52.268955

    Article  Google Scholar 

  37. Lopez-Arredondo LP, Perez CB, Villavicencio-Navarro J, Mercado KE, Encinas M, Inzunza-Mejia P (2019) Reengineering of the software development process in a technology services company. Business Process Management Journal

  38. Machines IB (2017) AuraPortal. http://www.auraportal.com. Accessed: 2019-07-24

  39. Maqbool B, Azam F, Anwar MW, Butt WH, Zeb J, Zafar I, Nazir AK, Umair Z (2018) A comprehensive investigation of bpmn models generation from textual requirements—techniques, tools and trends. In: International conference on information science and applications. Springer, pp 543–557

  40. (2007). Microsoft: Common UI controls and text guidelines. https://docs.microsoft.com/en-us/previous-versions/windows/desktop/bb246433(v=vs.85). Accessed: 2019-07-19

  41. Miers D, White SA (2008) BPMN Modeling and reference guide: Understanding and using BPMN, 10, vol 4, 2nd edn. Future Strategies, Inc., Lighthouse Point

    Google Scholar 

  42. Moody DL (2003) The method evaluation model: a theoretical model for validating information systems design methods. In: Ciborra CU, Mercurio R, de Marco M, Martinez M, Carignani A (eds) Proceedings of the 11th European Conference on Information Systems, ECIS 2003, Naples, Italy 16-21 June 2003, pp 1327–1336. http://aisel.aisnet.org/ecis2003/79

  43. Object Management Group: Business Process Model and Notation. http://www.bpmn.org/. Accessed: 2019-07-19

  44. Object Management Group: MOF 2.0 Query / Views / Transformations RFP. https://www.omg.org/spec/QVT/About-QVT/. Accessed: 2019-07-19

  45. Office of products and programs, technology transformation service: United States web design system. https://designsystem.digital.gov/documentation/. Accessed: 2019-07-19

  46. Ouyang C, Dumas M, Aalst WMPVD, Hofstede AHMT, Mendling J (2009) From business process models to process-oriented software systems. ACM Transactions on Software Engineering and Methodology 19(1):2:1–2:37. https://doi.org/10.1145/1555392.1555395

    Article  Google Scholar 

  47. Pintus A, Paternò, Santoro C (2010) Modelling user interactions in web service-based business processes. In: Proceedings of the 6th International Conference on Web Information Systems and Technology - Volume 2: WEBIST. https://doi.org/10.5220/0002774401750180. INSTICC, SciTePress, pp 175–180

  48. Polančič G, Orban B (2019) A bpmn-based language for modeling corporate communications. Computer Standards & Interfaces 65:45–60

    Article  Google Scholar 

  49. Radeke F, Forbrig P (2007) Patterns in task-based modeling of user interfaces. In: International workshop on task models and diagrams for user interface design. Springer, pp 184–197

  50. Ramadan Q, Strüber D, Salnitri M, Jürjens J, Riediger V, Staab S (2020) A semi-automated bpmn-based framework for detecting conflicts between security, data-minimization, and fairness requirements. Softw. Syst. Model, pp 1–37

  51. Rieger C (2018) Evaluating a graphical model-driven approach to codeless business app development. In: Proceedings of the 51st Hawaii International Conference on System Sciences

  52. Rieger C (2018) Interoperability of bpmn and maml for model-driven development of business apps. In: International symposium on business modeling and software design. Springer, pp 149–166

  53. Ruiz J, Serral E, Snoeck M (2018) Evaluating user interface generation approaches: model-based versus model-driven development. Software & Systems Modeling, https://doi.org/10.1007/s10270-018-0698-x

  54. Rusu C, Rusu V, Quiñones D, Roncagliolo S, Rusu VZ (2018) Evaluating online travel agencies’ usability: What heuristics should we use?. In: International conference on social computing and social media. Springer, pp 121–130

  55. Shamim A, Balakrishnan V, Tahir M, Ahsan Qureshi M (2016) Age and domain specific usability analysis of opinion visualisation techniques. Behaviour & Information Technology 35(8):680–689

    Article  Google Scholar 

  56. (2019). Softeam: e-Citiz. http://www.https://www.e-citiz.com/SOFTEAM. Accessed: 2019-07-24

  57. Sousa K, Mendonça H, Vanderdonckt J (2010) A rule-based approach for model management in a user interface – business alignment framework. In: England D., Palanque P., Vanderdonckt J., Wild P. J. (eds) Task models and diagrams for user interface design. Springer, Berlin, pp 1–14

  58. Sousa K, Mendonça H, Vanderdonckt J, Rogier E, Vandermeulen J (2008) User interface derivation from business processes: A model-driven approach for organizational engineering. In: Proceedings of the 2008 ACM Symposium on Applied Computing, SAC’08. ACM, New York, pp 553–560, DOI https://doi.org/10.1145/1363686.1363821, (to appear in print)

  59. Sousa KS, Mendonça H, Lievyns A, Vanderdonckt J (2011) Getting users involved in aligning their needs with business processes models and systems. Business Process Management Journal 17(5):748–786. https://doi.org/10.1108/14637151111166178

    Article  Google Scholar 

  60. (2007). Applications Systems and Products in data processing (SAP): Fiori design guidelines. https://experience.sap.com/fiori-design/. Accessed: 2019-07-19

  61. Torres V, Pelechano V (2006) Building business process driven web applications. In: Dustdar S, Fiadeiro JL, Sheth AP (eds) Business Process Management. Springer, Berlin, pp 322–337

  62. Trætteberg H (2008) Ui design without a task modeling language – using bpmn and diamodl for task modeling and dialog design. In: Forbrig P, Paternò F (eds) Engineering interactive systems. Springer, Berlin, pp 110–117

  63. Van Welie M, Trætteberg H (2000) Interaction patterns in user interfaces. In: 7th Pattern languages of programs conference, pp 13–16

  64. Whitefield A, Wilson F, Dowell J (1991) A framework for human factors evaluation. Behaviour & Information Technology 10(1):65–79. https://doi.org/10.1080/01449299108924272

    Article  Google Scholar 

  65. Wohlin C, Runeson P, Höst M., Ohlsson MC, Regnell B, Wesslén A. (2012) Experimentation in software engineering. Springer Science & Business Media

  66. Yadav SB, Bravoco RR, Chatfield AT, Rajkumar TM (1988) Comparison of analysis techniques for information requirement determination. Commun ACM 31(9):1090–1097. https://doi.org/10.1145/48529.48533

    Article  Google Scholar 

  67. Yin L, Liu J, Ding Z (2011) Modeling and prototyping business processes in autoPA. In: Proceedings of Fifth International Conference on Theoretical Aspects of Software Engineering, TASE ’11, pp 169–176. https://doi.org/10.1109/TASE.2011.8

  68. Yongchareon S, Liu C, Zhao X (2019) Uniflexview: A unified framework for consistent construction of bpmn and bpel process views. Concurrency and Computation: Practice and Experience, pp e5646

  69. Yongchareon S, Liu C, Zhao X, Xu J (2010) An artifact-centric approach to generating web-based business process driven user interfaces. In: Chen L, Triantafillou P, Suel T (eds) Web Information Systems Engineering – WISE 2010. Springer, Berlin, pp 419–427

  70. Yongchareon S, Liu C, Zhao X, Yu J, Ngamakeur K, Xu J (2018) Deriving user interface flow models for artifact-centric business processes. Computers in Industry 96:66 – 85. https://doi.org/10.1016/j.compind.2017.11.001. http://www.sciencedirect.com/science/article/pii/S0166361516301762

    Article  Google Scholar 

  71. Zafar I, Azam F, Anwar MW, Maqbool B, Butt WH, Nazir A (2019) A novel framework to automatically generate executable web services from bpmn models. IEEE Access 7:93653–93677

    Article  Google Scholar 

  72. Zhang Q, Chen R, Zou Y (2006) Reengineering user interfaces of e-commerce applications using business processes. In: Proceedings of 22nd IEEE International Conference on Software Maintenance, ICSM ’06, pp 428–437. https://doi.org/10.1109/ICSM.2006.51

  73. Zhao X, Zou Y, Hawkins J, Madapusi B Engels G, Opdyke B, Schmidt DC, Weil F (eds) (2007) A business-process-driven approach for generating e-commerce user interfaces. Springer, Berlin

Download references

Acknowledgements

The first author acknowledges support from the Ministry of Education of Peru with the National Scholarship and Educational Loan Program PRONABEC - President of the Republic Scholarship. This project also has the support of Spanish Ministry of Science and Innovation through project DataME (ref: TIN2016-80811-P). We would like to thank the participants for conducting the experiment.

Author information

Authors and Affiliations

  1. Departament d’Informàtica, Escola Tècnica Superior d’Enginyeria, Universitat de València, Avenida de la Universidad, s/n, 46100, València, Spain

    Eduardo Díaz, José Ignacio Panach & Silvia Rueda

  2. LouRIM Institute, Université catholique de Louvain, Place des Doyens, 1, B-1348, Louvain-la-Neuve, Belgium

    Jean Vanderdonckt

Authors
  1. Eduardo Díaz
    View author publications

    You can also search for this author in PubMed Google Scholar

  2. José Ignacio Panach
    View author publications

    You can also search for this author in PubMed Google Scholar

  3. Silvia Rueda
    View author publications

    You can also search for this author in PubMed Google Scholar

  4. Jean Vanderdonckt
    View author publications

    You can also search for this author in PubMed Google Scholar

Corresponding author

Correspondence to Eduardo Díaz.

Additional information

Publisher’s note

Springer Nature remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.

Appendices

Appendix 1: Questionnaire of perceived usefulness of the rules

Once the test is finished, imagine that we give you a set of rules to design graphical user interfaces from the BPMN models. With these rules, each element of the BPMN diagram would result in a single element of the graphical user interface unambiguously and accurately. The possible values of the score are: 1=Totally disagree, 2=Fairly disagree, 3=Neutral, 4=Fairly agree, 5=Totally agree. Please use these values to assess the following statements.

Table 8
Full size table

Appendix 2: Questionnaire of intention to use of the rules

Table 9
Full size table

Appendix 3: Questionnaire of usability recommendations

figure a
figure b
figure c

Appendix 4: Questionnaire of perceived usefulness of the usability recommendations

Once the test is finished, imagine that when you had more than one alternative to draw the user interface from the BPMN model, we would give you a recommendation that would indicate which of all the alternatives is more usable. The possible values of the score are: 1: Totally disagree, 2: Fairly disagree, 3: Neutral, 4: Fairly agree, 5: Totally agree.

Table 10
Full size table

Appendix 5: Questionnaire of intention to use of the usability recommendations

The possible values of the score are: 1: Totally disagree, 2: Fairly disagree, 3: Neutral, 4: Fairly agree, 5: Totally agree.

Table 11
Full size table

Rights and permissions

Reprints and permissions

About this article

Check for updates. Verify currency and authenticity via CrossMark

Cite this article

Díaz, E., Panach, J.I., Rueda, S. et al. An empirical study of rules for mapping BPMN models to graphical user interfaces. Multimed Tools Appl 80, 9813–9848 (2021). https://doi.org/10.1007/s11042-020-09651-6

Download citation

  • Received:

  • Revised:

  • Accepted:

  • Published:

  • Issue Date:

  • DOI: https://doi.org/10.1007/s11042-020-09651-6

Keywords

Search

Navigation