Maanantaina 17.5.2021

Suunnittelijalle kohdistetut kysymykset verkkosivun uudistusprojektissa – TOP5

Ajoittain projektissamme kohtaamme kysymyksiä suunnitteluratkaisuistamme, sillä kymmeniätuhansia euroja kustantavassa verkkosivustossa asiakkaalla on täysi oikeus siihen. Olen listannut viisi yleisimmin kuultua kysymystä, joihin olen perustellut, miksi näihin ei aina kannata tehdä toimenpiteitä.

Ajoittain projektissamme kohtaamme kysymyksiä suunnitteluratkaisuistamme, sillä kymmeniätuhansia euroja kustantavassa verkkosivustossa asiakkaalla on täysi oikeus siihen. Halusin avata näitä kysymyksiä kirjoituksen muodossa ja perustella, miksi näihin ei aina kannata tehdä toimenpiteitä.

On täysin ymmärrettävää, jos asiakkaan silmä ei ole harjaantunut suunnittelun lainalaisuuksiin, siksi myös suunnittelua ammattilaiselta ylipäätään tilataan. Suunnittelijan tekemille ratkaisuille on kuitenkin aina perustelunsa (tai ainakin pitäisi olla). Verkkosivun uudistuksen lähtökohtana pitäisi olla tuottaa asiakkaalle lisää myyntiä sellaisin keinoin, että käyttäjän on sitä miellyttävä käyttää, koska he ovat se todellinen kohde kenelle uudistusta tehdään.

Alla viisi yleisintä kysymystä, joita suunnittelijana olen usein kuullut.

1. Laittaisitko logoa isommaksi

Tämä saattaa olla ehkä yleisin kommentti, jonka palautteena kuulee. Usein kuitenkin herää kysymys, miksi? Miksi yrityksen logo täytyy olla isolla? Eihän tuotetta tai palvelua logolla myydä, vaan sen laadulla, ominaisuuksilla ja asiakaskokemuksella. Entä jos nämä joku edellämainituista asioista ei olekaan hyvällä tolalla, ja suuri logo jäisikin vahvemmin mieleen negatiivisesti ostopäätökseen vaikuttavana tekijänä?

Kun itse ajattelen esimerkiksi Applea, ensimmäiset mielikuvani yrityksestä on järjestyksessä:

  1. iPhone
  2. MacBook
  3. Tyyriit, mutta laadukkaat lisäosat.

Ei siis logo, vaan tuotteet, josta yritys tunnetaan.

Otetaan toisena erimerkkinä vaikkapa pizzeria. Kun tilaan pizzaa, en ajattele ensimmäisenä, että tilaan sieltä kenen logo on siistein tai erottuva. Tilaan sieltä, mistä palvelu on ollut edellisellä kerralla ystävällistä ja pizzat herkullisia.

Kun siis ajatellaan menestyviä yrityksiä ja heidän tuotteitaan tai verkkosivuja, on logo aina sopusuhtaisessa koossa muun visuaalisuuden kanssa. Harmoniaksikin sitä kutsutaan. Jos brändi-identiteettiä halutaan nostaa enemmän esiin, voi identiteetin graafisia elementtejä käyttää sisällön yhteydessä sopivan hillitysti. Brändisi toimii, jos tuotteesi ja asiakaspalvelusi ovat sillä tasolla, että nimi jää mieleen positiivisen kokemuksen kautta.

2. Voisitko tiivistää sisältöä niin, että ne mahtuvat kerralla ruudulle?

Kirjoitin aikaisemmassa kirjoituksessani white-spacesta, eli ”avaruudesta”. Syy miksi asiat on hyvä pitää selkeästi erillään tilankäytöllä, on yksinkertainen. Käyttäjän on huomattavasti vaikeampi sisäistää sisältöä, jos tarjolla on montaa sekalaista informaatiota eri aiheista. Kun käyttäjälle annetaan mahdollisuus keskittyä yhteen aiheeseen kerrallaan, on sisältö myös helpommin ymmärrettävämpää. Myös eri näyttökoille on nykyaikana mahdotonta saada sisältöä aseteltua niin, että se toimisi samanlailla jokaisessa. Jotkut myös käyttävät selainikkunaa pienempänä kuin toiset. Eikä saa unohtaa mobiili- ja tablettilaitteita, sillä nykyaikana mobiilikäyttäjien määrä on useimmiten 60-70% sivuston käyttäjämäärästä.

Suosittelen lukemaan edellämainitsemani kirjoituksen avaruuden käytöstä verkkosivulla. Jos et jaksa lukea, niin anna kun tiivistän. Älä vaadi rakenteen tiivistämistä. Jos haluat käyttäjälle miellyttävän kokemuksen verkkosivuillasi, jätä sisällölle tilaa hengittää ja anna käyttäjän rullata sivua oman mielen mukaan. Se on nykyaikaa.

3. Saisiko tähän kuvakarusellin?

