Palvelumuotoilun, määrittelyn ja näitä seuraavien sisältörakenteen ja sisällön suunnittelun myötä tiedämme mitä, miksi ja miten verkkopalveluprojektimme pyrkii saavuttamaan. On aika paneutua palvelumme käyttökokemuksen ja ulkoasun puoleen. Voit myös kootusti kurkata Ostajan Oppaasta kaikki loputkin vaiheet.
Ennen UX/UI-suunnittelua emme vielä tiedä sitä, miten verkkopalvelun elementit ja ominaisuudet konkreettisesti toimivat. Tässä työvaiheessa pääsemme tuomaan sanalliset suunnitelmamme visuaaliseen, testattavaan ja lopullista ulkoasuaan vastaavaan muotoon.
Niin ja ennen kuin mennään varsinaiseen asiaan, väännän rautalangasta (heh):
UX: User Experience, eli käyttökokemus. UI: User Interface, eli käyttöliittymä.
UX/UI-suunnittelulla pyrimme vastaamaan seuraaviin kysymyksiin
- Miten palvelun ja tämän toiminnallisuuksien käyttäminen käytännössä tapahtuu?
- Miltä palvelun (käyttöliittymän) käyttäminen tuntuu?
- Miltä palvelu näyttää?
Rautalangat käyttöliittymäsuunnittelun työkaluna
Kuvitellaan työvaiheen merkitystä käytännön esimerkin kautta: huoneiden pohjapiirrosta on yksinkertaisempaa muuttaa suunnittelun alkuvaiheessa ennen kuin rakennuksen perustaa on valettu.
Siksi käyttöliittymäsuunnittelun ensimmäinen työvaihe on rautalanka. Se on visuaalisesti mahdollisimman yksinkertainen esitys tulevasta verkkopalvelusta, sen toiminnallisuuksista ja käyttöliittymäelementtien keskinäisestä suhteesta. Määrittelyvaiheen hedelmät eli sisältörakenne, elementit ja sivupohjat, toiminnallisuudet sekä käyttöliittymän runko, kuten navigaatio ja valikot, kuvataan yksinkertaistettuna rautalangassa. Meidän suunnittelufilosofiaamme kuuluu, että tästä kaikesta rakennetaan klikkailtava prototyyppi. Sen avulla on helppo hahmottaa ja testata tulevaa verkkopalvelua.
Käyttöliittymäsuunnittelun kulmakivi on: pitämällä ensimmäiset luonnoksemme visuaalisesti mahdollisimman yksinkertaisena takaamme sen, että kaikki tulevan verkkopalvelun näkymät ja toiminnot tulevat otettua huomioon, ja mahdollisten muutosten toteuttaminen on yksinkertaista ja vikkelää.
Testaa, osallista, kommentoi ja iteroi
Klikkailtava rautalankaprototyyppi mahdollistaa niin palvelun käytettävyyden kuin rakenteellisen kokonaisuuden testaamisen lopullista palvelua vastaavassa muodossaan. Näin pääsemme testaamaan, miten palvelun sisäinen rakenne toimii, miltä ominaisuuksien käyttäminen tuntuu ja miten ratkaisuehdotus kohtaa projektille asetetut vaatimukset.
Tässä vaiheessa projektia pääsemme ottamaan mukaan testaukseen myös erilaiset sidosryhmät, olivatpa he sitten kotisohvalta löytyviä viattomia tai tarkalla harkinnalla koottu testiryhmä. Suoraviivaisella ja nopeatempoisellakin käyttäjätestauksella saamme kerättyä arvokasta tietoa kehityksen tueksi. Käyttäjätestaus myös auttaa tunnistamaan mahdolliset ongelmat. Tämän kommentoinnin pohjalta suunnitelmia usein muutetaan tai jalostetaan entisestään kohti lopullista muotoaan.
Rautalankavaiheen keskeinen tehtävä on myös varmistaa, että kaikki sovittu ja tarvittava on otettuna huomioon. Tähän soveltuu erinomaisesti seuraava tarkistuslista:
- Onko kaikki tarvittavat sivupohjat, elementit ja toiminnallisuudet huomioitu?
- Hakupainike ja hakutulossivu? Kielivalinta? Uutisten listaussivu? Tarittavat suodatukset?
- Riittääkö määritelty sisältö palvelun tarpeisiin?
- Löytyykö kuvapankista riittävästi kuvia? Ovatko videonostojen videot jo tuotannossa? Saadaanko artikkelinostoihin uutta sisältöä ja some-syötteeseen jatkuvasti postauksia?
- Onko palvelun rakenne selkeä ja käyttäminen vaivatonta?
- Miten navigaatio toimii? Onko sivulta toiselle siirtyminen helppoa? Miten käyttäjää ohjataan haluttuihin toimenpiteisiin?
- Ovatko suunnitelmat teknisen toteutuksen kannalta järkeviä?
- Vastaako palvelu aikaisemmin projektissa tunnistettuihin tarpeisiin?
Kun kaikki alkaa rautalankavaiheen luonnosten osalta olla reilassa, pääsemme vihdoin keskittymään (ainakin asiakkaiden) mielestä projektin ylivoimaisesti jännittävimpään vaiheeseen – käyttöliittymän visuaaliseen ilmeeseen! Eli leiskoihin, siis layouteihin.
On tärkeää osallistaa ulkopuolisia henkilöitä käyttöliittymätestaukseen – olivat he sitten muita työntekijöitämme, asiakkaan henkilöstöä tai naapureita. Asiantuntijoina voimme tehdä valistuneita ehdotuksia, mutta lopulta viisaus asuu käyttäjän toimintatavoissa. Klikattavien prototyyppien avulla pystymme demonstroimaan toiminnallisuuksien toimivuutta ennen ohjelmointia. Tämä tuo välttämätöntä konkretiaa jo suunnitteluvaiheeseen.
Aleksi Kulmala, Digital Designer, Into-Digital
Verkkopalvelun ulkoasu ja visuaalinen identiteetti
Verkkopalvelu on yrityksen tärkein yksittäinen markkinointiviestinnän väline. Sen visuaalisen ilmeen tulee näin ollen noudattaa asiakkaan olemassa olevaa brändi-ilmettä. Selkeimmin brändi-ilme jalkautuu verkkopalveluun käytettyjen fonttien, värien ja logon muodossa. Näiden perusbrändielementtien lisäksi visuaalinen identiteetti viedään astetta pidemmälle: mikä tunnelma palvelusta välittyy?
Usein törmäämme viimeistään tässä vaiheessa tilanteeseen, ettei asiakkaalta itseasiassa löydy kunnollistä brändiohjeistoa, tai se kaipaa kirkastusta. Jos näin on, tämä on hyvä hetki hoitaa se kuntoon. (Huom! Tämä ei välttämättä mikään ole pieni ja suoraviivainen projekti, mikä saattaa vaikuttaa verkkopalvelun suunnittelun aikatauluun.)
Palvelun tunnelmaa voidaan lähestyä helposti moodboardien, benchmarkien tai yksinkertaisesti adjektiivien pallottelun avulla. Pyritäänkö lopputuloksessa moderniin vai ajattomaan ilmeeseen? Pyöreään vai kulmikkaaseen? Kylmään vai lämpimään? Ja niin edelleen. Sanallisen ilmeen määrittelyllä ja jo olemassa olevilla esimerkeillä saadaan asetettua palvelun ulkoasun suunnittelulle selkeät raamit.
Nämä visuaaliset määritelmät sekä graafisen brändiohjeiston ilme ja säännöt seuraavaksi jalkautetaan suunniteltavaan verkkopalveluun. Piirretään rautalangasta selkeästi visuaalista identiteettiä luova tai tukeva verkkopalvelu. Meillä Intolla suunnitteluprosessin keskiössä on se, että ensin piirretään esimerkiksi etusivun layout, jota hinkataan niin pitkään, että konsensus verkkopalvelun yleisestä ilmeestä syntyy. Vasta sitten siirrytään piirtämään kaikki verkkopalvelun näkymät ja toiminnallisuudet.
Huom! On tärkeää jälleen muistuttaa, ettei verkkopalvelua luoda meidän tai asiakkaan henkilöstön tarpeisiin. Se luodaan asiakkaan asiakkaiden ja potentiaalisten sellaisten tarpeisiin. Helppo esimerkki: jos asiakkaan asiakkaat ovat esimerkiksi pääosin naispuolisia henkilöitä, ei meidän välttämättä kannata perustaa verkkopalvelun ulkoasua maskuliinisuuteen.
Visuaalinen hierarkia, responsiivisuus ja saavutettavuus
Palvelun teema on löydetty ja visuaalinen identiteetti noudattaa selkeästi määriteltyä brändi-ilmettä. Sitten vain piirretään palvelu valmiiksi? Ei ihan niin helppoa.
Verkkopalveluita suunnitellessa täytyy aina huomioida liuta visuaalisia ja teknisiä rajoitteita. Hyvän käyttökokemuksen nimissä palvelun toiminnallisuudet tulee viestiä myös visuaalisesti. Sisällön tulee olla selkeästi hahmotettavaa ja täyttää yleiset saavutettavuuden vaatimukset, vaikkei palvelua varta vasten olisi saavutettavaksi määriteltykään. Tekstin kontrastin tulee tukea hyvää luettavuutta, elementtien keskinäisen hierarkian tulee aueta käyttäjälle pelkällä vilkaisulla ja kokonaisuuden tulee noudattaa helposti ymmärrettävää visuaalista rakennetta.
Verkkosurffailijat – myös me – käytämme digitaalisia palveluita mitä erilaisimmilla päätelaitteilla, mikä tulee huomioida verkkopalvelua piirrettäessä. Miten suunnitelmamme käyttäytyvät eri näyttölaitteiden eri näyttöleveyksillä, kasvavatko valitut fonttikoot käsistä pienemmillä näytön tarkkuuksilla ja miten dynaaminen sisällön määrä vaikuttaa suunnittelemiemme elementtien ulkoasuun.
Hyvien ja huonojen verkkopalvelusuunnittelun käytänteiden listaamiseen ei riitä yksi ilta, mehutonkka ja kolme tuhatta sanaa, joten tyydytään tällä kertaa tähän yleisilmaisuun: ilman painavaa syytä suunnitelmiemme ei kannata rikkoa verkkopalvelusuunnittelun ’’hyviä käytänteitä’’. Tämän artikkelin puitteissa emme voi kuin raapaista aihealueen pintaa. Mitä kaikki nämä säännöt ja huomioitavat seikat sitten tarkoittavat suunniteltavan ulkoasun kannalta? Rajoittavatko käytettävyys ja tekniset vaatimukset verkkopalvelun kaunista ilmettä?
Verkkopalvelun ostajien helpotukseksi voimme kuitenkin todeta: ammattitaitoinen suunnittelija osaa ottaa kaikki tässä artikkelissa kuvatut muuttujat huomioon ja suunnitella tulevan verkkopalvelusi käyttökokemukseltaan erinomaiseksi, näyttäväksi ja teknisesti fiksusti rakennettavaksi kokonaisuudeksi. Helppoa? Ei. Mahdollista? Ehdottomasti.
Loppuu jo se piirtely!
UX/UI-suunnittelun myötä sanalliset (ja mahdollisesti kaaviomaiset, kuten käyttäjäpolut) suunnitelmat on onnistuneesti purettu osiinsa, testattu ja piirretty lopulliseen visuaaliseen ilmeeseensä. Pitkälle on päästy ja paljon on tehty. Suunnittelijan tehtäväksi jää vielä dokumentoida tekemänsä suunnitelmat ja suunnitelmien tekninen toimintalogiikka ohjelmoijille selkeään muotoon. Sitten pitäisi vähän koodata!
Terveisin
Ernesti
Ernesti Niemi
Ernesti on Into-Digitalin Digital Designer. Vapaa-ajallaan Ernesti valokuvaa, kuuntelee vanhoja äänilevyjä ja siemailee single malt -viskejä. Ajoittain.