Millainen on hyvä verkkokaupan käyttöliittymä?

Verkkokaupan käyttöliittymäsuunnittelu ei tulisi tarkoittaa pelkkää yrityksen visuaalisen ilmeen esilletuomista. Avainasemassa onnistuneeseen käyttöliittymään ovat käytettävyys, toiminnallisuudet ja ominaisuudet. Lue, miten onnistunut käyttöliittymä suunnitellaan.

Onnistunut käyttöliittymä ja käyttöliittymäkokemus korostuvat tänä päivänä entistä enemmän, sillä yhä useampi kuluttaja tilaa verkkokaupasta tuotteita tai palveluja. Verkkokaupan selkeyden ja nopeuden lisäksi ostokokemus on yksi tärkeimmistä verkkokaupan kulmakivistä. Hyvä ja saumaton ostokokemus johdattaa asiakkaan ostovaiheiden läpi (shopping flow) mahdollisimman tehokkaasti ja keskittymällä olennaiseen, eli useimmiten tuotteisiin.

Verkkokaupan käyttöliittymäsuunnittelu lähtee usein liikkeelle asiakaskunnan (loppukäyttäjien) ja kohderyhmien ymmärtämisestä. Käyttöliittymäsuunnittelun ei tulisi tarkoittaa pelkkää yrityksen brändiä ja visuaalista ilmettä, vaan sen suunnitellussa tulee ottaa huomioon myös käytettävyys ja erilaiset toiminnallisuudet ja ominaisuudet, sillä jokaisella asiakkaalla on myös omat tarpeet ja toiveensa. Brändi, grafiikat ja värit ovat kuitenkin osa selkeää ja johdonmukaista verkkokauppaa ja tekevät asiakaskokemuksesta menestyksekkään.

Saapuessaan verkkokauppaan asiakas kiinnittää tahtomattaan huomiota sivuston hierarkiaan, yleiseen ilmeeseen, helppokäyttöisyyteen ja johdonmukaisuuteen: kuinka luotettavalta sivusto näyttää, onko navigaatiorakenne selkeä, löytyvätkö tuotteet helposti, ovatko kampanjat houkuttelevia ja niin edelleen.

Muutamia verkkokaupoille tyypillisiä ominaisuuksia ovat:

• tuotehaku,
• tuotelistaus,
• tuotesivu,
• tuotearvostelut,
• toivelista ja tuotevertailu,
• rekisteröityminen ja sisäänkirjautuminen,
• ostoskori ja
• kassa

On myös hyvä huomioida se, että asiakas voi aloittaa ostoprosessin saapuessaan mille tahansa sivulle verkkokaupassa. Laskeutumissivu voi olla etusivu, kategoriasivu, brändisivu, tuotesivu, yhteystietosivu tai jopa 404 Sivua ei löytynyt -sivu. Jokaisella sivulla asiakasta tulisi ohjata ja rohkaista aloittamaan ostosprosessi. Asiakasta voidaan johdatella eteenpäin muun muassa:

• lisää ostoskoriin -painikkeella,
• tuotenostoilla,
• bannereilla,
• kampanjanostoilla,
• sivuston navigaatiolla ja
• kaikkien näiden yhdistelmällä

Käyttöliittymiä suunnitellessa on tärkeää muistaa myös mm. vasen- ja oikeakätiset, isot ja pienet sormet ja näköaistiin liittyvät seikat. Värikontrastien tulisi olla tarpeeksi selkeät, jotta ne näkyvät jokaisessa päätelaitteessa ja eri käyttäjille selkeästi. Esimerkiksi vaaleanharmaa sävy voi olla usein vaikea erottaa valkoista taustaa vasten näyttöpäätteestä riippuen. Painikkeiden tulisi olla tarpeeksi isot, jotta niitä olisi etenkin puhelimessa ja tabletissa helppoa painaa. Puhelimessa keskitetyt painikkeet auttavat myös erikätisiä käyttäjiä yltämään niihin. Ei myöskään pidä unohtaa otsikkoja ja leipätekstien kokoja, näitäkin kannattaa usein tarkastella erikseen mobiili- ja työpöytänäkymissä.

Värien määrittely eri toiminnallisuuksien välillä yhtenäistää sivuston käyttökokemuksen. Keskeisimmän painikkeen, joka yleensä on lisää ostoskoriin -painike, kannattaa olla huomiota herättävämpi ja yhtenäinen brändin värien kanssa. Kun väri toistuu verkkokaupan samoissa elementeissä, käyttäjän on helppo ymmärtää sivun kulkua. Ensisijaiset kaikkien painikkeiden tulisi aina toimia yhteistyössä verkkokaupan muiden elementtien kanssa.

Kuinka onnistunut verkkokaupan käyttöliittymä suunnitellaan?

