Milloin kannattaa käyttää design systemiä?

Työskentelin hiljattain projektissa, jossa sain tehtäväkseni antaa asiakkaallemme yleiskuvan design systemeistä. Esityksen valmistelemiseksi tutkin aiheesta kymmeniä artikkeleita ja yritin niiden pohjalta muodostaa objektiivisen näkemyksen design systemien hyvistä ja huonoista puolista.

Tässä artikkelissa kerron, miten voit itse arvioida design systemin kannattavuutta oman palvelusi kohdalla. Jos termi design system on sinulle uusi, kannattaa ensin lukaista englanninkielinen artikkelimme siitä, kuinka design systemeillä voidaan luoda parempia kokemuksia.

Välihuomio: Keskitymme design systemeihin, joita käytetään digitaalisten tuotteiden ja palveluiden käyttöliittymissä ja frontendiin liittyvissä konsepteissa. Tässä artikkelissa käytetyillä termeillä ”tuote” ja ”palvelu” tarkoitetaan digitaalista online-palvelua tai -tuotetta eli verkkosivustoa, mobiilisovellusta tai vastaavaa toteutusta.

Nopea kertaus: mitä design systemit ovat

Ensinnäkään, ei ole olemassa yhtä objektiivista määritelmää sille, mikä design system on. Tämä selittää myös, miksi termiä käytetään usein verrannaisena tyylioppaalle tai komponenttikirjastolle. Ne eivät kuitenkaan ole toistensa synonyymeja.

Design system on paljon enemmän kuin vain tyyliopas tai komponenttikirjasto. Itse asiassa ne ovat usein design systemin osia. Tyyliopas määrittelee abstraktit tyylit, kuten värit, fontit, ikonit jne. Komponenttikirjasto taas määrittelee rakennuspalikat, joista tuote on luotu. Tyylit ja rakennuspalikat itsessään eivät kuitenkaan vielä riitä. Emmet Connoly tiivisti tämän hyvin artikkelissaan "The full stack design system"Avautuu uuteen välilehteen:

"Tuotteesi on muutakin kuin kasa uudelleenkäytettäviä käyttöliittymäelementtejä. Sillä on rakenne ja merkitys. Se ei ole geneerinen verkkosivu, vaan eri konsepteja yhdistelevä järjestelmä"

Yllämainitun rakenteen ja merkityksen välittämiseen tarvitaan hyviä ohjeita ja keskinäistä ymmärrystä siitä, mitä palvelun ytimessä on. Tässä design system tulee mukaan kuvioihin.

Design systemin määritelmä

Paras design systemin määritelmä, johon olen itse törmännyt, on Audrey Hacqin määritelmä hänen artikkelissaan “Everything you need to know about Design Systems”Avautuu uuteen välilehteen:

"Design system on ainoa totuuden lähde (Single Source Of Truth, SSOT). Se ryhmittää kaikki elementit, joiden avulla tiimit voivat suunnitella, toteuttaa ja kehittää tuotetta."

Pidän tästä määritelmästä, koska se on riittävän joustava, se mahdollistaa design systemien sopivuuden eri tarpeisiin ja kiteyttää silti kolme, mielestäni tärkeintä, design systemin piirrettä:

1. Se on ainoa totuuden lähde (Single Source Of Truth, SSOT). Design systemin käyttöönotosta lähtien, sen pitäisi olla ainoa virallinen totuuden lähde. Design systemiä voidaan ja sitä pitää päivittää, mutta mikään ei saisi koskaan mennä sen ohi.
2. Se sisältää kaikki elementit tuotteen toteuttamiseksi. Design systemin tulee koostua kaikesta, mikä on olennaista tuotteen toteutuksen kannalta. Tämä tarkoittaa, että eri tuotteilla voi olla hyvin erilaiset design systemit – se on täysin sallittua! Jos brändikirja, äänensävy tai muu elementti ei ole merkityksellinen design systemillesi, sen ei tarvitse kuulua siihen.
3. Se on kaikkien tekemä ja käyttämä. Vaikka nimi voikin olla hieman harhaanjohtava, design system ei ole tarkoitettu vain suunnittelijoille, vaan kaikille tuotteen rakentamiseen osallistuville: suunnittelijoille, kehittäjille, sisällöntuottajille, tuoteomistajille jne. Näin ollen kaikkien osapuolten tulisi myös sopia keskenään design systemin sisällöstä ja sen periaatteista.

