UI-suunnittelijan vinkkipankki verkkosivuille

7.9.2021

Lue konkreettiset vinkit ja hyödynnä ilmainen 30 min konsultaatio omien sivujesi kehittämiseksi!

Jokainen verkkosivujen rakentamiseen osallistunut sen tietää: kaikilla on verkkosivujen rakennuspalikoista mielipide, liittyi se sitten väreihin, logon sijaintiin tai brändielementtien käyttämiseen. Mitä jos seuraavalla kerralla voisit perustella, miksi tiettyjä suunnitteluratkaisuja kannattaa suosia ja miten niitä voi perustellusti käyttää? 

Tästä käynnistyvä UI-suunnittelijan vinkkiblogisarja pyrkii antamaan konkreettisia vinkkejä siihen, millä tavalla käyttäjät saadaan rakastumaan sivustoosi ja tekemään siellä juuri niitä juttuja, joita sinä haluat.

Buukkaa myös rohkeasti ilmainen 30min konsultaatio kalenteristani: autan sinua kehittämään esimerkiksi verkkosivusi haastavaa osiota matalalla kynnyksellä. 

Missä katse harhailee?


Länsimaissa ihmiset ovat tottuneet lukemaan sisältöjä vasemmalta oikealle ja ylhäältä alas. Tämä tuttu tapa ohjaa katsettamme myös verkossa, mutta verkkolukija ei suinkaan lue saati katso kaikkea tarjottua sisältöä vaan etsii potentiaalisessa informaatiotulvassa katseellaan nopeimmin sisäistettäviä asioita: otsikoita, korostuksia ja listauksia. Siksi kannattaa panostaa erityisesti selkeisiin ja napakoihin otsikoihin: usein ne pari ensimmäistä sanaa silmäiltyään käyttäjä jo päättää, kannattaako sisältöön perehtyä enempää.

Pystymme tarkentamaan katseemme kerrallaan aina yhteen tiettyyn kohtaan – tätä kutsustaan tarkan näön alueeksi. Kaikki tarkan näön alueen ulkopuolella, eli ääreisnäön alueella, tapahtuva jää silloin vähemmälle huomiolle. Sijoita siis tärkeät elementit lähelle käyttäjän tarkan näön aluetta. Esimerkiksi verkkokaupassa ostoskoripainikkeen sijoittaminen lähelle tuotekuvaa voi olla hyvä ratkaisu, koska todennäköisesti tuotesivulla käyttäjän tarkka näkö kiinnittyy nimenomaan tuotekuvaan tai tuotteen otsikkoon. 


Novafloorin verkkokaupassa cta-painike tuotenäytteen tilaukseen on sijoitettu lähelle kuva- ja hintatietoja, joihin käyttäjä todennäköisesti ensimmäisenä tarkentaa katseensa.


Mitä kauempana tarkan näön aluetta tapahtuu jotakin käyttäjälle merkittävää, sitä enemmän tätä on korostettava. Siksi esim. ostoskoripainikkeen painamista seuraavaa tuotteen lisäystä ostoskoriin kannattaa korostaa vaikka pienellä animaatiolla. Ylipäätään liikkeen avulla käyttäjälle voidaan antaa hyviä vihjeitä ja auttaa ohjaamaan katsetta varsinkin alueilla, jotka ovat todennäköisesti käyttäjän tarkan näön alueen ulkopuolella. 


Muumi Babyn verkkokaupassa ostoksia tekevälle käyttäjälle korostetaan animoidun janan avulla sitä, milloin hän saavuttaa ilmaisten toimituskulujen rajan. 

Muista kuitenkin maltti liikkeessä ja vilskeessä! Jos selaat verkossa iltapäivälehtiä, moneenko mainosbanneriin huomiosi kiinnittyy? Kilpailu huomiosta on kovaa, ja jos verkkosivujesi jokainen elementti huutaa huomiota, mikään ei lopulta korostu. Päätä siis, mihin ihan oikeasti haluat käyttäjän kiinnittävän huomion ja mitä haluat hänen tekevän milläkin verkkosivujesi sivulla ja milläkin käytön (esim. ostoprosessin) hetkellä.

Haloo, huomaako tätä kukaan?

Ihminen havaitsee helposti esim. kokoon, muotoon, kontrastiin ja syvyyteen liittyviä ärsykkeitä. Esim. kirkkaanpunainen toimintaan kehottava call-to-action-painike on helppo erottaa verkkosivuilla ilman sen suurempia ponnisteluita, mikä taas helpottaa käyttäjän tietä haluttuun päämäärään. Sen sijaan esim. huonosti selvää saatavalla tekstillä on päinvastoin negatiivinen vaikutus. 

Tutkimusten mukaan käyttäjän katse kiinnittyy herkästi ihmiskasvoihin. ProMedicalin verkkosivujen rauhallisessa väripaletissa punaisen värin kontrasti vetää katsetta esittelytekstiin ja ProFluent-palveluratkaisuun, vaikka käyttäjän katse tarkentuisikin ensimmäisenä valokuvaan.

Käyttöliittymän yksittäisessä näkymässä - mietitään vaikka verkkokaupan tuotesivua - voi olla lukemattomia elementtejä, joita eri tavalla järjestämällä ja ryhmittämällä voidaan vaikuttaa merkittävästi siihen, mitä käyttäjä tässä näkymässä päätyy tekemään.


