Ei ole kovinkaan tavatonta, kun liittyy mukaan vuosia vanhaan ohjelmistoprojektiin, että siellä tulee vastaan samankaltaisista käyttöliittymän elementeistä monia hieman toisistaan poikkeavia suunnitelmia ja toteutuksia. Samankaltaiset elementit voivat erota vain hieman tai samannäköiset elementit toimivat täysin eri tavalla. Samasta värisävystä voi olla monta eri värikoodia käytössä, vaikka paljas silmä ei kovinkaan helposti tunnista niissä eroa. Käyttöliittymäsuunnittelijoita ja ohjelmistokehittäjiä on tullut ja mennyt ja jokainen heistä on jättänyt oman jälkensä, eikä toteutusten ja suunnitelmien yhdenmukaisuudesta ole ollut vastuuta kenelläkään. Kun vastaan on tullut 5 eri toteutusta tavallisesta tekstikentästä ja 17 eri harmaan sävyä, voi helposti tulla mieleen kysymys, että eikö tätä voisi tehdä yhtään järkevämmin. Onneksi voi ja tähän kaaokseen muotoilujärjestelmät tuovat ratkaisun.
Mikä on muotoilujärjestelmä?
Nielsen-Norman Groupin mukaan muotoilujärjestelmä (eng. design system) on ohjeistuksista, suunnitteluperiaatteista ja uudelleenkäytettävistä komponenteista koostuva kokonaisuus, jonka avulla käyttöliittymien suunnittelua ja toteuttamista voidaan hallita skaalautuvasti. Muotoilujärjestelmä sisältää kaiken tarvittavan tiedon, jolla käyttäjäkokemukseltaan ja ulkoasultaan yhdenmukaisia tuotteita ja palveluita voidaan toteuttaa.
Mistä muotoilujärjestelmä koostuu?
Muotoilujärjestelmä koostuu ainakin seuraavista osasista:
Tyylioppaassa (eng. style guide) yleensä määritellään, kuinka muotoilujärjestelmän osaset rakennetaan visuaalisesti. Ohjeet, jotka sisältävät muotoilussa käytettävät tyylimäärittelyt ja vakiot (eng. design tokens), voivat sisältää seuraavia määrittelyjä: typografia, värit, logot, muut brändiin liittyvät määritykset, välistykset sekä printtimedia. Tyylioppaassa voidaan ottaa kantaa myös siihen, minkälaista kieltä muotoilujärjestelmässä tulisi käyttää.
Muotoilupakki (eng. design kit tai UI kit) sisältää tarvittavat aineistot, jolla käyttöliittymäsuunnittelija pystyy suunnittelemaan kokonaisia käyttöliittymiä, jotka noudattavat tyylioppaassa määriteltyjä periaatteita. Muotoilupakin aineistot ovat yleensä koottuna tuettujen suunnittelutyökalujen pilvipalveluihin, kuten Figma tai Sketch Cloud.
Komponenttikirjasto (eng. component library) sisältää ohjelmallisen toteutuksen tyylioppaan määrittelemistä osista, komponenteista. Komponenttikirjasto sisältää myös kaiken teknisen ohjeistuksen, jonka avulla käyttöliittymäkehittäjä pystyy muotoilujärjestelmän mukaisen käyttöliittymän toteuttamaan. Ohjeistukset sisältävät yleensä seuraavat tiedot:
- Tuetut ohjelmistokehykset
- Visuaaliset esimerkit komponenteista
- Koodiesimerkit
- Rajapintadokumentaation
- Ohjeet siitä kuinka komponentit saa asennettua omaan projektiin
- Kontribuutio-ohjeet
Komponenttikirjaston hallintaan hyvin usein käytetään esimerkiksi Storybook-työkalua.
Suunnittelumallit (eng. pattern library) sisältävät ohjeistukset ja esimerkit siitä, kuinka muotoilujärjestelmän komponenteilla rakennetaan suunnittelujärjestelmän periaatteita noudattava kokonainen käyttöliittymä eri tilanteissa. Esimerkiksi miten tietyt komponentit ryhmitellään, jos niitä käytetään yhdessä, kuinka sovellusten navigoinnit pitäisi toteuttaa ja kuinka lomakkeita rakennetaan.
Muotoilujärjestelmän olemukseen kuuluu myös se, että kaikki siihen liittyvä aineisto löytyy yhdestä paikasta, joka on yleensä muotoilujärjestelmälle luotu sivusto. Sivusto on voitu rakentaa joko muotoilujärjestelmän omista komponenteista tai siihen voidaan käyttää ulkopuolisia dokumentointi- alustoja, kuten zeroheight.
Mitä hyötyjä muotoilujärjestelmä tuo?
Toistettavuuden ansiosta muotoilu ja kehitys ovat nopeampaa
Valmista työtä voidaan hyödyntää loputtomasti uudestaan ja samalla säilyttää täysi yhdenmukaisuus. Muotoilujärjestelmän suurin hyöty onkin sen kyky toistaa muotoilua nopeasti hyödyntämällä aikaisemmin tehtyjä käyttöliittymäkomponentteja- ja elementtejä. Samalla säästyy suuri määrä työtunteja ja rahaa, kun pyörää ei tarvitse keksiä joka kerta uudestaan.
Muotoilujärjestelmän avulla työ kohdentuu uusien ja suurempien kokonaisuuksien luomiseen
Kun käyttöliittymän peruskomponentit ovat jo olemassa, muotoilutyötä voidaan kohdentaa monimutkaisempien asioiden ratkaisuun sen sijaan, että ensiksi viilattaisiin perusasioita.
Muotoilujärjestelmä luo yhteisen kielen muotoilu- ja kehitystiimien välillä
Yhteinen kieli vähentää kommunikaatiohaasteita, kun käsitteet ovat määritelty. Esimerkkinä voidaan mainita, että eri kehitystiimien ei tarvitse vääntää kättä siitä, että millä nimellä jotain tiettyä peruskomponenttia kutsutaan ja kuinka sen pitäisi toimia, kun nämä asiat ovat muotoilujärjestelmässä määritelty.
Muotoilujärjestelmä luo yhdenmukaisen käyttäjäkokemuksen
Organisaation laajuisen muotoilujärjestelmän puute usein johtaa siihen, että ulkoasu ja toimintalogiikka eroaa organisaation eri tiimien tuotteiden välillä, mikä johtaa epäyhdenmukaiseen käyttäjäkokemukseen. Muotoilujärjestelmä mahdollistaa sen, että organisaation eri osastoilla toisistaan riippumattomat kehitystiimit voivat silti tuottaa yhdenmukaisen käyttäjäkokemuksen. Myös muutokset tyyliin ovat helpompia, kun tuotteiden käyttöliittymäkomponentit pohjaavat yhteiseen muotoilujärjestelmään.
Saavutettavasti toteutettu muotoilujärjestelmä auttaa toteuttamaan saavutettavia palveluita
Kun muotoilujärjestelmä on alusta asti tehty saavutettavaksi, sillä luotavat järjestelmät ja palvelut on helpompi toteuttaa saavutettavasti ja ne toimivat esimerkiksi ruudunlukijalla. Sen lisäksi, että muotoilujärjestelmän käyttämät värit ja tyylit ovat saavutettavia, muotoilujärjestelmä tarjoaa myös saavuttettavuusohjeistuksen muotoilijoiden ja kehittäjien työn tueksi. Yksittäisen kehittäjän ei tarvitse olla saavutettavuusasiantuntija, kun saavutettavuudesta on huolehdittu järjestelmätasolla.
Kuinka päästä alkuun muotoilujärjestelmän kehityksessä
Nykytilan kartoitus
Muotoilujärjestelmän kehitys alkaa nykytilan kartoituksella. Kartoituksessa selvitetään mitä muotoiluun liittyvää aineistoa on jo olemassa ja mitä näiden pohjalta on toteutettu. Näitä ovat esimerkiksi brändiopas sisältöineen, toteutetut käyttöliittymäkomponentit sekä niissä käytetyt tyylit. Kartoituksessa löytynyttä aineistoa voidaan käyttää soveltuvin osin muotoilujärjestelmässä.
Sidosryhmien osallistaminen ja käyttäjätutkimukset
Onnistunut muotoilujärjestelmän toteutus ja jalkautus organisaation sisällä vaatii eri sidosryhmien osallistamista. Kun eri sidosryhmien tarpeet tuodaan muotoiluprosessiin mukaan, voidaan muodostaa yhteinen näkemys, miten muotoilujärjestelmää kehitetään. Osallistamalla organisaatio on helpompi sitouttaa muotoilujärjestelmään ja yhdessä sovittuihin prosesseihin. Näin voidaan varmistaa, että muotoilujärjestelmän ohi tapahtuvaa muotoilu- ja kehitystyötä ei synny. Käyttäjätutkimuksilla voidaan varmistaa, että loppukäyttäjien tarpeet voidaan täyttää ja muotoilujärjestelmä on tunnistettava ja yhdistettävissä organisaation brändiin.
Muotoilujärjestelmätiimi
Muotoilujärjestelmä on yhtä toimiva kuin sitä toteuttava tiimi. Ideaalitilanteessa muotoilujärjestelmää toteuttavassa projektitiimissä on osaamista olennaisista toteutustekniikoista, visuaalisesta-, käyttöliittymä- sekä interaktiosuunnittelusta. Myös palvelumuotoilu, ohjelmistoarkkitehtuuri ja sisällöntuotanto olisi hyvä olla edustettuina vähintään osa-aikaisesti riippuen projektin vaiheesta.
Muotoilujärjestelmä on jatkuva projekti
On hyvä muistaa, että muotoilujärjestelmän ylläpito ja kehittäminen on jatkuvaa työtä. Muotoilujärjestelmää ei voi vain kerran toteuttaa ja sitten unohtaa.
Tunnettuja muotoilujärjestelmiä
- Google Material Design
- IBM Carbon Design System
- Microsoft Fluent Design System
- Apple Human Interface Guidelines
Lopuksi
Muotoilujärjestelmän avulla voidaan varmistaa, ettei samaa asiaa suunnitella ja toteuteta kerta toisensa jälkeen uudestaan ja samalla polteta rahaa turhaan. On hyvä muistaa, että muotoilujärjestelmä on jatkuva projekti, joka vaatii jatkokehittämistä ja ylläpitoa, jotta se pystyy vastaamaan tuleviin ja muuttuviin tarpeisiin. Onnistunut muotoilujärjestelmä on saavutettava, tunnistettava, syntynyt yhteistyössä eri sidosryhmien välillä ja jalkautunut koko organisaation laajuiseksi. Muotoilujärjestelmä on hyvä perusta yhdenmukaisen käyttäjäkokemuksen luomiseksi kustannustehokkaasti.
Lähteet:
https://www.nngroup.com/articles/design-systems-101/
https://www.robertcreative.com/blog/what-is-a-design-system
https://www.designbetter.co/design-systems-handbook/introducing-design-systems
Tutustu tarjoomaamme:
Käyttäjälähtöinen suunnittelu