Blogi

Kannattaako verkkokauppa suunnitella itse?

Verkkokaupan perustaminen on helpompaa kuin koskaan. Erilaisia verkkokauppa-alustoja ilmaantuu markkinoille jatkuvasti lisää, ja näiden alustojen avulla kuka tahansa kykenee pystyttämään omalle tuotteelleen verkkokaupan muutamissa tunneissa.

Vuonna 2020 ilmestyneessä kirjassaan Luomiskertomus (Kosmos), luova johtaja ja tietokirjailija Henri Hyppönen kuvaa viimeisen parin vuosikymmenen aikana toteutunutta tiedon, osaamisen ja palveluiden saatavuuden räjähdysmäisestä kasvusta syntynyttä megatrendiä ”luovuuden demokratiaksi”.

Ilmiötä pohtiessaan Hyppönen kuvaa hypoteettista tilannetta, jossa hän, täysi ummikko, haluaa rakentaa kuvitteellisen tennaribrändin ja myydä tuotteitaan verkossa. Ajatusleikkinsä sivutuotteena Hyppönen tulee osoittaneeksi kuinka helppoa verkkokaupan perustaminen pohjimmiltaan tänä päivänä on:

  1. Varaa domain
  2. Luo tunnukset verkkokauppa-alustaan
  3. Valitse kaupallesi valmis ”teema” (= layout, ulkoasu) ja luo tuotteet kauppaan

Muutamassa tunnissa kauppa on valmis ja tuotteesi on tarjolla globaalille neljän miljardin potentiaalisen asiakkaan joukolle.

Tästä herää kysymys, että mihin ihmeeseen tarvitaan ammattiosaamista tai varsinkaan ammattimaista mainostoimistoa verkkokaupan suunnitteluun tai toteuttamiseen?

Tässä blogitekstissä pureudun siihen, mitä perustavanlaatuisia haasteita kuluttajaverkkokauppaprojektin suunnitteluvaiheessa saatetaan kohdata, miten meillä Sinisellä Härällä lähestytään verkkokauppatoteutuksia ja miten laadukas käyttöliittymäsuunnittelu voi auttaa selviytymään kovenevasta kilpailusta voittajana.

1. Oletukset ovat vaarallisia – syvällinen asiakasymmärrys on menestyksekkään verkkokaupan perusta

Edellä kuvattu Hyppösen hypoteesi verkkokaupan perustamisen helppoudesta on kiistatta realistinen ja kaikkien saavutettavissa. Se ei kuitenkaan tarkoita, että vartissa keksityn lenkkaribrändin verkkokaupan rakentaminen olisi järkevää. Yksikään lenkkaribrändi ei ole koskaan menestynyt määrittämällä kohderyhmäkseen ”kaikki maailman ihmiset”. Aivan kuten markkinointi vaatii aina kohdentamista ja resurssien fokusointia, menestyvän verkkokaupan rakentaminen ja operointi vaatii syvää asiakasymmärrystä.

Vaikka emme suoraan tarjoa palvelumuotoilun tai strategisen konsultoinnin palveluita, aloitamme verkkokauppaprojektit useimmiten asiakkaidemme kanssa liiketoiminnan perusasioita käsittelevistä kysymyksistä.

  • Mitä myydään?
  • Mitä arvoa tuotetaan?
  • Kenelle halutaan myydä?
  • Mitä loppuasiakas arvostaa?

Vastaukset tällaisiin kysymyksiin saattavat tuntua itsestäänselvyyksiltä, mutta usein ne jäävät päivittäisen arkitoiminnan jalkoihin. Pahimmassa tapauksessa asioita ei ole pohdittu hetkeen lainkaan, vaan on muodostettu kasa oletuksia omasta asiakaskunnasta, heidän tarpeistaan ja motiiveistaan.

Näiden oletusten haastaminen on liiketoiminnan kehittämisen osalta muutenkin kannattavaa, mutta onnistuneen verkkokauppatoteutuksen kannalta välttämätöntä. Vasta kun näihin kysymyksiin on saatu yksiselitteiset vastaukset, voidaan siirtyä käyttöliittymäsuunnittelun ensimmäiseen vaiheeseen.

Jos verkkokauppasi myy kaikkea kaikille, soita Mikolle.

2. Asiakasta ei ole varaa eksyttää – selkeä käyttäjäpolku on parasta asiakaspalvelua

Käyttäjäpolulla tarkoitetaan sitä matkaa, jonka tietty käyttäjä kulkee verkkokaupassa: mille sivulle hän laskeutuu, mitä hänelle näytetään, mihin häntä ohjataan, mitä tuotteita tai sisältöjä hänelle tarjotaan, miten hän pääsee ostamaan ja niin edelleen.

Pohjimmiltaan kyse on asiakaspalvelusta. Toisin kuin kivijalkakaupassa, verkkokaupassa asiakas harvoin ovesta sisään astuessaan haluaa esittää myyjälle kysymyksiä tai ilmoittaa ääneen mitä hän on tullut ostamaan.

Sen sijaan verkkokaupassa myyjän (tai pikemminkin verkkokaupan suunnittelijan) vastuulla on tuntea kauppaan saapuvan asiakkaan tarpeet niin hyvin, että loppuasiakkaalle on kauppaan saapuessaan täysin selvää mistä hän haluamansa tuotteen, palvelun tai muun etsimänsä sisällön löytää.

Laadukas käyttöliittymäsuunnittelu lähtee siitä, että tunnistetaan verkkokaupassa asioivat eri käyttäjäryhmät, tutustutaan heidän tarinoihinsa ja pohditaan kriittisesti, miten näitä käyttäjäryhmiä voidaan palvella mahdollisimman tehokkaasti. Sen mukaan, kuinka monta toisistaan riittävän erilaista käyttäjätyyppiä tai -tarinaa aloitusvaiheessa identifioidaan, rakennetaan käyttäjäpolkuja tarvittaessa useampia.

Lopputuotteena käyttäjäpolkujen laadukkaasta suunnittelusta on usein ”käyttäjäpolkukartat” (eng.: User Story Map),  joissa kuvataan visuaalisesti ja yksityiskohtaisesti, miten eri käyttäjäryhmien odotetaan kaupassa kulkevan ja miten kulkemista halutaan ohjata.

Loppuasiakkaan tarpeiden yksilöllinen huomioiminen on tapa palvella asiakasta mahdollisimman laadukkaasti, mutta myös kriittistä kaupan konversion (= kuinka moni potentiaalinen asiakas lopulta ostaa) kannalta. 

Jos et tiedä, mitä kävijät kaupassasi tekevät, soita Mikolle.

3. Tunteella on merkitystä – laadukkaan käyttäjäkokemuksen arvoa on vaikea mitata, mutta se on suurempi kuin kuvittelet

Kirkkaan asiakasymmärryksen muodostuttua ja käyttäjäpolkujen hahmotuttua siirrytään siihen työvaiheeseen, jota useimmiten tarkoitetaan, kun arkikielessä puhutaan UI-suunnittelusta.

Abstraktit mindmapit ja kaavamaiset käyttäjäpolkukartat alkavat tässä vaiheessa prosessia muotoutumaan konkreettisiksi elementeiksi suunnittelijan näytöllä. Tämä on se työvaihe, joka ohitetaan täysin, jos lähdetään toteuttamaan kauppaa valmisteemojen avulla.

Itse käyttöliittymän suunnittelutyön ensimmäinen osa on yleensä tilaajan näkökulmasta melko suoraviivaista ja selkeää, joskus jopa tylsää. Tässä vaiheessa keskitytään rakentamaan eritasoisia wireframe-malleja. Näiden lähtökohtaisesti harmaita laatikoita sisältävien mallien tarkoituksena on hahmottaa verkkokaupan sivujen, elementtien ja muiden sisältöjen sekä toiminnallisuuksien hierarkinen suhde toisiinsa ja varmistaa, että kaikki aiemmin tunnistetut käyttäjäpolut tulevat huomioiduiksi.

Verkkokaupan tilaajan näkökulmasta huomattavasti kiinnostavampaa onkin suunnittelutyön seuraava vaihe, jossa laatikkomaiset wireframet muutetaan visuaalisesti näyttäviksi layouteiksi. Tässä kohtaa kaupan brändi, visuaalinen ilme ja muu persoonallinen olemus alkavat vihdoin hahmottua.

