Käytännön vinkkejä laadukkaan asiakaskokemuksen kehittämiseen verkkopalveluissa

Hyvä asiakaskokemus on nykyisin perusvaatimus kaikille kaupallisille verkkosivustoille. Tämän vuoksi verkkosivustoa suunniteltaessa on tärkeää huomioida keskeiset asiakaskokemukseen vaikuttavat tekijät jo heti prosessin alkuvaiheessa. Suunnittelussa on aina lähdettävä liikkeelle siitä, mitä käyttäjä haluaa saavuttaa verkkosivustolla ja tehdä siitä mahdollisimman helppoa ja miellyttävää. Hyvään alkuun pääsee tutkimalla parhaiden kilpailijoiden verkkosivujen ratkaisuja ja hyödyntämällä niitä soveltuvin osin.

Laadukas asiakaskokemus perustuu yleensä verkkosivuston suunnitteluratkaisujen selkeyteen ja yksinkertaisuuteen, sekä visuaalisen hierarkkisuuden hyödyntämiseen, joka ohjaa käyttäjiä kiinnittämään huomionsa aina oleelliseen kohteeseen. Edelliset seikat ovat oleellisia myös verkkosivuston kattavan navigoinnin suunnittelussa. Verkkosivuston navigointiin, sisältörakenteeseen ja graafisen ilmeeseen liittyvien ratkaisujen on myös huomioitava johdonmukaisesti verkkosivuston suunnittelussa. Sujuvan asiakaskokemuksen mahdollistamiseksi on tärkeää hyödyntää jo tavanomaisia ja käyttäjille tuttuja verkkosivujen navigointi- ja käytettävyyteen liittyviä ratkaisuja.

Nykyään valtaosa verkkoselailusta tapahtuu mobiililaitteilla, joten verkkosivuston on oltava lähtökohtaisesti responsiivinen, eli suunnittelua tulee ohjata ns. mobile first-periaate. Tämä tarkoittaa sitä, että verkkosivuston tuottama asiakaskokemus on yhtä laadukas riippumatta asiakkaan selailuun käyttämästä laitteesta tai selaimesta. Vastuullinen ja lainkuuliainen verkkosivun kehittäjä huomioi myös saavutettavuuden, joka takaa hyvän käyttäjäkokemuksen myös henkilöille, joilla on erilaisia rajoitteita. Asiakkaiden tuntema luottamus on kriittinen menestystekijä verkkoasioinnissa. Tämän vuoksi verkkosivuille on tärkeää lisätä asiakkaiden luottamusta verkkopalvelun ylläpitäjään ja sen tarjoamiin ratkaisuihin lisääviä elementtejä. Seuraavaksi tarkastellaan näitä käyttäjäkokemukseen muodostumiseen liittyviä tekijöitä hieman tarkemmin.

 

Suunniteltujen ratkaisujen yksinkertaisuus ja selkeys

Verkkosivuston visuaaliseen ilmeeseen liittyvien ratkaisujen on tuettava toivottua mielikuvatavoitetta, ja ennen kaikkea visuaalisten elementtien on autettava laadukkaan ja käytettävyydeltään erinomaisen asiakaskokemuksen luomisessa.  Verkkosivustolla kannattaa käyttää vain sellaisia elementtejä, jotka ovat tarpeellisia käyttäjien tavoitteiden toteutumisen kannalta ja tuottavat heille lisäarvoa. Tällaisia ovat mm. komponentit, jotka auttavat heitä löytämään kiinnostavia sisältöjä, hyödyntämään niitä, sekä saamaan ne käyttöönsä helposti.

