Käyttöliittymäsuunnittelu – timanttisten verkkosivujen alku ja juuri

Ensin oli suo, hakku ja käyttöliittymäsuunnitelma. Kun tehdään uudet verkkosivut tai uudistetaan vanhoja, lähtee varsinainen työ liikkeelle käyttöliittymäsuunnittelusta. Eli käytännössä siitä, että suunnitellaan ennen koodaustyötä se, miltä sivut tulevat näyttämään ja mitä erilaisia toiminnallisuuksia sieltä löytyy. Timanttisia käyttöliittymiä suunnitteleva Jenna kertoo, miksi huolellinen UI/UX-suunnittelu on verkkosivutoteutuksissa avainasemassa.

Miksi käyttöliittymäsuunnitelma tarvitaan? Miksi ei vain voida koodata verkkosivua?

Käyttöliittymäsuunnitelma auttaa kehittäjiä ymmärtämään verkkosivujen visuaalisen rakenteen ennen varsinaisen koodin kirjoittamista. Jos verkkosivut toteutetaan ilman suunnitelmaa, niin se johtaa todennäköisesti erilaisiin haasteisiin, kuten verkkosivuston huonoon käyttäjäkokemukseen, käytettävyyteen ja myös siihen, miten verkkosivut tilannut asiakas pystyy päivittämään verkkosivua.

Suunnitelman avulla voidaan välttää virheitä jo ennen koodaustyön aloittamista. Useimmiten asiakas haluaa muutoksia verkkosivuille. Jos muutoksia aletaan toteuttamaan suoraan verkkosivuston koodiin, niiden tekeminen vie paljon enemmän aikaa kuin korjaukset käyttöliittymäsuunnitelmaan. Tämä ei luonnollisesti myöskään ole asiakkaalle kustannustehokasta.

Käyttöliittymäsuunnitelma auttaa myös projektia pysymään aikataulussaan, kun koodausvaiheessa säästytään aikaa vieviltä muutoksilta. Samalla käyttöliittymäsuunnitelman toteutus myös mahdollistaa sen, että useampi suunnittelija voi olla projektissa mukana ja ymmärtää tavoitteet.

Miksi käyttöliittymäsuunnitelma on asiakkaan etu?

Käyttöliittymäsuunnitelmasta on asiakkaalle paljon etuja. Suunnitelman tehtävänä on kertoa, miltä verkkosivut tulevat näyttämään ja millaisia ominaisuuksia sivustolla on. Suunnitelman avulla asiakkaalle muodostuu selkeä ymmärrys ja kuva siitä, miten verkkosivu toimii ja minkälainen lopputulos tulee olemaan. Toisin sanottuna se kertoo, mitkä ovat asiakkaalle tärkeitä ominaisuuksia ja toimintoja verkkosivuilla sekä miellyttääkö verkkosivujen ulkoasu.

Käyttöliittymäsuunnitelma parantaa sivuston tekijöiden ja asiakkaan välistä kommunikointia. Lisäksi se säästää sekä aikaa että kustannuksia. Varsinaisen koodaustyön tekevän kehittäjän on helpompi tehdä työnsä, kun on selkeä suunnitelma sivustosta, eikä hänen tarvitse käyttää aikaa sivuston sisällön ja toiminnallisuuksien miettimiseen.

Mitä vaiheita käyttöliittymäsuunnittelu sisältää?

Taustatutkimus ja asiakkaan tarpeiden selvitys

Aloitamme käyttöliittymäsuunnittelun perehtymällä ja tekemällä taustatutkimusta asiakkaan yrityksestä, toimialasta ja kilpailijoista. Kun ymmärretään liiketoimintamalli, tavoitteet ja toiveet, voidaan aloittaa verkkosivujen suunnittelu vaiheittain.

Sivupuu

Tämän jälkeen aloitamme suunnittelun sivupuun määrittelystä. Sivupuu on yksinkertainen esitys sivuston rakenteesta. Sivupuusta on helppo nähdä, mitkä ovat verkkosivuston päätason sivuja ja mitkä sivut sijoittuvat kunkin sivun alle. Suuremmille verkkosivuille sivupuun suunnittelu on todella tärkeää, jotta sivusta tulee helposti navigoitava ja tieto on helposti löydettävissä. Tämä vaihe määrittelee verkkosivujen laajuuden sekä kuinka paljon tulee erilaisia sivuja ja sivupohjia. Hyvin suunniteltu sivupuu vaikuttaa myös hakukonenäkyvyyteen.