Design system on monella tapaa myös oma tuotteensa. Sillä on oma käyttäjäkuntansa: suunnittelijat, kehittäjät ja muut, ja heillä kaikilla on omat uniikit käyttötarpeensa. Se vaatii määritettyjä työntekijöitä ja hallittuja prosesseja pysyäkseen merkityksellisenä ja ajan tasalla. On hyvä pitää myös mielessä, että valmista design systemiä ei ole olemassakaan. Kun design system muuttuu staattiseksi, se tarkoittaa joko, että se itsessään vanhentuu hyvin pian tai että tuote, jota varten se on rakennettu, ei ole enää kehityksessä. Design systemin on kehityttävä jatkuvasti palvelun, käytettyjen teknologioiden ja yrityksen vision mukana.

Design systemin edut

Design systemien tärkeimpiin etuihin kuuluu tehokkuus, johdonmukaisuus sekä skaalautuvuus. Nämä puolestaan nopeuttavat kehitystä, parantavat yleistä käyttökokemusta ja yhteistyötä sekä vähentävät kustannuksia, kuten Marijana Vukovic tiivistää artikkelissaan “Here's Why You Definitely Need a Design System.”Avautuu uuteen välilehteen

Tehokkuus

Uudelleenkäytettävien käyttöliittymäelementtien sekä hyvien ohjeiden avulla uusien tai olemassa olevien palveluiden visualisointi ja toteuttaminen on paljon nopeampaa. Itse asiassa tämä antaa suunnittelijoille ja kehittäjille mahdollisuuden muuttaa kehitystyön painopistettä pyörän uudelleen keksimisestä (käyttöliittymän rakentamisesta) laajempien ja merkityksellisempien ongelmien ratkaisemiseen. Esimerkiksi Figman tekemä testiAvautuu uuteen välilehteen osoitti design systemiä käyttävien suunnittelijoiden suorittavan tavoitteensa 34 % nopeammin verrattuna niihin, joilla ei ollut design systemiä käytössä.

Hyvä ja selkeä dokumentaatio mahdollistaa myös nopeamman perehdytyksen uusille työntekijöille sekä tekee aineiston luovutuksesta erityisesti suunnittelijoiden ja kehittäjien välillä sujuvampia.

Johdonmukaisuus

Jokainen suunnittelija ja kehittäjä on ainutlaatuinen. Meillä on itsellemme parhaat käytännöt ja työtavat, mikä tarkoittaa, että pieniä epäjohdonmukaisuuksia pääsee aina lopputuotteeseen. Mitä suurempi tuote tai enemmän tekijöitä, sitä enemmän niitä ilmenee. Esimerkiksi Hubspotin teettämän sisäisen arvion pohjaltaAvautuu uuteen välilehteen, heidän palvelustaan löytyi yli 100 harmaan sävyä, 40 erilaista tekstityyliä, kuusi erilaista ensisijaista painiketta ja niin edelleen.

Uudelleenkäytettävien käyttöliittymäelementtien ja ohjeiden avulla palvelun visuaalisuus ja toiminnallisuus säilyy kauttaaltaan johdonmukaisena. Sama painike näyttää, tuntuu ja toimii samalla tavalla kaikkialla. Tämän voi viedä vielä pidemmälle käyttämällä live-komponenttikirjastoa, jossa sama käyttöliittymäkoodi jaetaan kirjaston ja live-palvelun komponenttien kesken.
Live-komponenttikirjastossa komponenttiin tehtävät päivitykset päivittyvät automaattisesti kaikkialle. Siksi designin päivitys, korjaus ja vastaavat toimet tarvitsee tehdä vain kerran. Toisaalta, jos rikot jotain, se menee rikki kaikkialla, joten tämä menetelmä vaatii myös hallitumpia prosesseja komponenttien hallintaan ja päivittämiseen.

