Unified UI Design System for Industrial HMI Software Development

In the early 2020s, the industrial sector, accounting for 13% of Europe’s GDP, faced challenges in adopting modern software technologies, lagging behind the immense progress seen in web and mobile domains. This gap stems largely from PLC manufacturers’ reliance on proprietary systems, limiting innovation and creating additional constraints in developing unified visualisation systems across diverse Integrated Development Environments (IDEs). This inconsistency affects the user experience in Human-Machine Interface (HMI) applications. To address these challenges, we propose an all-in-one unified design system organising a library of standard reusable cross-platform UI components designed for industrial applications. This design system aims to standardise and simplify the creation of HMI screens, ensuring consistent user interfaces across various platforms. Thereby, the integration of web-based technologies minimises the time and cost of implementation and maintains visualisation solutions across different manufacturing cases. As a result, the initial implementation of this design system led to the development and integration of 28 UI controls into Siemens and CodeSys IDEs, enhancing the usability and quality of industrial HMI screens. Usability tests revealed significant improvements in user experience over traditional vendor-supplied controls. Future research will extend this design system to cover more comprehensive industrial use cases, promoting efficiency and standardisation in industrial software development.