En ny benchmark-GUI til intelligent miljøstyring
Elsner henvendte sig til os med et brief, der berørte alle lag af et moderne smart home-produkt til forbrugere. GUI-designet blev udviklet inden for en virksomhedstruktur med et UX- og UI-designteam, støttet af en fempersoners styregruppe. Brugergrænsefladen skulle betjene forbrugere i 54 lande, og forhandlere fra ti lande blev integreret i design- og valideringsprocessen.
Leveringen tog ni måneder, hvor et embedded designteam arbejdede side om side med ingeniører for at tilpasse interfacet til specialudviklet hardware, eksisterende styrelogik og et netværk af tilsluttede komponenter. Fordi dette var en varme- og kølingscontroller, begyndte arbejdet med et detaljeret kort over systemets fysiske miljø.
Enheden modtog input fra vejrstationer, CO₂-sensorer, fugtighedssensorer, temperaturprober og hovedvarmeenheden. Sensors nøjagtighed, aktuatorers pålidelighed og netværkets stabilitet formede alle tidlige beslutninger. Interfacet skulle fungere på nuværende API’er, samtidig med at det forudså fremtidige, og skabe et fundament der kunne udvikle sig med ny firmware og nye produktvarianter.
VORES BIDRAG
Kortlægning af krav
Brugerundersøgelse
Benchmarking
UX Design
Prototyping og brugertest
UI-design – Lys og mørk
Virksomhedsdækkende design system
Kvalitetssikring
STRUKTURERET SAMARBEJDE MELLEM DESIGN OG ENGINEERING PÅ TVÆRS AF DISCIPLINER
Projektet udviklede sig gennem sammenhængende lag, der styrkede hinanden. Brugerundersøgelser og konkurrencebenchmarking gav den indledende forståelse af behov, begrænsninger og branchemønstre. Sessioner med forhandlere fra ti lande tilføjede praktisk erfaring og fremhævede adfærdsmæssige forskelle på tværs af markeder. Forhandlerne bidrog også med indsigt i lokalt konkurrencepres og nye trends.
Tidlige engineering-sessioner afdækkede praktiske indsigter i firmwarens adfærd, herunder timingen af temperaturopdateringer og de betingelser, hvorunder varmeenheden anvendte nye værdier. Med denne viden gik vi ind i den divergerende fase af double diamond-modellen, hvor wireframes og konceptspor blev åbnet, testet, sammenlignet og analyseret for styrker og svagheder.
Prototyper blev afprøvet sammen med ingeniører, som afdækkede skjulte adfærdsmønstre under forsinkelser, kalibreringsafvigelser og styringssynkronisering. Alle fremvoksende retninger blev præsenteret for styregruppen, som bidrog til at forfine den langsigtede vision og sikre sammenhæng mellem de tekniske, strategiske og oplevelsesmæssige lag.
DESIGN FORMET AF REELLE BEGRÆNSNINGER
Hardwaren bag denne controller påvirkede hele projektet. Det var en specialudviklet enhed med usædvanlig adfærd, begrænset hukommelse og beskeden processorkraft, men den rummede alligevel et overraskende alsidigt funktionssæt til et rundt fire tommer TFT LCD-panel med en opløsning på 480 × 480 pixel. Meget tidlige drøftelser med engineering-teamet afdækkede kritiske begrænsninger relateret til tilgængelig spænding, grafikinterfacet og processorens ydeevneområde. Kunden havde behov for, at vi tog højde for tekniske specifikationer fra displayleverandører vedrørende den spænding, der kræves til panelet og baggrundsbelysningen, samt overvejelser om grafikinterface, farvedybde og tilgængelighed af prøver.
Da redesignet begyndte, var den endelige skærm endnu ikke valgt, så vores eneste reference bestod af den tidligere enhed samt en betydelig mængde feltfeedback om scroll-forsinkelse, indlæsningsforsinkelser og inkonsistent rendering under sensoraktivitet. Ingeniørerne beskrev hukommelsesbudgetter, timingen af dataopdateringscyklusser og varmesystemets adfærd under kalibrering. For at minimere risiko traf vi et strategisk valg og designede oplevelsen i en mindre opløsning på 320 × 240 pixel, som senere blev skaleret, da det endelige panel var bekræftet. Hvert visuelt og adfærdsmæssigt valg respekterede enhedens fysiske og elektriske begrænsninger, og hver begrænsning blev en drivkraft for innovation. Gennem hele processen koblede vi hver teknisk beslutning til human factors for at bevare klarhed og komfort inden for et snævert driftsområde.
Resultater fra human factors-forskning
I praksis
INTERFACE AFSTEMT TIL REELLE KONTEXTER
Controlleren skulle fungere pålideligt i mange forskellige kontekster, og derfor prægede fysiske og miljømæssige faktorer interface-designet. Installationshøjden på 140 centimeter placerede skærmen i naturlig øjenhøjde. Dette fastlagde størrelsen på touch-mål og begrænsede vertikale scanningsmønstre. De fleste interaktioner fandt sted i dagslys, mens brug om aftenen krævede en automatisk dark mode, der blev aktiveret ved solnedgang. Almindelige brugerflows omfattede lysstyring, aktivering af scener og justering af persienner, mens installationslogikken blev konfigureret separat af systemingeniører via desktop-software.
Interfacet skulle også håndtere ikke-ideelle forhold med klarhed. Når sensorer leverede forsinkede målinger, modstridende værdier eller kalibreringsfejl, formidlede interfacet disse tilstande roligt og uden tvetydighed. Advarsler fra hovedvarmeenheden blev behandlet som primære signaler, mens mindre notifikationer såsom åbne vinduer forblev visuelt sekundære. Dette todelte system bevarede både transparens og kognitiv balance.
Få en fornemmelse af GUI’en
UI-KOMPONENTEKSEMPEL: TEMPERATURSTYRING
Temperaturstyringen giver et koncentreret indblik i balancen mellem design thinking og teknisk realitet. Den vertikale skala var inspireret af et klassisk termometer, med den aktuelle temperatur placeret i midten. Denne struktur stemte overens med adfærdsstudier, som viser, at brugere sjældent justerer mere end fire grader i nogen retning.
Vores engineering-partnere hjalp os med at forstå, hvordan temperaturopdateringer kommer fra varmeenheden, og hvordan forsinkede målinger kan visualiseres uden at skabe forvirring. Et tryk på plus- eller minusknappen giver et tydeligt farvesignal – rød for varmere og blå for koldere. Hvert trin bevæger sig i halve grader, da firmwaren anvender nye værdier via diskrete interne kommandoer.
Den ønskede temperatur vises som en stiplet linje og forbliver fastlåst ved grænserne, når der scrolles ud over midterområdet. Animationerne er finjusteret for at undgå hakken på den begrænsede processor. Alle beslutninger blev gennemgået med styregruppen for at sikre langsigtet stabilitet og klarhed.
Interaktionskoncept for temperaturens UI-komponent
Opdeling: 100 segmenter = 0,5°T (temperatur) pr. segment
Fjernet: 20 segmenter → 80 segmenter tilbage
Bue pr. cirkel: 360°/100 = 3,6°
Konklusion: 0,5°T = 3,6° bue, 1,0°T = 7,2° bue
UX/UI-DESIGNEKSEMPEL: CIRKULÆR STYRING
Den cirkulære temperaturindikator introducerer en anden form for præcision. Cirklen er opdelt i hundrede segmenter, hvor hvert segment repræsenterer en halv grad. Ved at fjerne de nederste tyve segmenter blev der skabt en visuel afgrænsning, hvilket efterlod firs aktive segmenter. Hvert segment svarer til 3,6 grader på buen, hvilket betyder, at én hel grad temperatur svarer til 7,2 graders rotation. Dette niveau af matematisk stringens var nødvendigt, da enheden havde strenge begrænsninger for rendering.
Animationernes timing blev afstemt med firmwareopdateringernes intervaller, så visuelle ændringer aldrig kom ud af sync med de faktiske temperaturværdier. Måleren viser den aktuelle temperatur neutralt, mens justeringer markeres med rød eller blå. Når brugeren ændrer temperaturen, opdateres feltet nedenunder for at vise den nye værdi og bevægelsesretningen. Parallelt hermed omstrukturerede vi navigationen til et modulært system med overlay-menu og konfigurerbare genveje.
En af de mere udfordrende afstemninger handlede om styringen af persienner. Ingeniørerne insisterede af tekniske årsager på at samle alle funktioner på én skærm, mens brugerundersøgelser pegede på risikoen for visuelt rod. Efter flere iterationer med styregruppen nåede vi frem til en konfiguration, der bevarede brugervenligheden og samtidig respekterede de tekniske begrænsninger.
Adfærd for den radiale temperatur-UI-komponent
PRÆCISION I HVER ENESTE DESIGNSDETALJE
Det fineste arbejde ligger i de mindste detaljer. Touchmål blev kalibreret ned til millimeteren, så interfacet føles naturligt ved betjening i stående position. Læseafstand og panellysstyrke formede afstande og typografi. Hver farveværdi blev testet direkte på hardwaren for at sikre, at ingen elementer fremstod udvaskede i dagslys. Prototypetest afslørede den præcise forsinkelseskurve under sensoropdateringer og hjalp med at forfine mikroanimationer, der guider blikket uden at overbelaste processoren.
Bag den synlige præcision lå et helt lag af strukturel forfinelse. Omorganisering af menuer og genopbygning af informationshierarkiet viste sig at være afgørende for både klarhed og hastighed. Navigationsmønstre blev holdt konsistente på tværs af hele interfacet og blev løbende opdateret gennem projektet, efterhånden som nye indsigter opstod. Tilstande blev tydeliggjort og afstemt, og farverne i lys- og mørketilstande blev behandlet som sammenhængende systemer for at holde brugerens kognitive kort stabilt til enhver tid. Resultatet er en enhed, der føles enkel, netop fordi alle skjulte detaljer er løst med disciplin og omhu.
Vi leverede også et komplet design system, der indeholder organisationsdækkende design tokens, et omfattende komponentbibliotek samt klare governance-modeller, som understøtter langsigtet konsistens.
Design system med organisationsomfattende design tokens
EN NY STANDARD FOR SMART HOME-UX
Projektet samlede alle de krævende aspekter af embedded GUI-design. Det fungerede inden for stramme tekniske rammer, en flerlaget governance-struktur og et økosystem af sammenkoblede sensorer og aktuatorer. I stedet for at blive begrænset af disse vilkår brugte teamet dem som stillads for innovation. Designere, ingeniører, forhandlere, forskere og en styregruppe formede produktet gennem ni måneders tæt samarbejde. Metodikken skabte kontinuitet fra tidlig brugerforskning over konceptudvikling til teknisk prototyping i overensstemmelse med reel firmwareadfærd. Validering på prototypehardware sikrede, at interfacet fungerede korrekt selv ved forsinkede sensoraflæsninger, modstridende værdier og gendannelsestilstande.
Den modulære arkitektur understøtter nu fremtidig firmwareudvikling og nye produktvarianter. Under projektet blev navigationen forfinet gennem flere iterationsrunder, indtil den muliggjorde både hurtig adgang til hyppige handlinger og en komplet menustruktur, hvor al funktionalitet kunne findes. Denne balance giver produktet langsigtet stabilitet og fleksibilitet.
Navigationen afspejler reelle brugsmønstre. Temperaturkomponenter oversætter tekniske realiteter til sikre og trygge interaktioner. Advarsler formidler den operationelle tilstand uden at skabe alarm. Hvert lag er sammenhængende, fra enhedens fysiske begrænsninger til brugerens kognitive komfort.
Resultatet er en embedded grænseflade, der fungerer som reference for teknisk krævende GUI-design og samler præcision, realisme og en struktur, der kan udvikle sig over tid.