HMIs mit Web-Technologien

Die Kosten sind geringer, die Design und Usability-Möglichkeiten signifikant höher. Und noch dazu ein riesiger Markt and Tools, Libraries, Entwicklern und Lernmaterial. Es gibt klare und überzeugende Gründe, auf Web-Technologien umzusteigen. Wir zeigen die Vorteile auf und helfen bei der Evaluation der eigenen HMIs in Hinsicht auf einen Umstieg.

Dashboard highres 3d

Einige Vorreiter unter den OEMs wie z.B. im Maschinenbau oder Retail zeigen bereits wie es mit Web-Technologien geht. Die moderne, schnell einsetzbare Technologie für HMIs schafft es, traditionelle Softwarelösungen zu verdrängen. Und das nicht ohne Grund. Vorrangig liegt dies daran, dass die Differenzierung am Markt heute maßgeblich von der Bedienerfreundlichkeit und Ergonomie der Mensch-Maschine-Schnittstelle (HMI) abhängt.

Es fühlt sich oft unpassend an, wenn die neuste Maschinengeneration mit einer offensichtlich dem technischen Fortschritt hinterherhinkenden HMI/UI ausgeliefert werden, insbesondere wenn es sich um ein Investitionsgut handelt. Die Maschine und ihre innovativen Funktionen und Möglichkeiten sollten mit einer tollen Benutzeroberfläche zusammenkommen.

Die Erwartung der Bediener ist geprägt von schlanken, auf einfache Benutzerinteraktion optimierte und durchdacht gestaltete UIs aus der Welt der Smartphone, Tablets und von Web-Diensten wie Google. Alles was weit von dieser Welt entfernt ist, wird nicht nur als veraltet erachtet: es führt zu langen Einlernzeiten und unnötigen Fehlern in der Bedienung. Klar ist also, die User Experience (UX) muss bei Design und Entwicklung der HMI an erster Stelle stehen.

Und die technische Lösung dafür heißt Web-Technologien. Sie bringen ein ganze Reihe an klaren Vorteilen gegenüber den technischen Alternativen und sind seit 5 Jahren auch im industriellen Einsatzbereich auf dem Vormarsch. Und die Gründe dafür sind die Folgenden.

Der Investitionsaufwand

Der Softwarestack „Web-Technologie“ ist kostenlos. Nicht nur sind die verwendeten Programmiersprachen wie JavaScript und TypeScript open source und kostenlos, sondern auch extrem weit verbreitet. Das bedeutet es gibt eine große Community dahinter, die viele Tools und Frameworks hervorbringt und, vor allem, gegenseitige Hilfestellung leistet. Die Menge der kostenlosen und sehr günstigen Lernmaterialien ist riesig und liegt auch in Form von Schulungs-Videos vor.

Gutes Prototyping Tool

Sie muss das hohe Level an Benutzerinteraktionen erlauben, damit eine herausragende UX etabliert werden kann, sowie eine uneingeschränkte visuelle Gestaltung der UI und deren Animationen erlauben. Des weiteren, aber genauso wichtig, muss sie ein schnelles Prototyping von Ideen erlauben, denn kein Entwicklungsprozess kommt heute mehr ohne diese Herangehensweise aus.

Uneingeschränkte Kreativität

Keine andere Technologie-Umgebung ist von Haus aus so gut auf die Entwicklung von premium UI und Benutzer-Interaktionen ausgelegt. Die Trennen von Markup (HTML5) und Styling (CSS3) ermöglicht eine effiziente Entwicklung und Aufgabenteilung. Die stetig fortschreitende Standardisierung durch ein internationales, unabhängiges Gremium (nicht in Hand eines einzelnen Herstellers), bringt ständig wichtige Verbesserungen ein. Dazu gehört zum Beispiel die Möglichkeit, Framework-unabhängige (und damit zukunftssichere) Design-Systeme (mehr in unserem Blogpost zu Design-Systemen) zu erstellen. Diese beinhalten die Corporate Identity, Style Guide und eine Sammlung aller wichtigen Bedienelemente (Komponenten). Damit können schnell Prototypen erstellt und der gesamte Arbeitsaufwand deutlich reduziert werden.

Multiplattform – Maximale Freiheit und Hardware-Unabhängigkeit

Ein modernes HMI Konzept sollte ohnehin eine multimodale Bedienung durch mehrere Benutzer und durch Mobilgeräte vorsehen. Von Haus aus sind Web-Technologien auf Desktop Geräten (HMI Panels aller Hersteller oder Linux-Touchscreen-Module) und Mobilgeräten einsetzbar und können über die nativen App-Stores vertrieben werden.

Vereinfachte Entwicklungsprozesse

Ein enormer Vorteil, der bisher noch stark unterbewertet wird ist das Thema DevOps (Developer Operations) in Bezug auf HMI mit Web-Technologien. Durch die Offenheit der Technologie gibt es viele äußerst nützliche Tools, um in Teams agil und effizient zusammenzuarbeiten. Insbesondere beim Testen und bei der Qualitäts-Sicherung, treten die Vorteile zu Tage. Zum Beispiel sind Ende zu Ende Tests, die die gesamte Maschine von der HMI bis runter zur SPS/PLC testen einfach aufsetz- und automatisierbar. Für das Marketing und die technischen Redakteure können einfach und automatisch Screenshots der aktuellen HMI-Version zur Verfügung gestellt werden. Oder für die Qualitätssicherung: hier können automatisch Veränderungen in der HMI aufgezeigt werden (Visual Regression Testing), die eine Prüfung des neuen Releases beschleunigen.

Frameworks

Gerade spezialisierte, kostenfreie Web-Frameworks wie Angular, die es extrem einfach machen, komplexe HMIs zu Entwickeln und durch gute Struktur den Überblick zu behalten, steigern den Return on Investment. Sie kommen mit modernem Tooling, was die Entwicklungsaufwände reduziert und die Zusammenarbeit mit dem Design Team erleichtert. Die Entwickler können sich auf das Wesentliche konzentrieren.

Leichte Übergangsphase

Durch die Offenheit der Web-Platform, gibt es für fast alle Programmiersprachen und Presentation Frameworks (WPF, WinForms, Qt, Spring, …) die Möglichkeit, neue Module und Komponenten, die mit Web-Technologien entwickelt werden, in bestehende Software einzubetten. Damit wird ein kostengünstiger und agiler Umstieg in kleinen Schritten möglich.

Fazit: Worauf warten Sie noch?

Um die Nase vorne zu behalten am internationalen Markt, brauchen Sie eine moderne, optisch ansprechende aber auch funktionale HMI. Web-Technologien sind der schnellste und kostengünstigste Weg dort hin — und das ohne Lock-In in eine proprietäre Software oder Technologie und absolut zukunftssicher.

Wie sich ein Umstieg rentiert und wie er ablaufen kann, können unsere Experten bei interfacewerk für Sie im Detail analysieren. Insbesondere auch der UX-Design Prozess, um eine möglichst nützliche HMI zu Entwickeln liegt uns am Herzen und wir helfen Ihnen gerne dabei.

Nennen Sie uns Ihre Herausforderung

Digital shapers