Eine neue Benchmark-GUI für intelligente Umgebungssteuerung
Elsner trat mit einem Briefing an uns heran, das jede Ebene eines modernen Smart-Home-Produkts für Endkunden berührte. Das GUI-Design entstand innerhalb einer Unternehmensstruktur mit einem UX- und UI-Designteam, das von einem fünfköpfigen Steuerungsausschuss unterstützt wurde. Die Benutzeroberfläche sollte Konsumentinnen und Konsumenten in 54 Ländern dienen, und Händler aus zehn Ländern wurden in den Design- und Validierungsprozess eingebunden.
Die Auslieferung dauerte neun Monate, wobei ein embedded Design-Team Schulter an Schulter mit den Ingenieuren arbeitete, um die Benutzeroberfläche mit der kundenspezifischen Hardware, der bestehenden Steuerlogik und einem Netzwerk verbundener Komponenten abzustimmen. Da es sich um einen Heiz- und Kühlregler handelte, begann die Arbeit mit einer detaillierten Abbildung der physischen Umgebung des Systems.
Das Gerät erhielt Eingaben von Wetterstationen, CO₂-Sensoren, Feuchtigkeitssensoren, Temperaturfühlern und der Hauptheizeinheit. Die Genauigkeit der Sensoren, die Zuverlässigkeit der Aktoren und die Stabilität des Netzwerks prägten jede frühe Entscheidung. Die Benutzeroberfläche musste auf aktuellen APIs laufen und gleichzeitig zukünftige berücksichtigen, um eine Grundlage zu schaffen, die sich mit neuer Firmware und Produktvarianten weiterentwickeln kann.
UNSER BEITRAG
Mapping der Anforderungen
User Research
Benchmarking
UX Design
Prototypen und User Tests
UI Design - Hell und Dunkel
Unternehmensweites Design System
Qualitätskontrolle
STRUKTURIERTE ZUSAMMENARBEIT ZWISCHEN DESIGN UND ENGINEERING ÜBER FACHDISZIPLINEN HINWEG
Das Projekt entwickelte sich über miteinander verknüpfte Ebenen, die sich gegenseitig stärkten. Nutzerforschung und Wettbewerbsbenchmarking lieferten das initiale Verständnis für Bedürfnisse, Rahmenbedingungen und branchenspezifische Muster. Workshops mit Händlern aus zehn Ländern brachten praktische Erfahrung ein und machten Verhaltensunterschiede zwischen den Märkten sichtbar. Zudem gaben die Händler Einblicke in lokalen Wettbewerbsdruck und aufkommende Trends.
Frühe Engineering-Sessions brachten praxisnahe Erkenntnisse über das Verhalten der Firmware zutage, darunter das Timing von Temperaturaktualisierungen und die Bedingungen, unter denen die Heizeinheit neue Werte übernahm. Mit diesem Wissen traten wir in die divergente Phase des Double-Diamond-Modells ein, in der Wireframes und Konzeptpfade geöffnet, getestet, verglichen und hinsichtlich ihrer Stärken und Schwächen analysiert wurden.
Prototypen wurden gemeinsam mit Ingenieuren erprobt, die verborgene Verhaltensweisen bei Verzögerungen, Kalibrierungsdrift und der Synchronisation von Steuerungen aufdeckten. Sämtliche entstehenden Richtungen wurden dem Steuerungsausschuss vorgestellt, der dabei half, die langfristige Vision zu schärfen und die Kohärenz zwischen technischen, strategischen und erlebnisbezogenen Ebenen sicherzustellen.
DESIGN GEPRÄGT DURCH REALE RAHMENBEDINGUNGEN
Die Hardware hinter diesem Controller prägte das gesamte Projekt. Es handelte sich um ein kundenspezifisches Gerät mit ungewöhnlichem Verhalten, begrenztem Speicher und moderater Rechenleistung, das dennoch einen überraschend vielseitigen Funktionsumfang für ein rundes vier Zoll TFT-LCD-Panel mit 480 × 480 Pixeln bot. Sehr frühe Gespräche mit dem Engineering-Team machten kritische Einschränkungen in Bezug auf die verfügbare Spannung, die Grafikschnittstelle und das Leistungsfenster des Prozessors deutlich. Der Kunde erwartete von uns, die technischen Spezifikationen der Displaylieferanten zu berücksichtigen, insbesondere hinsichtlich der für Panel und Hintergrundbeleuchtung erforderlichen Spannung sowie der Überlegungen zur Grafikschnittstelle, Farbtiefe und Musterverfügbarkeit.
Als das Redesign begann, war das finale Display noch nicht ausgewählt, sodass unsere einzige Referenz aus dem Vorgängermodell und einer umfangreichen Sammlung von Feldfeedback zu Scroll-Latenzen, Ladeverzögerungen und inkonsistenter Darstellung bei Sensoraktivität bestand. Die Ingenieure skizzierten Speicherbudgets, das Timing der Datenaktualisierungszyklen sowie das Verhalten des Heizsystems während der Kalibrierung. Zur Risikominimierung trafen wir eine strategische Entscheidung und entwarfen die Experience zunächst in einer kleineren Auflösung von 320 × 240 Pixeln, die später skaliert wurde, sobald das finale Panel feststand. Jede visuelle und verhaltensbezogene Entscheidung respektierte die physischen und elektrischen Grenzen des Geräts, und jede Einschränkung wurde zum Ausgangspunkt für Innovation. Während des gesamten Prozesses verknüpften wir jede technische Entscheidung mit Human-Factors-Aspekten, um Klarheit und Komfort innerhalb eines engen Betriebsrahmens zu bewahren.
Erkenntnisse aus der Human-Factors-Forschung
In der Praxis
INTERFACE AUF REALE EINSATZKONTEXTE ABGESTIMMT
Der Controller musste in unterschiedlichen Nutzungskontexten zuverlässig funktionieren, weshalb physische und umgebungsbedingte Faktoren das Interface-Design maßgeblich prägten. Die Montagehöhe von 140 Zentimetern positionierte das Display auf natürlicher Augenhöhe. Daraus ergaben sich die Größen der Touch-Ziele sowie Einschränkungen für vertikale Blick- und Scanmuster. Die meisten Interaktionen fanden bei Tageslicht statt, während die Nutzung am Abend einen automatischen Dark Mode erforderte, der bei Sonnenuntergang aktiviert wurde. Zu den häufigsten Abläufen gehörten Lichtsteuerung, Szenenaktivierung und Jalousienanpassung, während die Installationslogik separat von Systemingenieuren über Desktop-Software konfiguriert wurde.
Die Benutzeroberfläche musste auch unter nicht idealen Bedingungen Klarheit bewahren. Wenn Sensoren verzögerte Messwerte, widersprüchliche Daten oder Kalibrierungsfehler lieferten, kommunizierte das Interface diese Zustände ruhig und eindeutig. Warnmeldungen der Hauptheizeinheit wurden als primäre Signale behandelt, während untergeordnete Hinweise wie offene Fenster visuell sekundär blieben. Dieses duale System stellte sowohl Transparenz als auch kognitive Balance sicher.
Ein Gefühl für die GUI bekommen
UI-KOMPONENTENBEISPIEL: TEMPERATURSTEUERUNG
Die Temperatursteuerung bietet einen verdichteten Einblick in das Zusammenspiel von Design Thinking und technischer Realität. Die vertikale Skala orientierte sich an einem klassischen Thermometer, wobei die aktuelle Temperatur im Mittelpunkt positioniert wurde. Diese Struktur entsprach verhaltensbezogenen Erkenntnissen, die zeigen, dass Nutzer selten mehr als vier Grad in die eine oder andere Richtung anpassen.
Unsere Engineering-Partner halfen uns zu verstehen, wie Temperaturaktualisierungen von der Heizeinheit eintreffen und wie verzögerte Messwerte visualisiert werden können, ohne Verwirrung zu stiften. Das Drücken der Plus- oder Minus-Taste erzeugt einen klaren Farbhinweis – Rot für wärmer, Blau für kälter. Jede Anpassung erfolgt in Schritten von einem halben Grad, da die Firmware neue Werte über diskrete interne Befehle anwendet.
Die gewünschte Temperatur wird als gestrichelte Linie dargestellt und bleibt an den Grenzwerten fixiert, wenn über den mittleren Bereich hinaus gescrollt wird. Die Animationen sind so abgestimmt, dass Ruckler auf dem leistungslimitierten Prozessor vermieden werden. Sämtliche Entscheidungen wurden mit dem Lenkungsausschuss überprüft, um langfristige Stabilität und Klarheit sicherzustellen.
Interaktionskonzept der UI-Temperaturkomponente
Einteilung: 100 Segmente = 0,5°T (Temperatur) pro Segment
Entfernt: 20 Segmente → 80 Segmente verbleibend
Bogen pro Kreis: 360°/100 = 3,6°
Fazit: 0,5°T = 3,6° Bogen, 1,0°T = 7,2° Bogen
UX/UI-DESIGNBEISPIEL: ZIRKULÄRE STEUERUNG
Die kreisförmige Temperaturanzeige führt eine andere Form von Präzision ein. Der Kreis ist in hundert Segmente unterteilt, wobei jedes Segment einem halben Grad entspricht. Durch das Entfernen der unteren zwanzig Segmente entstand eine visuelle Begrenzung, sodass achtzig aktive Segmente verblieben. Jedes Segment entspricht 3,6 Grad auf dem Kreisbogen, was bedeutet, dass ein volles Grad Temperatur einer Drehung von 7,2 Grad entspricht. Diese mathematische Genauigkeit war erforderlich, da das Gerät strenge Einschränkungen beim Rendering aufwies.
Das Timing der Animationen wurde mit den Update-Intervallen der Firmware abgestimmt, sodass visuelle Veränderungen niemals von den tatsächlichen Temperaturwerten abweichen. Die Anzeige stellt die aktuelle Temperatur neutral dar, während Anpassungen in Rot oder Blau markiert werden. Sobald der Nutzer die Temperatur ändert, aktualisiert sich das darunterliegende Feld und zeigt den neuen Wert sowie die Änderungsrichtung an. Parallel dazu haben wir die Navigation in ein modulares System mit Overlay-Menü und konfigurierbaren Shortcuts überführt.
Eine besonders anspruchsvolle Abstimmung betraf die Steuerung der Jalousien. Aus technischen Gründen bestanden die Ingenieure darauf, alle Funktionen auf einem einzigen Screen zu bündeln, während die Nutzerforschung auf das Risiko visueller Überladung hinwies. Nach mehreren Iterationen mit dem Lenkungsausschuss einigten wir uns auf eine Konfiguration, die die Bedienbarkeit wahrte und gleichzeitig die technischen Rahmenbedingungen respektierte.
Verhalten der radialen Temperatur-UI-Komponente
PRÄZISION IN JEDEM DESIGNDETAIL
Die beste Arbeit zeigt sich in den kleinsten Details. Touch-Ziele wurden millimetergenau kalibriert, sodass sich das Interface bei Bedienung im Stehen natürlich anfühlt. Leseabstand und Panel-Helligkeit bestimmten Abstände und Typografie. Jeder Farbwert wurde direkt auf der Hardware getestet, um sicherzustellen, dass kein Element bei Tageslicht ausgewaschen wirkt. Prototypentests machten die exakte Verzögerungskurve bei Sensor-Updates sichtbar und halfen dabei, Mikroanimationen zu verfeinern, die den Blick führen, ohne den Prozessor zu überlasten.
Unterhalb der sichtbaren Präzision lag eine vollständige Ebene struktureller Verfeinerung. Die Neuordnung der Menüs und der Wiederaufbau der Informationshierarchie erwiesen sich als entscheidend für Klarheit und Geschwindigkeit. Navigationsmuster wurden über das gesamte Interface hinweg konsistent gehalten und im Verlauf des Projekts kontinuierlich weiterentwickelt, während neue Erkenntnisse hinzukamen. Zustände wurden geschärft und aufeinander abgestimmt, und die Farbwelten für Light- und Dark-Mode wurden als gekoppelte Systeme behandelt, um die kognitive Orientierung der Nutzer jederzeit stabil zu halten. Das Ergebnis ist ein Gerät, das sich nur deshalb einfach anfühlt, weil jedes verborgene Detail mit Disziplin und Sorgfalt gelöst wurde.
Zusätzlich lieferten wir ein vollständiges Designsystem, das organisationsweite Design-Tokens, eine umfassende Komponentenbibliothek sowie klare Governance-Modelle umfasst, die langfristige Konsistenz unterstützen.
Designsystem mit organisationsweiten Design-Tokens
EIN NEUER STANDARD FÜR SMART-HOME-UX
Dieses Projekt vereinte alle anspruchsvollen Aspekte des Embedded-GUI-Designs. Es bewegte sich innerhalb strenger technischer Rahmenbedingungen, einer mehrschichtigen Governance-Struktur und eines Ökosystems aus vernetzten Sensoren und Aktoren. Anstatt durch Einschränkungen begrenzt zu werden, nutzte das Team diese als Gerüst für Innovation. Designer, Ingenieure, Händler, Forscher und ein Lenkungsausschuss prägten das Produkt über neun Monate intensiver Zusammenarbeit. Die Methodik sorgte für Kontinuität – von früher Nutzerforschung über konzeptionelle Exploration bis hin zu technischer Prototypenentwicklung im Einklang mit realem Firmware-Verhalten. Die Validierung auf Prototyp-Hardware stellte sicher, dass sich das Interface auch bei verzögerten Sensordaten, widersprüchlichen Werten und Wiederherstellungszuständen korrekt verhielt.
Die modulare Architektur unterstützt nun zukünftige Firmware-Weiterentwicklungen sowie neue Produktvarianten. Während des Projekts wurde die Navigation in mehreren Iterationsrunden verfeinert, bis sie sowohl schnellen Zugriff auf häufig genutzte Aktionen als auch eine vollständige Menüstruktur bot, in der sämtliche Funktionen auffindbar sind. Dieses Gleichgewicht verleiht dem Produkt langfristige Stabilität und Anpassungsfähigkeit.
Die Navigation spiegelt reale Nutzungsmuster wider. Temperaturkomponenten übersetzen technische Gegebenheiten in souveräne Interaktionen. Warnmeldungen kommunizieren den operativen Zustand ohne Alarmismus. Jede Ebene ist stimmig – von den physischen Einschränkungen des Geräts bis zum kognitiven Komfort der Nutzer.
Das Ergebnis ist eine Embedded-Benutzeroberfläche, die als Referenz für technisch anspruchsvolles GUI-Design dient und Präzision, Realitätsnähe sowie eine langfristig skalierbare Struktur vereint.