Asiakaskokemuksen ja myynnin/konversion optimoinnin kannalta oleellista on johdatella käyttäjä toivottuun toimenpiteeseen niin, että se tuntuu hänestä luonnolliselta ja miellyttävältä. Verkkosivuston elementtien koolla, muodolla ja väreillä sekä asettelulla voidaan ohjata käyttäjien katsetta ja huomiota haluttuihin kohteisiin kuten tuotteisiin. Tässä ratkaisujen yksinkertaisuus ja minimalistisuus ovat olennaisia. Verkkosivuston värimaailmaa suunniteltaessa on hyvä pitäytyä korkeintaan 3–4 selkeästi toisistaan erottuvan värissä. Jos verkkosivustolle halutaan tätä enemmän värikkyyttä, on tälle oltava erittäin hyvät syyt, sillä lähtökohtaisesti suunnittelussa hyödynnetään yrityksen brändivärejä ja symboleita. Jos käytettävissä ei ole valmiiksi määritettyjä värejä, kannattaa sopiva värimaailma suunnitella olemassa olevien materiaalien pohjalta. Myös verkosta on hyvä etsiä sopivaa ratkaisua. Esim. Hubspot on listannut blogissaan 21 verkkosivuille hyvin sopivaa väriyhdistelmää, joista voi myös olla apua.

Selkeät, hyvän kontrastin omaavat ja värikkäät tuotekuvat ohjaavat minimalistisessa ympäristössä asiakkaiden huomion kuin itsestään oleelliseen, eli tuotteisiin ja ratkaisuihin. Graafisia elementtejä kannattaa käyttää vain, jos ne auttavat käyttäjiä toimimaan oikein verkkosivustolla tai helpottavat heitä havainnoimaan oleellisen ja tekemään toivotun toiminnon. Räikeät ja käyttäjiä muuten ärsyttävät visuaaliset elementit eivät tue hyvää asiointikokemusta ja voivat toimia konversion kannalta negatiivisesti.

 

Visuaalinen yhdenmukaisuus eri sivutyypeillä

Verkkosivuston visuaalista ilmettä suunniteltaessa ja kehitettäessä on huomioitava yrityksen brändi kaikissa elementeissä ja sisällöissä. Tämän vuoksi mm. käytettävät värit, fontit ja logotyypit määrittävän brändiohjeistuksen laatiminen verkkosivustolle voi olla tarpeellista. Markkinointiviestinnän eräs perussääntö on brändin mukainen graafinen yhdenmukaisuus. Kun värit, fontit, graafiset elementit ja kuvamaailma on määritetty, on niissä syytä pysyä. Tätä on syytä noudattaa myös verkkopalveluiden suunnittelussa.

Verkkosivustolla voi olla rakenteeltaan ja taitoltaan erilaisia alasivuja eri tarkoituksiin (esimerkiksi laskeutumissivuja ja tuotesivuja), mutta tietyntyyppisten sivujen on aina oltava samanlaisia. Navigointi, taustat, väriyhdistelmät, kirjasintyypit ja kirjoitustyyli sekä tapa esittää kuvia ja videoita pysyvät koko verkkosivustossa tietyntyyppisillä sivuilla samanlaisena. Tämä tukee verkkopalvelun mielikuvatavoitteita sekä parantaa käytettävyyttä ja asiakaskokemusta.

 

Kuvat ja videot

Verkkosivuston visuaalinen sisältö kuten kuvat ja videot toimivat tärkeinä katseenvangitsijoina ja tunnelman luojina. Tämän vuoksi niiden laatuun kannattaa panostaa. Kaiken sisällön on oltava hakukoneoptimoitua, joten mm. keskeisiä avainsanoja on tärkeää muistaa sisällyttää kuvateksteihin. Kuvien ja videoiden koko on myös muistettava optimoida verkkosivuston nopean latautumisen takaamiseksi.

 

Kirjasintyypit

