Suomi.fi – koko kansan Design System
“Kuinka monta erilaista OK-painiketta julkishallinnon sähköisiin asiointipalveluihin kannattaa eri virastoissa oikein suunnitella?”
Tämä oli se kysymys, joka vuonna 2020 löi lukkoon päätöksen koko julkishallinnolle avoimen Suomi.fi Design Systemin rakentamisesta silloisessa Väestörekisterikeskuksessa (nykyinen Digi- ja väestötietovirasto).
Ennen Design System -työn aloittamista yksittäisiä kansalaisten asiointipalveluja kehitettiin kyllä samoilla teknologioilla, mutta erityisesti saavutettavuuden huomioiminen vaati työtä jokaisessa tiimissä erikseen. Lisäksi toteutukset eri palveluissa erosivat toisistaan ja käyttöliittymäkomponenttien ylläpito vaati paljon ylimääräistä työtä. Viraston UX- ja palvelumuotoilutiimin vetäjä esitti tuolloin ratkaisuksi yhteisen Design Systemin kehittämistä, käyttöönottoa ja työn rahoittamista. Pitkäjänteisen hyötyjen perustelutyön jälkeen ehdotus hyväksyttiin ja samalla päätettiin, että Design System ja sen käyttöliittymäkomponentit julkaistaan avoimesti kaikkien käyttöön. Keskeiseksi mittariksi asetettiin saavutettavuuden varmistaminen ja päätettiin, että Design Systemin ulkoasun tulisi olla tarpeeksi neutraali, jotta eri toimijoiden olisi mahdollisimman helppo omaksua se käyttöönsä.
Digi- ja väestötietoviraston yhtenä tehtävänä on edesauttaa julkishallinnon digitalisaation etenemistä, ja korkealaatuinen ja kaikille avoin Suomi.fi Design System on yksi monista keinoista, joilla virasto tehtäväänsä edistää. Viraston omat sähköiset palvelut huomasivat myös tarpeen Design Systemille: DVV:llä on Suomi.fi-palvelujen lisäksi lukuisia muita sähköisiä asiointipalveluja, jotka hyötyvät yhteiskäyttöisistä käyttöliittymäkomponenteista ja niiden taustalla tehdystä suunnittelu- ja ajattelutyöstä.
Työ polkaistiin käyntiin alkuvuodesta 2020 ja Suomi.fi Design Systemille koottiin kolmen ohjelmistokehittäjän tiimi ja oma UX/UI-suunnittelija. Työtä ohjasi viraston UX- ja palvelumuotoilu –tiimin vetäjä. Suunnittelutyöhön sekä tyylioppaan ja komponenttien muodostamiseen osallistui tiimin oman UX/UI-suunnittelijan lisäksi heti myös muita DVV:llä työskenteleviä suunnittelijoita.
Tänään Suomi.fi Design System on julkisen hallinnon jokaisen asiointipalvelun osa. Kaikki Suomessa asuvat ovat nähneet SFI DS -komponentteja jossain elämänsä vaiheessa tai tulevat niitä vielä näkemään (esimerkiksi vahvan tunnistautumisen yhteydessä). SFI DS näkyy muun muassa seuraavissa asioinnin tukipalveluissa: Suomi.fi-verkkopalvelu, Palvelutietovaranto, Tunnistus, Viestit, Valtuudet, Kartat, Maksut, Palveluhallinta ja palveluväylän Liityntäkatalogi. Lisäksi Työ- ja elinkeinoministeriön yrityslupahakemusten digitalisointiin tähtäävä luvat ja valvonta -hanke hyödyntää Suomi.fi Design Systemiä.
“Koko kansan Design System” on osa jokaisen suomalaisen arkea ja edistää osaltaan kansalaisten asiointipalvelujen yhtenäistä ja sujuvaa käyttökokemusta. Tämä myös näkyy ja tuntuu: Suomi.fi:n visuaalisella ilmeellä on tutkitusti 90% tunnettuus suomalaisten keskuudessa (Lähde: DVV tunnettuustutkimus 2022).
Suomi.fi Design Systemin pääperiaatteet
Koska Suomi.fi Design System on rakennettu palvelemaan kaikkia vauvasta vaariin, on yksi sen tärkeimmistä tavoitteista ollut saavutettavuuden edistäminen sähköisissä asiointipalveluissa jo kauan ennen kuin saavutettavuuslainsäädäntö on siihen velvoittanut.
Konkreettinen keino tähän pääsemiseksi on ollut saavutettavuustyön tekeminen muille mahdollisimman helpoksi: SFI DS –tiimi ratkoo vaikeita asioita muiden puolesta ja jakaa ratkaisunsa avoimesti kaikkien hyödynnettäväksi.
Kaikki SFI DS -ratkaisut ovat avointa lähdekoodia, löydettävissä ja hyvin dokumentoitu eri kohderyhmät (ohjelmistokehittäjät, tuoteomistajat ja UX/UI-suunnittelijat) huomioiden. Kehitystiimit voivat käyttää Design Systemiä joko kokonaisuudessaan tai hyödyntää tilanteensa mukaan vain osia siitä. Erikseen käytettäviä osia voivat olla esimerkiksi ikonit, tyylitokenit ja tyyliopas. Komponenttikirjasto puolestaan yhdistää edellä mainitut osat valmiiksi käyttöliittymäkomponenteiksi ja patterneiksi ohjeistuksineen.
Käyttöliittymäkomponentit
Suomi.fi Design Systemin kaikki elementit on suunniteltu ja kehitetty saavutettavuusvaatimusten mukaan (WCAG 2.1 -kriteeristön tasot A ja AA). Komponentit julkaistaan ReactJS (Javascript & Typescript) ‑muodossa ja julkaistava kirjasto noudattaa semanttista versiointia.
Avoimen dokumentaation kautta pyritään tarjoamaan selkeitä käyttöesimerkkejä sekä ohjeistusta saavutettavien ja yhdenmukaisten ratkaisujen luomiseen. Kaikki komponentit ja dokumentaatio ovat julkisesti tarkasteltavissa Design Systemin omalla sivulla sekä GitHubissa. UX/UI-suunnittelijoiden ja ohjelmistokehittäjien arjen helpottamiseksi dokumentaatio on myös leivottu osaksi Figmasta löytyvän tyylioppaan komponentteja.
Laatu varmistetaan yhdessä oppien
Suomi.fi Design Systemin tekemisen filosofiana on alusta asti ollut pyrkimys korkeaan laatuun ja edelläkävijyyteen: on haluttu näyttää hyvää esimerkkiä siitä, miten tehdä alusta asti saavutettavaa Design Systemiä eikä vain tyydytä kopioimaan valmiita ratkaisuja.
Jo konseptitason suunnitteluvaiheessa mukana on saavutettavuusasiantuntija, joka myös validoi valmiit ratkaisuehdotukset. Kaikille tekijöille pyritään saamaan myös mahdollisimman hyvä saavutettavuusosaaminen, ja jokainen SFI DS:n parissa työskentelevä on saanut saavutettavuuskoulutuksen. Tietoa hyvistä ratkaisuista jaetaan aktiivisesti erilaisissa keskeneräisten UX/UI-konseptien sparraussessioissa, joka toinen viikko pidettävässä UX/UI-suunnittelutiimin yhteisessä katselmoinnissa sekä Slackissa päivän polttavia kysymyksiä ohjelmistokehittäjien ja UX/UI-suunnittelijoiden välillä kiivaastikin pallotellen.
Tällä hetkellä SFI DS:n kehittämisestä vastaa neljän hengen täysiaikainen ohjelmistokehittäjien tiimi. UX/UI-suunnittelu toimii jaetun vastuun periaatteella DVV:n eri palveluihin jalkautuneen 13 hengen konsulteista koostuvan suunnittelutiimin kesken: jokainen saa osallistua SFI DS:n kehitykseen oman mielenkiintonsa ja käytössä olevan ajan mukaan – toiset jo pitkään ja vakiintuneina, toiset enemmänkin vierailevina tähtinä. Näin jokaista komponenttia katsoo monta asiaansa vihkiytynyttä silmäparia ja uudet komponentit, patternit ja muut elementit välittyvät suunnittelijoiden mukana suorinta reittiä palveluihin. Palveluista nousevia tarpeita puolestaan pallotellaan viikoittain suunnittelijoiden ja SFI DS -tiimin ohjelmistokehittäjien kesken.
Kehittäminen on avointa ja palaute tervetullutta
Heti Suomi.fi Design Systemin alkutaipaleelta lähtien palautteen antaminen ja kerääminen on haluttu saada mahdollisimman helpoksi. Prosessia on iteroitu moniammatillisesti matkan varrella useaan otteeseen, jotta erilaiset tarpeet, hyödynnettävyys ja näkökulmat tulevat varmasti huomioitua.
Kehitys pyritään pitämään läpinäkyvänä, ja tekemisessä ensisijaisena on aina kehittäjien, UX/UI-suunnittelijoiden ja käyttäjien palveleminen mahdollisimman hyvin. Läpinäkyvyys näkyy muun muassa kirjaston Open Source -luonteena sekä tiiviinä kommunikaationa Suomi.fi-palvelujen kehittäjien suuntaan: Design Systemin -kehittäjät tukevat palvelujen kehittäjiä käyttöönotossa tarvittaessa myös henkilökohtaisesti. Palaute käyttöönotoista ja Design Systemin käytöstä kehitystyössä on ollut erittäin positiivista.
"Saavutettavuus on hyvin toteutettu ja vähentää merkittävästi komponenttien käyttäjän työmäärää. Varmaan myös hyvin kuvaa esimerkkien ja komponenttien toimivuutta se, että aika harvoin tarvitsee kysyä miten joku toimii tai miksi ei toimi oletetulla tavalla."
"Design Systemin käyttöönotto on ollut todella helppoa ja onnistuu asteittain vanhan toteutuksen rinnalla. Komponenttien release changelogit on hyvin dokumentoitu, niiden saavutettavuuteen panostetaan paljon ja design tokenit ovat saatavilla omiin tyyleihin hyödynnettäviksi. Myös kommunikointiyhteys tiimiin toimii hyvin ja tarpeisiin on reagoitu nopeasti."
Suomi.fi Design Systemin tulevaisuus
Design Systemin kehittäminen ja uusien komponenttien luominen on jatkuvaa työtä. Lähitulevaisuudessa pyritään tarjoamaan valmiita suunnittelu- ja toteutusmalleja yhä laajemmista kokonaisuuksista, kuten lomakkeista ja niiden osista. Myös uusia komponentteja lisätään jatkuvan tarpeen mukaan.
Pitkällä aikavälillä pyritään löytämään lisää mahdollisuuksia tehdyn työn hyödyntämiseen myös muualla kuin Suomi.fi-kontekstissa. Tavoitteena on, että julkisten palveluiden toimijat tiivistäisivät yhteistyötään digitaalisten palveluiden osalta vielä aiempaa enemmän, jotta jokainen toimija ei päätyisi rakentamaan samoja asioita uudelleen alusta lähtien.
Digi- ja väestötietovirastolla on aktiivinen rooli etsiä yhtymäkohtia ja yhteistyömahdollisuuksia digitaalisten palveluiden rakentamisessa muiden isojen julkisten toimijoiden kanssa. Suomi.fi Design System toimii tämän työn kärkenä. Avoimuudella ja muokattavuudellaan SFI DS pyrkii varmistamaan helpon käyttöönoton myös muissa organisaatioissa ja palveluissa, jotta ensimmäiset askeleet parempaan yhteistyöhön olisivat mahdollisimman helppoja.
