En ny riktmärkes-GUI för intelligent miljökontroll
Elsner kontaktade oss med ett uppdrag som berörde varje nivå av en modern smart-home-produkt för konsumenter. GUI-designen togs fram inom en företagsstruktur med ett UX- och UI-designteam som stöddes av en styrgrupp på fem personer. Användargränssnittet skulle användas av konsumenter i 54 länder, och återförsäljare från tio länder integrerades i design- och valideringsprocessen.
Leveransen tog nio månader, där ett embedded designteam arbetade sida vid sida med ingenjörer för att anpassa gränssnittet till skräddarsydd hårdvara, befintlig styrlogik och ett nätverk av sammanlänkade komponenter. Eftersom detta var en värme- och kylkontroller började arbetet med en detaljerad kartläggning av systemets fysiska miljö.
Enheten tog emot data från väderstationer, CO₂-sensorer, fuktighetssensorer, temperatursonder och huvudvärmeenheten. Sensors noggrannhet, aktuatorers tillförlitlighet och nätverkets stabilitet påverkade varje tidigt beslut. Gränssnittet behövde fungera med nuvarande API:er samtidigt som det förutsåg framtida, vilket skapade en grund som kan utvecklas med ny firmware och produktvarianter.
VÅRA BIDRAG
Kravkartläggning
Användarforskning
Benchmarking
UX Design
Prototyper och användartester
UI Design - Ljus och mörk
Organisationsomfattande designsystem
Kvalitetssäkring
STRUKTURERAT SAMARBETE MELLAN DESIGN OCH ENGINEERING ÖVER DISCIPLINER
Projektet gick framåt genom sammankopplade lager som stärkte varandra. Användarundersökningar och konkurrensbenchmarking gav en initial förståelse för behov, begränsningar och branschmönster. Sessioner med återförsäljare från tio länder tillförde praktisk erfarenhet och belyste beteendeskillnader mellan marknader. Återförsäljarna bidrog även med insikter om lokal konkurrenspress och framväxande trender.“
Tidiga engineering-sessioner avslöjade praktiska insikter om firmwarebeteende, inklusive tidpunkten för temperaturuppdateringar och de förhållanden under vilka värmeenheten tillämpade nya värden. Med denna kunskap gick vi in i den divergerande fasen av double diamond-modellen, där wireframes och konceptspår öppnades, testades, jämfördes och analyserades utifrån styrkor och svagheter.
Prototyper testades tillsammans med ingenjörer som avslöjade dolda beteenden vid fördröjningar, kalibreringsdrift och synkronisering av styrning. Alla framväxande riktningar lyftes till styrgruppen, som bidrog till att förfina den långsiktiga visionen och säkerställa samstämmighet mellan de tekniska, strategiska och upplevelsemässiga lagren.
DESIGN FORMAT AV VERKLIGA BEGRÄNSNINGAR
Hårdvaran bakom denna styrenhet påverkade hela projektet. Det var en skräddarsydd enhet med ovanligt beteende, begränsat minne och blygsam processorkraft, men som ändå hade ett förvånansvärt mångsidigt funktionsutbud för en rund fyra tum TFT LCD-panel med upplösningen 480 × 480 pixlar. Mycket tidiga diskussioner med ingenjörsteamet avslöjade kritiska begränsningar kopplade till tillgänglig spänning, grafikgränssnittet och processorns prestandaram. Kunden krävde att vi tog hänsyn till tekniska specifikationer från displayleverantörer, särskilt vad gäller den spänning som krävs för panelen och dess bakgrundsbelysning, samt överväganden kring grafikgränssnitt, färgdjup och tillgång till prover.
När omdesignen inleddes hade den slutliga skärmen ännu inte valts, vilket gjorde att vår enda referens bestod av den tidigare enheten och en omfattande mängd fältfeedback kring rullningsfördröjningar, laddningstider och inkonsekvent rendering vid sensoraktivitet. Ingenjörerna beskrev minnesbudgetar, tidpunkten för datauppdateringscykler och värmesystemets beteende under kalibrering. För att minimera risk tog vi ett strategiskt beslut och designade upplevelsen initialt i en lägre upplösning på 320 × 240 pixlar, som senare skalades när den slutliga panelen bekräftades. Varje visuell och beteendemässig beslut respekterade enhetens fysiska och elektriska begränsningar, och varje begränsning blev en drivkraft för innovation. Genom hela processen kopplade vi varje tekniskt beslut till mänskliga faktorer för att bevara tydlighet och komfort inom ett snävt driftspann.
Resultat från forskning om mänskliga faktorer
I praktiken
GRÄNSSNITT ANPASSAT FÖR VERKLIGA KONTEXTER
Styrenheten behövde fungera tillförlitligt i många olika sammanhang, vilket gjorde att fysiska och miljömässiga faktorer formade gränssnittsdesignen. Installationshöjden på 140 centimeter placerade skärmen i naturlig ögonhöjd. Detta fastställde storleken på tryckytor och begränsade vertikala skanningsmönster. De flesta interaktioner skedde i dagsljus, medan användning på kvällen krävde ett automatiskt mörkt läge som aktiverades vid solnedgång. Vanliga flöden omfattade ljusstyrning, scenaktivering och justering av persienner, medan installationslogiken konfigurerades separat av systemingenjörer via skrivbordsprogramvara.
Gränssnittet behövde också hantera mindre idealiska förhållanden med tydlighet. När sensorer levererade fördröjda avläsningar, motstridiga värden eller kalibreringsfel kommunicerade gränssnittet dessa tillstånd lugnt och utan tvetydighet. Varningar från huvudvärmeenheten behandlades som primära signaler, medan mindre notifieringar, såsom öppna fönster, förblev visuellt sekundära. Detta dubbla system bevarade både transparens och kognitiv balans.
Få en känsla för GUI:t
EXEMPEL PÅ UI-KOMPONENT: TEMPERATURSTYRNING
Temperaturstyrningen ger en koncentrerad bild av balansen mellan design thinking och teknisk verklighet. Den vertikala skalan inspirerades av en klassisk termometer, med den aktuella temperaturen placerad i mitten. Denna struktur överensstämde med beteendemässiga insikter som visar att användare sällan justerar mer än fyra grader åt något håll.
Våra engineering-partners hjälpte oss att förstå hur temperaturuppdateringar kommer från värmeenheten och hur fördröjda avläsningar kan visualiseras utan att skapa förvirring. Ett tryck på plus- eller minusknappen ger en tydlig färgsignal – rött för varmare och blått för svalare. Varje steg justeras i halva grader, eftersom firmware tillämpar nya värden genom diskreta interna kommandon.
Den önskade temperaturen visas som en streckad linje och förblir låst vid gränserna när man scrollar förbi mittområdet. Animationerna är finjusterade för att undvika hackningar på den begränsade processorn. Alla beslut granskades tillsammans med styrgruppen för att säkerställa långsiktig stabilitet och tydlighet.
Interaktionskoncept för temperaturens UI-komponent
Indelning: 100 segment = 0,5°T (temperatur) per segment
Borttagna: 20 segment → 80 segment kvar
Båge per cirkel: 360°/100 = 3,6°
Slutsats: 0,5°T = 3,6° båge, 1,0°T = 7,2° båge
EXEMPEL PÅ UX/UI-DESIGN: CIRKULÄR STYRNING
Den cirkulära temperaturmätaren introducerar en annan form av precision. Cirkeln är indelad i hundra segment, där varje segment representerar en halv grad. Genom att ta bort de nedersta tjugo segmenten skapades en visuell gräns, vilket lämnade åttio aktiva segment. Varje segment motsvarar 3,6 grader på bågen, vilket innebär att en hel grads temperatur motsvarar 7,2 graders rotation. Denna nivå av matematisk noggrannhet var nödvändig eftersom enheten hade strikta begränsningar för rendering.
Animationernas timing anpassades till firmwareuppdateringarnas intervall så att visuella förändringar aldrig hamnade ur synk med de faktiska temperaturvärdena. Mätaren visar den aktuella temperaturen neutralt, med justeringar markerade i rött eller blått. När användaren ändrar temperaturen uppdateras fältet under för att visa det nya värdet och förändringens riktning. Parallellt omstrukturerade vi navigationen till ett modulärt system med överläggsmeny och konfigurerbara genvägar.
En av de mest krävande avvägningarna rörde styrningen av persienner. Av tekniska skäl insisterade ingenjörerna på att samla alla funktioner på en och samma skärm, medan användarstudier visade risken för visuell överbelastning. Efter flera iterationer tillsammans med styrgruppen nådde vi en konfiguration som bevarade användbarheten samtidigt som de tekniska begränsningarna respekterades.
Beteende för den radiella temperaturens UI-komponent
PRECISION I VARJE DESIGNSDETALJ
Det finaste arbetet finns i de minsta detaljerna. Tryckytor kalibrerades ned till millimetern för att gränssnittet skulle kännas naturligt vid användning i stående position. Läsavstånd och panelens luminans formade avstånd och typografi. Varje färgvärde testades direkt på hårdvaran för att säkerställa att inga element blektes i dagsljus. Prototyptester avslöjade den exakta fördröjningskurvan vid sensoruppdateringar och hjälpte till att förfina mikroanimationer som leder blicken utan att överbelasta processorn.
Under den synliga precisionen fanns ett helt lager av strukturell förfining. Att omorganisera menyer och bygga om informationshierarkin visade sig vara avgörande för både tydlighet och snabbhet. Navigationsmönster hölls konsekventa över hela gränssnittet och uppdaterades löpande under projektets gång i takt med att nya insikter tillkom. Tillstånd tydliggjordes och linjerades, och färgerna för ljust och mörkt läge behandlades som parade system för att hålla användarens kognitiva karta stabil vid alla tillfällen. Resultatet är en enhet som upplevs som enkel just därför att varje dold detalj har lösts med disciplin och omsorg.
Vi levererade även ett komplett designsystem med organisationsövergripande design tokens, ett omfattande komponentbibliotek och tydliga styrningsmodeller som stödjer långsiktig konsekvens.
Designsystem med organisationsomfattande design tokens
EN NY STANDARD FÖR SMART HOME-UX
Projektet samlade alla de mest krävande aspekterna av embedded GUI-design. Det verkade inom strikta tekniska ramar, en flerskiktad styrningsstruktur och ett ekosystem av sammankopplade sensorer och aktuatorer. I stället för att begränsas av dessa förutsättningar använde teamet dem som en grund för innovation. Designers, ingenjörer, återförsäljare, forskare och en styrgrupp formade produkten under nio månaders samarbete. Metodiken skapade kontinuitet från tidig användarforskning via konceptutforskning till teknisk prototypframtagning anpassad till verkligt firmwarebeteende. Validering på prototyphårdvara säkerställde att gränssnittet fungerade korrekt även vid fördröjda sensordata, motstridiga värden och återställningslägen.
Den modulära arkitekturen stödjer nu framtida utveckling av firmware och nya produktvarianter. Under projektets gång förfinades navigationen genom flera iterationsrundor tills den möjliggjorde både snabb åtkomst till frekventa åtgärder och en komplett menystruktur där all funktionalitet gick att hitta. Denna balans ger produkten långsiktig stabilitet och anpassningsförmåga.
Navigationen speglar verkliga användningsmönster. Temperaturkomponenter översätter tekniska realiteter till trygga och självsäkra interaktioner. Varningar kommunicerar det faktiska driftsläget utan att skapa oro. Varje lager är sammanhängande, från enhetens fysiska begränsningar till användarens kognitiva komfort.
Resultatet är ett inbyggt gränssnitt som fungerar som en referenspunkt för tekniskt krävande GUI-design och förenar precision, realism och en struktur som kan utvecklas över tid.