Eine neue Benchmark-GUI für intelligente Umgebungssteuerung
Smart Home Gerät
UX Design
UI Design
- KUNDE
- Elsner
- ORT
- Deutschland
- TEAM
- UX-Designer, UI-Designer, Interaktionsdesigner, Projektmanager, Product Owner, Forscher
- WEBSEITE
- elsner-elektronik.de
Elsner trat mit einem Briefing an uns heran, das jede Ebene eines modernen Smart Home Produkts für Endverbraucher umfasste. Das GUI Design entstand innerhalb einer Unternehmensstruktur mit einem UX und UI Designteam, unterstützt von einem fünfköpfigen Lenkungsausschuss. Die Benutzeroberfläche richtet sich an Endkunden in 54 Ländern, während Händler aus zehn Ländern in den Design und Validierungsprozess eingebunden waren.
Die Umsetzung dauerte neun Monate, wobei ein Embedded Designteam eng mit den Ingenieuren zusammenarbeitete, um die Benutzeroberfläche mit maßgeschneiderter Hardware, bestehender Steuerlogik und einem Netzwerk vernetzter Komponenten abzustimmen. Da es sich um einen Heiz und Kühlregler handelte, begann die Arbeit mit einer detaillierten Abbildung der physischen Systemumgebung.
Das Gerät verarbeitete Eingaben von Wetterstationen, CO₂ Sensoren, Feuchtigkeitssensoren, Temperaturfühlern und der zentralen Heizeinheit. Sensorgenauigkeit, Zuverlässigkeit der Aktoren und Netzwerkstabilität prägten jede frühe Entscheidung. Die Benutzeroberfläche musste auf aktuellen APIs laufen und gleichzeitig zukünftige Schnittstellen antizipieren, um eine Grundlage zu schaffen, die sich mit neuer Firmware und weiteren 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 verbundene Ebenen, die sich gegenseitig verstärkten. Nutzerforschung und Wettbewerbsbenchmarking lieferten das anfängliche Verständnis für Bedürfnisse, Einschränkungen und branchenübliche Muster. Sitzungen mit Händlern aus zehn Ländern brachten praktische Erfahrung ein und machten Verhaltensunterschiede zwischen den Märkten sichtbar. Zusätzlich gaben die Händler Einblicke in den lokalen Wettbewerbsdruck und in aufkommende Trends.
Frühe Engineering Sessions legten praktische Erkenntnisse zum Firmware Verhalten offen, darunter die Taktung von Temperatur Updates 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 Konzeptansätze geöffnet, getestet, verglichen und systematisch auf Stärken und Schwächen analysiert wurden.
Prototypen wurden gemeinsam mit Ingenieuren erprobt, die verborgene Verhaltensweisen bei Verzögerungen, Kalibrierungsabweichungen und der Synchronisation von Bedienelementen aufdeckten. Alle entstehenden Richtungen wurden dem Lenkungsausschuss vorgelegt, der half, die langfristige Vision zu schärfen und die Kohärenz zwischen technischer, strategischer und erlebnisbezogener Ebene zu wahren.
DESIGN GEPRÄGT DURCH REALE RAHMENBEDINGUNGEN
Die Hardware hinter diesem Controller prägte das gesamte Projekt. Es handelte sich um ein maßgeschneidertes 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 mal 480 Pixeln bot. Sehr frühe Gespräche mit dem Engineering Team machten kritische Einschränkungen in Bezug auf verfügbare Spannung, die Grafik Schnittstelle und den Leistungsrahmen des Prozessors sichtbar. Der Kunde benötigte unsere Unterstützung dabei, technische Spezifikationen der Display Lieferanten im Blick zu behalten, insbesondere zur benötigten Spannung für Panel und Hintergrundbeleuchtung sowie zu Überlegungen rund um Grafik Schnittstelle, Farbtiefe und Verfügbarkeit von Mustern.
Als das Redesign begann, stand das endgültige Display noch nicht fest, sodass unsere einzige Referenz aus der vorherigen Einheit und einer umfangreichen Sammlung von Feldfeedback zu Scroll Verzögerungen, Ladezeiten und inkonsistenter Darstellung unter Sensoraktivität bestand. Die Ingenieure skizzierten Speicherbudgets, die Taktung der Datenaktualisierung und das Verhalten des Heizsystems während der Kalibrierung. Um Risiken zu minimieren, trafen wir eine strategische Entscheidung und gestalteten das Nutzungserlebnis zunächst für eine kleinere Auflösung von 320 mal 240 Pixeln, die später skaliert wurde, sobald das finale Panel bestätigt war. Jede visuelle und funktionale Entscheidung respektierte die physischen und elektrischen Grenzen des Geräts, und jede Einschränkung wurde zum Ausgangspunkt für Gestaltung. Während des gesamten Prozesses verknüpften wir jede technische Entscheidung mit Human Factors Prinzipien, um Klarheit und Bedienkomfort innerhalb eines engen Betriebsrahmens zu gewährleisten.
Erkenntnisse aus der Human Factors Forschung
In der Praxis
INTERFACE AUF REALE EINSATZKONTEXTE ABGESTIMMT
Der Controller musste in vielen Nutzungskontexten zuverlässig funktionieren, weshalb physische und umgebungsbezogene Faktoren das Interface Design maßgeblich prägten. Die Montagehöhe von einhundertvierzig Zentimetern positionierte das Display auf natürlicher Augenhöhe. Dies definierte die Größe der Touchflächen und begrenzte vertikale Scanbewegungen. 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 Jalousiensteuerung, während die Installationslogik separat von Systemingenieuren über eine Desktop Software konfiguriert wurde.
Die Benutzeroberfläche musste auch unter nicht idealen Bedingungen klar funktionieren. Wenn Sensoren verzögerte Messwerte, widersprüchliche Daten oder Kalibrierungsfehler lieferten, kommunizierte die Oberfläche diese Zustände ruhig und eindeutig. Warnmeldungen der zentralen Heizeinheit wurden als primäre Signale behandelt, während kleinere Hinweise wie offene Fenster visuell nachgeordnet blieben. Dieses duale System bewahrte sowohl Transparenz als auch kognitive Balance.
Mach dir einen Eindruck
UI-KOMPONENTENBEISPIEL: TEMPERATURSTEUERUNG
Die Temperatursteuerung bietet eine verdichtete Darstellung des Zusammenspiels von Design Thinking und technischer Realität. Die vertikale Skala ist von einem klassischen Thermometer inspiriert, wobei die aktuelle Temperatur im Mittelpunkt positioniert ist. Diese Struktur entsprach verhaltensbezogenen Erkenntnissen, die zeigen, dass Nutzer die Temperatur selten um mehr als vier Grad in eine Richtung verändern.
Die Entwickler halfen uns zu verstehen, wie Temperatur Updates von der Heizeinheit eintreffen und wie sich verzögerte Messwerte visualisieren lassen, ohne Verwirrung zu erzeugen. Das Drücken der Plus oder Minus Taste erzeugt ein klares Farbsignal, Rot für wärmer und Blau für kühler. Jede Änderung erfolgt in halben Grad Schritten, da die Firmware neue Werte über diskrete interne Befehle anwendet.
Die gewünschte Temperatur erscheint als gestrichelte Linie und bleibt an den Grenzen fixiert, wenn über den mittleren Bereich hinaus gescrollt wird. Animationen wurden so abgestimmt, dass sie auf dem leistungslimitierten Prozessor ruckelfrei bleiben. Alle Entscheidungen wurden mit dem Lenkungsausschuss überprüft, um langfristige Stabilität und Klarheit sicherzustellen.
Interaktionskonzept der Temperatur UI Komponente
Unterteilung: 100 Slices = 0,5°T pro Segmente
Entfernt: 20 Slices, verbleibend 80 Segmente
Bogen pro Kreis: 360°/100 = 3,6°
Entscheidung: 0.5°T = 3.6°arc , 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 einhundert Segmente unterteilt, von denen jedes einen halben Grad repräsentiert. Durch das Entfernen der unteren zwanzig Segmente entstand eine klare visuelle Grenze und es blieben achtzig aktive Segmente. Jedes Segment entspricht drei Komma sechs Grad auf dem Kreisbogen, was bedeutet, dass ein Grad Temperatur einer Rotation von sieben Komma zwei Grad entspricht. Dieses Maß an mathematischer Genauigkeit war notwendig, da das Gerät strenge Einschränkungen bei der Darstellung hatte.
Die Animations-Zeitsteuerung wurde mit den Firmware-Update-Intervallen abgestimmt, sodass visuelle Änderungen niemals von den tatsächlichen Temperaturwerten abweichen. Die Anzeige zeigt die aktuelle Temperatur neutral an, wobei Anpassungen rot oder blau markiert werden. Sobald der Benutzer die Temperatur ändert, aktualisiert sich das darunterliegende Feld, um den neuen Wert und die Änderungsrichtung anzuzeigen. Parallel dazu haben wir die Navigation in ein modulares System mit einem Overlay-Menü und konfigurierbaren Verknüpfungen umstrukturiert.
Eine schwierige Verhandlung drehte sich um die Rollladensteuerung. Die Ingenieure bestanden aus technischen Gründen darauf, alle Rollladenfunktionen auf einem einzigen Bildschirm zu belassen, während die Nutzerforschung das Risiko der Überladung aufzeigte. Nach mehreren Iterationen mit dem Lenkungsausschuss erreichten wir eine Konfiguration, die die Benutzerfreundlichkeit bewahrte und gleichzeitig die technischen Einschränkungen berücksichtigte.
Verhalten der radialen Temperatur UI Komponente
PRÄZISION IN JEDEM DESIGNDETAIL
Die feinste Arbeit liegt in den kleinsten Details. Berührungsziele wurden millimetergenau kalibriert, damit sich die Benutzeroberfläche in Stehhöhe natürlich anfühlt. Leseabstand und Panel-Luminanz bestimmten Abstände und Typografie. Jeder Farbwert wurde direkt auf der Hardware getestet, um sicherzustellen, dass kein Element bei Tageslicht ausgewaschen wird. Prototyp-Tests enthüllten die exakte Verzögerungskurve während der Sensor-Updates und halfen dabei, Mikroanimationen so zu verfeinern, dass sie das Auge leiten, ohne den Prozessor zu überlasten.
Unter der sichtbaren Präzision lag eine ganze Ebene struktureller Verfeinerung. Die Reorganisation der Menüs und der Wiederaufbau der Informationshierarchie erwiesen sich als wesentlich für Klarheit und Geschwindigkeit. Navigationsmuster wurden über die gesamte Benutzeroberfläche hinweg konsistent gehalten und während des gesamten Projekts aktualisiert, während sich Erkenntnisse ansammelten. Zustände wurden geklärt und abgestimmt, und die Farben für helle und dunkle Modi wurden als gepaarte Systeme behandelt, um die kognitive Karte des Benutzers 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.
Wir lieferten außerdem ein vollständiges Design-System, das unternehmensweite Design-Tokens, eine umfassende Komponentenbibliothek und klare Governance-Modelle enthält, die langfristige Konsistenz unterstützen.
Design System mit organisationsweiten Design Tokens
EIN NEUER STANDARD FÜR SMART-HOME-UX
Dieses Projekt vereinte jeden anspruchsvollen Aspekt des eingebetteten GUI-Designs. Es operierte innerhalb strenger technischer Grenzen, einer mehrschichtigen Governance-Struktur und einem Ökosystem miteinander verbundener Sensoren und Aktoren. Anstatt sich von Einschränkungen begrenzen zu lassen, nutzte das Team sie als Gerüst für Innovation. Designer, Ingenieure, Händler, Forscher und ein Lenkungsausschuss formten das Produkt über neun Monate der Zusammenarbeit hinweg. Die Methodik sorgte für Kontinuität, von der frühen Nutzerforschung über die Konzeptentwicklung bis hin zur technischen Prototypenentwicklung, die auf das tatsächliche Firmware-Verhalten abgestimmt war. Die Validierung auf Prototyp-Hardware stellte sicher, dass die Benutzeroberfläche auch bei verzögerten Sensor-Messwerten, widersprüchlichen Werten und Wiederherstellungszuständen korrekt funktionierte.
Die modulare Architektur unterstützt nun die zukünftige Firmware-Entwicklung und neue Produktvarianten. Während des Projekts wurde die Navigation durch mehrere Iterationsrunden verfeinert, bis sie sowohl schnellen Zugriff auf häufige Aktionen als auch eine vollständige Menüstruktur ermöglichte, in der alle Funktionen zu finden sind. Dieses Gleichgewicht verleiht dem Produkt langfristige Stabilität und Anpassungsfähigkeit.
Die Navigation spiegelt reale Nutzungsmuster wider. Temperaturkomponenten übersetzen technische Realitäten in selbstbewusste Interaktionen. Warnmeldungen kommunizieren operative Wahrheit ohne Panik. Jede Ebene ist kohärent, von den physischen Einschränkungen des Geräts bis zum kognitiven Komfort des Benutzers.
Das Ergebnis ist eine eingebettete Benutzeroberfläche, die als Referenzpunkt für technisch anspruchsvolles GUI-Design dient und Präzision, Realismus und eine Struktur vereint, die im Laufe der Zeit wachsen kann.