Kuvakarusellien käyttö oli suosittua vielä muutama vuosi sitten, vaikka valitettavasti sitä näkee vieläkin joillain sivuilla. On tutkittu että niiden käyttö ei kuitenkaan ole kannattavaa varsinkaan silloin, jos näiden karusellien sisältö on jotain tärkeää, kuten palveluita, tiedotteita tai käyttäjäpolkua edistävää sisältöä. Käyttäjien kiinnostus selata karuselli loppuun pienenee sitä myötä, mitä enemmän niitä on. Useimmiten jo toisen karusellikuvan kohdalla klikkaukset tipahtavat muutamaan prosenttiin. Myös mitä enemmän kuvia karuselli sisältää, sitä enemmän se hidastaa sivun latausnopeuksia.

Jos sivustolla on runsaasti erilaisia karuselleja, sitä enemmän ”bannerisokeutta” se käyttäjässä aiheuttaa. Bannerisokeudella tarkoitetaan käyttäjälle muodostuvaa halua sivuuttaa vastaavat karusellit kokonaan. Toissijaisen informaation laittaminen karuselliin on vielä hyväksyttävää, kuten esimerkiksi erilaiset tuotekuvat yksittäisellä tuotesivulla.

Verkkokaupoissa kuvakarusellit eli sliderit (ts. tuotenostot) ovat kuitenkin melko yleisiä. Kun tuotteet ovat jaettu kategorioittain selattavaksi, käyttäjä tietää mitä selailee, jolloin odotusarvo sisällölle ei vaihdu ja käyttäjä katsoo nostot mielellään. Esimerkiksi myös asiakkaan valitsemat tarjoukset voidaan nostaa näin käyttäjälle tarkasteluun, ja jos karusellin yhteydessä on ohjaus koko tarjousvalikoiman selaamiseen, aina parempi.

4. Saisinko videon pyörimään sivun yläosaan?

Totta kai saat. Mutta en voi sitä kyllä suositella. Se nimittäin heikentää saavutettavuutta, varsinkin jos videon päälle ei ole asetettu ”overlayta”, eli jotain vahvaa, hieman läpinäkyvää sävyä, jolla mm. otsikko tai muu teksti erottuu sen päältä myös heikkonäköisille.

Myös ylimääräinen, ei-toivottu liike on keskittymis- tai tarkkaavaisuushäiriöiselle ikävä kokemus. Vaikka tekniikkamme osaakin tarvittaessa pysäyttää videon automaattisesti heiltä, joilla on järjestelmäasetuksissa estetty liike, kaikki eivät ole tätä asetusta napanneet päälle. Pyörivät videot myös hidastavat sivun latausnopeuksia huomattavasti. Koska olemme Dudella myös äärimmäisen tarkkoja saavutettavuusasioista verkkosivun suunnittelussa, pidämme huolen, että näistä asioista sanotaan jo heti aloituspalaverin aikana.

Aina voi myös miettiä, olisiko videon paikka vaikka jossain muualla kuin sivun yläosassa. Videolle omistettu sisältölohko voi toimia jopa paremmin, sillä käyttäjä saa omavalintaisesti laittaa videon pyörimään äänien kera, jos näin haluaa.

5. Saisiko tämän osion taustan värin meidän brändivärillä?

No ilman muuta! Mutta oletko myös miettinyt sitä brändivärien yhdistelmää saavutettavuuden kautta? On totta, että joillain brändeillä väriyhdistelmät on mietitty viimeisen päälle ja ne toimii suurimmassa osassa tarkoitustaan. On kuitenkin olemassa brändejä, joissa saavutettavuutta ei ole otettu värien osalta huomioon.

Esimerkkinä: Jos osiolle haluttaisiin punainen tausta, niin sen kanssa ei ole suositeltavaa käyttää vihreää nappulaa tai tekstiä. Värisokeat eivät tätä hirveämmin arvosta. Punainen väri itsessään on myös kovin hyökkäävä ja negatiivista reaktiota aiheuttava väri (sitä käytetään myös mm. virheilmoituksissa aivan standardina). Se ei ole ehkä oikea taustaväri positiivisen asian ilmaisuun.

Ylipäätään on hyvä pitää mielessä kontrastisuhteet vähintään WCAG 2.0-saavutettavuusstandardien mukaisesti. Tämä toki on asiaan perehtymättömälle varmasti aivan hepreaa. Näissä onneksi suunnittelija osaa auttaa, sillä meillä on päivittäisessä käytössä työkalut, joilla mittaamme mm. värien keskinäistä kontrastiarvoa, joilla varmistamme saavutettavuuden standardien mukaisesti siltäkin osalta.

On siis paljon seikkoja, joita suunnittelija jättää tarkoituksella tekemättä saavutettavuuden, käytettävyyden ja visuaalisen harmonian näkökulmista. Taustalla on aina kuitenkin kyse siitä, että haluamme tehdä sivustosta käyttäjille parhaimman mahdollisen käyttää ja näin tuottaa asiakkaallemme enemmän liidiä ja myyntiä.

Onko teidän verkkosivun uudistus ollut tapetilla? Päästämällä Dudet irti, saat vain priimaa. Ota siis yhteyttä, niin laitetaan teillekin verkkosivut siihen kuntoon, että sen käytöstä voi nauttia kaikki.