Skip to content

UX Engineering täydentää UX-suunnittelua koodipohjaisella protoilulla

Loihde - Mobile phone in hands - DSCF2887 - 1920 x 1280


UX-suunnittelun kenttä kehittyy jatkuvasti ja uusia kokeilemisen arvoisia työkaluja ja menetelmiä ilmestyy markkinoille. Perinteiset design- ja prototyökalut kuten Figma, ovat edelleen keskeisessä roolissa erityisesti silloin, kun tarvitaan nopeaa visuaalista ideoiden konkretisointia tai testataan varhaisia palvelukonsepteja. Samalla rinnalle on noussut uusi käytännönläheinen työskentelytapa: UX Engineering ja koodipohjainen protoilu. 

UX Engineer työskentelee suunnittelun ja toteutuksen välimaastossa 

UX Engineer toimii ikään kuin sillanrakentajana digipalveluiden suunnittelun ja teknisen kehityksen välissä. Hän tekee suunnitteluratkaisuja, mutta rakentaa samalla interaktiivisia prototyyppejä suoraan koodilla. Tämä toimintamalli sopii erityisesti tilanteisiin, joissa: 

  • käyttöliittymälogiikka on keskeisessä roolissa, 
  • halutaan realistisia käyttäjätestejä, 
  • tai tarvitaan varhainen käsitys siitä, miten ratkaisu toimisi oikeassa ympäristössä. 

UX Engineering täydentää muuta UX-suunnittelutyötä tarjoamalla keinon siirtyä ketterästi kohti toimivaa palvelua. 

Koodipohjainen protoilu on yksi vaihtoehto, kun halutaan realistisia kokeiluja 

Perinteiset prototyypit ovat erinomaisia konseptointiin ja käyttöliittymän rakenteen hahmottamiseen. Koodipohjainen protoilu astuu kuvaan silloin, kun tarvitaan enemmän toiminnallisuuksia, aidontuntuista vuorovaikutusta tai nopeampaa siirtymää testistä toteutukseen. 

Koodipohjainen protoilu voi tuoda hyötyä esimerkiksi verkkokauppojen, self service -palvelujen ja datavetoisten sovellusten suunnittelussa. Koska osa komponenteista syntyy suoraan koodissa, myöhemmät kehitysvaiheet voivat vastaavasti nopeutua. Menetelmä ei kuitenkaan ole automaattisesti oikea ratkaisu kaikkiin projekteihin. Se on yksi työkalu muiden joukossa, ja valinta riippuu projektin tavoitteista ja vaiheesta. 

AI-avusteinen koodaaminen vahvistaa suunnittelijan työtä  

AI-työkalut, kuten Cursor AI, toimivat UX Engineeringissä suunnittelijan työparina. AI ei  tee suunnittelua koskevia päätöksiä, vaan nopeuttaa palvelun teknistä rakentamista. On tärkeää, että UX suunnittelusta vastaava henkilö määrittelee käytettävän design systemin ja ohjeistaa AI:n etenemään oikein prosessin eri vaiheissa. Hyvin ohjeistettuna AI-koodari auttaa koodin luonnissa ja selittämisessä, rakenteiden ja komponenttien ehdottamisessa, debuggaamisessa sekä projektin kokonaisuuden hahmottamisessa ja dokumentoinnissa. Tämä vapauttaa suunnitelijalle aikaa keskittyä käyttäjäymmärrykseen, konseptointiin ja itse suunnittelun linjausksiin 

 Katso demo: miten koodipohjainen protoilu etenee käytännössä 

Jos haluat nähdä konkreettisesti, miten: 

  • ajatukset muuttuvat toimiviksi näkymiksi 
  • design system on tärkeässä roolissa AI:n ohjeistamisessa 
  • mock-data elävöittää prototyypin 
  • AI tuo vauhtia toteutukseen 
  • ja miten kaikki tämä nivoutuu eheäksi suunnitteluprosessiksi 

…niin katso alla oleva demovideo, jossa Designer Veli-Matti Pokela näyttää, miten hän UX Engineerin työssä hyödyntää AI-työkaluja.