Live-komponenttikirjaston käyttäminen tarjoaa suuria etuja esimerkiksi keskitetylle saavutettavuus- tai suorituskykytestaukselle. Lisäksi se varmistaa, että kirjaston komponentit ovat aina ajan tasalla palvelussa olevien komponenttien kanssa, sillä ne ovat pohjimmiltaan samoja komponentteja.

Skaalautuvuus

Valmiilla komponenttikirjastolla ja hyvillä ohjeilla, design systemin soveltaminen muuttuu yhä vähemmän rajoittavaksi. Valmiiksi määritelty käsitys siitä, miltä palvelun pitäisi näyttää ja tuntua, tarkoittaa että sitä on myös helpompi laajentaa entisestään tai siirtyä kokonaan uusille alustoille.

Kaikki eivät tarvitse design systemiä

Design systemien tarjoamien etujen pohjalta voidaan todeta, että ne ovat yleensä erityisen tehokkaita jatkuvasti kehittyville tuotteille. Jatkuvassa kehityksessä design systemien tuoma lisätehokkuus tulee parhaiten esiin ja alkaa maksamaan itseään takaisin nopeimmin.

Myös isot ja suurten tiimien rakentamat palvelukokonaisuudet hyötyvät suuresti design systemien tarjoamasta lisäohjeistuksesta sekä yhdessä sovituista toimintaperiaatteista.

Vaikka palvelusi ei kuuluisikaan jatkuvasti kehittyvien tai suurten palveluiden kategoriaan, saatat silti hyötyä design systemistä. Design system kannattaa yleensä ottaa käyttöön, jos kohtaat ongelmia lisäominaisuuksien kehittämisessä, epäjohdonmukaisessa ilmeessä tai käytettävyydessä taikka tiedon jakamisessa kehitystiimin kesken.

Mistä tietää, milloin ei tarvitse design systemiä?

Design system ei aina ole oikea työkalu palvelun parantamiseen tai sisäisen kehitystyön tehostamiseen. Ennen sellaisen käyttöönottoa on hyvä pohtia: : "Tarvitsenko oikeasti design systemin vai vain parempaa dokumentaatiota?" kuten Bryan Bruyn kertoo artikkelissaan "When NOT to use a design system"Avautuu uuteen välilehteen.

Design systemiä ei todennäköisesti tarvita, jos työtä tekee pieni tiimi, joka kommunikoi hyvin. Design systemit ovat parhaimmillaan projektitiimin eri jäsenten ja alojen välisten tietojen jakamisessa. Jos tiimisi työskentelee tiiviisti ja jakaa jo kaikki tarvittavat tiedot päivittäisissä kokouksissa tai vaikkapa kahvitauoilla, ylimääräiselle dokumentaatiolle ei ehkä ole todellista tarvetta. Jos johdonmukaisuus kuitenkin aiheuttaa haasteita, pelkkä komponenttikirjasto tai tyyliopas saattaa olla helpompi ja kevyempi ratkaisu.

Design systemiä ei myöskään todennäköisesti tarvita, mikäli palvelullasi ei ole juurikaan aktiivista tuotekehitystä. Design systemit alkavat maksamaan itseään takaisin vasta, kun pääset hyödyntämään niiden tuomia etuja, kuten uudelleenkäytettäviä rakennuspalikoita ja tyylejä. Design systemin perustaminen sekä kaikkien edellä mainittujen palikoiden ja tyylien suunnittelu ja kehittäminen vaatii paljon työtä. Jos näille ei kuitenkaan ole juurikaan käyttöä, niiden luomiseen ei myöskään ole järkevää investoida suuresti resursseja.

Ja vielä lopuksi, design systemin perustaminen vaatii huomattavia alkuinvestointeja. Resurssien laittaminen johonkin akuutimpaan, kuten esimerkiksi itse tuotteen lanseeraukseen, saattaa olla järkevämpi ja tarpeellisempi ratkaisu. Design systemin luominen ja kehittäminen on iso hanke, joka vie paljon aikaa ja resursseja, ennen kuin se alkaa maksamaan itseään takaisin. Se vaatii sitoutumista ja omistautuneita kehittäjiä kasvattamaan se yksinkertaisesta kuvakekirjastosta tai tyylioppaasta oikeasti hyödylliseksi ja tarkoituksenmukaiseksi järjestelmäksi, kuten JD Jones kuvaili jutussa "9 design system traps to avoid".Avautuu uuteen välilehteen