Samalla kun suunnittelutyössä siirrytään wireframe-malleista layouteihin, käyttöliittymäsuunnittelun ja käyttökokemussuunnittelun raja-aita alkaa hämärtyä. Näiden termien ja konseptien eroavaisuuksia olemme avanneet blogissamme jo aiemmin.

Tärkeintä on ymmärtää, että kaikki tässäkin artikkelissa esitetyt kysymyksenasettelut ja työvaiheet tähtäävät tasan yhteen lopulliseen tavoitteeseen: mahdollisimman laadukkaaseen loppukäyttäjän kokemukseen. Sillä ei nimittäin ole juuri mitään merkitystä, vaikka aiemmassa työvaiheessa olisi onnistuttu upeasti määrittämään käyttäjäpolkuja tai sisältöjen hierarkisia suhteita – jos käyttäjäkokemus on heikko, ei kauppaa todennäköisesti synny.

Maailma on täynnä verkkokauppoja. Lähestulkoon mikä tahansa tuote on saatavilla muodossa tai toisessa esimerkiksi Amazonin, Alibaban tai Ebayn kaltaisista jättimäisistä kaupoista. Tästä johtuen voi karrikoidusti todeta, että ainut tapa kilpailla edellä mainittuja jättiläisiä vastaan on tarjota loppuasiakkaalle poikkeuksellisen loistavaa palvelua tai luoda asiakkaalle turvallinen ja luottavainen tunne-elämys myyjän brändimielikuvan kautta.

Toki loppuasiakas voi arvostaa esimerkiksi paikallisuutta, helppoa saatavuutta tai vaikkapa myyjän spesifiä asiantuntemusta, mutta lopulta kyse on aina luottamuksesta ja käyttäjän kokemuksesta – tunteeko asiakas olonsa riittävän luottavaiseksi tilataksensa tältä myyjältä ja tästä kaupasta?

Verkkokaupan tavoitteena on lähes poikkeuksetta tuottaa sitä kuuluisaa kauppaa, ja ammattimaisesti toteutetun käyttöliittymän ja käyttökokemuksen tehtävänä on poistaa loppuasiakkaan näkökulmasta niin monta ostamisen estettä kuin mahdollista.

Jos et ole varma, huokuuko kauppasi luotettavuutta, soita Mikolle.

Lopuksi 

Tässä blogikirjoituksessa on raapaistu korkeintaan verkkokaupan käyttöliittymien ja käyttäjäkokemusten suunnittelutyön pintaa. Todellisuudessa suunnittelu- ja toteutustyö vaatii kymmenien tai satojen toisistaan riippuvaisten pienten valintojen tekemistä. Meillä Sinisellä Härällä tätä työtä tehdään joka päivä suunnittelijoiden, koodaajien, projektipäälliköiden ja asiakkaiden kanssa tiiviissä yhteistyössä.

Jos mietit, että kannattakohan verkkokauppaprojektin suunnittelutyöhön sittenkään lähteä yksin, niin lataa Verkkosivujen ostajan opas. Olemme keränneet siihen valmiiksi vastauksia useimpiin aiheeseen liittyviin kysymyksiin. Tilanteen niin vaatiessa, soita Mikolle.

Miten yrityksen somestrategia rakennetaan?

Tänä päivänä somestrategia pitäisi olla osana jokaisen yrityksen markkinointistrategiaa. 

Kuitenkin valitettavan usein sosiaalisen median päivittäminen ei ole oikein kenenkään vastuulla, vaan ajatellaan, että se kuuluisa joku ehtii sitä hoitamaan omien hommiensa ohessa. Näinhän se ei ole. 
 

Tavoitteet somestrategiassa

Kaikki yrityksen toiminnot pohjautuvat liiketoiminnalle asetettuihin tavoitteisiin, joten miksi somestrategia perustuisi mihinkään muuhun? Somestrategian suunnittelu kannattaa siis aloittaa kysymyksestä ”Mitä haluamme somella saavuuttaa?”. 

Haluammeko saada myyntiä vs. haluammeko saada näkyvyyttä ovat aivan eri asioita ja voivat jopa vaatia täysin eri kanavansa. Tavoitteiden on hyvä olla selkeitä, mitattavia ja ihan oikeasti saavutettavissa olevia asioita.  

 


🐂 HÄRKÄVINKKI: Lue blogi Näin asetat markkinoinnin tavoitteet oikein >>


Kenelle 

Kohderyhmien määrittely kannattaa aloittaa ostajapersoona-analyysista. Kun ostajapersoonat on kirjoitettu auki, on helppo klikkailla mainosten kohdennuksista oikeat vaihtoehdot mukaan. Kun mainos tai julkaisu pystytään kohdentamaan riittävän tarkasti, ei eurojakaan valu hukkaan.   

Missä 

Kun kohderyhmä on tiedossa, on aika siirtyä miettimään käytettäviä kanavia. Somessa ei kannata touhuta jokaiselle jotakin -periaatteella, vaan miettiä tarkasti, mistä sen juuri itselle tärkeän yleisön löytää. 

Jos 16-vuotiaat pojat ovat kohderyhmääsi, on todennäköistä, että Facebook on väärä kanava sinulle. Jos taas tavoittelet viisikymppisiä isännöitsijöitä, tavoitat heidät suurella todennäköisyydellä juurikin Facebookista.  

Mitä 

On äärettömän tärkeää panostaa sosiaalisen median sisältöön. Millaiset kuvat saavat kohderyhmäsi pysähtymään? Toimivatko videot parhaiten? Minkälainen kieli puhuttelee kohderyhmääsi? Mikä on se sisältö, mitä he haluavat nähdä? Tässä kohtaa avuksi tulee sosiaalisen median sisältösuunnitelma. Se kertoo, mitä julkaistaan, missä julkaistaan, milloin julkaistaan ja toivottavasti myös, kuka julkaisee.

  


🐂 HÄRKÄVINKKI: Lue blogi Millainen on hyvä somemainos? >>


Kuka 

Niin, hyvä sosiaalisen median sisältö vaatii sen kuuluisan jonkun aikaa. Ei riitä, että yrityksellä on tilit somessa, vaan hyvä sisältö ja aktiivisen sellaisen julkaiseminen on erittäin tärkeää. Seuraajien kanssa on oltava vuorovaikutuksessa ja julkaistava heitä kiinnostavaa sisältöä tarpeeksi usein. Yrityksen on hyvä nimetä yksi henkilö tai tiimi, jolla on päävastuu somesta.  

Kyllähän sinäkin sen tiedät – jos joku asia on kaikkien vastuulla, se ei ole kenenkään vastuulla.  
 

Nyt, kun somestrategia on laadittu, on aika ottaa järeämmät keinot käyttöön. Lue seuraavaksi, miksi somemarkkinointi on niin tehokasta.   

Miksi somemarkkinointi on niin tehokasta?

Some on osoittautunut erittäin toimivaksi mainospaikaksi yrityksille ja yhteisöille, oli tavoitteena brändin tunnettuuden levittäminen, asiakasuskollisuuden kasvattaminen tai verkkosivuliikenteen tai verkkokauppaostojen lisääminen.

Syynä tähän ei ole vain somealustojen täysin omaa luokkaansa oleva kattavuus, vaan myös somekanavien generoima valtava verkkosivuliikenteen ja myynnin määrä.

Uudelleenmarkkinoinnilla tavoitat potentiaalisimmat ostajat

Some tarjoaa verkkokauppiaille sekä muille toimijoille paljon erilaisia mahdollisuuksia, joista uudelleenmarkkinointi on yksi tehokkaimmista myynnin välineistä. Verkkosivuille liitetyn seurantatyökalun avulla somemainoksia voidaan näyttää lämpimälle yleisölle eli mainostettavasta asiasta jo valmiiksi kiinnostuneille.

Uudelleenmarkkinointi tarkoittaa sitä, että mainoksia näytetään henkilöille, jotka ovat vierailleet kyseisen yrityksen tai vielä tarkemmin kyseisen tuotteen tai palvelun verkkosivuilla.

