Verkkosivujen suunnittelussa on hyvä ottaa huomioon useita keskeisiä tekijöitä, jotka vaikuttavat käyttökokemukseen, toimivuuteen ja hakukoneoptimointiin. Tässä artikkelissa on koottu suuntaa antavia vinkkejä siitä, mitä kaikkea verkkosivujen toteutuksessa kannattaa ottaa muistiin. Älä panikoi! Vaikka tässä artikkelissa on paljon asiaa – niin tämän on tarkoitus olla vain jonkinlainen yleinen ohje.
Jos haluat käyttää mun palveluita (blogi, kotisivut, verkkokauppa), voit tutustua alla esitettyihin asioihin ja kertoa omia ajatuksia millä tyylillä haluat verkkosivut toteuttaa – annan kuitenkin asiakkailleni aina vinkkejä, mikä voisi toimia tai mikä ei toimi. Lopulliset verkkosivut toteutetaan aina niin, että ne vastaavat asiakkaan toiveita.
1. Käyttäjäkokemus
- Selkeys ja helppokäyttöisyys: Varmista, että sivustolla on helppo navigoida ja että käyttäjät löytävät tarvitsemansa tiedot nopeasti.
Voit miettiä, kuinka paljon sivulla on oltava esimerkiksi valikoita. Mihin kaikkiin kategorioihin tuotteita kannattaa ja ei kannata lisätä. Verkkokaupoissa kategorioiden tulisi olla suhteellisen pelkistettyjä, jotta ostaja löytää tarvitsemansa nopeasti. Liian yksilöity navigointi (esimerkiksi jokainen tuote värin perusteella) karkottaa asiakkaat, jos valikossa on tuhansia tuotteita monissa eri kategorioissa, vaikka pelkistetyt kategoriat riittäisivät oikein hyvin.
Käytä kontrasteja harkiten: Värien kontrastit houkuttelevat huomiota, mutta liialliset kontrastit voivat väsyttää katsojaa, kun taas esimerkiksi pastellin sävyt koetaan usein miellyttävinä ja rentouttavina – tietysti kannattaa miettiä tarkoin, kuinka pastellin sävyt erottuvat esim. valkoista taustaa vasten.
Yleisesti miellyttävät värit: Sininen, vihreä, pastellit, violetti
Agressiiviset värit: Punainen, oranssi, kirkas keltainen (Vältä näiden käyttöä!)
Musta väri voi olla tyylikäs ja ammattimainen, mutta se voi antaa myös liian kylmän ja luontaan työntävän vaikutuksen. Ruskea on värinä moderni, mutta se voi olla myös tylsä.
Neon värejä en suosittele käytettäväksi sisällössä ikinä. Jos jotain halutaan korostaa (esim. alennettua hintaa), käyttäisin värinä esim. punaista.
2. Sisältö
- Selkeä viesti: Sivuston ydinviestin tulisi olla heti selvä. Mitä palvelua tai tuotetta tarjotaan, ja miten käyttäjä hyötyy siitä? Voit myös miettiä omaa slogania tai ydinviestiä – se voi olla esimerkiksi yhden lauseen mittainen nopea viesti joka on toteutettuna sivuston otsikon yhteydessä ja toistua muualla sivustolla.
Myös muussa sisällössä kannattaa suosia pelkistettyä viestintää. Älä sorru jaaritteluun! Ylimääräinen jaarittelu tekstissä antaa epäammattimaisen kuvan myös sinusta.
Tarkista oikeinkirjoitus ja jaottele tekstiä tarpeen mukaan mahdollisimman pieniin osiin, jotta katsoja pystyy lukemaan nopeasti keskeisimmät asiat. Myös hakukoneoptimoinnin kannalta tekstin jakaminen on tärkeässä roolissa. Liian pitkät lauseet heikentävät hakukoneoptimoinnin tuloksia. - Visuaalinen sisältö: Käytä kuvia, videoita ja grafiikkaa sisällön rikastamiseksi. Kannattaa kuitenkin miettiä, mikä lopulta toimii parhaiten ja jää asiakkaidesi tai sivuston muiden katsojien mieleen. Onko sivuston logo monimutkainen 3D piirros vai ehkäpä joku yksinkertaisempi logo, esimerkiksi yrityksen tai oman nimen kirjaimet.
- Väriteemat ja typografia: Valitse käyttäjäystävälliset värit ja luettavat fontit. Kontrastien tulee olla riittävät, ja fonttien koon mukava. Suositeltuja fontteja on esimerkiksi Arial, Helvetica jne.
Esimerkiksi Comic Sans on yleinen fontti ja sitä näkee käytettävän yllättävänkin paljon, kuitenkin pidemmissä teksteissä lukeminen on raskasta ja suosittelen harkitsemaan kahdesti, ennen vastaavien fonttien käyttämistä verkkosivuilla tai muussa sisällöntuotanto materiaalissa.
Muista myös, että jotkut erikoisfontit eivät välttämättä näy kaikilla laitteilla! Jos haluat toteuttaa kotisivun otsikot erikoisemmalla fontilla, suosittelen käyttämään kuvia fonttien sijaan, jotta teksti varmasti näkyy kaikille vierailijoille oikein. - Mieti myös, kuinka paljon on tarpeellista tuoda omaa itseään ja persoonaa esille – ja mikä sopii yrityksesi tai henkilöbrändisi tyyliin. Myönnän, että itsekin saatan liikkua asian suhteen ”harmalla alueella” sillä, esimerkiksi kaikki blogipostaukset on tuotettu niin, että postauksissa käytän omia henkilökohtaisia kuvia.
Teen kuitenkin sisältöä nimenomaan omalla nimelläni ja haluan myös, että oma persoona tulee esille eri puolilla verkkosivuja. Toki verkkosivut voisi toteuttaa myös ammattimaisemmin – ja postauksien kuvissa voitaisiin käyttää jonkinlaisia yhteinäisiä kuvia.
3. Visuaalinen suunnittelu
- Yhtenäinen visuaalinen ilme: Käytä johdonmukaista väripalettia, logoa, fontteja ja tyyliä, jotta brändin ilme pysyy tunnistettavana. Verkkosivuilla, kuten muussakin sisällössä on hyvä muistaa: joskus vähemmän on enemmän!
- Valkoinen tila ja asettelu: Käytä riittävästi tilaa elementtien ympärillä, jotta sivustosta ei tule liian ruuhkainen.
- Kuvat ja grafiikat: Valitse laadukkaita ja optimoituja kuvia, jotka tukevat sivuston sisältöä ja luovat miellyttävän visuaalisen ilmeen. Tallenna kuvat suhteelliseen pieneen kokoon, jotta ne latautuvat nopeasti. Muista myös, että videoiden osalta kannattaa miettiä, miten ne toistuvat verkkosivuilla (esim. pyöriikö video alusta loppuun automaattisesti, pitääkö katsojan itse painaa ”play” nappia ja video toistuu kerran yms).
3. Tietoturva ja lakisääteiset vaatimukset
- Tietosuoja ja evästeet: Huolehdi tietosuojalain vaatimuksista ja tarjoa mahdollisuus evästeiden hyväksymiseen tai hylkäämiseen. Palveluehdot ja tietosuojaselosta tulisi olla jokaisella verkkoon julkaistulla sivulla saatavilla!
Ikävä kyllä, verkkosivuilla tulee näyttää evästeiden hyväksyntäpyyntö asiakkaille, jos sivusto käyttää evästeitä, jotka eivät ole välttämättömiä sivuston toiminnan kannalta. Tämä on yleinen tietosuojavaatimus erityisesti Euroopassa GDPR-säännösten mukaisesti. Evästeilmoituksen tulee antaa käyttäjälle tietoa evästeiden käytöstä ja mahdollisuus hyväksyä tai hylätä ne ennen kuin evästeet otetaan käyttöön. - Verkkomaksaminen ja turvallisuus: Verkkokaupan saa suhteellisen helposti rakennettua. Tähän liittyy kuitenkin myös paljon turvallisuuteen liittyviä asioita, esimerkiksi miten asiakkaan korttitiedot pysyvät salassa mahdollisilta hyökkääjiltä? Itse käytän verkkosivuilla myös asennettuja lisäosia, jotta kävijöiden tiedot pysyvät varmasti turvassa. Lisäosia voi olla mm. Palomuuri.
Viimeaikoina olen törmännyt lukuisiin verkkosivuihin, joista puuttuu kokonaan tiedot siitä, miten asiakkaan korttitiedot on suojattu. Kuka on maksujen välittäjä ja minne pankkikortin tiedot mahdollisesti päätyvät?
Onkin suositeltavaa aina käyttää verkkosivuilla luotettavia maksujen välittäjiä. Mieti myös, kuinka paljon haluat todellisuudessa tarjota maksuvaihtoehtoja asiakkaillesi. Jos maksun voi suorittaa vain tilisiirtona tai laskulla, voi se karkoittaa mahdolliset asiakkaat tai vaikuttaa negatiivisesti asiakkaan ostopäätökseen – ihmiset ovat tottuneet, että nykyään verkossa kaiken saa ”kaikki mulle heti nyt” -tyyppisesti.
Toisaalta taas, koska verkkosivuilla on tarjolla useita maksuvaihtoehtoja (Apple Pay, Google Pay, MobilePay, PayPal jne.) kannattaa näitä ehdottomasti hyödyntää. Etenkin pienten verkkokauppojen kannattaa kuitenkin miettiä, kannattaako näistä kaikista maksuvaihtoehdoista todella maksaa, sillä usein näihin voi liittyä kuukausittaisia maksuja (esim. 14-59€/kk Paytrailin käytöstä).
Itse käytän omassa verkkokaupassa Stripen palveluita, joka suojaa asiakkaan korttitiedot ja maksuvaihtoehdot on pelkistetty Apple Payn ja Google Payn varaan, sillä tästä veloitetaan vain transaktio kustannukset per maksu.
Esimerkkejä transaktio kustannuksista:
Korttimaksut Euroopan talousalueen (ETA) sisällä: 1,4 % + 0,25 € per transaktio.
Korttimaksut ETA-alueen ulkopuolelta: 2,9 % + 0,25 € per transaktio
Muista, että verkkokaupassa ei voi käyttää maksutapana omaa henkilökohtaista esim. MobilePay numeroa! Myös MobilePayn ”lipas” ominaisuus on tarkoitettu vain erilaisiin keräyksiin, eikä sitä saa käyttää yritystoiminnan maksujen vastaanottamiseen. Jos haluat käyttää pelkkää MobilePayta maksujen suorittamiseen, sinun tulee erikseen allekirjoittaa sopimus asiasta MobilePayn kanssa.
