Miljoonan euron painike – devaaja ja tyylioppaat

Sisällön erottaminen teknisestä toteutuksesta ja ulkoasusta on ollut verkkopalveluissa ja sovelluksissa selviö pitkään, mutta mitä kuluu tämän hetken komponenttikirjastojen ja tyylioppaiden saralle? Ja mitä erityisesti devaajan olisi syytä tietää aihepiiristä, vaikkei frontin kanssa itse päivittäin työskentelisikään?

“Ulkoasun suhteen ylätasolla on tietysti brändiohjeistus eli erilaiset brändidokumentit, joissa määritellään logon käytöstä, typografiasta, väreistä sun muista”, kertoo Compilen Oskari Blomberg, joka on erikoistunut fronttitekemiseen ja on ollut mukana toteuttamassa useita React-komponenttikirjastoja ja niihin liittyviä tyylioppaita.

On hyvin tyypillistä ajautua tilanteeseen, jossa luodaan niin sanottu “miljoonan euron painike”. Graafikot eri projekteissa tekevät leiskoja, jotka sisältävät esimerkiksi talon ilmeen mukaisen painikkeen. Seuraavaksi devaajat eri projekteissa toteuttavat leiskan mukaisen painikkeen, ja mahdollisesti jokaisessa projektissa hieman eri tavalla. On huomattavasti fiksumpaa tehdä uudelleenkäytettävä komponentti, joka on toteutettu kerran kunnolla. Tällöin devaajat voivat keskittyä pikselinviilauksen sijaan sovelluksen logiikkaan, kun taas suunnittelijat voivat virittää käyttäjäkokemuksen tappiin.

Tekniseltä kannalta komponenttien kannattaa olla “tyhmiä”: ne voivat välittää logiikkaa, mutta eivät itse sisällä sitä. Enimmäkseen ne ovat ulkoasuun liittyviä tilattomia komponentteja. Tämä jättää vapautta esimerkiksi lomakekentän tekniseen toteutukseen. Komponentissa voidaan esimerkiksi määritellä, miltä virheviesti näyttää, mutta syötteen validointi jää komponenttia hyödyntävän devaajan harteille.

Rahansäästöä ja saavutettavuutta

Komponenttikirjaston hyödyt ovat selvät. Ensinnäkin säästyy rahaa: kun kaiken ulkoasuun liittyvän voi miettiä komponenttitasolla valmiiksi, vältytään turhalta työltä. Toinen keskeinen hyöty on saavutettavuuden parantaminen. Tällä on entistäkin enemmän merkitystä, kun saavutettavuusdirektiivin vaatimuksia viedään käytäntöön.

“Devaajan kannalta hyöty on tietysti siinä, että voi pohtia logiikkaa eikä viilata pikseliä. Ei ole tavatonta, että samantyyppisestä toteutuksesta voi löytyä monta erilaista versiota, jos käytössä ei ole komponenttikirjastoa. Varsinkin React-maailmassa ja oikein tehtynä komponenttien muutokset ovat erittäin vaivatonta valuttaa hyödyntäviin projekteihin. Parhaimmillaan yhdellä yarn/npm-komennolla”, toteaa Oskari.

Viime aikoina kiinnostus living style guideihin eli eläviin tyylioppaisiin on lisääntynyt kohisten – julkinen tyyliopas on mm. Elisalla ja yksityisiä joukolla muita suomalaisia yrityksiä. Maailmalla julkisia tyylioppaita on enemmänkin. “Niitä voi ja kannattaa käyttää benchmarkina: miten muualla jokin on tehty, mikä voisi olla hyvä tapa?” neuvoo Oskari.

Tyyliopas pitää yleisesti ottaen sisällään komponenttien ja niiden dokumentaatioiden lisäksi ohjeistusta suunnittelijoille. “Se että on koodattu kirkuvan punainen painike, ei luonnollisesti tarkoita sitä, että kyseistä painiketta voisi käyttää tilanteessa kuin tilanteessa“, muistuttaa Oskari.

“Elävien tyylioppaiden toteuttamiseen on olemassa valmiita pakettiratkaisuja, kuten vaikkapa React Styleguidist, mutta muokattavuus omiin tarpeisiin ei välttämättä ole riittävä”, sanoo Oskari. “Valmisratkaisu on varsinkin alkuvaiheessa ok, mutta nopeasti ollaan tilanteessa, jossa koko tyylioppaan voisi rakentaa sitä varten koodatuilla komponenteilla.”

Kuka?

Oskari Blomberg, kotoisin Mikkelistä, Compilella syksystä 2017. Aiemmin pitkään Ylellä uutis- ja ajankohtaissivustojen toteuttajana. Päätyi alalle “vahingossa” – media-assistentti innostui koodauksesta ja käväisi armeijan jälkeen Tampereella IT-tradenomiopinnoissa, mutta työelämä vei mennessään ensin digitoimistoihin ja sitten Ylelle.

Seuraa meitä Linkedinissä niin tiedät aina, mitkä ovat ohjelmistokehityksen toimivimmat käytännöt juuri nyt.

eNPS-mittaus perustuu Fred Reichheldin kehittämään Net Promoter Score -mittariin, jolla alunperin tutkittiin yritysten asiakaskokemusta ja asiakastyytyväisyyttä. Myöhemmin sitä on alettu käyttää myös työntekijätyytyväisyyden tutkimiseen (e niin kuin employee + NPS).

Näin mittaus tehdään.

Kysymme työntekijöiltämme kerran kertaa vuodessa, että “kuinka todennäköisesti suosittelisit työpaikkaasi ystäville tai tutuille asteikolla 0-10?”. Sen jälkeen pyydämme tarkennusta avoimella kysymyksellä: ”mistä syystä annoit tämän tuloksen?”.

Niitä, jotka antavat luvuksi 9 tai 10, kutsutaan suosittelijoiksi. Niitä, jotka antavat luvuksi 0-6, kutsutaan kriitikoiksi.

eNPS-tulos lasketaan vähentämällä suosittelijoiden suhteellisesta prosenttiosuudesta kriitikoiden suhteellinen prosenttiosuus. Muut vastaukset saavat arvon 0.

Mittarin tulokset voivat olla mitä vain -100 ja +100 väliltä. Yli nollan nousevat tulokset ovat tyydyttäviä. +10 ja +30 välillä olevia tuloksia pidetään hyvänä, ja yli +50 olevia tuloksia pidetään erinomaisena.