Mainoksia voidaan kohdentaa myös muun käyttäytymisen mukaan, esimerkiksi postaamalla somekanavaan videon ja kohdentamalla siihen liittyvän linkkimainoksen näyttämisen kaikille kyseisen videon katsojille.

Some on tehokas kanava niin myyntiin kuin markkinointiin

Vuonna 2018 olin Santa Monicassa järjestetyssä Social Media Week -konferenssissa, josta mieleeni jäi erityisesti se, että somesta ostetaan yhden kosketuksen taktiikalla tuotteita tai palveluita, jos niiden hinta on alle 50 euroa (tai siis dollaria, mutta sama pätee euroissa).

Alle 50 euroa maksavia tuotteita ja palveluita voi siis mainostaa hyvinkin taktisesti ja ohjata mainoksista suoraan tuotteen tai palvelun ostosivulle. Tätä hinnakkaampiin hankintoihin asiakas kaipaa hieman enemmän lämmittelyä, ja kuinka ollakaan, sekin onnistuu somessa.

Oli yrityksesi ostoprosessi kuvattu sitten suppilona tai vauhtipyöränä, potentiaalisen asiakkaan lämmittäminen ja tarpeen herättäminen on osa prosessia.

Lämpöä on hyvä herätellä esimerkiksi myytävään tuotteeseen tai palveluun liittyvillä blogeilla, podcasteilla, ladattavilla oppailla tai muilla potentiaalisia asiakkaita kiinnostavilla sisällöillä.

Ladattavat sisällöt ovat siinä mielessä erinomaisia markkinointivälineitä, että niistä yritys saa arvokkaan liidin, kun latausta varten henkilön on jätettävä omat yhteystietonsa.

Siitä ei kuitenkaan ole mitään iloa, että näitä kiinnostavia sisältöjä tehdään, jos niitä ei markkinoida. Loistavakin sisältö on arvotonta, jos kukaan ei sitä löydä.

Sisältöjen markkinointiin sosiaalinen media on mitä voimakkain välinen. Kun potentiaalinen asiakas näkee somesyötteessään kuvia, videoita tai tekstiä häntä kiinnostavista aiheista, rivakasti sivua vierittävä peukalo pysähtyy kuin seinään – kunhan sisältö sekä mainos ovat tarpeeksi kiinnostavia ja huomiota herättäviä.

Verkko-ostokset kovassa kasvussa koronakeväänä

Yhä useammat tekevät ostoksiaan verkossa. Paytrailin tekemän tutkimuksen mukaan koronakevät on kiihdyttänyt suomalaisten verkkokauppaostoja entisestään.

”Jopa 50 % vastaajista on lisännyt verkko-ostojaan poikkeustilan aikana ja suurin osa heistä aikoo jatkaa ostamista verkossa.”

Etenkin syrjäisempien seutujen asukkaita verkkokauppojen uudet mahdollisuudet kiinnostavat kovasti. Jopa 81 % maaseudulla asuvista sanoi aikovansa jatkaa verkkokauppaostoksia myös poikkeustilan jälkeen – eikä ihme. Jos asiakas ei pääse kauppiaan luo, kannattaa kauppiaan mennä asiakkaan luo.

Yleensä sanotaan, että suomalainen on valmis maksamaan satasen siitä, ettei naapuri saa viittäkymppiä. Mutta vuoden 2020 kevään jälkeen tuon sanonnan voi heittää roskakoriin.

Vastaajista jopa 60 % haluaa tukea ja auttaa kotimaisia yrittäjiä sekä pienyrittäjiä. Suomalaisten yrittäjien ahdinko on kuultu ja monet uskovat jatkossakin suosivansa kotimaisia tuotteita ostoksia suunnitellessaan.

On upeaa huomata, että verkkokauppa vetää. Mutta ne asiakkaat pitäisi varmaan jotenkin ohjata juuri sinne sinun verkkokauppaasi?

Somesta tavoitat juuri sen yleisön, minkä haluat

Vaikka asiakas tekisi oston kivijalkamyymälässä, on hän hyvin todennäköisesti poikennut ostopolullaan verkossa. Suosituksia, kokemuksia ja arvosteluita luetaan hanakasti niin yritysten sosiaalisen median kanavista kuin hakukoneista etsimällä.

Somekanavien algoritmit ovat salaisia ja niiden toiminta kehittyy jatkuvasti. Viime aikoina on kuitenkin huomattu, että orgaanisen somenäkyvyyden saavuttaminen on koko ajan haastavampaa. Vaikka yritykset julkaisisivat timanttista sisältöä, kanavat eivät näytä niitä enää samaan malliin kuin ennen.

Orgaanisesta näkyvyydestä tulee toki huolehtia, mutta ei ole mitään hätää, vaikkei sitä kautta saisi suuren suuria tuloksia. Kiitos algoritmien ja tekoälyn, haluttu kohdeyleisö pystytään tavoittamaan maksetulla mainonnalla hyvinkin tarkasti.

Some seuraa käyttäytymistäsi, mitä selaat, mitä luet, mitä katsot, mitä klikkaat, mistä tykkäät, ja mitä ympärilläsi olevat ihmiset tekevät.

Tämän seurantadatan perusteella somekanavien mainosalustat antavat täydet mahdollisuudet juuri tietyn kohdeyleisön (ikä, asuinpaikka, kiinnostuksen kohteet, elämäntilanne, perhesuhteet, työ…) määrittelemiseksi.

Kun teet maksullista somemainontaa, voit itse valita, kenelle mainoksesi näkyvät, milloin ne näkyvät ja mitä haluat maksaa mainosten reagoinneista, kuten klikeistä tai videoiden katselukerroista.

Kysy rohkeasti lisää, jos kaipaat apua somemarkkinoinnin aloittamiseen tai kehittämiseen!

Verkkosivuston vaatimusmäärittely on avain onnistuneeseen sivustoprojektiin

Oletko joskus törmännyt verkkosivuprojektissa tilanteeseen, jossa projektin edetessä alkaa yllättäen rönsyilemään toiveita ominaisuuksista, asioista ja osioista, joista ei projektin alussa ollut mitään puhetta? Me olemme.  

Usein taustalla tähän on se, ettei projektin alussa olla pystytty kartoittamaan riittävän hyvin asiakkaan tai sivuston loppukäyttäjän tarpeita. Toisin sanoen, verkkosivuston vaatimusmäärittely on saattanut jäädä projektin alkutaipaleilla vaillinaiseksi. Mitä vaatimusmäärittely sitten verkkosivustoprojektissa sisältää ja miksi siihen kannattaa panostaa?  

Miksi verkkosivuston vaatimusmäärittely tehdään?  

Laadukkaan verkkosivuston rakentaminen vaatii tarkkaa ja huolellista suunnittelua, jotta valmiilla sivustolla saavutetaan liiketoiminnan tavoitteet sekä luodaan lisäarvoa asiakkaille, mikä lisää asiakastyytyväisyyttä.  

Verkkosivuston vaatimusmäärittelyn avulla sivustoprojektille linjataan tavoitteet, tarkoitus, kohderyhmät sekä toiminnallisuudet. Eli määritellään, miksi verkkosivusto on olemassa, mitä sen pitäisi tehdä ja kuinka.   

Mitä vaatimusmäärittelyyn tulee sisällyttää? 

Meillä sivuston vaatimusmäärittely toteutetaan yhdessä asiakkaiden kanssa projektin kick-offissa. Vaatimusmäärittely on aina projektikohtainen, mutta sen runko on kutakuinkin jaettu seuraaviin vaiheisiin. 

1. Tarkoituksen määrittely: Miksi verkkosivusto on olemassa?

Sivustoprojektin alussa on hyvä pohtia, miksi sivusto on ylipäätään olemassa, mitä haasteita se ratkaisee ja minkälaisia odotuksia ja tavoitteita sivustolle asetetaan. Olivatpa tavoitteet myynnin kasvattaminen, palveluiden ja referenssien esittely tai työnantajakuvan parempi esilletuonti, on sivuston tarkoitus tärkeää linjata heti alkuun.  

Tavoitteet ja tarkoitus toimivat tärkeinä ohjenuorina niin sivuston käyttöliittymäsuunnittelussa kuin teknisessä toteutuksessa.  

2. Sivuston käyttäjien määrittely: Kenelle verkkosivusto on tarkoitettu? 

