Uusi benchmark-GUI älykkääseen ympäristönhallintaan
Smart home device
UX-suunnittelu
UI-suunnittelu
- ASIAKAS
- Elsner
- SIJAINTI
- Saksa
- TIIMI
- UX-suunnittelija, UI-suunnittelija, vuorovaikutussuunnittelija, projektipäällikkö, product owner, tutkija
- VERKKOSIVUSTO
- elsner-elektronik.de
Elsner lähestyi meitä briifillä, joka kosketti modernin kuluttajille suunnatun älykotituotteen jokaista kerrosta. GUI-suunnittelu toteutettiin yritysrakenteessa, jossa UX- ja UI-suunnittelutiimiä tuki viisihenkinen ohjausryhmä. Käyttöliittymän oli palveltava käyttäjiä 54 maassa, ja jälleenmyyjät kymmenestä maasta olivat mukana suunnittelu- ja validointiprosessissa.
Toimitus kesti yhdeksän kuukautta, ja embedded-suunnittelutiimi työskenteli tiiviissä yhteistyössä insinöörien kanssa sovittaakseen käyttöliittymän räätälöidyn laitteiston, olemassa olevan ohjauslogiikan ja liitettyjen komponenttien verkoston kanssa. Koska kyseessä oli lämmitys- ja jäähdytysohjain, työ alkoi järjestelmän fyysisen ympäristön yksityiskohtaisella kartoituksella.
Laite vastaanotti tietoja sääasemilta, CO₂-antureista, kosteusantureista, lämpötila-antureista ja pääasiallisesta lämmitysyksiköstä. Anturien tarkkuus, toimilaitteiden luotettavuus ja verkon vakaus ohjasivat kaikkia alkuvaiheen päätöksiä. Käyttöliittymän tuli toimia nykyisten API:en kanssa mutta ennakoida myös tulevat, luoden perustan, joka voi kehittyä uuden laiteohjelmiston ja tuotevarianttien myötä.
PANOKSEMME
Vaatimusmäärittelyn kartoitus
Käyttäjätutkimus
Benchmarking
UX-suunnittelu
Prototyyppien valmistus ja käyttäjätestaus
UI-suunnittelu – vaalea ja tumma
Organisaation laajuinen design system
Laadunvarmistus
RAKENTEINEN YHTEISTYÖ SUUNNITTELUN JA TEKNIIKAN VÄLILLÄ ERI TIETEENALOJEN KESKEN
Projekti eteni toisiinsa kytkeytyvien kerrosten kautta, jotka vahvistivat toisiaan. Käyttäjätutkimus ja kilpailijavertailu loivat alkuperäisen ymmärryksen tarpeista, rajoitteista ja toimialan malleista. Työpajat kymmenestä maasta tulevien jälleenmyyjien kanssa toivat mukaan käytännön kokemusta ja korostivat käyttäytymiserot eri markkinoilla. Jälleenmyyjät antoivat myös näkemyksiä paikallisesta kilpailupaineesta ja nousevista trendeistä.
Varhaiset engineering-työpajat paljastivat käytännönläheisiä totuuksia laiteohjelmiston käyttäytymisestä, mukaan lukien lämpötilapäivitysten ajoitus ja ne olosuhteet, joissa lämmitysyksikkö otti uudet arvot käyttöön. Tämän tiedon pohjalta siirryimme tupladiamantin divergoivaan vaiheeseen, jossa rautalankamallit ja konseptipolut avattiin, testattiin, vertailtiin ja analysoitiin niiden vahvuuksien ja heikkouksien osalta.
Prototyyppejä testattiin yhdessä insinöörien kanssa, jotka toivat esiin piileviä käyttäytymismalleja viiveolosuhteissa, kalibroinnin ajautumisessa ja ohjausten synkronoinnissa. Kaikki kehittyvät suuntaukset esiteltiin ohjausryhmälle, joka auttoi tarkentamaan pitkän aikavälin visiota ja säilyttämään johdonmukaisuuden teknisten, strategisten ja kokemuksellisten kerrosten välillä.
SUUNNITTELU TODENMUKAISTEN RAJOITTEIDEN MUOVAAMANA
Tämän ohjaimen taustalla oleva laitteisto vaikutti koko projektiin. Kyseessä oli räätälöity laite, jolla oli epätavallista käyttäytymistä, rajallinen muisti ja vaatimaton laskentateho, mutta siitä huolimatta se tarjosi yllättävän monipuolisen toiminnallisuuden neljän tuuman pyöreälle TFT LCD -paneelille, jonka resoluutio oli 480 × 480 pikseliä. Hyvin varhaiset keskustelut insinööritiimin kanssa paljastivat kriittisiä rajoitteita liittyen käytettävissä olevaan jännitteeseen, grafiikkaliitäntään ja prosessorin suorituskykyalueeseen. Asiakas edellytti, että huomioimme näyttötoimittajien tekniset spesifikaatiot, erityisesti paneelin ja taustavalon vaatiman jännitteen sekä grafiikkaliitännän, värisyvyyden ja näytekappaleiden saatavuuden.
Kun uudelleensuunnittelu alkoi, lopullista näyttöä ei ollut vielä valittu, joten ainoana viitepisteenä toimivat edellinen laite sekä laaja kenttäpalaute vierityksen viiveistä, latausviiveistä ja epäjohdonmukaisesta renderöinnistä anturitoiminnan aikana. Insinöörit kuvasivat muistibudjetit, datan päivityssyklien ajoituksen sekä lämmitysjärjestelmän käyttäytymisen kalibroinnin aikana. Riskien minimoimiseksi teimme strategisen päätöksen ja suunnittelimme käyttökokemuksen aluksi pienemmällä 320 × 240 pikselin resoluutiolla, joka skaalattiin myöhemmin lopullisen paneelin varmistuttua. Jokainen visuaalinen ja toiminnallinen valinta kunnioitti laitteen fyysisiä ja sähköisiä rajoitteita, ja jokaisesta rajoitteesta tuli innovaation lähtökohta. Koko prosessin ajan liitimme jokaisen teknisen päätöksen inhimillisiin tekijöihin säilyttääksemme selkeyden ja käyttömukavuuden kapeassa toimintaympäristössä.
Havainnot human factors -tutkimuksesta
Käytännössä
KÄYTTÖLIITTYMÄ VIRITETTY TODENMUKAISIIN KÄYTTÖKONTEKSTEIHIN
Ohjaimen tuli toimia luotettavasti useissa eri käyttötilanteissa, minkä vuoksi fyysiset ja ympäristötekijät ohjasivat käyttöliittymän suunnittelua. Asennuskorkeus 140 senttimetriä sijoitti näytön luonnolliselle katsekorkeudelle. Tämä määritti kosketuskohteiden koot ja rajoitti pystysuuntaisia skannausmalleja. Suurin osa vuorovaikutuksesta tapahtui päivänvalossa, kun taas iltakäyttö edellytti automaattista tummatilaa, joka aktivoitui auringonlaskun yhteydessä. Yleisiä käyttökulkuja olivat valaistuksen ohjaus, kohtausten aktivointi ja kaihtimien säätö, kun taas asennuslogiikka määriteltiin erikseen järjestelmäinsinöörien toimesta työpöytäohjelmistossa.
Käyttöliittymän tuli säilyttää selkeys myös ei-ihanteellisissa olosuhteissa. Kun anturit tuottivat viivästyneitä lukemia, ristiriitaisia arvoja tai kalibrointivirheitä, käyttöliittymä viesti nämä tilat rauhallisesti ja yksiselitteisesti. Päälämmitysyksikön hälytykset käsiteltiin ensisijaisina signaaleina, kun taas vähäisemmät ilmoitukset, kuten avoimet ikkunat, pysyivät visuaalisesti toissijaisina. Tämä kaksitasoinen järjestelmä säilytti sekä läpinäkyvyyden että kognitiivisen tasapainon.
Hanki käsitys GUI:sta
UI-KOMPONENTTIESIMERKKI: LÄMPÖTILAN HALLINTA
Lämpötilansäätö tarjoaa tiivistetyn näkymän design-ajattelun ja teknisen todellisuuden väliseen tasapainoon. Pystysuuntainen asteikko sai inspiraationsa perinteisestä lämpömittarista, ja nykyinen lämpötila sijoitettiin keskikohtaan. Tämä rakenne vastasi käyttäytymistutkimusten havaintoja, joiden mukaan käyttäjät säätävät harvoin lämpötilaa yli neljä astetta kumpaankaan suuntaan.
Engineering-kumppanit auttoivat meitä ymmärtämään, miten lämpötilapäivitykset saapuvat lämmitysyksiköstä ja miten viivästyneet lukemat voidaan visualisoida aiheuttamatta hämmennystä. Plus- tai miinuspainikkeen painaminen tuottaa selkeän värivihjeen – punainen lämpimämmälle ja sininen viileämmälle. Jokainen säätö tapahtuu puolen asteen askelissa, koska laiteohjelmisto soveltaa uudet arvot erillisten sisäisten komentojen kautta.
Haluttu lämpötila esitetään katkoviivana ja pysyy kiinnitettynä rajoihin, kun vieritetään keskialueen ulkopuolelle. Animaatiot on hienosäädetty estämään nykiminen rajoitetulla prosessorilla. Kaikki päätökset käytiin läpi ohjausryhmän kanssa pitkän aikavälin vakauden ja selkeyden varmistamiseksi.
Lämpötilan UI-komponentin vuorovaikutuskonsepti
Jako: 100 segmenttiä = 0,5°T (lämpötila) per segmentti
Poistettu: 20 segmenttiä → 80 segmenttiä jäljellä
Kaari per ympyrä: 360°/100 = 3,6°
Johtopäätös: 0,5°T = 3,6° kaari, 1,0°T = 7,2° kaari
UX/UI-SUUNNITTELUESIMERKKI: PYÖREÄ OHJAUS
Pyöreä lämpötilamittari tuo mukanaan toisenlaisen tarkkuuden. Ympyrä on jaettu sataan osioon, joista jokainen vastaa puolta astetta. Alimpien kahdenkymmenen osion poistaminen loi visuaalisen rajan ja jätti kahdeksankymmentä aktiivista segmenttiä. Kukin segmentti vastaa 3,6 astetta kaarella, mikä tarkoittaa, että yksi kokonainen lämpöaste vastaa 7,2 asteen kiertoliikettä. Tällainen matemaattinen tarkkuus oli välttämätöntä, koska laitteella oli tiukat rajoitukset renderöinnin suhteen.
Animaatioiden ajoitus sovitettiin yhteen laiteohjelmiston päivitysintervallien kanssa, jotta visuaaliset muutokset eivät koskaan ajautuisi epäsynkroniin todellisten lämpöarvojen kanssa. Mittari esittää nykyisen lämpötilan neutraalisti, ja säädöt merkitään punaisella tai sinisellä. Kun käyttäjä muuttaa lämpötilaa, alapuolinen kenttä päivittyy näyttämään uuden arvon sekä muutoksen suunnan. Samanaikaisesti rakensimme navigaation uudelleen modulaariseksi järjestelmäksi, jossa on overlay-valikko ja mukautettavat pikavalinnat.
Yksi haastavimmista neuvotteluista koski kaihtimien ohjausta. Insinöörit vaativat teknisistä syistä, että kaikki kaihdintoiminnot sijoitetaan yhdelle näytölle, kun taas käyttäjätutkimus osoitti visuaalisen kuormituksen riskin. Useiden ohjausryhmän kanssa tehtyjen iterointien jälkeen päädyimme ratkaisuun, joka säilytti käytettävyyden ja kunnioitti samalla teknisiä rajoitteita.
Radiaalisen lämpötila-UI-komponentin käyttäytyminen
TARKKUUTTA JOKAISESSA SUUNNITTELUN YKSITYISKOHDASSA
Hienoin työ näkyy pienimmissä yksityiskohdissa. Kosketuskohteet kalibroitiin millimetrin tarkkuudella, jotta käyttöliittymä tuntuisi luonnolliselta seisten käytettäessä. Katseluetäisyys ja paneelin kirkkaus ohjasivat välistystä ja typografiaa. Jokainen väriarvo testattiin suoraan laitteistolla sen varmistamiseksi, ettei mikään elementti haalistu päivänvalossa. Prototyyppitestaus paljasti tarkan viivekäyrän anturipäivitysten aikana ja auttoi hiomaan mikroanimaatioita, jotka ohjaavat katsetta kuormittamatta prosessoria liikaa.
Näkyvän tarkkuuden alla oli kokonainen kerros rakenteellista hienosäätöä. Valikoiden uudelleenjärjestäminen ja informaation hierarkian uudelleenrakentaminen osoittautuivat olennaisiksi sekä selkeyden että nopeuden kannalta. Navigointimallit pidettiin yhtenäisinä koko käyttöliittymässä ja niitä päivitettiin projektin aikana sitä mukaa, kun uusia oivalluksia kertyi. Tilat selkeytettiin ja yhdenmukaistettiin, ja vaalean ja tumman tilan värejä käsiteltiin parijärjestelminä, jotta käyttäjän kognitiivinen kartta pysyi vakaana kaikissa tilanteissa. Lopputuloksena on laite, joka tuntuu yksinkertaiselta vain siksi, että jokainen piilossa oleva yksityiskohta on ratkaistu kurinalaisesti ja huolellisesti.
Toimitimme myös kokonaisvaltaisen design systemin, joka sisälsi organisaation laajuiset design-tokenit, kattavan komponenttikirjaston sekä selkeät hallintamallit pitkän aikavälin johdonmukaisuuden tukemiseksi.
Design system organisaation laajuisilla design-tokeneilla
UUSI STANDARDI ÄLYKODIN UX:ÄLLE
Tämä projekti yhdisti kaikki sulautettujen käyttöliittymien suunnittelun vaativimmat osa-alueet. Se toimi tiukkojen teknisten rajoitteiden, monikerroksisen hallintamallin sekä toisiinsa kytkeytyneiden antureiden ja toimilaitteiden ekosysteemin puitteissa. Rajoitteiden sijaan tiimi käytti näitä innovaation tukirakenteena. Suunnittelijat, insinöörit, jälleenmyyjät, tutkijat ja ohjausryhmä muovasivat tuotetta yhdeksän kuukauden yhteistyön aikana. Menetelmä tarjosi jatkuvuutta varhaisesta käyttäjätutkimuksesta konseptien kehittämiseen ja tekniseen prototypointiin, joka oli linjassa todellisen laiteohjelmiston käyttäytymisen kanssa. Prototyyppilaitteistolla tehty validointi varmisti, että käyttöliittymä toimi oikein myös viivästyneiden anturitietojen, ristiriitaisten arvojen ja palautumistilojen aikana.
Modulaarinen arkkitehtuuri tukee nyt tulevaa laiteohjelmiston kehitystä ja uusia tuotevarianteja. Projektin aikana navigaatiota hiottiin useiden iterointikierrosten kautta, kunnes se mahdollisti sekä nopean pääsyn usein käytettyihin toimintoihin että kattavan valikkorakenteen, josta kaikki toiminnot löytyvät. Tämä tasapaino tuo tuotteelle pitkän aikavälin vakauden ja mukautuvuuden.
Navigointi heijastaa todellisia käyttömalleja. Lämpötilakomponentit kääntävät tekniset realiteetit varmoiksi ja luottamusta herättäviksi vuorovaikutuksiksi. Hälytykset viestivät järjestelmän todellisen tilan ilman paniikkia. Jokainen kerros on yhtenäinen laitteen fyysisistä rajoitteista käyttäjän kognitiiviseen mukavuuteen asti.
Tuloksena on sulautettu käyttöliittymä, joka toimii viitekohtana teknisesti vaativalle GUI-suunnittelulle ja yhdistää tarkkuuden, realismin sekä rakenteen, joka voi kehittyä ajan myötä.