Käyttöliittymien suunnittelussa voidaan käyttää useita eri työkaluja ja ohjelmia. Käyttöliittymäsuunnittelu voidaan aloittaa rautalankamallista, jossa käytetään usein yksinkertaisia laatikoita hahmottamaan pääelementtien paikkoja. Sen voi tehdä helposti pelkällä kynällä ja paperilla tai post it -lapuilla. Rautalankamallista voidaan sen jälkeen alkaa hahmottaa prototyyppia ja sitä, miltä käyttöliittymä tulisi näyttää.

Käyttöliittymäsuunnittelussa voidaan käyttää erilaisia prototyyppityökaluja, joiden joukosta löytyy niin maksullisia kuin ilmaisiakin versioita. Työkaluissa on monia eri toiminnallisuuksia, eikä mikään niistä välttämättä ole ylivertainen toisiinsa nähden. Tärkeintä on löytää itselleen sopivin työkalu, jolla suunnittelijan työ luonnistuu parhaiten. Muutamia esimerkkejä työkaluista:

• Sketch (maksullinen)
• InVision Studio (1 ilmainen projekti)
• Adobe XD (1 ilmainen projekti)
• Marvel (1 ilmainen projekti)

Etuna prototyyppityökaluissa ovat yleensä klikkailtavat mallisivustot, jotka auttavat ymmärtämään verkkokaupan prosesseja paremmin jo suunnitteluvaiheessa. Suunnitteluprosessiin ei tarvita siis varsinaista ohjelmointi-/koodaustyötä, jolloin suunnitelmia on myös nopeampaa toteuttaa. Prototyyppejä voidaan testauttaa myös loppukäyttäjillä ja kerätä palautetta sitä kautta.

Hyvin suunniteltu käyttöliittymämalli auttaa myös kehittäjiä tekemään työnsä, kun heidän ei tarvitse arvuutella näkymän haluttua ulkonäköä.

Tyypillisiä ongelmia ja sudenkuoppia – ja kuinka ne voi välttää

Ensimmäinen nyrkkisääntö voisi olla vanha sanonta, että pyörää ei tarvitse aina keksiä uudestaan. Kuluttajat ovat tottuneet asioimaan verkkokaupoissa ja näkemään siellä tiettyjä elementtejä. Innovointi ei tietenkään ole poissuljettua, mutta sen ei tarvitse aina olla uuden keksimistä. Yleensä paras tapa löytää ratkaisuja on katsoa mallia siitä, miten muut ovat asian ratkaisseet ja etsiä vaihtoehtoja myös oman toimialansa ulkopuolelta. Selkeät, yksinkertaiset ja loogiset polut sivustolla ovat onnistuneen käyttöliittymän perusta.

Huonosti suunniteltu käyttöliittymä useimmiten ärsyttää käyttäjää ja hän saattaa lopettaa sivuston käytön kokonaan. Esimerkiksi jos heti ensiaskeleilla asiakkaalle näytetään useampia koko ruudun ponnahdusikkunamainoksia ja samalla estetään hänen kulkunsa sivustolla, toiminnallisuutta mahdollisesti kannattaa miettiä toisen kerran ja pohtia myös asiakkaan kokemusta ennen toteuttamista.

Hyvä käyttöliittymäsuunnittelija tuntee myös ne verkkokauppa-alustat, joille hän suunnittelua tekee. Kaikkea ei tarvitse tehdä alusta alkaen uudestaan vaan suunnittelun apuna voidaan käyttää verkkokauppa-alustan sisäänrakennettuja toiminnallisuuksia, esimerkiksi tuotelistauksen ja tuotekortin ulkonäköä. Aina suunnittelua ei voida kuitenkaan tehdä niin sanotusti helpoimman kautta, mutta tuntemalla alustan ominaisuudet, niitä voidaan käyttää helpottamaan lopullisen toteutuksen työmäärää.

Verkkokaupan suunnittelu ei koskaan lopu ensimmäisen prototyypin jälkeen. Käyttöliittymää on hyvä tarkastella jopa päivittäin ja kerätä myös palautetta itse käyttäjiltä. Erilaisilla kävijöiden ja visuaalisen analytiikan työkaluilla voidaan kerätä tärkeää tietoa siitä, miten kävijät käyttäytyvät sivustolla ja onko se liiketoiminnalle haluttua käytöstä. Käyttöliittymän jatkokehityksessä on hyvä lähteä pienin askelin eteenpäin. Suunnittelemalla pienempiä kokonaisuuksia kerrallaan niiden käyttöönotto on nopeampaa ja toteutuksen onnistumisen todentaminen on vaivattomampaa.

Viimeisempänä, B2B-myynnissä on hyvä muistaa, että ostaja yrityspuolella on arjessaan tavallinen kuluttaja. Hän on tottunut kuluttajapuolella näkemään visualisuutta, kuvia ja kokemaan elämyksiä, joita hän odottaa näkevänsä myös B2B-puolella.