Verkkosivustot rakennetaan lähtökohtaisesti aina loppukäyttäjiä eli yrityksen asiakkaita varten. Sivuston käyttäjien määrittelyllä pyritään löytämään ja täyttämään asiakkaiden tarpeet. Käyttäjien määrittelyä voi lähestyä muun muassa ostajapersoonien tai käyttäjätarinoiden kautta.  

Me käytämme tähän pääsääntöisesti käyttäjätarinoita (user mapping)joilla määritellään kriteerit sille, mitä käyttäjän pitäisi pystyä tekemään verkkosivustolla. Esimerkiksi ravintolan verkkosivuilla asiakkaan tulisi pystyä löytämään ravintolan menu sekä tekemään pöytävaraus.  

Käyttäjätarinat helpottavat hahmottamaan sivustokävijöiden tarpeita ja siten tukemaan asiakaslähtöisen käyttöliittymän suunnittelua. Lisäksi käyttäjätarinoiden kriteerejä voidaan hyödyntää sivuston testausvaiheessa antamalla nämä samat tehtävät testiryhmän suoritettavaksi. Testiryhmän käyttäytymisen perusteella voidaan analysoida, kuinka hyvin kriteerit sivustolla täyttyvät. 

3. Verkkosivuston alustavan rakenteen määrittely 

Visuaalinen suunnittelijamme hahmottelee verkkosivuston lopullisen rakenteen käyttöliittymäsuunnittelun yhteydessä.  

Vaatimusmäärittelyvaiheessa rakennamme yhdessä asiakkaan kanssa alustavan sivustokartan, johon listataan verkkosivustolle tulevat sisältötyypit, sivut sekä taksonomiat, kuten kategoriat ja tagit. Rakennetta määriteltäessä voidaan myös hahmotella alustavaa sivustohierarkiaa sekä kuvailla tarvittaessa sivuille tulevaa sisältöjä muutamalla lauseella. 

4. Toiminnallisten vaatimusten määrittely 

Toiminnallisten vaatimusten määrittelyssä otetaan kantaan sivuston ominaisuuksiin, käytettävyyteen ja toimintoihin, eli määritellään, miten sivusto käytännössä toimii.  Tällaisia toimintoja voivat olla vaikkapa sivuston monikielinen toteutus, analytiikka- ja seurantatyökalut, hakutoiminnot tai suorituskykyvaatimukset. 

Toiminnallisia vaatimuksia määriteltäessä voidaan ottaa myös kantaa esimerkiksi yhteydenottolomakkeen pakollisiin kenttiin tai siihen, mihin käyttäjä ohjataan, kun hän on lähettänyt lomakkeen onnistuneesti.  

Myös mahdolliset integraatiot esimerkiksi toiminnanohjausjärjestelmän ja verkkokaupan välillä tai somesyötteen upottaminen sivustolle ovat olennainen osa toiminnallisten vaatimusten määrittelyä. 

5. Sivuston visuaalisuuden määrittely 

Visuaalisuuden määrittely riippuu pitkälti siitä, onko yrityksen visuaalinen ohjeisto jo valmiina vai luodaanko se sivustoprojektin yhteydessä.  

Visuaalisia elementtejä suunnitellessa voidaan määritellä esimerkiksi värit, fontit, animaatiot ja linkkien hover-efektit. Mikäli visuaalista ohjeistoa ei vielä ole olemassa, voidaan sellainen toteuttaa esimerkiksi Sinisen Härän visuaalisen ilmeen workshopissa.  

Huolellisella vaatimus­määrittelyllä onnistuneeseen loppu­tulokseen 

Mitä yksityiskohtaisemmin sivuston vaatimusmäärittelyn tekee, sitä paremmin välttyy projektin aikana tulevilta yllätyksiltä, joihin ei olla osattu suunnitteluvaiheessa varautua. Tällä vältetään niin projektin budjetin kuin aikataulun venähtäminen.  

Tohdin väittää, että huolella tehty vaatimusmäärittely vaikuttaa merkittävästi sivustoprojektin onnistumiseen, joten siihen kannattaa ehdottomasti käyttää aikaa ja huolellista ajatustyötä. 

Jos verkkosivuston uudistus on ajankohtaista, lue kuinka verkkosivuprojekti meillä etenee

Näin hyödynnät Advanced Custom Fields -lisäosaa WordPress-verkkosivuillasi

Julkaisimme alkuvuodesta artikkelin, jossa developerimme Netta kirjoitti parhaista verkkosivutoteutuksissa käyttämistämme WordPress-lisäosista. Listan kärkipaikalla komeilee Advanced Custom Fields eli ACF, jonka peruskäyttöön pureudun nyt tarkemmin.

Mikä on ACF ja miksi sitä kannattaa käyttää?

ACF:n perusperiaate on tehdä sivuston sisältöjen muokkaamisesta mahdollisimman vaivatonta. Olit sitten kokenut WordPressin taitaja tai verkkosivumaailman vasta-alkaja, Advanced Custom Fields on kätevä lisäosa jokaiselle käyttäjälle ja sivustolle.

Normaalisti WordPressin sivujen muokkausnäkymässä pystyy otsikon ja sisältötekstin lisäksi muokkaamaan ja lisäämään mahdollisia kategorioita, yhden artikkelikuvan ja Artikkelit-sisältötyypillä vielä otteen. ACF mahdollistaa kustomoitujen lisäkenttien tekemisen eli sivujen ja artikkeleiden muokkausnäkymään saadaan kyseisen lisäosan avulla luotua lisäpaikkoja esimerkiksi tekstille, kuville, videoille, valintakentille ja monelle muulle – jopa Google-kartalle.

Näitä lisäkenttäpaikkoja on mahdollista asettaa näkymään mille sivulle tai sisältötyypille tahansa. Kentät saa asetettua livesaitille visuaalisesti haluttuihin kohtiin sivuston rakennuksessa käytetyn muokkaimen tai PHP-koodin avulla.

ACF:n myötä sivuston sisältöjen lisäyksiä tai muutoksia ei tarvitse toteuttaa devaajan toimesta, vaan muokkauksia on mahdollista tehdä helposti WordPressin sivueditorissa. Käytämmekin kyseistä lisäosaa jokaisessa verkkosivuprojektissamme toteuttaaksemme dynaamisia, asiakkaan itse helposti muokattavia sivustoja.

Miten Advanced Custom Fieldsiä käytetään?

Kun Advanced Custom Fields on ladattu lisäosien kirjastosta käyttöön, löytyy se WordPressin ohjauspaneelista (käyttökielestä riippuen) nimellä Lisäkentät. Kenttiä lisätään ryhmittäin, jolloin koko kenttäryhmää on helpompi hallinnoida ja esimerkiksi samalle sivulle haluttujen kenttien sijainti voidaan määritellä suoraan ryhmälle.

Käytän esimerkkinä asiantuntijalausunto-osion rakentamista yksittäisen palvelun sivulle, joka on Custom Post Type UI -lisäosalla toteutettu oma artikkelityyppinsä. ACF ja CPT UI ovat keskenään yhteensopivia lisäosia, joita molempia käytämme yhdessä sivustojen rakennuksessa.

Koska melkein jokaiselle kenttätyypille on omat asetuksensa, käyn tällä kertaa ACF:n käyttöä läpi perustasolla vain esimerkkini kautta. Tarkemmat speksit kaikkiin eri asetuksiin löytyy lisäosan omasta, hyvin kattavasta dokumentaatiosta erikseen jokaisen kenttätyypin kohdalta. ACF Pro -version mukana saatavia kenttätyyppejä ja muita lisäominaisuuksia tarkastelen hieman tämän artikkelin lopussa.

Kenttäryhmä ja lisäkenttä

Kenttäryhmän lisäämisen pääsee aloittamaan klikkaamalla ”Lisää uusi” Lisäkentät-otsikon alta. Ryhmään lisätään uusi kenttä ”+ Lisää kenttä” -napista.

1.    Lisää kenttäryhmälle kuvaava otsikko

Otsikko näkyy mm. kenttäryhmien koontisivulla sekä sivueditorissa kyseisen ryhmän kenttien yläpuolella.

2.   Lisää yksittäisen kentän nimiö ja nimi