Kannattaako sinun käyttää design systemiä?

Nopeutettu markkinoille saattaminen, johdonmukaisempi ulkoasu ja toiminnallisuus, parempi yhteistyö ja pienemmät kustannukset – hyödyt kuulostavat erittäin houkuttelevilta; ketäpä tämä ei kiinnostaisi?

Vastataksesi kysymykseen: kannattaako sinun käyttää design systemiä vai ei, pitää sinun tarkastella ja arvioida omaa palveluasi. Mahdollistaako se design systemin edut? Sisältääkö se tarpeeksi aktiivista kehitystä paremman tehokkuuden hyödyntämiseen? Hyötyykö tiimisi lisädokumentaatiosta vai jakavatko he jo kaiken tarvittavan tiedon päivittäisessä työssään? Onko design system siis työkalu, joka lopulta nopeuttaa kehitystä ja vähentää kehityskustannuksia?

Design systemin edut ovat suuret, mutta suurta on myös sen vaatima työmäärä.

Luo oma totuutesi

Design systemin perustaminen ei tarkoita, että sinun on välittömästi tavoiteltava Google Material Designin kaltaista ratkaisua, jossa on satoja sivuja dokumentaatiota, tuhansia resursseja – ja jopa oma blogi.

Voit aloittaa pienestä. On jopa hyvin todennäköistä, että sinulla on jo olemassa joitain design systemin elementtejä, kuten tyylioppaita tai muuta dokumentaatiota, joiden avulla pääset nopeammin vauhtiin.

Hyvä työkalu nykyisen tilanteesi arviointiin ja tulevaisuuden suunnitteluun on Marcelo Somersin ja John Gullyn Design system maturity modelAvautuu uuteen välilehteen – design systemin kypsyysmalli, jossa design systemit on jaettu viiteen eri tasoon niiden toteutuksen ja sovellutuksen perusteella aina olemattomasta täysin automatisoituun ja hallinnoituun.

Tutustu malliin selvittääksesi mikä taso sopisi parhaiten sinun palveluusi. Muista myös, että mallissa esitetyt vaiheet eivät ole absoluuttisia. Voit luoda omiin tarpeisiisi sopivan, eri vaiheiden väliin sijoittuvan hybridimallin.

Tärkeintä on pitää mielessä, että tekemäsi design system on sinun design systemisi. Sen tulee sisältää sellaiset työkalut ja ohjeet, jotka ovat tarpeellisia sinun tuotteesi rakentamiseen, ja sen tulisi helpottaa kehitykseen osallistuvien osapuolten elämää.

Lopuksi

Yleisesti design systemit ovat hyviä työkaluja ja oikein käytettyinä ne tuottavat erinomaisia tuloksia. Mielestäni ne esitetään kuitenkin liian usein nopeana ja helppona ratkaisuna tehokkaampaan suunnitteluun ja kehitykseen, johdonmukaisempaan ulkoasuun ja niin edelleen. Totuus kuitenkin on, että design systemit eivät ole oikoteitä onneen. Päin vastoin, ne vaativat paljon työtä ja sitoutumista.

Design systemin käyttöönoton tulisikin olla tarkoituksenmukainen päätös, johon liittyy todellinen tavoite ja ymmärrys siitä, miten se tulee hyödyttämään sinua ja palveluasi.

Kaikki design systemin luomiseen, perustamiseen ja ylläpitoon tehtävä työ katsotaan helposti ylimääräiseksi työksi siihen asti, että se oikeasti alkaa maksamaan itsensä takaisin lisätyllä tehokkuudella ja kulujen säästöllä. Se voi viedä jonkin aikaa, ja siihen asti sen kehitystä on jatkettava sinnikkäästi, jotta kaikki siihen käytetty työ ei olisi turhaa.