Verkkosivustolla käytettävät kirjasintyypit pitää valita niin, että ne ovat hyvin luettavissa ja skaalautuvat selkeinä eri laitteisiin. Käytettävien kirjasintyyppien osalta on suositeltavaa käyttää riittävän isoa pistekokoa ja paksua kirjasintyyppiä, joka ei muutu vaikealukuiseksi pienillä ruuduilla. Tämän varmistamiseksi suositellaan jopa 16 pistekoon käyttämistä. Yleisesti hyväksytty ohje on käyttää korkeintaan kolmea erilaista kirjasintyyppiä kolmessa eri koossa verkkosivustolla. Otsikoissa on käytettävä selkeästi suurempaa fonttia leipätekstistä erottumisen vuoksi. Teksteissä kannattaa hyödyntää kontrastia luettavuuden parantamiseksi.

 

Otsikointi

Selkeä ja sisältöä kuvaava otsikointi on hyvä keino toteuttaa visuaalista hierarkiaa tekstirikkailla verkkosivustoilla. Osuva otsikointi auttaa käyttäjiä löytämään nopeasti heitä kiinnostavan sisällön. Liian tiheä otsikoiden käyttäminen toisaalta voi pienentää niiden tehoa käytettävyyden näkökulmasta.

 

Vakiintuneiden verkkosivustoelementtien ja symboleiden käyttäminen

Sujuvan käyttäjäkokemuksen kannalta on tärkeää hyödyntää verkkosivujen vakiintuneita käytänteitä, vaikka suunnitteluvaiheessa esiin nousisikin uusia vallankumouksellisia ideoita toteuttaa esimerkiksi navigointi. Verkkosivun suunnittelussa kannattaa hyödyntää toki luovuutta, mutta tiettyjä perussääntöjä on järkevää kunnioittaa. Ihmiset ovat tottuneet tiettyihin tapoihin toimia internetsivustoilla ja odottavat voivansa tehdä niin kaikissa verkkopalveluissa. Tällaisia vakiintuneita käytänteitä ovat mm:

• Hakutoiminto on sijoitettu sivun yläosaan esimerkiksi ylätunnisteeseen. Hakutoimintona on käytettävä mahdollisista kirjoitusvirheistä huolimatta laadukkaita hakutuloksia antavaa ja ennakoivaa hakua hyödyntävää hakualgoritmia, joka kykenee likimääräiseen avainsanojen yhdistämiseen. Hakukokemuksen on oltava laadultaan asiakkaalle samaa luokkaa kuin Google-haussa. Hakutoiminnon vakiintunut symboli on suurennuslasi.
• Logon sijoittamien sivun yläosaan joko vasemmalle tai keskelle ja sen muokkaaminen linkiksi, joka vie aina käyttäjän palvelun etusivulle
• Sellaisten linkkien tai painonappien käyttäminen, jotka muuttavat väriä tai ilmettä kun hiiren vie niiden päälle.
• Ostoskärry-ikonin käyttäminen kaupallisilla verkkosivustoilla symboloimaan ostoskoria. Kärry-ikoniin liitetään lähes aina myös numero osoittamaan koriin valittujen tuotteiden määrää.
• Kuvakaruselleissa ja muissa vastaavissa kuvia esittelevissä elementeissä on ohjainpainikkeet, joilla käyttäjä voi itse vaihtaa kuvia haluamassaan tempossa.

 

Navigointi

Verkkosivuston navigoinnin suunnittelussa on tärkeää pyrkiä ratkaisuihin, jotka auttavat vierailijoita luontevasti löytämään etsimänsä sisällön. Hyvin suunnitellussa verkkopalvelussa käyttäjä tietää lähes vaistonvaraisesti mistä klikata päästäkseen etenemään verkkosivustolla haluamaansa kohteeseen ja siirtymään sinne mahdollisimman vaivattomasti.  Seuraavat toimenpiteet auttavat navigoinnin kehittämisessä:

• Verkkosivuston navigaation perusrakenne on tärkeää pitää yksinkertaisena, koska se nopeuttaa ja helpottaa navigointia ja asiointia. Perussäännön mukaan verkkosivustossa saa olla korkeintaan kolme tasoa, jossa verkkosivuston etusivu on ylimpänä. Muut sivut ovat sen alla pyramidimaisesti.
• Navigoinnin perusrakenteeseen liittyvät oleelliset painikkeet tulee sijoittaa sivujen yläosaan. Kun yritys on päätynyt tiettyyn navigointimalliin, on tärkeää käyttää samaa logiikkaa ja samanlaisia sivuelementtejä kuten valikoita ja painikkeita koko verkkosivustossa. Näin asiakaskokemuksesta voit syntyä saumaton.
• Navigointivalikko voi olla linkkilista ylätunnisteessa (kts. Amazon.com) tai sivun laidassa (kts. Verkkokauppa.com) tai pieni hampurilaisvalikko ylätunnisteen nurkassa. Päänavigointielementti sijoitetaan yleisimmin sivun ylälaitaan, koska ihmiset ovat tottuneet siihen. Sisällyttämällä navigoinnin ylätunnisteeseen varmistetaan sen olevan kattavasti käyttäjien apuna koko verkkosivustolla. Hyvä navigointivalikko minimoi verkkosivuston eri osiin liikkumiseen tarvittavat klikkaukset ja on helppokäyttöinen myös mobiililaitteilla.
• Painonappeihin, ikoneihin ja muihin kuvakkeisiin sekä linkkeihin on liitettävä ohjaava, lyhyt teksti tai yleisesti tunnettu symboli.
• Selkeät toimintakehotteet ohjaavat käyttäjiä toimimaan halutulla tavalla. Niiden tehokkuutta voi lisätä tekemällä niistä visuaalisesti ympäristöstään erottuvia verkkosivuston ja brändin henkeä kunnioitten.
• Verkkosivuston yläosaan lisättävä hakutoiminto auttaa käyttäjiä löytämään sivusta riippumatta etsimänsä sisällön tai tuotteet.
• Leivänmurujen (hyperlinkkipolku aiemmista välilehdistä) käyttäminen kaikilla muilla kuin pääsivulla auttaa asiakasta muistamaan navigoimansa reitin.
• Selkeästi nimetyt verkkosivuston sisäiset linkit helpottavat suunnistamista ja auttavat vierailijoita löytämään haluamaansa lisäsisältöä.

 

Verkkosivun mukautuvuus

Verkkosivun mukautuvuus, eli responsiivisuus, on nykyisin suunnittelun perusvaatimus. Verkkosivuston on tarjottava yhtä laadukas asiakaskokemus riippumatta käyttäjän selailuun käyttämästä laitteesta tai verkkoselaimen tyypistä. Tämä tarkoittaa verkkosivuston tekstien, kuvien ja videoiden automaattista skaalautumista ja uudelleen järjestäytymistä eri laitteille sopiviksi.

Erityisen tärkeää on verkkosivuston yhteensopivuus eri mobiililaitteiden kanssa, koska yhä suurempi osa päivittäisestä verkkoselailusta tehdään älypuhelimilla ja tableteilla. Googlen hakutoiminto edellyttää myös verkkosivustolta responsiivisuutta ja mikäli verkkosivustoa ei ole suunniteltu mobiiliystävälliseksi se voi näkyä normaalia alempana hakutuloksena. Mobiililaitekäytettävyys on oletuksena lähestulkoon kaikissa CMS-järjestelmissä, ja sitä voi edelleen parantaa erillisillä mobiililaitteille optimoiduilla HTML-templateilla.

Erityistä huomiota kannattaa kiinnittää mm. tärkeiden nappuloiden sijoitteluun esim. hampurilaisvalikkoon, niin että ne ovat helposti löydettävissä ja käytettävissä eri laitteilla. Vektorigrafiikan käyttäminen ikoneissa ja muissa graafisissa elementeissä on skaalautumisensa vuoksi suositeltavaa. Kuvien osalta kannattaa käyttää useita eri resoluutioisia versiota ja määrittää koodissa mikä versio näytetään milläkin laitteella. Näin voidaan optimoida latausajat.