Kirjoita nimiöön kenttää hyvin kuvaava nimi, sillä nimiö näkyy kentän nimenä muokkausnäkymässä. Nimi-kohta täyttyy nimiön mukaan automaattisesti.

3.   Valitse sopiva kenttätyyppi

Kenttätyyppi on se, joka määrittää, millaisia lisäpaikkoja muokkausnäkymään halutaan tuoda. Kenttätyyppejä on yli 30, joten valinnanvaraa löytyy – riippuen toki lisäkentän käyttötarkoituksesta.

Asiantuntijalausunto-kentälle valitsin tyypiksi tekstialueen, sillä pelkkä tekstikenttä on vain yhden rivin korkuinen, kun taas tekstialue on suurempi, jolloin kenttään on helpompi kirjoittaa pidempää tekstiä. Tekstialueen muokkausnäkymän koon voi määrittää Rivit-valinnasta, joka on automaattisesti 8.

Asiantuntijan kuva -kentän tyyppi on luonnollisesti kuva. Kuvatyypille voi asettaa esimerkiksi kuvan koon minimi- ja maksimiarvot pikseleissä, jos halutaan rajata kuvan valinta tietyn kokoisiin. Myös sallittua tiedostotyyppiä voi rajoittaa asetuksissa, mutta tässä tapauksessa jätän kaikki asetukset niin kuin ne ovatkin.

Asiantuntijan nimen ja tittelin kohtiin kenttätyypeiksi riittää perusvalinnan tekstikentät, sillä lisättävät sisällöt ovat lyhyitä ja mahtuvat yhdelle riville.

Viimeiseen luomaani kenttään, asiantuntijan yhteystietoihin, valitsin tyypiksi wysiwyg-editorin, jotta asiakkaan on helppo lisätä puhelinnumeroon sekä sähköpostiosoitteeseen linkit html-koodia osaamatta. Periaatteessa kaikki loput tiedot asiantuntijan nimestä alkaen olisi voinut toteuttaa yhden wysiwyg-editorin sisään, mutta koska visuaalisesti näillä kohdilla on erilaiset muotoilut keskenään, on asiakkaan kannalta parempi lisätä nämä erillisinä kenttinä. Tällä tavalla kenttien muokattavuus ja ohjeistus sivueditorissa on myös selkeämpää.

4.   Lisää kentän ohjeet ja valitse pakollisuus

Ohjeet näkyvät ennen lisäkenttää sivun muokkausnäkymässä ja helpottavat sisältöjen lisäämistä ja muokkausta etenkin silloin, kun muokkaaja ei ole itse lisäkenttiä luonut.

Mikäli halutaan, että kyseistä kenttää ei voi olla täyttämättä, voi sen lisätä myös pakollisena, jolloin sivua ei voi julkaista ennen kuin kenttä on täytetty.

5.   Lisää mahdollinen oletusarvo

Osalle kenttätyypeistä on mahdollista asettaa oletusarvo, jolloin kyseiselle kentälle ei tarvitse lisätä editorissa sisältöä, ellei se poikkea oletuksesta. Oletusarvoon voi tarvittaessa myös lisätä esimerkiksi html-koodinpätkän, jolloin muokkaaja pystyy helposti kopioimaan tuon koodin toisiin kenttiin ja muokkaamaan siihen halutun sisällön.

6.   Lisää mahdolliset määritteet lisäkentälle

Upeasti suomennettu kääreen määritteet (engl. wrapper attributes) mahdollistaa esimerkiksi oman classin tai id:n lisäämisen kentälle. Samassa voi myös määrittää kentän koon sivun muokkausnäkymässä. Tätä kohtaa säätämällä saa useita lisäkenttiä editointivaiheessa vierekkäin, jottei jokainen kenttä vie kokonaisen rivin leveydeltä tilaa.

Kenttäryhmän sijainti

Kenttäryhmän näkyvyyttä eri sivujen tai sisältötyyppien muokkausnäkymissä voi määrittää useita eri sääntöjä käyttäen. Luomani Palvelun asiantuntija -kenttäryhmän määrittelin näkymään kaikissa Palvelu-artikkelityypeissä.

Kenttäryhmä on myös mahdollista asettaa näkymään tietyille sivuille tai esimerkiksi artikkeleille, joille on määritelty tietyt kategoriat. Mikäli kenttäryhmä halutaan näkymään useammalla sivulla tai artikkelityypillä, voi niitä lisätä klikkaamalla ”ja”-nappia ja luomalla jokaiselle oman säännön. On myös mahdollista laittaa kenttäryhmä näkymään kaikissa sisältöä lisättävissä paikoissa, mutta sulkea pois tietyt sivut tai artikkelityypit.

Kenttäryhmän asetukset

Lopuksi kenttäryhmää luodessa voidaan määrittää koko ryhmälle tiettyjä asetuksia, joita ei kuitenkaan perustilanteissa kovin paljoa tarvitse muokata.

Kenttäryhmän sijainti on hyvä määrittää tarpeen mukaan joko normaalin sisällön jälkeiseksi eli sivumuokkaimessa sisältöeditorin alle, korkealle eli heti otsikon jälkeiseksi ennen sisältöeditoria tai reunalle eli sivumuokkaimessa oikeaan sivuun.

Asetuksissa on mahdollista muokata myös ryhmän lisäkenttien nimiön ja ohjetekstin sijaintia suhteessa täytettävään kenttään.

Kuvaukseen voi halutessaan kirjoittaa koko kenttäryhmän kuvauksen. Sivun tai artikkelin muokkausnäkymästä voi myös piilottaa tiettyjä kohteita, joita ei editorissa koe tarvitsevansa.

Kun tarvittavat asetukset ja halutut lisäkentät on luotu kenttäryhmään ja ryhmä asetettu näkymään tarvittavilla sivuilla tai artikkelityypeillä, odottavat ne enää vain sisällön lisäämistä! Ylläolevassa kuvassa näkyy, miltä lisäkentät näyttävät sivun, tässä tapauksessa yksittäisen palvelun, muokkaimessa jo lisättyine sisältöineen. Allaolevassa kuvassa näkyy visuaalinen lopputulos sivustolla.

Ilmainen versio vai Pro?

Kuten useat muutkin lisäosat, myös Advanced Custom Fields on saatavilla Pro-versiona. Vaikka ilmaisella versiolla pötkii jo melko pitkälle ja saa luotua useita sisällön lisäystä ja muokkausta helpottavia lisäkenttiä, on Pro-versiossa lisänä sellaisia ominaisuuksia, joita ehdottomasti tarvitsemme. Käytämmekin siis ACF PRO:ta kaikissa verkkosivutoteutuksissamme.

ACF PRO sisältää useampia lisäkenttätyyppejä ja ominaisuuksia verkkosivujen rakennukseen, kuten kuvagallerian, toistettavat rivit ja kloonattavat kentät. Maksullinen versio mahdollistaa esimerkiksi niin sanottujen ACF Blocksien, kuin myös joustavan sisällön luomisen.

ACF Repeater Field

Pro-versiossa mukana tuleva kenttätyyppi Repeater Field on erittäin näppärä työkalu, ja se löytyy lisäosan valinnasta nimellä ”Toista rivejä”. Kun kentän tyypiksi valitaan tämä, pystyy kyseiselle kentälle lisäämään niin sanottuja alakenttiä, jotka toimivat samalla tavalla kuin normaalisti lisättävät kenttätyypit.

Repeater Fieldiä on hyvä käyttää sellaisen sisällön luomiseen, jossa tarvitaan samoja kenttätyyppejä useaan eri kohteeseen. Kun yksi ryhmä tarvittavia kenttätyyppejä on luotu, voi sivuston muokkaaja itse lisätä kyseisen sivun muokkaimessa lisää kohteita tarvitsemansa määrän. Esimerkissäni olen käyttänyt ominaisuutta esittämään faktoja yrityksestä.

Kyseiseen esimerkkimalliin en tarvinnut kuin yhden kenttätyypin, jota voi monistaa sivun muokkaimessa. Kyseessä on teksti-kenttä, jolle lisäsin oletusarvoksi html-koodin, jotta saan faktoille haluamani muotoilut.

