VIPU & TUKISOVELLUS

Selkeä käyttöliittymä auttaa viljelijöitä hakemaan tukia eksymättä hakuprosessiin.

Suomalaiset viljelijät hakevat vuosittain tukia Ruokaviraston Vipu-palvelussa. Viranomaiset käsittelevät hakemukset Tukisovelluksessa.

Asiakas / Projekti: Siili One - Ruokavirasto
Tyyppi: Julkinen palvelu
Alusta: Verkkosovellus
Aloitettu: 2019

Työtehtävä ja rooli

Määrittelystä käyttökokemukseen

Suunnittelen ja toteutan Vipua ja Tukisovellusta osana tiimiä. Tavoitteenamme on, että viljelijät voivat hakea tukia luottavaisin mielin ja viranomaiset tehdä tarvittavat tarkastukset.

Asiantuntijat ja tuoteomistajat määrittelevät vaatimukset ja avaavat, mitä lainsäädäntö palvelulta edellyttää. Osallistun keskusteluihin ja neuvon, miten vaatimukset voidaan toteuttaa toimivina käyttöliittymäratkaisuina. Suunnittelen ja dokumentoin käyttöliittymän ja teen tarvittaessa muutokset suoraan frontend-koodiin, kun taas kehittäjä vastaa sovelluslogiikasta.

Työskentelemme monitoimittajaympäristössä kolmen viikon sprinteissä. Jokainen muutos kulkee määrittelyn, käyttöliittymäsuunnittelun, käyttäjätarinoiden, toteutuksen, testauksen ja katselmoinnin kautta. Kehitän tuotteiden omia käyttöliittymäkomponentteja ja design systemiä niin, että ne pysyvät yhtenäisinä. Olen mukana uudistamassa AngularJS:ää uuteen Angular-arkkitehtuuriin, ja autan muita suunnittelijoita design systemin kehittämisessä ja ylläpidossa.

01 · Tiiviimpi etusivu

Yksi sivu, monta omistajaa, yksi yhteinen visuaalinen kieli

Viljelijällä on tila hoidettavana. Tukien hakemisen pitäisi viedä mahdollisimman vähän hänen huomiotaan, joten suunnittelin etusivun yksinkertaisen ja selkeän käyttöliittymän ympärille.

Vipulla on pitkä historia. Tuoteomistajat määrittelevät ominaisuudet yhdessä asiantuntijoiden kanssa, kukin omalla alueellaan, ja vuosien mittaan kaikki ovat rakentaneet samaa sivua. Ilman yhteistä muotokieltä se näkyi. Perustelin jokaisen alla olevan päätöksen tuoteomistajille, ja sivu puhuu nyt yhtä visuaalista kieltä ja tuntuu edelleen Vipulta. Miten tuo kieli rakennetaan, kerrotaan osiossa 03.

Välilehdet työpöydällä, haitarit mobiilissa. Vanha sivu kokosi kaiken pitkiin, auki oleviin osioihin. Nyt käyttäjä avaa vain tarvitsemansa tiedot.
Kiinteäkorkuinen sisältöalue. Se jättää tilaa tärkeille toiminnoille, kuten valtuuksien hallinnalle.
Hakemuksen aloittavat painikkeet aina samassa paikassa. Hakemuksen aloittaminen ei vaadi painikkeen etsimistä.
Yksi visuaalinen ja typografinen hierarkia. Otsikot, selitteet ja tukiteksti noudattavat samaa logiikkaa koko sivulla, joten eri alueiden lisäykset näyttävät kuuluvan yhteen.

Uusi käyttöliittymä julkaistaan kokonaisuudessaan joulukuun versiossa. Jo ennen julkaisua markkinointi, asiantuntijat ja viljelijät ovat antaneet siitä myönteistä palautetta selkeydestä. Vaikutus arjen käytössä arvioidaan julkaisun jälkeen.

Vipun vanha etusivu, jossa maatilan tiedot, hakemukset, osalliset ja kasvitiedot näkyvät päällekkäisissä avoimissa osioissa.

Vipun uusi työpöytäetusivu, jossa tiedot on ryhmitelty välilehtiin ja maatilan tiedot on valittu.

02 · Yksi valikko kahden sijaan

Navigaatio · Asiointinäkymän vaihtaminen

Valitse henkilö, maatila tai yhteisö

Ongelma

Maatila valittiin Maatila-valikosta ja henkilöhakijana asioitiin Henkilöhakija-linkin kautta. Yhteisöhakijoille oli erillinen Yhteisöhakija-kohta navigaatiossa. Henkilöhakijan näkymään palaaminen vaati puolesta asioinnin lopettamisen. Näkymän vaihtaminen edellytti, että käyttäjä tiesi oikean reitin.

Ratkaisu

Yhdistin henkilöhakijan, maatilat ja yhteisöt yhteen ryhmiteltyyn valikkoon. Käyttökokemus pysyy yhtenäisenä asiointioikeuksista riippumatta, asioipa käyttäjä henkilönä, maatilan tai yhteisön puolesta. Nykyinen asiointinäkymä näkyy selvästi, joten käyttäjä tietää, kenen puolesta hän asioi.