Rautalankamalli

Kun olemme suunnitelleet sivupuun, teemme siitä rautalankamallin, joka on yksinkertainen piirros verkkosivuston rakenteesta. Rautalankamalli toteutetaan ennen varsinaista visuaalista suunnittelua. Sen tarkoitus on esittää, miten elementit sijoittuvat verkkosivulle ja mitä toiminnallisuuksia sivustolta löytyy. Se auttaa kehittäjää ja tilaajaa hahmottamaan sivuston kokonaisuutta sekä sen eri osa-alueita.

Tarkka suunnitelma

Kun asiakas on hyväksynyt sivupuun ja rautalankamallin, voimme aloittaa verkkosivujen ulkoasun suunnittelun. Tässä vaiheessa tehdään tarkka suunnitelma sivustosta, eli visualisoidaan, miltä verkkosivut tulevat näyttämään. Suunnitelman avulla verkkosivusta luodaan houkuttelevan näköinen ja brändi-ilmeen mukainen. Ulkoasu määrittelee, miltä elementit näyttävät ja millaisia värejä, kuvia sekä fontteja verkkosivulla käytetään.

Suunnitelma voidaan esittää kuvina tai prototyyppinä. Prototyypissä käyttäjä pääsee testaamaan sivuston toiminnallisuuksia. Tämä on erittäin hyödyllistä erityisesti silloin, jos sivustolla on toimintoja, jotka halutaan määritellä tarkasti.

Käyttöliittymäsuunnittelulla luodaan helppokäyttöisyyttä

Käyttöliittymäsuunnitelman yksi tärkeimmistä osa-alueista on suunnitella verkkosivusta tai palvelusta mahdollisimman helppokäyttöiset. Mikä onkaan raivostuttavampaa kuin hankalasti käytettävät verkkosivut? Helppokäyttöisyys ilmenee jo rautalankamallissa, jossa määritellään se, miten eri elementit sijoittuvat paikoilleen. Helppokäyttöisyyteen vaikuttavia tekijöitä ovat sivuston selkeys, visuaalisuus ja intuitiivisuus, eli siinä hyödynnetään käyttäjille tuttuja malleja ja navigaatiotapoja.

On myös hyvä muistaa, että saavutettavuus on tärkeä osa UI/UX-suunnittelua, sillä kaikkien käyttäjien tulisi pystyä käyttämään verkkosivua riippumatta heidän fyysisistä, kognitiivisista tai motorisista kyvyistä. Hyvällä suunnittelulla voidaan edistää saavutettavuutta tekemällä sivuista selkeät ja helposti navigoitavat sekä käyttämällä tarpeeksi suuria fonttikokoja ja kontrasteja. Saavutettavuus on toki paljon muutakin, mutta hyvällä käyttöliittymäsuunnittelulla voidaan jo auttaa monien ihmisten palvelun käyttöä.

Saavutettavuusasioissa suosittelen kääntymään tytäryhtiömme Selko Digitalin puoleen.

Miten käyttöliittymän toteutus käytännössä etenee osana verkkosivuprojektia?

Kun verkkosivuprojekti on aloitettu selvittämällä asiakkaan tarpeet ja suunniteltu sen pohjalta sivuston sivupuu, rautalankamalli sekä tarkempi suunnitelma, on aika päästä käsiksi varsinaiseen koodaustyöhön. Tätä ennen on toki vielä yhdessä paiskattu kättä siitä, että kaikki näyttää sovitulta.

Kehittäjät toteuttavat verkkosivun tarkan suunnitelman mukaisesti. Kun verkkosivujen toteutus on saatu alkuun ja sivuston ensimmäiset toiminnallisuudet toimivat, sovitaan yhteinen läpikäynti suunnittelijan, kehittäjän ja tilaajan kesken, jossa käydään läpi ensimmäiset tuotokset. Palaverissa sivuston tilaa ja tulevia työvaiheita verrataan tarkkaan suunnitelmaan.

Kun kehitystyö on sivuston julkaisua vaille valmis, sovitaan vielä palaveri, jossa käydään verkkosivusto kokonaisuudessaan läpi ja katsotaan kaiken olevan suunnitelman mukainen.

Aivan viimeisenä vaiheena ennen julkaisua tehdään vielä huolelliset testaukset. Kaiken ollessa kunnossa, voidaan sivut julkaista ja nauttia hetki siitä, kun suunnittelusta lähtenyt visio on muuttunut todellisuudeksi.

Kupillinen kahvia ja paluu luomistyön äärelle.