Sivun muokkaimessa Repeater Field tulee näkyviin kuten ylläolevassa kuvassa. Uusi fakta lisätään klikkaamalla ”Lisää fakta” -painiketta, jolloin kenttä monistuu ja ohjeen mukaisesti html-koodin sisään kirjoitetaan halutut tiedot, tässä tapauksessa aina numero ja teksti.

Esimerkissäni muotoilin yhden Repeater Field -kenttätyypin ja asetin sille käyttämässämme sivuston rakentajassa paikan, monistuu kenttä visuaalisesti ylläolevan kuvan mukaisesti. Näin asiakas tai sivun muokkaaja voi halutessaan lisätä tai poistaa faktoja ilman, että hänen tarvitsee osata sen enempää koodia tai sivuston rakentajan käyttöä.



Pro-versio tai ei, Advanced Custom Fields on erittäin tärkeä, kätevä ja uskaltaisin jopa sanoa, että korvaamaton lisäosa ja työkalu verkkosivustoja rakennettaessa. Sen avulla saadaan luotua dynaamisia sivuja ja jokaisen käyttäjän itse helposti lisättävää sekä muokattavaa sisältöä.

Näin Sinisellä Härällä tehdään verkkosivuja

Tervetuloa! Tässä artikkelissa käyn läpi, kuinka normaali verkkosivuprojektimme kulkee. Hahmottamisen helpottamiseksi tehdään esimerkkiprojekti Asiakas Oy:lle.

Ennen projektin aloitusta Asiakas Oy on määrittänyt verkkosivu-uudistukselleen selkeän tavoitteen. Jos tavoitteiden asettaminen aiheuttaa harmaita hiuksia, niin apua löydät esimerkiksi meidän ilmaisesta Verkkosivujen ostajan oppaasta.

  • Asiakas Oy
  • Yrityksen yhteyshenkilönä toimii Maria
  • Projektin keskeisimpänä tavoitteena on myynnin lisääminen yrityksen uusien verkkosivujen avulla ja referenssien entistä parempi esilletuonti

Tarjousvaihe

”Kiitos yhteydenotostasi!”, soitan Marialle hänen jätettyään yhteydenottopyynnön Leadoon loistavan chatbotin kautta. Tästä etenemme hänen kanssaan tarkempaan briiffiin verkkosivu-uudistuksen tarpeista ja tavoitteista. Ensimmäisessä palaverissa luonnollisesti myös esittäydytään puolin ja toisin.

Briiffistä viisastuneena lähetän Marialle kirjallisen tarjouksen sähköpostitse. Olemme briiffissä sopineet tarjouksen läpikäyntipalaverin noin viikon päähän ensimmäisestä palaverista. Tarjouksen läpikäynnin tarkoituksena on syventää asiakkaan ymmärrystä tarjouksesta, tarjottavista palveluista ja niiden hyödyistä. Läpikäynnin jälkeen tarjousta mahdollisesti tarkennetaan syvemmän yhteisen ymmärryksen saavutettuamme.

Kaikki projektiin liittyvät palaverit ja työpajat on mahdollista järjestää myös etänä.

Kuluu reilu viikko ja katson kalenteristani, että Maria on luvannut palata tarjoukseen tänään. Ilokseni iltapäivällä saankin puhelinsoiton, jossa Maria innoissaan kertoo, että he lähtevät ilolla tekemään verkkosivu-uudistusta yhteistyössä meidän kanssamme. ”Tervetuloa Sinisen Härän asiakkaaksi!”

Projektin kick-off

Kick-offin tavoitteena on, että kaikilla palaveripöydässä istuneilla on päivän päätteeksi selkeä käsitys siitä, miksi projekti aloitetaan ja kuinka se etenee.

Aikataulut on saatu asetettua yhteen ja sopiva aika projektin startille on löytynyt. Istumme alas Vallilan uuden toimistomme neuvotteluhuoneeseen pöydän notkuessa aamupalaherkkuja (kyllä, tämä on lupaus!).

Projektin kick-offiin osallistuu meidän puoleltamme koko toteuttava tiimi eli allekirjoittanut projektipäällikön ominaisuudessa, verkkosivujen tekninen toteuttaja sekä visuaalinen suunnittelija. Asiakkaan puolelta osallistujamäärää ei ole rajoitettu.

Kick-offin tavoitteena on tutustua koko projektitiimin voimin, kerrata projektin kulku, pohtia syvällisemmin projektin tavoitteita ja aloittaa rakenteen suunnittelu.

Palaverissa käydään luonnollisesti läpi myös verkkosivujen visuaalisuutta, haluttuja toiminnallisuuksia sekä asetetaan vastuualueet ja aikataulut tiimin kesken.

Vanhan sivuston läpikäynti, avainsanatutkimus, mahdollinen brändi-ilmeen uudistus ja niin edelleen

Ennen kuin projekti lähtee vauhdilla etenemään, on hyvä pysähtyä pohtimaan projektia tukevia osioita. Vanhan sivuston läpikäynti auttaa ymmärtämään, mitkä osiot ovat yrityksen näkyvyyden säilyttämiselle tai parantamiselle elintärkeitä, mitkä osiot ovat toimineet ja mitkä eivät.

Avainsanatutkimus kertoo, millä hakutermeillä yrityksen tuotteita ja/tai palveluita haetaan, millainen kilpailu kyseisillä hakutermeillä on ja kuinka paljon niitä keskimääräisesti haetaan.

Usein verkkosivuprojektin yhteydessä on tarvetta myös brändi-ilmeen uudistukselle ja sen paikka prosessissa on ehdottomasti tässä kohtaa!

Verkkosivujen käyttöliittymän suunnittelu

Verkkosivujen käyttöliittymän suunnittelu on tarkkaa työtä. Käyttöliittymän suunnittelulla ratkaistaan, minne ja miten verkkosivukävijää ohjataan sivustolla.

Periaatteessa käyttöliittymän suunnittelu on potentiaalisen asiakkaan ostoprosessin optimointia.

Vaikka käyttöliittymän suunnittelu on suurelta osin ajatustyötä, saa Maria ja Asiakas Oy lopputuotteena meiltä konkreettiset wireframing- eli rautalankamallit sivustosta. Näiden rautalankamallien tarkoituksena on mallintaa Asiakas Oy:n asiakkaan ostoprosessia ilman, että heitä häiritään vielä visuaalisilla elementeillä ja väreillä.

Verkkosivujen layoutien suunnittelu

Jes, taustatyö on tehty! Nyt päästään itse asiaan. Verkkosivujen layoutien suunnittelussa nuo aiemmin mainitut wireframing-mallit herätetään eloon.

Mitä kuvia käytetään? Hyödynnetäänkö videoita tai animaatiota? Minkä värinen call to action -painike tuottaa laadukkaita liidejä Asiakas Oy:lle? Millainen mobiiliversio sivustosta mallinnetaan? Näihin kaikkiin kysymyksiin saadaan vastaus prosessin tässä vaiheessa.

Verkkosivujen tekninen toteutus

Prosessin tässä kohtaa sininen viestikapula vaihtaa omistajaa eli vastuu projektin etenemisestä siirtyy visuaaliselta suunnittelijalta verkkosivukehittäjälle.

Me toteutamme räätälöityjä WordPress-verkkosivutoteutuksia. Meillä se tarkoittaa sitä, että loppuasiakkaan näkymän eli sen, miltä sivusto ulkopuolisille näyttää, lisäksi myös meidän asiakkaamme näkymää räätälöidään. Haluamme sivuston muokkauksen olevan asiakkaallemme helppoa ja vaivatonta, eikä se vaadi mitään koodiosaamista.

Jos ihminen osaa käyttää Facebookia, hän osaa käyttää myös meidän toteuttamaamme WordPress-verkkosivua.

Ensimmäisen kerran esittelemme asiakkaalle toiminnallista sivustoa teknisen toteutuksen puolivälissä. Tässä kohtaa siksi, että toiminnallisuuksia ollaan saatu vietyä pitkälle, mutta kommenttien ja korjausehdotusten perusteella muokkauksia voidaan vielä tehdä saman budjetin sisällä.

Tekninen toteutus sisältää myös paljon teknistä ja sisällöllistä hakukoneoptimointia, joista voit lukea lisää alla olevista linkeistä.

