HMIs with Web-Technologies

The costs are lower, the design and usability possibilities are significantly higher. And a huge market of tools, libraries, developers and learning material. There are clear and convincing reasons to switch to web technologies. We show the advantages and help with the evaluation of the own HMIs in view of a change.

Dashboard highres 3d

Some pioneers among the OEMs, e.g. in mechanical engineering or retail, are already showing how web technologies work. Modern, rapidly deployable technology for HMIs is able to replace traditional software solutions. And not without reason. This is primarily due to the fact that differentiation in the market today depends largely on the user-friendliness and ergonomics of the human-machine interface (HMI).

It often feels inappropriate for the latest generation of machines to be delivered with a HMI/UI that is obviously lagging behind technical progress, especially when it comes to investment goods. The machine and its innovative features and capabilities should be combined with a great user interface.

Operators' expectations are characterized by slim UIs from the world of smartphones, tablets and web services such as Google that have been optimized and thoughtfully designed for simple user interaction. Everything that is far away from this world is not only considered outdated: it leads to long learning times and unnecessary mistakes in operation. So it's clear that the User Experience (UX) must be at the forefront of HMI design and development.

And the technical solution is called web technologies. They offer a whole range of clear advantages over the technical alternatives and have been gaining ground in industrial applications for 5 years. And the reasons for this are the following.

Monetary investment

The software stack “Web-Technology” is free of charge. Not only are the programming languages used such as JavaScript and TypeScript open source and free, but also extremely widely used. This means that there is a large community behind it, which produces many tools and frameworks and, above all, provides mutual assistance. The amount of free and very cheap learning materials is huge and is also available in the form of training videos.

Good Prototyping Tool

It must allow the high level of user interaction to establish an outstanding UX, and allow unrestricted visual design of the UI and its animations. Furthermore, but equally important, it must allow for rapid prototyping of ideas, as no development process today can do without this approach.

Unlimited creativity

No other technology environment is inherently so well designed for the development of premium UI and user interactions. Separating markup (HTML5) and styling (CSS3) enables efficient development and task sharing. The constantly progressing standardization by an international, independent committee (not in hand of a single manufacturer), brings constantly important improvements. This includes, for example, the possibility to create framework-independent (and therefore future-proof) design systems (for more information, see our blog post on design systems). These include the corporate identity, style guide and a collection of all important control elements (components). This allows prototypes to be created quickly and the overall workload to be significantly reduced.

Multiplatform — Maximum freedom and hardware independence

A modern HMI concept should provide multimodal operation by multiple users and mobile devices anyway. Web technologies are inherently applicable on desktop devices (HMI panels of all manufacturers or Linux touchscreen modules) and mobile devices and can be distributed via the native app stores.

Simplified development processes

An enormous advantage, which is underestimated so far still strongly, is the topic DevOps (Developer Operations) in relation to HMI with Web technologies. Due to the openness of the technology, there are many extremely useful tools for working together in agile and efficient teams. Especially in testing and quality assurance, the advantages come to light. For example, end-to-end tests that test the entire machine from the HMI down to the PLC/PLC are easy to set up and automate. Screenshots of the current HMI version can be provided easily and automatically for marketing and technical editors. Or for quality assurance: here, changes in the HMI can be shown automatically (Visual Regression Testing), which speeds up testing of the new release.

Frameworks

Especially specialized, free web frameworks such as Angular, which make it extremely easy to develop complex HMIs and maintain an overview through a good structure, increase the return on investment. They come with modern tooling, which reduces development effort and facilitates collaboration with the design team. Developers can concentrate on the essentials.

Smooth transition phase

Due to the openness of the web platform, almost all programming languages and presentation frameworks (WPF, WinForms, Qt, Spring, ...) offer the possibility to embed new modules and components developed with web technologies into existing software. This enables a cost-effective and agile transition in small steps.

Conclusion: What are you waiting for?

To stay ahead in the international market, you need a modern, visually appealing but also functional HMI. Web technologies are the fastest and most cost-effective way to get there - without lock-in to proprietary software or technology and absolutely future-proof.

Our experts at interfacewerk can analyze for you in detail how a changeover pays off and how it can proceed. Especially the UX design process to develop a useful HMI is important to us and we will be happy to help you.

Tell us your challenge!