Novafloorin verkkokaupan tuotesivulla hintalaskuri seuraa käyttäjän skrollatessa lattian tarkempiin tietoihin, jolloin halutun neliömäärän laskeminen ja ostoskoriin lisääminen on koko ajan käyttäjän käsillä.


Ihmismieli tulkitsee helposti toisiaan lähellä olevat elementit yhdeksi kokonaisuudeksi. Tätä voidaan hyödyntää esim. lomakkeissa tekemällä sopivilla välistyksillä lomakkeen täyttämisestä nopeampaa ja miellyttävämpää. 

Doorwayn tarjouspyyntöön tarvitaan monenlaisia tietoja. Sopiviin kokonaisuuksiin tai vaiheisiin palasteltuna pitkäkään lomake ei tunnu käyttäjästä liian työläältä.


Elementtien läheisyyttäkin voimakkaampi keino ryhmitellä asioita on tehdä niille selkeät visuaaliset rajat esim. erottamalla alueita ja elementtejä toisistaan reunaviivalla tai taustavärillä. Ns. kortit ovat tehokas ja selkeä tapa ryhmitellä runstastakin sisältömäärää. Muista kuitenkin, että ihmiset usein hahmottavat ryhmiä ensisijaisesti värin ja vasta toissijaisesti muodon kautta: parhaimmillaan voidaan toki hyödyntää kerralla molempia.



Muumi Babyn verkkosivuilla eri tuotekategoriat on kuvattu ns. korttien avulla. Reunaviivan sijaan kategorian rajaamiseen on käytetty kohderyhmään viittaavaa kuvitusta ja myöhemmin verkkokaupan puolella toistuvaa ja myös fyysisistä tuotepakkauksista tuttua värierottelua.


Skrollaako käyttäjä sivullani? 


No takuulla skrollaa – jos annat siihen syyn! Jo pitkän aikaa trendinä olleet koko näytön täyttävät kuva- ja videoelementit voivat olla näyttäviä ja oiva paikka esitellä uutta hienoa brändivideota, mutta usein ne eivät valitettavasti varsinaisesti ohjaa tai houkuttele skrollaamaan eteenpäin. Jos käyttäjän haluaa kurkkaavan, mitä ensimmäisen näkymän alla näkyy, tehokas keino ohjailla uteliasta ihmismieltä on leikata esim. kuva- tai tekstisisältö niin että osa siitä jää selkeästi näkymän ulkopuolelle.

Tämä perustuu niin sanottuun sulkeutuvuuden hahmolakiin: jos elementit näyttävät sulkevan sisäänsä jonkin alueen, katsoja mieltää alueen erilliseksi kokonaisuudeksi. Rikkomalla tätä kokonaisuuden tunnetta käyttäjä todennäköisesti mieltää vain osin näkyvän osan uudeksi kokonaisuudeksi, jonka hän saa näkyviin vain skrollamalla alaspäin.


Doorwayn etusivulla on hyödynnetty sulkeutuvuuden hahmolakia. Näkymän alaosassa näkyvät kuvat vihjaavat, että sisältö jatkuu myös pääkuvan alla.


Sama toimii sekä horsiontaalisesssa tai erityisesti mobiilinäkymässä hyödynnettävässä vertikaaliskrollauksessa. Tällä tavalla paitsi viestitään käyttäjälle se, että sisältö jatkuu skrollaamalla, myös herätetään kiinnostus katsoa mitä piiloon jää. Tärkeää on kuitenkin huomioida ja testata että sisältö rajautuu haluamallasi tavalla eri näyttöko’oilla: kannattaa testata ainakin yleisimmät näyttökoot, joilla käyttäjä todennäköisesti sivua tarkastelee.

Muista myös että esim. käyttäjän ikä, näkökyky tai värisokeus saattaa vaikuttaa merkittävästi käyttökokemukseen. Tämä on hyvä huomioida esim. fonttien koossa ja tekstin ja taustavärin kontrastissa.

Saavutettavuuden kannalta on myös tärkeää, että tärkeitä viestejä tai valintoja ei erotella pelkästään värin avulla - esim. punavihersokea ei erota punaista ja vihreää toisistaan (voit testata omaa sivustoasi esim. täällä). Silloin on syytä värin lisäksi hyödyntää myös muita indikaattoreita, esim. selkokielisiä otsikoita tai väripinnan kuviointia.


Mitä sinun kannattaisi tehdä seuraavaksi?


Seuraa UI-suunnittelijan vinkkiblogisarjaa jatkossakin: voit tilata uutiskirjeemme ja saada ilmoituksen, kun seuraava vinkkiblogi julkaistaan.

Suosittelen myös rohkeasti hyödyntämään kampanjaamme: varaa kalenteristani 30 minuutin aika ja saa allekirjoittaneen UI-suunnittelijan ilmainen analyysi ja vinkit itsellesi esimerkiksi verkkosivujesi etusivun tai kampanjan laskeutumissivun toimivuudesta!

Mikäli haluat jatkaa keskustelua kanssani muussa muodossa, laita viestiä antti.niemela@buorre.fi tai soita minulle 040 0252 351.


Antti Niemelä

antti.niemela@buorre.fi

Jatka katsomista

Pysy mukana kehityskulussa

Tilaa uutiskirjeemme ja pysy ajan tasalla markkinoinnin, digipalveluiden ja muotoilun uutisista. Lupaamme inspiroida ja innostaa, emme täyttää sähköpostiasi turhaan!