Lue lisää hakukoneoptimoinnista:

Verkkosivujen viimeistely ja avaus

Loppusuora häämöttää! Nyt viimeistelemme sivuston Asiakas Oy:n kommenttien mukaisesti. Tämän jälkeen varmistamme, että sivusto toimii moitteetta kaikilla verkkoselaimilla (kyllä, myös Internet Explorerilla), eri kokoisilla näytöillä ja eri laitteilla. Projektista riippuen tässä vaiheessa on hyvä myös testata sivustoa testikäyttäjillä.

Kun kaikki on valmista, sovimme Marian kanssa päivämäärän sivuston avaukselle, jonka hoidamme avaimet käteen -periaatteella. Viimeistelyn yhteydessä asennamme myös tarvittavat seurantatyökalut verkkosivuille.

Tässä vielä visuaalinen prosessikaavio avaamaan koko prosessia:

Jos uusi verkkosivusto kiinnostaa, laita sähköpostia tai moikkaa LinkedInissä.

Ps. Tämän jälkeen luonnollisesti hihat todella kääritään. Verkkosivu-uudistuksen jälkeen alkaa laadukas sisällöntuotanto, kohdennettujen kävijöiden ohjaus verkkosivuille ja sivuston jatkuva kehitys. Mutta se on eri tarina se… 😏

Lataa ilmainen verkkosivujen ostajan opas




Onko teidän yrityksessänne verkkosivu-uudistus käsillä? Siinä tapauksessa lataa ihmeessä ilmainen oppaamme. Opas on tehty auttamaan yrityksiä verkkosivujen ostamisessa ja siinä käydään läpi kilpailutuksessa huomioon otettavia asioita aina tarjouspyynnön laatimisesta toteuttajien vertailuun.

Lataa ilmainen opas!

Black hat SEO – Spam-linkkejä ja hyökkäys digitoimistoja vastaan

LinkedInissä tuli jokin aika sitten esiin, että Sinisen Härän ja monen muun suomalaisen digitoimiston sivustolle on ohjattu suuria määriä linkkejä. Yleensähän linkit ovat hakukonenäkyvyyden kannalta hyvästä, eikö vain? Tässä tapauksessa ainakaan tarkoituksenmukaisesti ei.

Ilmeisesti joku hyviä hakukonesijoituksia havitteleva toimisto on jostain kumman syystä päättänyt hyökätä näitä kaikkia linkkispämmäyksen kohteeksi joutuneita toimistoja vastaan.

Käytännössä linkkejä on todennäköisesti ostettu ja ohjattu kilpailevien toimistojen sivustoille. Linkkien tarkoitus on näyttää huonolta Googlen ja muiden hakukoneiden silmissä ja sitä kautta heikentää toimistojen hakukonenäkyvyyttä, jolloin linkkejä ostaneen toimiston SERP-tulokset (Search Engine Results Page) puolestaan paranisivat.

Linkit tulevat erilaisilta roskasivustoilta ja ovat meidän ja ilmeisesti muidenkin kohdalla olleet pääsääntöisesti no-follow-linkkejä. Samat käytännöt pätevät eri aloilla ja avainsanoilla, mutta tässä tapauksessa ankkuriteksteissä on käytetty pääsääntöisesti hakukoneoptimointiin ja markkinointitoimistoon liittyviä termejä.

Rel=”nofollow”-attribuutti lisätään yleensä automaattisesti blogien kommenteille ja muille vastaaville avoimille kentille, joihin voi suhteellisen helposti lisätä linkkejä. Google myös ohjeistaa käyttämään no-follow- tai sponsored-tagia esimerkiksi maksettujen linkkien yhteyksissä.

Mitä Google sanoo? Vaikuttavatko no-follow-linkit hakukonenäkyvyyteen?

Suurin osa näistä spam linkeistä on merkitty no-follow-tagilla ja Google itse sanoo käsittelevänsä niitä samalla tavalla kuin linkkien hylkääminen -työkalun (disavow backlinks) kautta syötettyjä linkkejä. Googlen mukaan no-follow-linkit eivät siis edes vaikuta hakukonenäkyvyyteen.

Googlen John Mueller kommentoi asiaa pariinkin otteeseen sanoen:

”…having links (even a large number of them) with rel=nofollow pointing to your site does not negatively affect your site. We take these links out of our PageRank calculations, and out of our algorithms when they use links.”

No-follow-linkkien vaikutus hakukonenäkyvyyteen tilastollisesti

Aiheeseen liittyen on tehty useampikin case study ja niiden tulokset ovat osittain ristiriidassa Googlen kertoman kanssa. On todettu, että myös no-follow-linkit nostavat näkyvyyttä siirtämällä link juicea sivustolta toiselle. Tämähän pätee tietysti niin hyvässä kuin pahassa. Kyseinen linkattu SEM-Rushin case study käsittelee no-follow-linkkejä eri näkökulmasta, tietoisessa näkyvyyden nostamisessa, mutta sama periaate pätee.

“…see what we discovered in our study about rankings and how backlinks are affecting them, and I promise you will look at nofollow links in a totally different light.”

– Adam White, SemRush

Olen itse yleensä aika kriittinen vastaaviin tutkimuksiin liittyen, sillä niin moni eri tekijä vaikuttaa SERP:iin ja on vaikea todentaa, onko asioilla todellinen yhteys. En siis sano, että tämän yhden case studyn perusteella uskon, että no-follow-linkit vaikuttavat hakukonenäkyvyyteen. Pointtini tässä on se, että haluan herättää ajatuksia siitä, vaikuttavatko no-follow-linkit hakukoneoptimointiin vai eivät. Suoraa 100-prosenttista vastausta tähän valitettavasti tuskin on, jos ei halua tyytyä Googlen uskomiseen.

Mitä Sininen Härkä tekee no-follow-linkeille?

Sanon aina asiakkaille, että Googlea ei kannata edes yrittää huijata. Mieti, millaiset resurssit Googlen kokoisella korporaatiolla on algoritmien kehittämiseen ja kuinka monta ihmistä (ja konetta) työskentelee estääkseen verkon väärinkäyttöä. Sanoisin, että tällaiset asiat huomataan Googlen toimesta ja niihin reagoidaan sen mukaisesti – ainakin aikanaan.

Sininen Härkä ei aio siis tehdä no-follow-linkeille mitään – paitsi kirjoittaa aiheesta artikkelin.

Sitten taas spam-linkit, joissa ei ole no-follow-tagia, kannattaa ilmoittaa linkkienhylkäämistyökalun avulla Googlelle. Tämän kanssa kannattaa olla varovainen eikä ilmoitella linkkejä huvikseen. En suosittelisi ns. turhien linkkien lisäämistä tälle listalle, vaan ainoastaan selkeästi spam-tarkoituksessa tehdyt linkit.

Jos haluat lukea tarkempia ohjeita aiheesta, Google on julkaissut tietoa viittaajan linkkien hylkäämisestä. Muistathan, että Google kuitenkin sanoo käsittelevänsä no-follow-linkkejä samalla tavoin, kuin ne olisi syötetty disavow-työkalun kautta.

Jos haluat sparrailla asiasta tai kertoa oman näkemyksesi, kommentoi ihmeessä alle tai laita viestiä!

10 käytännön esimerkkiä verkkosivustojen saavutettavuuden suunnittelusta

Verkkosivustojen saavutettavuus lienee sanapari, joka on kantautunut sinunkin korviisi lähiaikoina. Mitä verkkosivustojen saavutettavuus tarkoittaa käytännössä?

Tätä kysymystä olen pyöritellyt, pyrkinyt oppimaan aiheesta ja etsimään mahdollisimman paljon tietoa. Nostin artikkeliin käytännön vinkkejä ja esimerkkejä siitä, mitä WCAG 2.0 -standardi ja sen pohjalta luotu saavutettavuusdirektiivi tuovat mukanaan verkkosivustojen suunnitteluun.

Direktiivi koskee tällä hetkellä vain julkishallinnon verkkosivustoja, mutta koska saavutettavuus ja käytettävyys koskevat kuitenkin ihan jokaista verkkosivustoa, on asiaan hyvä perehtyä muidenkin sivustojen kohdalla.

