illustration
Blogitekstejä

Millainen on toimiva design system?

Design system on kokoelma tietoa, ohjeita ja komponentteja, joiden avulla voidaan rakentaa yhtenäistä käyttäjäkokemusta. Millaisia asioita kannattaa ottaa huomioon, kun design systemiä lähdetään rakentamaan?

Aiemmassa blogitekstissämme kerromme, millaista hyötyä toimivasta design systemistä on. Tässä tekstissä design systemien parissa työskennelleet Senior UX Designer Esa Kivelä sekä Senior SW Developer Antti Väyrynen kertovat vinkkejä design systemin rakentamiseen.

Design system palvelee monia erilaisia käyttäjiä

Ihan kuten kaikessa muussakin suunnittelussa ja toteutuksessa, myös design systemissä kannattaa muistaa, että kaikki lähtee käyttäjästä. Design systemin on palveltava ainakin designereita ja koodareita, mutta aivan yhtä hyvin siihen voidaan sisällyttää elementtejä, jotka auttavat esimerkiksi markkinointia ja viestintää rakentamaan yhtenäisen brändikokemuksen. 

Design system on kuin mikä tahansa muu työkalu, joka otetaan yrityksen käyttöön: työkalun käytettävyyteen on panostettava, sen eduista kannattaa kertoa kohderyhmille ja perehdyttää käyttäjät työkalun saloihin. Jos työkalu on raskas ja vaikea, käyttäjät hylkäävät sen nopeasti eivätkä design systemin todelliset hyödyt tule koskaan esiin. Lisäksi on tärkeää, että design systemin käyttäjät pystyvät antamaan palautetta kehittäjille ja esimerkiksi raportoimaan bugeja helposti, jotta design system pysyy jatkuvasti käyttäjien tarpeiden ajan tasalla.

Design system luo yhteistä kieltä ja tuo tiedon yhteen paikkaan

Joskus designerit ja koodarit toimivat siiloissa eivätkä kommunikoi jatkuvasti. Tällöin on riskinä, että suunnitelmat ja toteutus ajautuvat kauaksi toisistaan, vaikka päämäärä on sama: hyvin toimiva ja brändinmukainen sovellus tai palvelu. Yhteinen design system tuo eri siilot yhteen ja auttaa puhumaan yhteistä kieltä; parhaimmillaan design system voi estää siilojen muodostumisen kokonaan. Kun designerit, koodarit ja muut sidosryhmät puhuvat vaikkapa napista, joka on määritelty design systemissä juuri tietyn kokoiseksi, muotoiseksi ja väriseksi ja jossa on aina tietyn kokoinen fontti ja toiminto, nappi pysyy täsmälleen samanlaisena läpi koko brändin.

Design system auttaa eri osapuolia esimerkiksi ottamaan huomioon saavutettavuuteen liittyvät vaatimukset; yksittäisten komponenttien tulisi itsessään olla saavutettavia, mutta lisäksi design systemiin voi sisällyttää ohjeita siitä, miten palveluista ja tuotteista kokonaisuutena rakennetaan saavutettavia. Nämä ohjeet voivat palvella niin designereita, koodareita kuin sisällöntuottajiakin.

Toisaalta design systemin rakentaminen ja kehittäminen myös vaatii jatkuvaa kommunikaatiota eri osapuolten kesken. Isossa yrityksessä voi yhdellä design systemillä olla satoja tai tuhansia käyttäjiä. Oli yrityksen kokoluokka mikä tahansa, on tärkeää, että kaikki ymmärtävät design systemin kehittämiseen liittyvät pelisäännöt. Esimerkiksi komponentteja ei ole syytä räätälöidä vain varmuuden vuoksi, vaan jokaisella muutoksella on oltava oikea tarve. Ilman oikeaa tarvetta tehty muutos voi aiheuttaa valtavan päivitysrumban, joka saattaa pahimmillaan rikkoa jotain entuudestaan toimivaa koodia. 

Muutoksia mieluummin usein ja vähän kerrallaan 

Pienetkin muutokset voivat vaatia isoja päivityksiä koodissa ja spekseissä. Muutoksia on yleensä helpompi hallita, jos niitä julkaistaan usein; isot julkaisut pari kertaa vuodessa tarkoittavat yleensä isoja muutoksia jo kertaalleen toteutettuihin asioihin. 

Niin sanotut rikkovat muutokset koodissa vaikuttavat moneen asiaan, joten niiden tekemistä täytyy harkita tarkoin: vaalitaanko yhteensopivuutta aikaisemmin tehtyihin asioihin, vai korjataanko silläkin uhalla, että jotain menee rikki? Tavoitteena on hyvä pitää sitä, että rikkovat muutokset olisivat mahdollisimman pieniä. Suursiivouksia vältetään parhaiten niin, että pieniä muutoksia tehdään ketterästi lyhyissä sykleissä, esimerkiksi viikon välein. Tämä vaatii myös loppujen lopuksi paljon vähemmän työtä kuin valtavien roadmappien ja pitkien korjauslistojen toteuttaminen. Tärkeää tässäkin on siis muistaa kommunikointi: design systemin käyttäjiä ja kehittäjiä on ohjeistettava siitä, miten ja millä sykleillä koodia tulisi korjata sekä tukea uusien muutosten käyttöönottoa.

Joustavasti räätälöitävissä

Design system toimii myös yrityksissä, joilla on useita eri brändejä. Tällöin on vain huolehdittava siitä, että design system on alun alkaenkin rakennettu niin, että komponentit ovat helposti muutettavissa kunkin brändin tarpeisiin. Esimerkiksi käyttöliittymän nappien muoto voi olla sama sovelluksesta tai palvelusta toiseen, mutta napin väri, fontti ja pyöristykset vaihtuvat aina kunkin brändin mukaan.

Koko design system kannattaa rakentaa ennemmin komponenttien kuin kokonaisten patternien varaan. Esimerkiksi yläpalkkinavigaatio kannattaa pilkkoa pieniksi atomeiksi ennemmin kuin rakentaa siitä monoliittia. Pienten osasten räätälöinti on paljon nopeampaa ja helpompaa kuin patternien viilaaminen aina muuttuvien tarpeiden mukaan.

Lopuksi

Design system ei ole ikinä valmis. Se on elävä dokumentti, joka muotoutuu ja kehittyy yrityksen ja käyttäjien tarpeiden mukaan. Maailmalta löytyy monia esimerkkejä hyvin toimivista design systemeistä, joista voi ja kannattaa ottaa mallia. Copy with pride on tässä yhteydessä täysin toimiva lähestymiskulma.

Muun muassa Googlen Material Designista ja erilaisista avoimen lähdekoodin design systemeistä voi tarkastella muiden tekemää designia ja teknisiä ratkaisuja. Vaikkapa Googlen design systemissä on pohjalla paljon sellaisia ratkaisuja, joihin ihmiset ovat tottuneet ja joita he ovat oppineet käyttämään. Ihmiset odottavat esimerkiksi kalenterin toimivan aina tietyllä tavalla palvelusta riippumatta. Jos pyörä on jo kertaalleen keksitty, sitä on turha lähteä keksimään uudestaan.

Lue lisää design systemistä.

Haluatko kuulla lisää tästä aiheesta? Jätä yhteystietosi niin olemme yhteydessä.

Lähettämällä lomakkeen hyväksyn tietojeni tallentamisen ja käsittelyn tietosuojaselosteen mukaisesti.