Top 10 mokaa nettisivujen suunnittelussa


Hyvin suunniteltu nettisivu vahvistaa ammattimaisuutta ja luotettavuutta. Välttämällä nämä 10 mokaa huonoista fontti- ja kuvavalinnoista mobiilioptimoinnin uupumiseen luot sivullasi vierailevalle potentiaaliselle asiakkaalle ilahduttavan ensivaikutelman.


1. Mobiilioptimoinnin puute

Mobiilioptimoinnin avulla käyttäjäkokemus paranee

Se fiilis, kun avaat verkkosivun kännykällä ja joudut zoomailla sinne sun tänne, koittaen tihrustaa lukukelvottomia pieniä tekstejä ja väärin skaalautuvia kuvia ja otsikoita. Mobiilioptimoidut sivut auttavat käyttäjiä löytämään etsimänsä tiedot tai suorittamaan tiettyjä toimintoja, jolloin he ottavat todennäköisemmin yhteyttä tai ostavat palveluitasi/tuotteitasi. Yli 50%  käyttäjistä selaa nettiä mobiililaitteilla, suurin osa niistä kännykällä. Omien asiakkaideni kohdalla tuo luku on kohdalla usein jopa 70-80%.

Hakukoneiden sijoitukset paranevat

Mobiiliversio on etusijalla Googlessa ja siksi mobiilioptimoitu sivusto sijoittuu todennäköisemmin korkeammalle hakutuloksissa, mikä lisää liikennettä sivustolle​. (Lähde: Google: Mobile-first indexing).

2. Typografia ja sen käyttö oikein

Olet varmaan joskus törmännyt nettisivuun, minkä fontti muistuttaa mummon postikorttikaunoa?

Usein näkee sivuja, joiden tekstiä on huonojen fonttivalintojen takia lähes mahdoton lukea tai lukeminen vaatii erityistä keskittymistä. Jos tekstin lukeminen on vaikeaa, sivulla vieraileva swaippaa takaisin päin ja valitsee seuraavan palveluntarjoajan sivut.

Liian monta fonttia tekee sivustosta sekavat ja lapsellisen oloiset

Hyvä fontti on helposti luettavissa ja se tukee yrityksen brändiä, eli sitä tunnetta, mikä sivulla vierailevalle halutaan välittää.  Itse käytän maksimissaan kolmea eri fonttia, otsikkofontti, leipätekstin fontti, sekä aksenttifontti. Käytän hyvin harvoin suunnittelemillani nettisivuilla samaa fonttia kahta kertaa, ja sopivien fonttien etsimiseen kulutankin usein tuntikausia.

Selkeä, helppolukuinen ja harkittu typografia lisää sivuston ja brändin uskottavuutta

Oikein valitut fontit antavat positiivisen ja ammattimaisen ensivaikutelman kävijöille ja ne tukevat yrityksesi arvoja ja persoonallisuutta. Esimerkiksi kampaamon fontit voivat olla tyyliltään elegantteja ja moderneja, kun taas kuljetusliikkeen fontit voivat olla selkeitä ja futuristisia.

Hyvin valittu typografia parantaa sivuston käytettävyyttä

Tekstin ollessa helppolukuista kävijät viihtyvät sivustolla pidempään eivätkä koe lukemista rasittavaksi. Huolehdi siis siitä, että fonttikoko ei ole liian pieni, fontti ei ole liian ohut ja että se erottuu taustasta hyvin. Esimerkiksi valkoinen teksti mustalla taustalla on iso no no käyttäjäkokemuksen kannalta.

3. Logo vie liikaa tilaa sivunäkymässä

Logo antaa ensivaikutelman yrityksestäsi, millaisen ensivaikutelman siis haluat antaa?

Liian iso logo varastaa tilaa nettisivun tärkeältä sisällöltä tehden käyttäjäkokemuksesta turhauttavan, käyttäjän joutuessa scrollaamaan alaspäin nähdäkseen sivun ensimmäistä (usein tärkeintä) sisältöä. Erottuuko logo hyvin taustaväristä ja onko se hyvälaatuinen vai epätarkka? Logoon ei kannata änkeä liian monia eri elementtejä. Jos yrityksen nimen lisäksi logoon haluaa lisätä vaikka sloganin tai ammattinimikkeen, on tärkeää että pienempi teksti on luettavissa mobiililaitteissakin. 

Hyvin suunniteltu logo tukee brändisi arvoja ja visuaalista ilmettä

Mitä tunteita haluat nettisivulla vierailevalle välittää? Tukeeko logosuunnittelu niitä tunteita? Mieti millaisen olon haluat logosta välittyvän katsojalleen ja ota se huomioon logosuunnittelussa.

4. Liikaa tekstiä ilman kappalejakoja

Liian pitkä teksti ilman kappalejakoja tekee lukemisesta raskasta

Sivuilla vieraileva etsii sivuilta itselleen tärkeää informaatiota, siksi otsikoihin ja väliotsikoihin kannattaa ripotella tärkeimpiä pointteja. Kappalejakojen puuttuminen voi johtaa siihen, että nettisivulla vieraileva menettää kiinnostuksensa ja keskittymisensä. Hyvin jäsennelty teksti, jossa on selkeät kappalejaot ja otsikointi, parantaa luettavuutta ja on myös todella tärkeä osa hakukonenäkyvyyttä.

Pidä kappaleet lyhyinä ja otsikot informatiivisina

Jokaisen kappaleen olisi hyvä kattaa yksi teema tai näkökulma. Otsikon tulisi kertoa, mitä seuraavassa kappaleessa käsitellään ja sisältää lukijalle tärkeää ja oleellista tietoa. Listaukset ovat hyviä ja selkeyttävät sisältöä, tuoden tärkeimmät asiat esille. Optimaalinen määrä tekstiä yhdessä kappaleessa on 50-75 sanaa. Tsekkaa sanalaskuri

Käytä valokuvia tai kuvituksia, jotka tukevat tekstin sisältöä ja herättävät mielenkiintoa

Nettisivuilla vierailevat eivät lue sisältöä kuin kirjaa, vaan skannaavat usein verkkosivuja nopeasti saadakseen käsityksen sisällöstä ja löytääkseen tarvitsemansa tiedot. Tarkoin harkituilla kuvavalinnoilla, videoilla sekä kuvituksilla saa pidettyä yllä lukijan mielenkiintoa ja ohjattua kohti tiettyä toimintoa.

Vältä keskitettyä tekstiä

Keskitetty teksti heikentää luettavuutta, ja siksi keskitetty teksti on hyvä pitää lyhyenä, max n. kolme riviä pitkänä. Keskitetyn tekstin lukeminen on hidasta ja se lisää silmien rasitusta, koska rivit eivät ole tasattuna vasemmalle ja lukija joutuu keskittymään löytäkseen rivien alun. Huomaat ehkä itsekin keskitetyn tekstin haasteet lukiessasi tätä kappaletta! 😉

5. Liian pitkä rivin pituus

Liian pitkät rivit ovat yksinkertaisesti raskasta luettavaa

Rivin pituus on hyvä pitää tarpeeksi lyhyenä ja tekstin oheen valita sopiva valokuva tai kuvitus, joka tukee sisällön tarinaa ja herättää tekstin eloon. Tekstien ja visuaalisten elementtien oikeanlainen sommittelu tekee sivusta, palvelusta tai tuotteesta visuaalisesti kiinnostavamman ja selkeämmän, kun jo valokuvan avulla voi tietää, mistä on kysymys. (Muista, että suurin osa skannaa sivustoa otsikoiden, kuvien, ja videoiden avulla ja vasta sitten lukevat leipätekstiä.)

6. Epäjohdonmukaiset painikkeet

Painikkeet ovat keskeinen osa verkkosivujen käytettävyyttä ja toimivuutta

Painikkeet auttavat käyttäjiä navigoimaan sivustolla, suorittamaan toimintoja ja löytämään tarvitsemansa tiedot. Yhtenäisyys on tärkeää painikkeiden suunnittelussa, koska niiden avulla ohjataan tiettyyn toimintoon, kuten lukemaan lisää tietystä aiheesta tai yhteydenottoon. Yhtenäisillä painikkeilla luot selkeyttä ja käyttäjän tulisi tietää, mitä tapahtuu kun niitä klikkaa.

Painikkeen visuaalisuus vahvistaa brändi-ilmettä ja luotettavuutta

Ensisijainen painike sisältää usein brändivärin ja se on painike, jota ensisijaisesti toivot vierailijan klikkaavan. Toissijainen painike sisältää usein brändivärin, mutta eri designilla, esim reunukset tai pelkkä tekstilinkki. Painikkeen tulee erottua taustastaan selvästi ja huolehdi että kontrasti on kohdallaan, jotta painikkeen teksti erottuu selkeästi.

Kuvaileva teksti auttaa käyttäjää löytämään etsimänsä

Painikkeen tekstin tulisi selkeästi kuvata mitä tapahtuu, kun sitä klikkaa. Esimerkiksi ”Lähetä viesti” on parempi kuin pelkkä ”Lähetä”. Vältä liian pitkiä tekstejä. Lyhyet ja suorat toiminnot, kuten ”Osta nyt”, ”Lue lisää” ja ”Rekisteröidy”, ovat tehokkaita ja helposti ymmärrettäviä. Geneerisen ”Lue lisää” tekstin sijasta voit myös käyttää brändiisi sopivaa kieltä keksien persoonallisia kuvauksia panikkeisiin, kunhan ne välittävät oikeaa tunnelmaa.

Painikkeiden oikea sijainti auttaa saavuttamaan nettisivujen päämäärän

Sijoita painikkeet kohtiin, missä käyttäjät todennäköisesti tarvitsevat niitä. Esimerkiksi tärkeät CTA (Call to actions, eli toimintakehoite) -painikkeet tulisi sijoittaa sivun yläosaan sekä sivun alaosaan. Mieti mikä on pääasia, mitä haluat vierailijan tekevän (esim yhteydenotto) ja luo painikkeet sen mukaisesti.

7. Ei tarpeeksi white spacea eli tyhjää tilaa

Käyttämällä tyhjää tilaa voit luoda selkeämmän, kauniimman ja käyttäjäystävällisemmän verkkosivun

Tyhjä tila on tärkeä osa verkkosivujen suunnittelua, ilman sitä sivut näyttää ahdistavalta ja sekavalta. Oikeanlainen tyhjän tilan käyttö parantaa luettavuutta, korostaa tärkeitä elementtejä, parantaa käyttäjäkokemusta, lisää esteettisyyttä ja voi siten parantaa konversiota. (Konversio on mikä vain toimepide, mitä nettisivuilla toivotaan suoritettavan. Esim yhteydenotto, tuotteen osto, uutiskirjeen tilaaminen tai ilmaisen oppaan lataaminen.)

8. Huonolaatuisten tai vääränlaisten valokuvien käyttö

Käytä korkealaatuisia kuvia, jotka tukevat brändisi sanomaa ja ylläpitävät sivustosi tunnelmaa

Huomaatko eron ylläolevissa valokuvissa, miten toinen luo lämmintä tunnelmaa ihmisen ja koiran välillä, ja toinen on etäisempi? Laadukkaat valokuvat ovat hyvin suuressa osassa kauniita ja toimivia verkkosivuja, joten oikeanlainen kuvamaailma on hyvin iso osa parasta mahdollista lopputulosta. On usein suositeltavaa käyttää omia valokuvia sivuilla mahdollisimman paljon, joko ammattikuvaajaa apuna käyttäen tai saa niitä hyviä kuvia nykyään kännykälläkin.

Kuvapankkikuvien käyttäminen

Kuvapankkikuvien käyttö voi olla haastavaa, koska väärin käytettyinä ne luovat helposti etäisen ja ”muovisen” tunnelman. Käytä kuvapankkikuvia harkiten ja kiinnitä huomiota kuvamaailman yhteneväisyyteen. Keskustelevatko kuvat keskenään vai onko niiden tunnelma ristiriidassa? Vältä sellaisia kuvapankkikuvia, jotka eivät herätä tunteita tai tue kyseistä aihepiiriä. Ammattivalokuvaajana osaan luoda asiakkailleni yhtenäisen kuvamaailman sivuille kuvapankkikuvienkin avulla, auttaen luomaan yhteyttä sivujen käyttäjiin.

Palkkaa ammattivalokuvaaja

Ammattivalokuvaajan käyttö on aina suositeltavaa. Oli se sitten vain potretti sinusta ja tiimistäsi tai laajempi kokonaisuus. Annan mielelläni kuvausohjeistuksen ja autan sopivan valokuvaajan etsimisessä.

Tarinankerronta valokuvien avulla

Yksi kuva kertoo enemmän kuin tuhat sanaa. Valokuvien oikeanlainen, harkittu käyttö herättää tunteita ja tekee sinusta ja yrityksestäsi helpommin lähestyttävän. Valokuvat lisäävät myös uskottavuutta ja luotettavuutta, esimerkiksi asiakkaan valokuva palautteen ohessa antaa kasvot sanojen takana, tai tiimikuvat kertovat yrityksesi tarinaa.

9. Ei hierarkiaa

Ilman selkeää hierarkiaa kävijä ei tiedä minne mennä tai mistä sivuilla on kyse

Nettisivun hierarkia tarkoittaa sitä, että sivun eri elementit (valikko, värit, kuvat, otsikot, tekstit, fontit jne) ovat suunniteltu siten, että käyttäjät löytävät helposti etsimänsä tiedot. Hyvin suunniteltu hierarkia parantaa käyttäjäkokemusta, navigointia ja sisällön ymmärrettävyyttä. Käytä siis otsikoita, värejä ja asettelua ohjaamaan katsetta tärkeimpiin kohtiin.

Hierarkia voi parantaa sivuston hakukonenäkyvyyttä

Hierarkia on iso osa hakukoneoptimointia (SEO). Valikon, sivujen ja URL-osoitteiden nimeäminen selkeästi ja avainsanoja hyödyksi käyttäen auttavat käyttäjän lisäksi hakukoneita ymmärtämään, mistä sivustolla on kyse. Hierarkian luominen on yksi tärkeimmistä ja työläimmistä osa-alueista laadukkaissa ja käyttäjäystävällisissä verkkosivuissa. Otan aina hakukoneet huomioon verkkosivuja rakentaessa ja tarjoan laajaa SEO-palvelua, lue lisää SEO-palvelustani ja avainsanoista.

10. Huono taustakuvan käyttö

Vältä levottomia kuvia ja valitse rauhallisia, harmonisia taustoja

Taustakuvat voivat olla parhaimmillaan upeita portaaleja eri maailmaan, pahimmillaan niiden takia luettavuus ja sivuston käyttökokemus kärsii pahasti. Yksinkertaiset taustakuvat, joissa ei ole paljon yksityiskohtia tai kirkkaita värejä, helpottavat tekstin lukemista. Taustakuvan ja tekstin välinen kontrasti on tärkeä. Esimerkiksi vaalea teksti vaalealla taustalla tai tumma teksti tummalla taustalla on vaikealukuista. Älä laita liikaa tekstiä taustakuvan päälle, koska silloin se vie huomion valokuvalta, etenkin mobiililaitteissa.

Muista mobiilioptimointi!

Joskus taustakuvat ja teksti eivät sellaisenaan istu näppärästi mobiililaitteisiin ja saattavat vaatia uudelleenrajausta- ja asemointia mobiilissa parhaan lopputuloksen takaamiseksi. Tämä kannatta ottaa huomioon jo sopivaa taustakuvaa valitsessa.

Haluatko kauniit, käyttäjäystävälliset ja hakukoneoptimoidut verkkosivut, jotka kertovat yrityksesi tarinan, puhuttelevat ihanneasiakkaitasi ja löytyvät ensimmäisillä sijoilla Googlessa? Minä teen kaiken yllämainitun ja vielä paljon enemmänkin! Laita viestiä ja jutellaan lisää.



Image

MINNA KULMALA

Pakussa asuva verkkosivujen suunnittelija, SEO-asiantuntija ja intohimoinen puskaparkkien, vuorten huippujen ja revontulien metsästäjä.