Een nieuwe benchmark-GUI voor intelligente omgevingsregeling
Smart home device
UX-ontwerp
UI-ontwerp
- KLANT
- Elsner
- LOCATIE
- Duitsland
- TEAM
- UX-ontwerper, UI-ontwerper, interactie-ontwerper, projectmanager, producteigenaar, onderzoeker
- WEBSITE
- elsner-elektronik.de
Elsner benaderde ons met een briefing die elke laag van een modern smart-home-consumentenproduct raakte. Het GUI-ontwerp werd ontwikkeld binnen een ondernemingsstructuur met een UX- en UI-ontwerpteam, gesteund door een stuurgroep van vijf personen. De gebruikersinterface zou consumenten in 54 landen bedienen, en dealers uit tien landen werden opgenomen in het ontwerp- en validatieproces.
De oplevering duurde negen maanden, waarbij een embedded designteam schouder aan schouder werkte met ingenieurs om de interface af te stemmen op maatwerkhardware, bestaande besturingslogica en een netwerk van verbonden componenten. Omdat dit een verwarmings- en koelingscontroller was, begon het werk met een gedetailleerde kaart van de fysieke omgeving van het systeem.
Het apparaat ontving input van weerstations, CO₂-sensoren, vochtsensoren, temperatuursondes en de hoofdverwarmingseenheid. Sensornauwkeurigheid, actuatorbetrouwbaarheid en netwerkstabiliteit bepaalden elke vroege beslissing. De interface moest op de huidige API’s draaien en tegelijkertijd anticiperen op toekomstige, waardoor een basis werd gecreëerd die zich kon ontwikkelen met nieuwe firmware en productvarianten.
ONZE BIJDRAGEN
Eisen in kaart brengen
Gebruikersonderzoek
Benchmarking
UX-ontwerp
Prototypering & gebruikerstesten
UI Design - licht en donker
Organisatiebreed designsysteem
Kwaliteitsborging
GESTRUCTUREERDE SAMENWERKING TUSSEN DESIGN EN ENGINEERING OVER DISCIPLINES HEEN
Het project vorderde via onderling verbonden lagen die elkaar versterkten. Gebruikersonderzoek en competitieve benchmarking boden het eerste inzicht in behoeften, beperkingen en industriepatronen. Sessies met dealers uit tien landen voegden praktijkervaring toe en brachten gedragsverschillen tussen markten aan het licht. De dealers gaven ook input over lokale concurrentiedruk en opkomende trends.
Vroege engineering-sessies brachten praktische inzichten aan het licht over het gedrag van de firmware, waaronder de timing van temperatuuropdates en de omstandigheden waaronder de verwarmingseenheid nieuwe waarden toepaste. Gewapend met deze kennis gingen we de divergente fase van het double-diamondmodel in, waarin wireframes en conceptroutes werden geopend, getest, vergeleken en geanalyseerd op sterke en zwakke punten.
Prototypes werden samen met ingenieurs getest, die verborgen gedragingen blootlegden bij vertragingen, kalibratiedrift en synchronisatie van besturing. Alle opkomende richtingen werden voorgelegd aan de stuurgroep, die hielp de langetermijnvisie aan te scherpen en samenhang te bewaren tussen de technische, strategische en ervaringslagen.
DESIGN GEVORMD DOOR ECHTE BEPERKINGEN
De hardware achter deze controller had invloed op het hele project. Het was een maatwerkapparaat met ongebruikelijk gedrag, beperkt geheugen en bescheiden verwerkingskracht, maar toch beschikte het over een verrassend veelzijdige set functies voor een rond TFT LCD-paneel van vier inch met een resolutie van 480 × 480 pixels. Zeer vroege gesprekken met het engineeringteam brachten kritische beperkingen aan het licht met betrekking tot de beschikbare spanning, de grafische interface en het prestatiebereik van de processor. De klant verwachtte dat wij rekening hielden met de technische specificaties van displayleveranciers, met name wat betreft de vereiste spanning voor het paneel en de achtergrondverlichting, evenals overwegingen rond de grafische interface, kleurdiepte en beschikbaarheid van samples.
Toen het herontwerp begon, was het uiteindelijke scherm nog niet geselecteerd, waardoor onze enige referentie bestond uit het vorige apparaat en een omvangrijke hoeveelheid feedback uit het veld over scrollvertraging, laadtijden en inconsistente weergave bij sensoractiviteit. Ingenieurs schetsten geheugenbudgetten, de timing van gegevensverversingscycli en het gedrag van het verwarmingssysteem tijdens kalibratie. Om risico’s te beperken, maakten we een strategische keuze en ontwierpen we de ervaring op een kleinere resolutie van 320 × 240 pixels, die later werd opgeschaald zodra het definitieve paneel was bevestigd. Elke visuele en gedragsmatige keuze respecteerde de fysieke en elektrische grenzen van het apparaat, en elke beperking werd een aanleiding voor innovatie. Gedurende het hele proces koppelden we elke technische beslissing aan human factors om helderheid en comfort te behouden binnen een smalle operationele bandbreedte.
Bevindingen uit human factors-onderzoek
In de praktijk
INTERFACE AFGESTEMD OP ECHTE CONTEXTEN
De controller moest betrouwbaar functioneren in uiteenlopende contexten, waardoor fysieke en omgevingsfactoren het interfaceontwerp bepaalden. De installatiehoogte van 140 centimeter plaatste het scherm op natuurlijke ooghoogte. Dit bepaalde de afmetingen van touchdoelen en beperkte verticale scanpatronen. De meeste interacties vonden plaats bij daglicht, terwijl gebruik in de avond een automatische donkere modus vereiste die bij zonsondergang werd geactiveerd. Veelvoorkomende flows waren lichtregeling, scèneactivatie en jaloezie-aanpassing, terwijl de installatielogica afzonderlijk werd geconfigureerd door systeemingenieurs via desktopsoftware.
De interface moest ook onder niet-ideale omstandigheden helder blijven functioneren. Wanneer sensoren vertraagde metingen, tegenstrijdige waarden of kalibratiefouten produceerden, communiceerde de interface deze toestanden rustig en ondubbelzinnig. Meldingen van de hoofdverwarmingseenheid werden als primaire signalen behandeld, terwijl kleinere notificaties zoals open ramen visueel secundair bleven. Dit tweesporensysteem waarborgde zowel transparantie als cognitieve balans.
Krijg een gevoel bij de GUI
UI-COMPONENTVOORBEELD: TEMPERATUURREGELING
De temperatuurregeling biedt een geconcentreerd beeld van de balans tussen design thinking en technische realiteit. De verticale schaal was geïnspireerd op een klassieke thermometer, waarbij de huidige temperatuur in het midden werd geplaatst. Deze structuur sloot aan bij gedragsbevindingen die aantonen dat gebruikers zelden meer dan vier graden in één van beide richtingen aanpassen.
Engineeringpartners hielpen ons te begrijpen hoe temperatuuropdates van de verwarmingseenheid binnenkomen en hoe vertraagde metingen gevisualiseerd kunnen worden zonder verwarring te veroorzaken. Het indrukken van de plus- of minknop geeft een helder kleurensignaal: rood voor warmer en blauw voor koeler. Elke stap verloopt in halve graden, omdat de firmware nieuwe waarden toepast via discrete interne commando’s.
De gewenste temperatuur wordt weergegeven als een gestippelde lijn en blijft vastgezet op de grenzen wanneer buiten het middenbereik wordt gescrold. Animaties zijn afgestemd om haperingen op de beperkte processor te voorkomen. Alle beslissingen zijn samen met de stuurgroep beoordeeld om langetermijnstabiliteit en duidelijkheid te waarborgen.
Interactieconcept van de temperatuur-UI-component
Verdeling: 100 segmenten = 0,5°T (temperatuur) per segment
Verwijderd: 20 segmenten → 80 segmenten over
Boog per cirkel: 360°/100 = 3,6°
Conclusie: 0,5°T = 3,6° boog, 1,0°T = 7,2° boog
UX/UI-DESIGNVOORBEELD: CIRCULAIRE REGELING
De circulaire temperatuurschaal introduceert een andere vorm van precisie. De cirkel is verdeeld in honderd segmenten, waarbij elk segment een halve graad vertegenwoordigt. Door de onderste twintig segmenten te verwijderen ontstond een visuele begrenzing en bleven tachtig actieve segmenten over. Elk segment komt overeen met 3,6 graden op de boog, wat betekent dat één volledige graad temperatuur gelijk is aan 7,2 graden rotatie. Dit niveau van wiskundige nauwkeurigheid was noodzakelijk vanwege de strikte renderbeperkingen van het apparaat.
De timing van animaties werd afgestemd op de firmware-update-intervallen, zodat visuele veranderingen nooit uit de pas liepen met de werkelijke thermische waarden. De meter toont de huidige temperatuur neutraal, met aanpassingen gemarkeerd in rood of blauw. Zodra de gebruiker de temperatuur wijzigt, wordt het veld eronder bijgewerkt met de nieuwe waarde en de richting van verandering. Tegelijkertijd herstructureerden we de navigatie tot een modulair systeem met een overlaymenu en configureerbare snelkoppelingen.
Een van de lastigste afwegingen betrof de bediening van zonwering. Ingenieurs stonden er om technische redenen op dat alle functies op één scherm werden ondergebracht, terwijl gebruikersonderzoek wees op het risico van visuele overbelasting. Na meerdere iteraties met de stuurgroep kwamen we tot een configuratie die de bruikbaarheid behield en tegelijkertijd de technische beperkingen respecteerde.
Gedrag van de radiale temperatuur-UI-component
PRECISIE IN ELK ONTWERPDETAIL
Het beste werk zit in de kleinste details. Touchdoelen werden tot op de millimeter gekalibreerd zodat de interface natuurlijk aanvoelt bij bediening in staande houding. Leesafstand en paneelluminantie bepaalden de spacing en typografie. Elke kleurwaarde werd rechtstreeks op de hardware getest om te garanderen dat geen enkel element bij daglicht verbleekte. Prototypetests brachten de exacte vertragingscurve tijdens sensorupdates aan het licht en hielpen micro-animaties te verfijnen die het oog leiden zonder de processor te overbelasten.
Onder de zichtbare precisie bevond zich een volledige laag van structurele verfijning. Het herstructureren van menu’s en het opnieuw opbouwen van de informatiehiërarchie bleek essentieel voor zowel duidelijkheid als snelheid. Navigatiepatronen werden consistent gehouden over de gehele interface en gedurende het project voortdurend aangepast naarmate inzichten zich opstapelden. Staten werden verduidelijkt en op elkaar afgestemd, en de kleuren voor lichte en donkere modi werden behandeld als gekoppelde systemen om de cognitieve kaart van de gebruiker te allen tijde stabiel te houden. Het resultaat is een apparaat dat eenvoudig aanvoelt, juist omdat elk verborgen detail met discipline en zorg is uitgewerkt.
Daarnaast leverden wij een volledig design system met organisatiebrede design tokens, een uitgebreide componentbibliotheek en duidelijke governance-modellen die langetermijnconsistentie ondersteunen.
Design system met organisatiebrede design tokens
EEN NIEUWE STANDAARD VOOR SMART HOME-UX
Dit project bracht alle veeleisende aspecten van embedded GUI-design samen. Het functioneerde binnen strikte technische grenzen, een gelaagde governance-structuur en een ecosysteem van onderling verbonden sensoren en actuatoren. In plaats van door beperkingen te worden tegengehouden, gebruikte het team deze als fundament voor innovatie. Designers, engineers, dealers, onderzoekers en een stuurgroep gaven het product vorm gedurende negen maanden samenwerking. Methodologie zorgde voor continuïteit, van vroeg gebruikersonderzoek via conceptverkenning tot technische prototyping afgestemd op daadwerkelijk firmwaregedrag. Validatie op prototypehardware garandeerde dat de interface correct bleef functioneren, zelfs bij vertraagde sensormetingen, tegenstrijdige waarden en hersteltoestanden.
De modulaire architectuur ondersteunt nu toekomstige firmware-evolutie en nieuwe productvarianten. Tijdens het project werd de navigatie verfijnd in meerdere iteratierondes, totdat deze zowel snelle toegang tot veelgebruikte acties als een volledige menustructuur bood waarin alle functionaliteit te vinden is. Deze balans geeft het product langdurige stabiliteit en aanpasbaarheid.
De navigatie weerspiegelt echte gebruikspatronen. Temperatuurcomponenten vertalen technische realiteiten naar zelfverzekerde interacties. Meldingen communiceren de operationele werkelijkheid zonder paniek te veroorzaken. Elke laag is coherent, van de fysieke beperkingen van het apparaat tot het cognitieve comfort van de gebruiker.
Het resultaat is een embedded interface die geldt als referentiepunt voor technisch veeleisend GUI-design en precisie, realisme en een structuur samenbrengt die in de tijd kan meegroeien.