Jotta verkkosivusto säilyy optimoinnin jälkeen responsiivisena ja pystyy tarjoamaan laadukkaan käyttäjäkokemuksen, on sitä testattava usein. Googlen mobiililaitesoveltuvuustesti on eräs ilmainen työkalu tähän.

 

Ylä- ja alatunnisteen käyttäminen verkkosivustolla

Ylä- ja alatunnisteet ovat käytössä useimmilla nykyaikaisilla verkkosivuilla. Ne on syytä lisätä kaikille sivupohjille, niin, että ne ovat kauttaaltaan käytössä palvelussa. Ylätunnisteeseen sisällytetään yleensä brändielementtejä kuten organisaation nimi ja logo, navigointivalikko (usein hampurilaisvalikko) ja mahdollisesti verkkosivuston hakutoiminto sekä toimintakehoite (Call-to-action, CTA). Lisäksi siihen on voitu lisätä linkki verkkosivuston eri kieliversioihin. Alatunnisteeseen sisällytetään usein käyttäjille tärkeää informaatiota kuten yhteystiedot, tietoja avoimista työpaikoista, linkki sometileille, tarvittaessa erilaisia tiedonkeruulomakkeita, sopimus- ja toimitusehdot, maksuehdot, tietosuojatiedot, verkkolaskutustiedot tavarantoimittajille ja linkkejä hyödyllisille sivuille. Nämä tiedot ovat yleensä toimialasidonnaisia ja saadakseen listan kullekin alalle tarpeellisista tiedoista kannattaa usein tutkia toimialojen parhaiden toimijoiden verkkosivustoja.

 

Saavutettavuus

Verkkosivuston saavutettavuus on myös tärkeää huomioida jo suunnitteluvaiheessa. Tämä tarkoittaa sitä, että verkkosivuston on oltava käytettävissä myös ihmisille, joilla voi olla erilaisia normaalikäyttöön liittyviä rajoitteita.  Saavutettavuus on huomioitava suunnitteluvaiheessa koko verkkosivuston rakenteessa, sivuformaateissa, visuaalisessa ilmeessä, värivalinnoissa sekä kirjallisessa ja kuvallisessa sisällössä. Saavutettavan verkkopalvelun suunnittelussa ja toteutuksessa pitää huomioida kolme osa-aluetta: tekninen toteutus, helppokäyttöisyys ja sisältöjen selkeys ja ymmärrettävyys.

Teknisesti hyvin toteutetun verkkopalvelun lähdekoodi on virheetöntä ja loogista. HTML-standardia ja WCAG-ohjeistusta on noudatettu toteutuksessa, ja palvelu toimii hyvin erilaisilla päätelaitteilla ja avustavilla teknologioilla, kuten puheohjauksella ja ruudunlukuohjelmilla.

Helppokäyttöisyys on sitä, että verkkopalvelu on helppo hahmottaa, navigaatio on selkeä ja etsitty sivu, toiminto tai sisältö löytyy vaivattomasti. Navigaatio ei saisi olla liian monitasoinen ja sivujen nimien pitäisi olla kuvaavia ja selkeitä. Pääsisältö erottuu selkeästi sivun muista elementeistä. Edellisten vuoksi helposti käytettävässä palvelussa on vaivatonta suorittaa haluttu toiminto mahdollisista rajoitteista huolimatta.

Sisällön ymmärrettävyys on tärkeää kaikille käyttäjille ja keskeinen osa saavutettavaa verkkopalvelua. Se tarkoittaa selkeän, ymmärrettävän kielen käyttöä ja myös selkokieltä. Tekstin pitäisi olla helppolukuista ja jäsennelty lyhyiksi kappaleiksi ja luetteloiksi. Kuvaavia väliotsikoita pitäisi käyttää riittävästi. Myös linkkitekstien pitäisi olla kuvaavia ja ymmärrettäviä. Tekstin ja taustan värivalinnassa on tärkeää huomioida värisokeat käyttäjät ja välttää heille vaikeasti erotettavia väriyhdistelmiä. Sisältöjä tarjotaan myös monikanavaisesti esimerkiksi videoina, kuvina ja äänenä tekstin lisäksi. Oheiset seikat parantavat myös palvelun hakukonenäkyvyyttä.

