Graafisen käyttöliittymän tyyliopas ja sen noudattamisen ohjelmallinen valvonta

Abstract

Toimiva ja tyylikäs graafinen käyttöliittymä on tärkeä osa ohjelmistokehitystä ja vaikuttaa merkittävästi käyttäjäkokemukseen ja sen myötä tuotteen laatuun ja kaupalliseen menestykseen. Tehokas käyttöliittymäsuunnittelu puolestaan nojaa toimivaan komponenttikirjastoon ja sen uudelleen käytettäviin, keskenään vuorovaikuttaviin komponentteihin. Kun organisaatiossa useat kehittäjät luovat uusia komponentteja, lopputulos on usein epäyhtenäinen ja kehittäjänsä näköinen. Selkeällä ja ohjelmallisesti testattavalla tyyliohjeistuksella voidaan käyttöliittymien ilmeeseen saada kaivattua yhtenäisyyttä, toimivuutta ja laatua.

Tämän suunnittelututkimuksen tuloksena toteutettiin kohdeorganisaatiolle käyttöliittymän tyyliopas ja malli sen visuaalisista regressiotesteistä. Kohdeorganisaatio on keskisuomalainen ohjelmistoalan yritys, joka tuottaa SaaS-palveluja lähinnä energiatoimialan tarpeisiin. Tyyliopas toteutettiin olemassa olevan komponenttikirjaston yhteyteen osaksi suurempaa kokonaisuutta. Se sisälsi joukon organisaatiospesifejä uudelleenkäytettäviä graafisia komponentteja, sekä ohjeet typografiasta, ikoneista, väreistä ja sivumalleista. Tyylinvalvojaksi valittiin Vitest image snapshots, joka soveltuu niin yksittäisten komponenttien kuin kokonaisten sivunäkymien snapshot-testaukseen ja integroituu helposti käytössä olevaan Vite-ympäristöön, jossa toiminnallinen testaus suoritetaan jo Vitest:illä. Tutkimus sisälsi myös ohjeet komponenttikirjaston rekonstruktiolle niin, että tyylioppaasta saadaan elävä ja ylläpidettävä. Tutkimus antaa arvokasta informaatiota ja toimivia esimerkkejä kohdeorganisaatiolle ja toimii mallina myös muille.