Krones
Vom Touchpanel in den Browser: das Connected HMI von Krones
Splore unterstützte Krones bei der Übersetzung des Connected HMI in die Welt der Webtechnologie. Im Zusammenspiel von UX Prototyping, UI Design & Systems und UX Consulting entstand eine Lösung, die HMI-Komponenten und Layouts für das bestehende UI Design System aufbereitet, nutzbar vom 10-Zoll-Screen an der Maschine bis zum mobilen Endgerät.
Krones
Krones ist der weltweit führende Hersteller von Getränkeproduktionsanlagen. Mit dem Connected HMI betreibt das Unternehmen eine zentrale Plattform für die Steuerung aller Maschinentypen in der Getränkeproduktion. Die Plattform verbindet Planung, Steuerung, Wartung und Prognose in einem durchgängigen Interface, von der einzelnen Maschine bis zur gesamten Produktionslinie. Für Bedienende ist das Connected HMI der zentrale Zugangspunkt zur Anlage.
Ausgangssituation
Das Human-Machine-Interface befand sich als eingebettetes Interface am Gerät beziehungsweise an der Anlage. Bedient wurde touchbasiert, direkt vor Ort. Mit dem Wechsel ins Web verschiebt sich der Blick von der einzelnen Maschine auf das Zusammenspiel der gesamten Produktionslinie. Hinzu kommt, dass mehrere Bedienende gleichzeitig an derselben Anlage arbeiten. Wer den Betrieb überwacht, braucht heute eine Oberfläche, die nicht an einen einzelnen Bildschirm gebunden ist. Genau diese Verschiebung macht den Krones-Case fachlich interessant: Im Zuge eines Technologiewechsels sollte die nächste HMI-Generation auf Webtechnologie stehen und über Gerätegrenzen hinweg funktionieren.
Unser Ansatz
Wie lassen sich HMI-Komponenten und Bedienabläufe in ein bestehendes UI Design System integrieren, das für Webapplikationen konzipiert ist, nicht für Maschinensteuerung?
Das Connected HMI entstand vor der Gründung von Splore. Jona Rammler war als Design Direction an der Entwicklung beteiligt; die Plattform wurde 2018 mit dem Red Dot Award: Best of the Best in der Kategorie Brands & Communication Design ausgezeichnet und erhielt im selben Jahr den iF Design Award. Als Krones die Überführung ins Web anging, kam der technische Leiter deshalb wieder auf ihn zu.
Die Herausforderungen
Im industriellen HMI treffen Anforderungen aufeinander, die im klassischen Webdesign selten gemeinsam vorkommen. Bedienende arbeiten unter geteilter Aufmerksamkeit — der Blick wechselt zwischen Produktionsprozess und Interface. Fehler an der Oberfläche können unmittelbare Auswirkungen auf den laufenden Betrieb haben. Jede Designentscheidung muss unter diesen Bedingungen funktionieren, nicht nur auf dem Bildschirm. Das machte die folgenden vier Punkte zusammen anspruchsvoller, als sie es einzeln gewesen wären:
1. Komplexe, sicherheitsrelevante Bedienabläufe an Produktionsanlagen
2. Unterschiedliche Maschinentypen mit individuellen Anforderungen
3. Konsistente Multi-Device-Nutzung vom 10-Zoll-Screen bis Mobile
4. Übersetzung von HMI-Komponenten in ein bestehendes UI Design System
Unser Service
Ein kleines Splore-Team arbeitete mit dem Projektleiter, dem HMI-UX-Experten und dem UI-Design-System-Spezialisten auf Krones-Seite zusammen: wöchentlicher Austausch plus Working Sessions zum Explorieren und Abstimmen. Der HMI-UX-Experte brachte das Fachwissen zur Maschinenbedienung ein, der Design-System-Spezialist die technische Grundlage des bestehenden Systems. Bedienabläufe wurden in dieser Konstellation gemeinsam analysiert, Lösungsansätze diskutiert und gegen die Anforderungen beider Seiten geprüft. Auf Splore-Seite teilte sich die Arbeit in Konzeption und Workflows auf der einen sowie visuelles Interface-Design auf der anderen Seite. Die Konzeptseite erarbeitete Bedienlogik und Informationsarchitektur im direkten Austausch mit den Krones-Fachrollen. Sobald ein Konzeptansatz abgestimmt war, übersetzte die visuelle Seite ihn in Interface-Lösungen. Das Projekt lag im Handlungsfeld UX / Digital Product Design. Drei Leistungsbereiche griffen dabei ineinander:
Erarbeitung der Bedienkonzepte und Workflows für die neue HMI-Generation. Die Navigation wurde für die Webwelt neu gedacht. Responsive Layouts lenken den Fokus auf das jeweils Relevante. Progressive Disclosure wurde gezielt eingesetzt, um Bedienende vor Informationsüberladung zu schützen, ein Prinzip, das im HMI-Kontext besonders wirksam ist, weil die Aufmerksamkeit am Produktionsprozess bleibt und nicht an der Oberfläche verloren geht.
Zentrale Module des Projekts waren der Homescreen mit dem Dashboard, der Navigator, das Sorten- und Alarmmanagement sowie die Fließschemen. An ihnen wurde die Leitfrage konkret: Welche Information braucht die bedienende Person in welcher Situation? Was darf im Hintergrund bleiben, und was muss sofort sichtbar sein?
Visuelle Gestaltung der Interface-Lösungen und Überführung in das bestehende Krones UI Design System. Die Übersetzung begann mit einer systematischen Analyse der bestehenden HMI-Oberflächen: Welche Elemente lassen sich als Webkomponenten abbilden, und wo verlangt der veränderte Nutzungskontext eigene Lösungen? Auf dieser Grundlage wurden alle HMI-relevanten Komponenten und Layouts für den Webkontext neu konzipiert und als Komponenten mit Tokens für die Aufnahme in das Design System aufbereitet. Das Ergebnis ist ein modularer HMI-Baukasten, ausgelegt für helles und dunkles Theme, der die gestalterische Basis des Connected HMI in die Webwelt überträgt und dabei konsistent über alle Bildschirmgrößen funktioniert.
Begleitende Beratung zum Vorgehen des Projektteams. Splore beriet Krones kontinuierlich bei der Frage, wie sich UX-Methoden in den HMI-Entwicklungsprozess einbetten lassen, und unterstützte bei der Abstimmung zwischen den Projektbeteiligten. In der Praxis bedeutete das: gemeinsame Termine zur Prüfung von Konzeptansätzen, Vorbereitung von Designentscheidungen und Klärung offener Fragen zwischen den Disziplinen.
Das Ergebnis
Im Projekt wurde gezeigt, dass Maschinen aus der Ferne bedient werden können, ohne dass jemand vor Ort sein muss. Damit zeigt das Projekt, wohin sich die Bedienung von Produktionsanlagen entwickelt. Darüber hinaus ist die Lösung darauf ausgelegt:
1.
Bedienprozesse durch konsistente Interaktionsmuster zu vereinfachen
2.
Schulungsaufwand zu reduzieren, weil sich Bedienende schneller zurechtfinden
3.
Durch den Designsystem-Ansatz skalierbar über Maschinentypen hinweg zu wachsen
Der Case ist beispielhaft für die Gestaltung komplexer, hochautomatisierter Systeme: besonderer Nutzungskontext, hoher Automatisierungsgrad, Sicherheitsrelevanz. Die Bedienrollen in der Industrie verändern sich. Wer eine Maschine bedient, steuert immer seltener jeden Schritt selbst, sondern überwacht, prüft und gibt frei. Mit dem zunehmenden Einsatz von KI in der Produktion wird sich diese Entwicklung weiter verstärken. Für Splore ist das eine Perspektive, die die Anforderungen an HMI Design grundlegend verändert.
Kund:innenstimmen
»Bei der Adaption des Krones HMI für das Web hat Splore durch außergewöhnliche gestalterische Fähigkeiten, Professionalität und schnelles Erfassen des Maschinenkontexts unsere Erwartungen erneut übertroffen – Bravo«
Haben Sie Fragen?
Haben Sie Fragen?
Melden Sie sich unverbindlich bei uns. Splore-Gründer Jona Rammler ist Experte für die Entwicklung digitaler Produkte und Services und freut sich über ihre Nachricht.
FAQ
Ein Human-Machine-Interface (HMI) ist die Bedienoberfläche einer Maschine oder Anlage. Im industriellen Kontext steuern Bedienende darüber Produktionsprozesse, überwachen Anlagenzustände und reagieren auf Alarme. Im Unterschied zu klassischen Web- oder App-Oberflächen muss ein HMI unter besonderen Bedingungen funktionieren: hohe Komplexität, sicherheitsrelevante Abläufe und wechselnde Aufmerksamkeitsanforderungen.
HMI Design berücksichtigt den physischen Nutzungskontext: Bedienende arbeiten an einer Maschine, oft unter Zeitdruck und mit geteilter Aufmerksamkeit. Prinzipien wie Progressive Disclosure, also das gezielte Einblenden von Information erst im relevanten Moment, gewinnen hier besondere Bedeutung. Hinzu kommen Anforderungen an die Nutzung über verschiedene Gerätetypen hinweg, die Möglichkeit gleichzeitiger Bedienung durch mehrere Personen und die Integration in bestehende Designsysteme. Mehr dazu auf der Seite HMI Design & komplexe Systeme.
Die Integration erfordert eine systematische Übersetzung: Bestehende HMI-Layouts und -Komponenten werden analysiert, für den Webkontext neu konzipiert und als Komponenten mit Design Tokens für die Aufnahme in das UI Design System aufbereitet. So entsteht ein modularer Baukasten, der Konsistenz über alle Bildschirmgrößen sicherstellt und gleichzeitig die spezifischen Anforderungen der Maschinenbedienung abdeckt. Wie Splore diesen Prozess bei Krones umgesetzt hat, beschreibt der Case oben.
Eine Beratung, die komplexe Workflows aus der Perspektive der Anwendenden versteht und Erfahrung mit eingebetteten Interfaces mitbringt. Splore arbeitet als Boutique-Beratung in Industrien, in denen generische UX-Ansätze an ihre Grenzen stoßen: Maschinenbau, Medizintechnik, komplexe B2B-Software. Weitere Projekte finden Sie in der Cases-Übersicht.