Mitä löytyy UX/UI-suunnittelijan työkalupakista?
Uuden rakentamiseen tarvitaan aina hyviä työkaluja. Sama pätee ohjelmistoratkaisuihin. Kun puhutaan käyttäjäkokemuksesta ja käyttöliittymistä, teknologian tulee täyttää ainakin kaksi tärkeää tarvetta:
- Ensinnäkin, visuaaliset ideat on saatava taipumaan ketterästi prototyypeiksi tai valmiiksi malleiksi.
- Toiseksi, jokainen muotoilija tarvitsee hyvät puitteet vuoropuhelulle muun muassa käyttäjien, asiakkaiden, devaajien, arkkitehtien tai testaajien kanssa.
Tehtävänä datan visualisointi
Maria Salonen aloitti Cinialla kesäkoodarina huhtikuussa 2020. Hän kiinnostui käyttäjäkokemus- ja palvelumuotoiluteemoista jo opintojensa aikana, ja se vaikutti työnkuvaan alusta asti. Tällä hetkellä Salonen työskentelee Junior UX Designerina. Käytettävyyden parantaminen ja visuaalinen suunnittelu ovat lähellä myös Samu Lappalaisen sydäntä. Hän on tehnyt UX/UI-suunnittelua Cinialla viiden vuoden ajan.
IoT-ratkaisuihin liittyvä datan visualisointi on tärkeässä osassa kummankin työnkuvaa. Designer-roolin lisäksi molemmat tekevät myös frontend-koodausta. Tai kuten Salonen eri roolejaan osuvasti kuvaa: “Pääsen viemään suunnitelmia myös käytäntöön.”
Tärkeimmät työkalut ideoinnista dokumentointiin
UX/UI-suunnittelija – etenkin koodaava suunnittelija – kulkee mukana ohjelmistokehityksen koko kaaren ajan, innovoinnista aina suunnitteluun, toteutukseen, dokumentointiin ja jatkokehitykseen saakka. Design-tiimiläiset nostavat esiin tärkeimpiä työkaluja eri vaiheista:
1. Mural
Mural on virtuaalinen alusta ideointiin, vaatimusmäärittelyiden luomiseen ja muuhun yhteissuunnitteluun. Jos post-it -laput ja fläppitaulut kuuluivat ennen jokaiseen työpajaan, tarjoaa Mural niille tänä päivänä digitaalisen vaihtoehdon.
“Muralissa tykkään erityisesti valmiista pohjista, joita olen voinut tehdä tai muokata ja kopioida eri tilanteisiin. Niiden hyödyntäminen säästää aikaa. Myös äänestysominaisuus on kätevä: sen avulla voi kartoittaa eri vaihtoehtoja ja etsiä yhdessä parasta ratkaisua tiettyyn ongelmaan”, Salonen kertoo. Muralissa on myös näppärä, oma ajastin: sen avulla työpajan vetäjä voi määritellä, että kaikki keskittyvät tietyn aikaa tiettyyn teemaan. Samalla jokainen osallistuja pysyy kärryillä tapaamisen kulusta.
2. Adobe XD
Jos pitäisi nimetä yksi sovellus, joka kuluu Cinian suunnittelijoiden (hiiri)käsissä eniten, se on Adobe XD. Miksi juuri XD on valikoitunut UI-suunnittelun välineeksi?
- Adoben tuotteet ovat laajasti käytössä, joten niihin liittyen on tarjolla runsaasti ohjeita ja dokumentaatiota.
- XD on useimmille designereille ennestään tuttu, ja siinä on monia arkea helpottavia ominaisuuksia: muun muassa interaktiiviset demot syntyvät käden käänteessä.
- XD:tä on kehitetty viime vuosina paljon, ja tänä päivänä se onkin kuin fiksu, kevyt versio Photoshopista.
- Moni käyttää mieluummin työpöytäsovellusta kuin kokonaan selaimessa toimivaa ohjelmaa.
“Olen aiemmin käyttänyt jonkin verran Figmaa, joka on tietysti vielä hieman kevyempi. Pidän kuitenkin siitä, että XD:ssä on laajemmin eri ominaisuuksia”, Salonen vertaa.
Prototyyppien suunnittelu, jakaminen ja kommentointi ovat ylipäänsä helpottuneet suunnittelutyökalujen kehittymisen myötä, pohtii Lappalainen: “Interaktiiviset demot piti ennen vanhaan melkeinpä toteuttaa html:llä. Nyt niiden luominen on esimerkiksi XD:n avulla todella nopeaa. Pystyt siis näyttämään asiakkaalle tai muulle projektitiimille helposti, mitä mistäkin napista painamalla tapahtuu.”
3. Storybook
Muutamassa projektissa käytössä on Storybook, joka tosin tunnetaan astetta enemmän ohjelmistokehittäjien työkaluna. Sen avulla voi jakaa ja testata käyttöliittymäkomponentteja visuaalisesti: näyttääkö kaikki siltä kuin pitää? Storybook tukee siis devaajan ja designerin yhteistyötä.
4. Material UI ja muut valmiit UI Frameworkit
“Meillä tehdään vuosienkin pituisia projekteja, joissa on konepellin alla jo paljon valmiina. Sekä fronttikoodarina että suunnittelijana käytän itse aina jotakin yhdessä sovittua graafikirjastoa, ja se luonnollisesti antaa suuntaviivat tekemiselle”, Salonen selittää. Kun omassa työnkuvassa yhdistyy sekä luova suunnittelu että tekninen toteutuspuoli, osaa kirjaston reunaehdot ottaa huomioon ideointivaiheesta alkaen.
“Hyödynnämme paljon valmiita UI-frameworkeja. Esimerkiksi Material UI on suuri, Googlen ylläpitämä kirjasto. Se tarjoaa runsaasti omaan käyttöön muokattavia, testattuja komponentteja, kuten pudotusvalikoita, nappeja ja hover-efektejä”, Lappalainen havainnollistaa.
5. Mattermost
Cinialla kannustetaan työkavereiden tukemiseen ja ongelmien ratkomiseen yhdessä. UX/UI-designerit pitävätkin tiiviisti yhteyttä yli projektirajojen. Chat-sovelluksista Cinialla on käytössä Mattermost, jossa designereilla on oma kanava. Se on nopea tapa mielipiteiden kysymiseen tai layout-kuvien jakamiseen, halusi sitten nykäistä hihasta vain paria työkaveria tai isompaakin joukkoa.
6. Confluence
Dokumentointi on osa ohjelmistokehityksen laadunvarmistusta, ja ketterän kehittämisen hankkeissa sitä myös tehdään jatkuvasti. Confluence-sovellus luo siihen hyvät puitteet.
“Hyvin tehdystä dokumentoinnista on aivan älyttömästi apua, kun hyppää mukaan todella laajaan, monta vuotta pyörineeseen projektiin”, Salonen kertoo tuoreen kokemuksensa pohjalta. “Tarvittava tieto löytyy helposti ja nopeasti silloin, kun sitä tarvitsee.”
Miten UX/UI-designerin työkalut tulevat kehittymään jatkossa?
Suunnittelua – kuten koko ohjelmistokehitystä – tukevat työkalut kehittyvät vauhdilla. Helposti ymmärrettävät prototyypit ja dokumenttien reaaliaikainen yhdessä työstäminen ovat jo arkipäivää, mutta mitkä tämän päivän muutostrendit vaikuttavat designerien työkalupakkiin lähitulevaisuudessa? Suunnittelijat nostavat esiin kaksi teemaa:
Saavutettavuuden merkitys tulee kasvamaan, kun tasavertaisuudesta ja inklusiivisuudesta puhutaan koko yhteiskunnassa yhä enemmän. Saavutettavuuden huomiointi ei tulevaisuudessa ole vain pakollista direktiivien noudattamista, vaan yksinkertaisesti hyvä tapa tehdä asioita.
Osa työpajoista voidaan jälleen järjestää kasvokkain, ja se on hieno juttu muun muassa keskustelun virittämisen ja sanattoman vuorovaikutuksen kannalta. Siitä huolimatta etänä tapahtuva yhteissuunnittelu on tullut jäädäkseen, ja siihen liittyvät työkalut tulevat luultavasti vielä yleistymään ja kehittymään.
Miten käyttäjäkokemus otetaan huomioon Cinian ohjelmistokehitysprojekteissa?
Lue lisää aiheesta:
