Sivuston suunnittelu: hyvän ulkoasun periaatteet

Hyvä sivuston ulkoasu ei tarkoita pelkkää kaunista kuvaa. Se on järjestelmä, joka auttaa kävijää ymmärtämään, minne hän on päätynyt, mitä täällä voi tehdä ja mihin siirtyä seuraavaksi. Jos ulkoasu ei tue tätä, ei auta tyylikkäinkään visuaali. Alla käymme läpi sivuston suunnittelun periaatteet, jotka todella vaikuttavat tulokseen — ja kunkin kohdalla myös sen, miten niitä sovelletaan käytännössä.

Ensivaikutelma ja visuaalinen hierarkia

Kävijä päättää muutamassa sekunnissa, jääkö vai lähteekö. Sinä aikana hän ei lue tekstiä vaan silmäilee sivua. Visuaalisen hierarkian tehtävä on ohjata tämä katse oikeaan järjestykseen: ensin pääviesti, sitten tukeva tieto ja vasta sen jälkeen yksityiskohdat.

Hierarkia syntyy kontrastista. Suurempi kirjasin tuntuu tärkeämmältä kuin pienempi, voimakas väri vetää huomion nopeammin kuin harmaa, ja ympäröivä tyhjä tila nostaa elementin esiin. Käytännössä tämä tarkoittaa: sivun yläosaan yksi selkeä otsikko, joka kertoo mitä tarjoat ja kenelle; sen alle lyhyt selitys; ja heti näkyviin yksi pääpainike. Jos kaikki on yhtä aikaa suurta ja lihavaa, mikään ei erotu. Vähemmän korostuksia antaa usein enemmän vaikutusta.

Käyttökokemus ja selkeä polku

Käyttökokemus (UX) on sitä, kuinka helppo kävijän on päästä tavoitteeseensa. Jokaisen sivun kohdalla kannattaa kysyä: mitä tämä ihminen haluaa täällä tehdä ja mitä minä haluan hänen tekevän? Kun nämä kaksi kohtaavat, polku on luonteva.

Hyvä verkkosuunnittelu vie kävijän pisteestä A pisteeseen B ilman että hänen tarvitsee miettiä. Se tarkoittaa loogista askelten sarjaa: etusivu esittelee, palvelu- tai tuotesivut selittävät, yhteydenotto- tai tilauslomake vie loppuun. Jokaisen sivun lopussa pitäisi olla selkeä seuraava askel. Vältä tilannetta, jossa kävijä lukee tiedon loppuun ja seisoo umpikujassa, josta ei pääse eteenpäin.

Yksi yleinen virhe on liian monta vaihtoehtoa kerralla. Jos tarjoat kymmenen mahdollisuutta yhdellä näytöllä, ihminen ei usein valitse yhtäkään. Parempi on yksi selkeä pääreitti ja sen rinnalla pari vaihtoehtoa.

Navigointi, joka ei vaadi ajattelua

Valikko on sivuston kartta. Sen on oltava ymmärrettävä ihmiselle, joka ei tiedä yrityksestäsi mitään. Käytä tavallisia, tunnistettavia nimiä (Palvelut, Hinnat, Meistä, Yhteystiedot) nokkelien sanaleikkien sijaan. Mitä vähemmän valikkokohtia, sitä helpompi on valita — yleensä viisi tai kuusi riittää.

Kävijän pitäisi aina tietää, missä hän sivustolla on ja miten pääsee takaisin. Siinä auttavat pysyvä ylävalikko, murupolku pidemmillä sivuilla ja selvästi erottuvat linkit. Haku on hyödyllinen suuremmilla sivustoilla, mutta se ei korvaa kunnollista rakennetta.

Mobiiliystävällisyys ja responsiivisuus

Suurin osa verkkoliikenteestä tulee nykyään puhelimesta. Se tarkoittaa, että ulkoasu on mietittävä läpi pientä näyttöä varten, ei ”sovitettava” siihen jälkikäteen. Responsiivinen ulkoasu mukautuu näytön leveyteen: palstat siirtyvät toistensa alle, kirjasinkoko pysyy luettavana ja kuvat skaalautuvat.

Käytännössä muutama yksityiskohta on tärkeä. Painikkeiden ja linkkien on oltava riittävän suuria, jotta niihin osuu sormella. Tekstin on oltava luettavissa ilman suurentamista. Lomakekentät eivät saa olla kapeita eivätkä puristettuja toisiaan vasten. Hyvä sääntö on testata sivusto oikealla puhelimella, ei vain pienennetyssä selainikkunassa.

Brändin johdonmukaisuus: värit ja typografia

Johdonmukainen ulkoasu synnyttää luottamusta. Jos jokainen sivu näyttää erilaiselta, jää vaikutelma huolimattomuudesta. Siksi kannattaa lyödä lukkoon tietty väripaletti ja pitää siitä kiinni: yleensä yksi pääväri, yksi tai kaksi lisäväriä ja neutraalit sävyt taustaksi. Värejä ei tarvitse olla monta — kurinalaisuus vaikuttaa ammattimaisemmalta kuin kirjavuus.

Sama pätee typografiaan. Yksi tai kaksi kirjaintyyppiä riittää yleensä: toinen otsikoille, toinen leipätekstille. Tärkeää on lukumukavuus — riittävä riviväli, järkevä rivin pituus ja selkeä kontrasti tekstin ja taustan välillä. Kunnollinen typografia tekee sivusta luettavan ja yhtenäinen tyyli sitoo sen kokonaisuudeksi.

Selkeät toimintakehotteet

Toimintakehote (CTA) on kohta, jossa kävijä tekee päätöksen: ottaa yhteyttä, tilaa, ostaa. Sen on erotuttava visuaalisesti ja oltava selkeästi muotoiltu. ”Pyydä tarjous” kertoo enemmän kuin ”Eteenpäin”. Yksi pääkehote sivua kohti toimii paremmin kuin useampi kilpaileva painike.

CTA:n sijainti merkitsee. Sijoita se sinne, missä kävijä on valmis päättämään — sen jälkeen kun hän on saanut tarvitsemansa tiedon. Pidemmällä sivulla saman kehotteen voi toistaa useassa kohdassa, koska eri ihmiset päätyvät päätökseen eri hetkellä.

Nopeus on osa ulkoasua

Kaunein ulkoasu ei auta, jos sivu avautuu hitaasti. Jokainen ylimääräinen latausekunti kasvattaa todennäköisyyttä, että kävijä poistuu ennen kuin sivu edes ilmestyy näkyviin. Nopeus vaikuttaa myös hakukonesijoitukseen.

Suurin syyllinen ovat yleensä kuvat. Optimoi ne oikeaan kokoon ja nykyaikaiseen muotoon, lataa vasta tarvittaessa ja vältä raskaita taustavideoita siellä, missä ne eivät tuo lisäarvoa. Yhtä tärkeä on tekninen puoli: liikaa koodia ja kolmannen osapuolen skriptejä (esimerkiksi raskaasti konfiguroituja WordPress-lisäosia) hidastaa sivua huomattavasti. Hyvä suunnittelu huomioi suorituskyvyn heti alusta.

Miten nämä periaatteet sovitetaan yhteen

Visuaalinen hierarkia, harkittu käyttökokemus, selkeä navigointi, responsiivisuus, yhtenäinen brändi, ymmärrettävät toimintakehotteet ja nopeus eivät ole erillisiä listan kohtia. Ne toimivat yhdessä: vahva hierarkia tukee polkua, johdonmukainen brändi vahvistaa luottamusta, nopeus pitää kävijän paikallaan. Jos yksi lenkki puuttuu, kokonaisuus kärsii.

ArborIT on tehnyt kotisivuja ja verkkosuunnittelua vuodesta 2014, sekä WordPressillä että koodipohjaisilla (React) ratkaisuilla — valitsemme tekniikan sen mukaan, mikä sopii projektille parhaiten. Jos suunnittelet uutta sivustoa tai haluat päivittää nykyisen, katso tarkemmin UI/UX-suunnittelun ja kotisivujen teon palveluitamme tai ota yhteyttä — mietitään yhdessä, mikä sinun projektissasi on järkevintä.