En ny benchmark-GUI for intelligent miljøkontroll
Elsner se acercó a nosotros con un briefing que abarcaba todas las capas de un moderno producto de smart home para consumidores. El diseño de la GUI se desarrolló dentro de una estructura empresarial con un equipo de diseño UX y UI apoyado por un comité de dirección de cinco personas. La interfaz de usuario debía servir a consumidores en 54 países, y distribuidores de diez países formaron parte del proceso de diseño y validación.
Leveransen tok ni måneder, med et embedded designteam som jobbet skulder ved skulder med ingeniørene for å tilpasse grensesnittet til skreddersydd maskinvare, eksisterende kontrolllogikk og et nettverk av tilkoblede komponenter. Siden dette var en varme- og kjølekontroller, startet arbeidet med et detaljert kart over systemets fysiske miljø.
Enheten mottok data fra værstasjoner, CO₂-sensorer, fuktighetssensorer, temperaturfølere og hovedvarmeenheten. Sensors nøyaktighet, aktuatorenes pålitelighet og nettverksstabilitet formet alle tidlige beslutninger. Grensesnittet måtte fungere med gjeldende API-er og samtidig forutse fremtidige, for å bygge et fundament som kan utvikle seg med ny firmware og nye produktvarianter.
VÅRE BIDRAG
Kartlegging av krav
Brukerforskning
Benchmarking
UX Design
Prototyping og brukertesting
UI-design – lys og mørk
Organisasjonsomfattende designsystem
Kvalitetssikring
STRUKTURERT SAMARBEID MELLOM DESIGN OG ENGINEERING PÅ TVERS AV FAGDISIPLINER
Prosjektet utviklet seg gjennom sammenkoblede lag som styrket hverandre. Brukerundersøkelser og konkurransebenchmarking ga en innledende forståelse av behov, begrensninger og bransjemønstre. Samlinger med forhandlere fra ti land bidro med praktisk erfaring og fremhevet atferdsforskjeller på tvers av markeder. Forhandlerne ga også innsikt i lokalt konkurransepress og fremvoksende trender.
Tidlige engineering-sesjoner avdekket praktiske innsikter om firmwareatferd, inkludert tidspunktet for temperaturoppdateringer og betingelsene der varmeenheten tok i bruk nye verdier. Med denne kunnskapen gikk vi inn i den divergerende fasen av double diamond-modellen, hvor wireframes og konseptretninger ble åpnet, testet, sammenlignet og analysert for styrker og svakheter.
Prototyper ble testet sammen med ingeniører, som avdekket skjult atferd knyttet til forsinkelsessituasjoner, kalibreringsdrift og synkronisering av styring. Alle fremvoksende retninger ble lagt frem for styringsgruppen, som bidro til å tydeliggjøre den langsiktige visjonen og opprettholde sammenheng mellom tekniske, strategiske og opplevelsesmessige lag.
DESIGN FORMET AV REELLE BEGRENSNINGER
Maskinvaren bak denne kontrolleren påvirket hele prosjektet. Det var en skreddersydd enhet med uvanlig oppførsel, begrenset minne og beskjeden prosessorkraft, men som likevel hadde et overraskende allsidig funksjonssett for et rundt fire tommers TFT LCD-panel med oppløsning på 480 × 480 piksler. Svært tidlige samtaler med engineering-teamet avdekket kritiske begrensninger knyttet til tilgjengelig spenning, grafikkgrensesnittet og prosessorens ytelsesramme. Kunden trengte at vi tok hensyn til tekniske spesifikasjoner fra skjermleverandører, særlig når det gjaldt spenningen som kreves for panelet og bakgrunnsbelysningen, samt vurderinger rundt grafikkgrensesnitt, fargedybde og tilgjengelighet av prøver.
Da redesignet startet, var den endelige skjermen ennå ikke valgt, og vår eneste referanse besto derfor av den tidligere enheten og et omfattende sett med tilbakemeldinger fra feltet om rulleforsinkelser, lastetider og inkonsistent rendering under sensoraktivitet. Ingeniørene beskrev minnebudsjetter, tidspunktet for dataoppdateringssykluser og varmesystemets atferd under kalibrering. For å minimere risiko tok vi et strategisk valg og designet opplevelsen først i en lavere oppløsning på 320 × 240 piksler, som senere ble skalert når det endelige panelet var bekreftet. Hvert visuelt og atferdsmessig valg respekterte enhetens fysiske og elektriske begrensninger, og hver begrensning ble et utgangspunkt for innovasjon. Gjennom hele prosessen koblet vi hver teknisk beslutning til human factors for å bevare klarhet og komfort innenfor et smalt driftsområde.
Funn fra human factors-forskning
I praksis
GRENSESNITT TILPASSET REELLE KONTEKSTER
Kontrolleren måtte fungere pålitelig i mange ulike kontekster, og derfor formet fysiske og miljømessige faktorer grensesnittdesignet. Installasjonshøyden på 140 centimeter plasserte skjermen i naturlig øyehøyde. Dette definerte størrelsen på berøringsmålene og begrenset vertikale skannemønstre. De fleste interaksjoner fant sted i dagslys, mens bruk om kvelden krevde en automatisk mørk modus som ble aktivert ved solnedgang. Vanlige brukerflyter inkluderte lysstyring, sceneaktivering og justering av persienner, mens installasjonslogikken ble konfigurert separat av systemingeniører via desktop-programvare.
Grensesnittet måtte også håndtere ikke-ideelle forhold med klarhet. Når sensorer leverte forsinkede målinger, motstridende verdier eller kalibreringsfeil, kommuniserte grensesnittet disse tilstandene rolig og uten tvetydighet. Varsler fra hovedvarmeenheten ble behandlet som primære signaler, mens mindre varsler som åpne vinduer forble visuelt sekundære. Dette todelte systemet ivaretok både åpenhet og kognitiv balanse.
Få en følelse av GUI-en
UI-KOMPONENTEKSEMPEL: TEMPERATURSTYRING
Temperaturstyringen gir et konsentrert bilde av balansen mellom design thinking og teknisk virkelighet. Den vertikale skalaen var inspirert av et klassisk termometer, med gjeldende temperatur plassert i midten. Denne strukturen samsvarte med atferdsfunn som viser at brukere sjelden justerer mer enn fire grader i noen retning.
Våre engineering-partnere hjalp oss med å forstå hvordan temperaturoppdateringer kommer fra varmeenheten, og hvordan forsinkede målinger kan visualiseres uten å skape forvirring. Ved å trykke på pluss- eller minusknappen vises et tydelig fargesignal – rødt for varmere og blått for kjøligere. Hvert trinn justeres i halvgarders steg, siden firmwaren anvender nye verdier gjennom diskrete interne kommandoer.
Ønsket temperatur vises som en stiplet linje og forblir festet til grensene når man blar forbi midtområdet. Animasjonene er justert for å unngå hakking på den begrensede prosessoren. Alle beslutninger ble gjennomgått sammen med styringsgruppen for å sikre langsiktig stabilitet og tydelighet.
Interaksjonskonsept for temperaturens UI-komponent
Inndeling: 100 segmenter = 0,5°T (temperatur) per segment
Fjernet: 20 segmenter → 80 segmenter igjen
Bue per sirkel: 360°/100 = 3,6°
Konklusjon: 0,5°T = 3,6° bue, 1,0°T = 7,2° bue
UX/UI-DESIGNEKSEMPEL: SIRKULÆR STYRING
Den sirkulære temperaturmåleren introduserer en annen form for presisjon. Sirkelen er delt inn i hundre segmenter, der hvert segment representerer en halv grad. Ved å fjerne de nederste tjue segmentene ble det skapt en visuell grense, og åtti aktive segmenter gjensto. Hvert segment tilsvarer 3,6 grader på buen, noe som betyr at én hel grad temperatur tilsvarer 7,2 graders rotasjon. Dette nivået av matematisk presisjon var nødvendig fordi enheten hadde strenge begrensninger for rendering.
Animasjonstimingen ble tilpasset firmwareoppdateringsintervallene slik at visuelle endringer aldri kom i utakt med de faktiske temperaturverdiene. Måleren viser gjeldende temperatur nøytralt, med justeringer markert i rødt eller blått. Når brukeren endrer temperaturen, oppdateres feltet under for å vise den nye verdien og retningen på endringen. Parallelt restrukturerte vi navigasjonen til et modulært system med overleggmeny og konfigurerbare snarveier.
En av de mest krevende avklaringene dreide seg om styring av persienner. Av tekniske årsaker insisterte ingeniørene på å samle alle funksjoner på én skjerm, mens brukerundersøkelser viste risikoen for visuell overbelastning. Etter flere iterasjoner med styringsgruppen landet vi på en konfigurasjon som ivaretok brukervennlighet samtidig som de tekniske begrensningene ble respektert.
Atferd for den radiale temperatur-UI-komponenten
PRESISJON I HVER DESIGNDETALJ
Det beste arbeidet ligger i de minste detaljene. Berøringsmålene ble kalibrert ned til millimeteren slik at grensesnittet føles naturlig ved bruk i stående posisjon. Leseavstand og panellysstyrke formet avstander og typografi. Hver fargeverdi ble testet direkte på maskinvaren for å sikre at ingen elementer ble utvasket i dagslys. Prototypetesting avdekket den eksakte forsinkelseskurven under sensoroppdateringer og bidro til å finjustere mikroanimasjoner som leder blikket uten å overbelaste prosessoren.
Under den synlige presisjonen lå et helt lag med strukturell foredling. Omorganisering av menyer og gjenoppbygging av informasjonshierarkiet viste seg å være avgjørende for både klarhet og hastighet. Navigasjonsmønstre ble holdt konsistente på tvers av hele grensesnittet og ble kontinuerlig oppdatert gjennom prosjektet etter hvert som nye innsikter oppsto. Tilstander ble tydeliggjort og justert, og fargene for lys og mørk modus ble behandlet som sammenkoblede systemer for å holde brukerens kognitive kart stabilt til enhver tid. Resultatet er en enhet som oppleves som enkel nettopp fordi hver skjult detalj er løst med disiplin og omtanke.
Vi leverte også et komplett designsystem som inneholdt organisasjonsomfattende design tokens, et omfattende komponentbibliotek og tydelige governance-modeller som støtter langsiktig konsistens.
Designsystem med organisasjonsomfattende design tokens
EN NY STANDARD FOR SMART HOME-UX
Prosjektet samlet alle de mest krevende aspektene ved embedded GUI-design. Det opererte innenfor strenge tekniske rammer, en flerlags styringsstruktur og et økosystem av sammenkoblede sensorer og aktuatorer. I stedet for å bli begrenset av disse forholdene brukte teamet dem som et stillas for innovasjon. Designere, ingeniører, forhandlere, forskere og en styringsgruppe formet produktet gjennom ni måneders samarbeid. Metodikken ga kontinuitet fra tidlig brukerforskning via konseptutforskning til teknisk prototyping tilpasset reell firmwareatferd. Validering på prototypehardware sikret at grensesnittet fungerte korrekt selv ved forsinkede sensordata, motstridende verdier og gjenopprettingstilstander.
Den modulære arkitekturen støtter nå fremtidig utvikling av firmware og nye produktvarianter. Gjennom prosjektet ble navigasjonen finjustert i flere iterasjoner, helt til den ga både rask tilgang til ofte brukte handlinger og en fullstendig menustruktur der all funksjonalitet var tilgjengelig. Denne balansen gir produktet langsiktig stabilitet og tilpasningsevne.
Navigasjonen gjenspeiler reelle bruksmønstre. Temperaturkomponenter oversetter tekniske realiteter til trygge og selvsikre interaksjoner. Varsler formidler den faktiske driftstilstanden uten å skape panikk. Hvert lag er helhetlig, fra enhetens fysiske begrensninger til brukerens kognitive komfort.
Resultatet er et embedded grensesnitt som fungerer som et referansepunkt for teknisk krevende GUI-design, og som forener presisjon, realisme og en struktur som kan vokse over tid.