Vipun vanha käyttöliittymä: maatilavalikko, yhteisön valintapaneeli ja navigaatio. Erillinen Yhteisöhakija-kohta ei näy tässä kuvassa.

Maatila — maatila valittiin Maatila-valikosta.
Yhteisön puolesta asiointi — erillisessä paneelissa näkyivät valittu yhteisö ja toiminto puolesta asioinnin lopettamiseen.
Erilliset navigaatioreitit — Henkilöhakija avasi henkilöhakijan näkymän. Yhteisöhakijoilla oli lisäksi Yhteisöhakija-kohta, joka ei näy kuvassa. Henkilöhakijan rooliin palaaminen edellytti Lopeta puolesta asiointi -toimintoa.

Vipun uusi valikko, jossa henkilöhakija, maatilat ja yhteisöt näkyvät samassa valikossa. Valintamerkki osoittaa nykyisen valinnan.

Yhtenäinen käyttökokemus henkilönä, maatilan tai yhteisön puolesta asioitaessa, käyttöoikeuksista riippumatta.
Ryhmitelty henkilöhakijaan, maatiloihin ja yhteisöihin.
Selkeä asiointinäkymä: käyttäjä näkee, kenen puolesta hän asioi, ja nykyinen valinta on merkitty myös valikkoon.
Seuraavaksi: haku ja suodatus valvojaroolin käyttäjille, joiden listalla on paljon maatiloja.

Vipun uusi työpöytävalikko: henkilöhakija, maatilat ja yhteisöt samassa valikossa. Valintamerkki osoittaa nykyisen valinnan.

Vipun mobiilietusivu puhelimessa. Haitariosioista maatilojen osallisuustiedot ovat avoinna.

03 · Yhteiset komponentit

Design System, joka kehittyy jatkuvasti

Vipun ja Tukisovelluksen lähtökohtana oli kehittäjille tehty komponenttisivusto, jossa näkyivät HTML-elementit. Suunnittelijoilla ei ollut omaa kirjastoa, joten jokainen kokonaisnäkymä piirrettiin alusta asti. Se vei paljon aikaa ja hidasti työtä.

Aloimme rakentaa uudelleenkäytettäviä komponentteja Sketchiin, jaoimme kirjastoa Zeplinillä ja siirsimme versionhallinnan Abstractista Sketchin pilveen. Olen vuosien varrella kehittänyt Sketchiin plugineja, jotka automatisoivat suunnittelua ja kirjaston ylläpitoa. Viimeisimmän vaiheen vedin itse: arkkitehtuuri uudistettiin atomic designiin, jossa yhteisten atomien päälle komponentit ja organismit ovat kapseloituja kokonaisuuksia, joita on helppo ylläpitää. Olemme punninneet myös siirtymistä Figmaan, mutta lisenssit ja tietoturvavaatimukset ovat toistaiseksi pitäneet meidät Sketchissä.

Ruokaviraston oma Design System tuli myöhemmin. Se palvelee useita palveluja yleisellä tasolla ja kehittyy yhä, ja sen arkkitehtuuri suunniteltiin Reactille, vaikka suurin osa palveluista toimii Angularilla. Päätimme tiimin kanssa ottaa sen vertailukohdaksi ja lähestyä sen visuaalista ilmettä muuttamatta sitä, minkä käyttäjät jo tunnistavat. Angular Material ei ollut vaihtoehto, koska palveluissa on kaksi tai jopa kolme Angular-arkkitehtuuria, joten rakennamme omat komponentit.

Storybook on käytössä, ja sen jalkauttaminen tuoteomistajille on vielä kesken. Pohdimme, miten tekoäly voi auttaa siinä, jotta jokaisesta tilasta ei tarvitse piirtää kuvaa käyttöliittymädokumenttiin testausta ja toteutusta varten.

Vipun käyttöliittymän artboardit Sketchissä

Design Systemin kehitys

Vanha suunnittelukirjasto

Storybook

Sketch

04 · Suunnittelusta toteutukseen

Suunniteltu toteutus mielessä

Olen vuosien varrella tutustunut eri Angular-versioihin ja oppinut niiden arkkitehtuurin. Siksi tiedän, miten käyttöliittymät rakentuvat ja mikä on toteutettavissa, ja suunnittelen niin, ettei suunnitelma muutu matkalla. Dokumentoin käyttöliittymän, ja tarvittaessa teen muutokset itse käyttöliittymäkoodiin. Kehittäjä vastaa sovelluslogiikasta.

Autan kehittäjiä hienosäädössä, joka jää usein suunnittelun ja kehityksen väliin, kuten pikselintarkassa viilauksessa. Näin he voivat keskittyä logiikkaan ja toteutus vastaa piirrettyä.

Haluan, että koodi ja suunnitelma pysyvät lähellä toisiaan. Koodiin tutustuminen testaa suunnitelmaa: se paljastaa yksityiskohtia, jotka eivät näy staattisissa kuvissa, ja synnyttää ideoita, jotka palaavat takaisin suunnittelupöydälle.

Pidän työskentelystä toteuttajien kanssa. Toimin tuoteomistajien ja kehittäjien välissä ja käännän tekniset asiat tuoteomistajille ymmärrettävään muotoon, jotta päätöksiä voi tehdä tietäen, mitä ne tarkoittavat toteutukselle.