EU-alueella direktiivi velvoittaa useita toimijoita huomioimaan saavutettavuuden verkkosivujen ja mobiilisovellusten suunnittelussa. Suomessa vuonna 2019 voimaan tullut Digipalvelulaki määrää tarkemmin aiheesta. Verkkopalvelusta www.saavutettavuusvaatimukset.fi saa aiheeseen liittyvää tietoa ja käytännön suunnitteluohjeita.

 

Verkkosivuston luotettavuutta lisäävät elementit

Luotettavuus ja uskottavuus ovat verkkopalvelun keskeisiä menestymisen edellytyksiä aikana, jolloin media raportoi jatkuvasti erilaisista verkkohuijauksista. Eräs keino lisätä uskottavuutta on tehdä yhteistyötä tunnettujen brändien ja esimerkiksi maksuvälittäjien kanssa. Toinen on hyödyntää käyttäjien rehellisiä tuotearviointeja. Esimerkiksi Verkkokauppa.com julkaisee tuotteittain niiden palautusprosentit ja käyttäjien arvioinnit tuotteiden hyvistä ja huonoista puolista. Kolmas uskottavuutta lisäävä tekijä on selkeä hintarakenne, jossa tuotteiden tai palveluiden hinnat tulevat selkeästi esille asiakkaille ilman ikäviä yllätyksiä. Jos kyseessä on tilattava palvelu, on tärkeää myös selkeästi kertoa kuinka sen voi irtisanoa.

 

Verkkosivuston testaaminen ja jatkuva kehittäminen

Kun verkkosivusto on julkaistu, on tärkeää seurata asiakkaiden käyttäytymistä analytiikan avulla ja muokata sitä palvelemaan paremmin asiakkaita. Muutoksissa on tärkeää edetä pienin askelin, tehdä niitä tarvittaessa usein ja hyödyntää A/B testaamista parhaan tuloksen aikaansaamiseksi. Verkkosivuston kehittämiseen on tarjolla runsaasti erilaisia työkaluja ja testaamisessa voi hyödyntää esimerkiksi ilmaista Website Graderia, joka arvioi verkkosivuston mobiiliyhteensopivuutta, designia, teknistä suorituskykyä, hakukoneoptimointia ja turvallisuutta. Muita työkaluja ovat esim. Grazy Egg, joka tarjoaa tietoa käyttäjistä mm. heatmappien ja scroll mappien avulla. Siteimprove ja Hotjar ovat myös hyödyllisiä ohjelmistoja, joilla voidaan seurata asiakkaiden verkkokaupan käyttöä ja kartoittaa tehtyjen toimenpiteiden tehokkuutta. Loop 11-työkalua voi hyödyntää käytettävyystestaukseen ilman koodauskokemusta.

Verkkosivuston sujuva käytettävyys kannattaa varmentaa käyttäjätestauksella hyvissä ajoin ennen sen julkaisua. Testaamisessa on tärkeää käyttää aitoja käyttäjiä, kerätä heiltä palautetta verkkosivuston ominaisuuksista ja hyödyntää sitä jatkokehittämisessä iteratiivisesti. Käytettävyystestauksessa on hyödynnettävä muita kuin kehittäjätiimin jäseniä, jotta voidaan havainnoida aitoa ensikokemusta verkkosivustosta objektiivisesti. Näillä ohjeilla pääsee hyvään alkuun oman verkkopalvelun laadukkaan asiakaskokemuksen kehittämisessä.

 

Mika Määttä, projektipäällikkö, lehtori digitaalinen liiketoiminta ja peliteollisuus

Miikka Blomster, lehtori digitaalinen markkinointi

Digitaalisen markkinoinnin osaamista voi hyvin syventää OAMK:n Digityy– ja Dimmy-koulutuksissa