Asia on nyt pinnalla monessa yhteydessä sen takia, että 23.9.2020 jälkeen verkkosivustojen tulee täyttää WCAG-saavutettavuusdirektiivin ehdot.   Saavutettavuusdirektiivi määrittelee, että sivustojen tulee olla myös saavutettavuutta tarvitsevien ulottuvissa.

Saavutettavuutta tarvitsevat esimerkiksi näkö-, kuulo- tai liikuntarajoitteiset. Yksinkertaistettuna saavutettavuus parantaa sivustojen käyttöä ihan kaikille, mutta erityisesti sellaisille käyttäjille, jotka käyttävät apunaan esimerkiksi lukulaitetta näkökyvyn vuoksi tai suunnistavat sivustolla pelkän näppäimistön avulla liikuntarajoitteen tai muun fyysisen rajoitteen takia.

Saavutettavuusdirektiivi on rakennettu neljän perusperiaatteen ympärille, jotka ovat seuraavat:

– Periaate 1: Havaittava – Informaatio ja käyttöliittymäkomponentit pitää esittää tavoilla, jotka käyttäjä voi havaita.

– Periaate 2: Hallittava – Käyttöliittymäkomponenttien ja navigoinnin pitää olla hallittavia.

– Periaate 3: Ymmärrettävä – Informaation ja käyttöliittymän toiminnan pitää olla ymmärrettävää.

– Periaate 4: Lujatekoinen – Sisällön pitää olla riittävän lujatekoinen, jotta se voidaan luotettavasti tulkita laajalla joukolla asiakasohjelmia, mukaan lukien avustavat teknologiat.

Saavutettavan verkkosivusuunnittelun lähtökohtana on tuoda sisältö ja tieto saataville riippumatta siitä, miten käyttäjä on sivuston kanssa vuorovaikutuksessa. Käytännössä kyse on melko simppeleistä asioista, eikä ihmeellisiä taikatemppuja vaadita.

1. Luettava selkokielinen teksti

Hyvä sisältö on avainasemassa verkkosivustolla, jonka avulla on tarkoitus tehdä myyntiä. Myyvä ja asiakasta palveleva teksti on jouhevaa, loogista ja vastaa asiakkaan ongelmiin.

Saavutettavuuden näkökulmasta hyvä myyntiteksti on selkokielistä ja helposti ymmärrettävää kaikille – myös niille, joilla on luetun ymmärtämisen tai esimerkiksi kyseisen asian termistön kanssa haasteita.

2. Sisältö myös tekstinä, ei vain kuvana

Tekstin on tärkeää olla koko sivustolla sekä mahdollisissa liitetiedostoissa luettavaa (lukulaitteella). Pelkät kuvat eivät tue saavutettavuutta ja videoissa on oltava tekstitys.

3. Esitä sisältö selkeässä hierarkiassa

Hierarkian tärkeydestä on kirjoitettu tässä blogissa jo aiemminkin (lue artikkeli ”8 periaatetta verkkosivu­suunnitteluun”), mutta myös saavutettavuuden näkökulmasta hierarkia on yksi tärkeimmistä asioista.

Sivustolla on tärkeää esittää asiat loogisessa järjestyksessä ja loogisesti skaalautuvassa järjestyksessä. Näin sisältö on helposti ymmärrettävää lukulaitteella luettaessa tai vain otsikoita selatessa.

saavutettavuus-blogiartikkeli-kuva-hierarkia

4. Värien ja kontrastien käyttö

Värin ei tulisi koskaan olla yksinään indikaattori interaktiiviselle elementille. Esimerkiksi tekstin seassa oleva hyperlinkki tulisi merkata myös alleviivauksella pelkän värin sijaan. Tällä tavoin mahdollistetaan elementtien huomaaminen myös rajoittuneemmin värejä näkeviltä.

Tekstin väriä määrittäessä on tärkeää huomioida tekstin ja pohjavärin kontrasti. Kontrastisuhteen suositellaan olevan leipätekstille vähintään 4,5:1 ja otsikkotekstille 3:1. Esimerkiksi tämä lukemasi tummanharmaa teksti valkoisella pohjalla on suhteeltaan 10,9:1. Kirkkaankeltainen teksti valkoisella pohjalla on taas kontrastisuhteeltaan vain 1,4:1, eli aivan liian vähän. Kontrastisuhteen tarkistamiseen on olemassa hyviä työkaluja, kuten tämä WebAIM:in.

saavutettavuus-blogiartikkeli-kuva-varit

5. Otsikointi ja muut tägit

Kun artikkeliin tai sisältösivulle lisätään väliotsikoita, on niiden tärkeää löytyä oikeiden otsikkotägien sisältä eikä olla esimerkiksi vain korostettu paksummalla kirjasimella. Näin lukulaitteillakin sisältö on helposti selattavaa.

Lukulaitteilla lukemista varten myös muun sisällön sijoittaminen täydellisiin tägeihin (esimerkiksi kappale sijoitetaan aina < p > </ p > tägien sisään) on merkityksellistä.

6. Lisää kuville aina alt-tekstit

Kuvalle voidaan sitä sivustolle lisätessä lisätä alt-teksti eli alternative text. Tätä on ahkerasti kuville lisätty jo pitkään hakukoneoptimoinnin nimissä, mutta tämä on saavutettavuudenkin silmissä tärkeää – mikäli sivustoa luetaan lukulaitteella, lukulaite ilmoittaa kuvan sisällön sellaisellekin, joka kuvaa ei voi nähdä.

7. Klikattavien elementtien riittävä koko

Klikattavien elementtien, kuten navigaation elementtien ja buttoneiden tulee olla tarpeeksi isoja, jotta kaikkien on mahdollista niihin tähdätä myös kosketusnäytöillä, kuten tableteilla.

8. Focus-efekti

Kun klikkaat linkkiä, niin ennen kuin käsky toteutuu (siirryt linkin mukana eteenpäin), linkin tulisi muuttua focus-tilaan. Tämä on pieneltä vaikuttava yksityiskohta hiirtä käyttävälle, mutta jos sivustoa käytetään pelkän näppäimistön avulla, on focus-tila ratkaiseva navigoinnissa.

9. Lomakkeiden otsikointi

Lomaketta rakentaessa lomakekentän ohje tulee sijoittaa otsikkoon, eikä vain lomakekentän ”sisään” paikkamerkiksi. Tässä kyse jälleen saavutettavuudesta värin ja lukulaitteella lukemisen puolesta.

saavutettavuus-blogiartikkeli-kuva-lomake

10. Anna käyttäjille tarpeeksi aikaa lukea ja käyttää tärkeää sisältöä

Erilaiset liike-efektit sivustoilla ovat koko ajan kasvussa, mutta tärkeän informaation tulisi aina olla sijoitettuna kiinteisiin elementteihin, jotka on tarpeen vaatiessa avattavissa ja suljettavissa.

Ei esimerkiksi ole riittävää, että verkkokaupan tilausvahvistus vilahtaa käyttäjälle automaattisessa pop-upissa sivustolla, vaan ikkunan tulee olla suljettavissa, jotta informaation ehtii lukea.

Lopuksi

Saavutettavien sivustojen suunnittelu on käytännössä hyvää ja inklusiivista designia, joka palvelee monenlaista asiakaskuntaa. Saavutettavuus parantaa kaikkien käyttökokemusta, eikä turhaan rajaa asiakkaista ketään ulkopuolelle. Sininen Härkä huomioi jatkossa jokaisessa projektissa pienet yksityiskohdat myös saavutettavuuden näkökulmasta.

Artikkelissa on käytetty lähteenä WGAC 2.0 -standardin lisäksi seuraavia sivustoja ja artikkeleita: https://saavutettavuusdirektiivi.fi, “Designing for accessibility is not that hard”, Pablo Stanley.

Lataa ilmainen verkkosivujen ostajan opas




Onko teidän yrityksessänne verkkosivu-uudistus käsillä? Siinä tapauksessa, lataa ihmeessä ilmainen oppaamme. Opas on tehty auttamaan yrityksiä verkkosivujen ostamisessa, ja siinä käydään läpi kilpailutuksessa huomioon otettavia asioita aina tarjouspyynnön laatimisesta toteuttajien vertailuun.

Lataa ilmainen opas!

Näytä