North Patrol on digipalvelujen ja tietojärjestelmien suunnitteluun erikoistunut konsulttitoimisto. Muotoilemme ideoista vision ja palvelukonseptin, löydämme parhaat arkkitehtuuri- ja teknologiaratkaisut, suunnittelemme toimivan käyttökokemuksen ja kilpailutamme ihannekumppanin toteutustyöhön. Emme myy toteutusprojekteja, emmekä lisenssejä, olemme aidosti asiakkaan puolella.
Verkkosivujen sisällöntuotannon tehtävissä tarvitaan yhä parempaa visuaalista silmää
Toivottavasti jokainen sisällöntuottaja on jo sisäistänyt sen prosessin, jolla kävijät tulevat verkkosivulle sivun sisällöistä nauttimaan: kävijä on kirjoittanut Googleen jonkin hakusanan, klikannut nopean arpomisen jälkeen jotakin hakutulosta ja putkahtanut yksittäiselle verkkosivulle internetin miljoonien sivujen joukosta.
Aivan ensimmäiseksi, ihan parin sekunnin aikana kävijä muodostaa jonkin mielipiteen siitä sivusta/sivustosta, jolle putkahti. Mielipiteen muodostamiseen saattaa vaikuttaa pari verkkosivulta silmään pistävää sanaa, mutta muutoin mielipide muodostuu täysin sivun ulkoasun ja muotoseikkojen perusteella. Se, miltä sivu näyttää, vaikuttaa vakavasti siihen, saako sivu lukijoita.
North Patrol on suunnitteluun erikoistunut konsulttitoimisto. Suunnittelemme, autamme teknologiavalinnoissa, kilpailutamme. Emme myy toteutusprojekteja, emmekä lisenssejä, olemme aidosti asiakkaan puolella.
Ulkoasun perusteella kävijä voi kokea sivun uskottavaksi ja luotettavaksi, tai sitten harrastelijamaiseksi, tai suorastaan filungilla ja tekoälyllä luoduksi, epäkiinnostavaksi aineistoksi. Voi syntyä mielikuva ammattimaisesta, osaavasta palveluntarjoajasta, tai ehkä vanhanaikaisesta, kotikutoisesta pikkutoimijasta.
Joka tapauksessa vierailija muodostaa silmänräpäyksessä mielikuvan siitä, onko tämä sivu, jota kannattaa edes ryhtyä katselemaan, vai painetaanko back-nappia välittömästi. Ja sitä back-painiketta käytetään tosi paljon.
Jos vierailija viitsii antaa sivullesi muutamaa sekuntia enemmän kallisarvoista aikaansa, ne sekunnit käytetään sivun skannaamiseen muutamalla nopealla silmän ja hiiren liikkeellä.
Sivun lukeminen silmäilemällä
Tutkimusten perusteella silmäilijän katse muodostaa joko F- tai Z-kuvion. Jos sivulla korostuu tekstimassa, teksti silmäillään väliotsikoita pitkin alaspäin skannaamalla (F-kuvio), ja jos sivu on pikemminkin visuaalisen hahmon muodostava kokonaisuus, näyttö vilkuillaan nurkasta toiseen skannaavalla silmänliikkeellä (Z-kuvio).
Verkkosivu silmäillään liikuttamalla katsetta kursorisesti sivun laidasta toiseen joko F-muodon tai Z-muodon muodostavilla silmän liikkeillä.
Tuon muutaman sekunnin F- tai Z-skannauksen aikana sivun pitäisi onnistua pysäyttämään vierailijan katse sellaisiin sanoihin, kuviin, linkkeihin tai muihin elementteihin, jotka vakuuttavat vierailijan siitä, että tämä kohta sivusta kannattaisi lukea tarkemminkin, tai että tästä kohdasta kannattaisi klikata.
Me emme voi muuttaa käyttäjää toisenlaiseksi: hän toimii joka tapauksessa juuri tällä tavoin hätäisesti skannaten. Mutta me voimme yrittää muotoilla verkkosivut siten, että tuon hätäisen skannaajan silmiin osuvat ne tiedot, jotka olisivat hänelle hyödyllisiä ja kannustaisivat paneutumaan sisältöön enemmänkin. Hätäinen silmäilijä pitäisi pystyä motivoimaan lukemaan viestiämme, ja hänen silmiänsä pitäisi ohjata löytämään ne paikat, joihin haluamme hänet ohjata.
Tuo kävijän ohjauspolku luodaan verkkosivun taitolla ja sisältöelementtien muotoilulla siten, että kävijä hahmottaa sivun tiedot nopeasti, erottaa helposti olennaisen epäolennaisesta ja löytää tiensä niiden linkkien luokse, joita kannattaa seuraavaksi klikata.
Visuaalinen hierarkia osoittaa kohdat, joihin kannattaa pysähtyä
Miten sivulta sitten erottuu se tärkeä viesti vähän vähemmän tärkeästä, tai ne olennaisimmat kohdat muusta massasta? Osoittamalla ne visuaalisen hierarkian avulla eli käyttämällä visuaalisia muotoilukeinoja, jotka ohjaavat vierailijan katsetta ja helpottavat elementtien painoarvon tulkintaa.
Sivun taitto ja visuaalisten elementtien tasapainoisuus on tietysti sitä tonttia, josta vastaavat ammattimaiset graafikot ja käyttöliittymäsuunnittelijat. Mutta nykyaikaiset, lohkopohjaiseen taittoon perustuvat julkaisujärjestelmät — suositun WordPressin Gutenberg-editori eritoten — antavat rivisisällöntuottajille entistä vapaammat kädet sivupohjien taittoon. Niinpä jokaisesta sisällöntuottajasta on tullutkin ”taitto-ohjelmiston” käyttäjä ja verkkosivujen muotoilija.
Verkkosivujen taiton ja visuaalisen hierarkian onnistumisesta ei siis enää vastaakaan ilmeen luonut Art Director, vaan jokainen sisällöntuottaja. Verkkosivujen sisältöjen koostaminen vaatii entistä enemmän taitoja ja pelisääntöjä, joiden avulla sivusto säilyy eheänä, seurattavana ja käyttäjäystävällisenä. Yhteisiä sisältömuotoilun pelisääntöjä tarvitaan siihen, että verkkosivuston kaikki sivut puhuvat samaa kieltä ja noudattavat yhteistä strategiaa.
Silloin kun ammattilainen on luonut ”sivupohjan” määrämuotoisille sivuille — esimerkiksi tuotesivuille tai henkilöesittelyille — on niihin tavallisesti suunniteltu tasapainoiset paikat funktioltaan erilaisten sisältöjen julkaisua varten: tässä on tuotekuva, tässä referenssitarinat, tässä tekniset yksityiskohdat pienellä präntillä, tässä tilausohjeet. Tällaisia sivuja kenen tahansa sisällöntuottajan on helppoa monistaa, kun taiton säännöt ovat selvät.
Mutta heti kun sisällöntuottaja saa vapaasti muotoilla sisältösivunsa tai laskeutumissivunsa ja käyttää julkaisujärjestelmän koko lohkoarsenaalia, joutuu siinä miettimään, minkänäköistä elementtiä kannattaisi käyttää minkäkinlaisen asian viestimiseen. Vaikka sivuilla ei olisi määrämuotoista ”sivupohjaa”, on niiden noudatettava keskenään samanlaista logiikkaa, ja tiettyä elementtiä on käytettävä sivustolla säännönmukaisesti samalla tavalla. Vain näin käyttäjät voivat ymmärtää ja oppia sen, mikä esitystapa sivustolla tarkoittaa mitäkin.
Asiantuntijatukea sisältöjen muotoiluun
Onnistuneiden verkkosivujen aikaansaaminen edellyttää sitä, että kaikki sisältötyö kutoutuu yhteen eheäksi palveluksi: sisällöt on valittu ja rajattu strategisesti oikein, sisältöjen konsepti ja viestinnälliset tavoitteet on mietitty, sisältöjen rakennehierarkia ja informaatioarkkitehtuuri tukee kokonaisuuden hahmotettavuutta, ja verkkosivujen sisältötekstit ohjaavat lukijaa oikeaan suuntaan käyttäjäpolulla.
Sisältöjen suunnittelu on North Patrolin konseptisuunnittelijoiden ydinosaamista, joten voimme olla apunasi löytämässä ratkaisut, joilla sisältökokonaisuus palvelee sekä strategiaa että käyttäjiään.
Jokaiselle verkkosivustolle on suunniteltava sivustokohtaisesti sen oman sivutyypit ja esitystavat, mutta visuaalisen hierarkian yleiset pelisäännöt koskevat kaikkia sivustoja. Olen nostanut tähän esille kaikkein yleisimmät, joka sivustolla mielessä pidettävät visuaalisen hierarkian kysymykset.
Verkkosivut saavat olla pitkiä, ja niillä saa olla paljon asiaa. Käyttäjät vierittävät tottuneesti alaspäin pitkiäkin sivuja — niin pöytäkoneella kuin kännykälläkin. Eli lukijalle on selkeämpää saada yhtä asiaa koskeva tieto yhdeltä pitkältä sivulta kuin viideltä lyhyeltä sivulta.
Mutta koska käyttäjät eivät lue sivuilta jokaista virkettä, vaan skannaavat ja hahmottavat sitä silmäillen, olisi tärkeää osoittaa visuaalisesti sivun rakennerunko: milloin asia muuttuu toiseksi, tai millaisista osioista sivu koostuu.
Visuaalisen hierarkian keinoin asian vaihtuminen toiseksi voidaan osoittaa tekstikappaleiden etäisyydellä toisistaan sekä väliotsikoinneilla. Jos verkkosivusi asiasisältö koostuu vaikkapa kolmesta erityyppisestä teemasta, jätä teemasta toiseen siirryttäessä sisältötekstien väliin erityisen suuri väli.
Tai osioilla voi olla toisistaan poikkeava taustaväri: kun väri sivun tekstien taustalla vaihtuu toiseksi, jokaiselle lukijalle on selvää, että nyt siirrytään erityyppiseen asiaan.
Visuaalisen hahmottamisen periaatteiden mukaan lähellä toisiaan olevat tekstit ja elementit kuuluvat yhteen, ja visuaalinen etäisyys erottaa myös teemoja toisistaan. Näin tekstimassasta erottuva iso väli osoittaa, että nyt siirrytään asiasta toiseen.
Esimerkkejä keinoista erottaa osiot toisistaan: tyhjä tila, erotinviiva tai vaikkapa taustaväri.
Uuteen asiaan siirtymistä korostaa se, jos uusi teema aloitetaan erityisen suurikokoisella väliotsikolla. Tekstien koko ja kokoerot ovat visuaalisen hierarkian tukijalka: isompi tai lihavampi teksti on tärkeämpää, pienempi ja ohuempi vähemmän tärkeää. Suurikokoiset väliotsikot tulevat luetuiksi verkkosivulta, muut leipätekstit paljon harvemmin.
Turhan usein pitkätkin sivut väliotsikoidaan käyttämällä vain yhtä otsikkotyyliä — sitä h2-otsikkotasoa — eikä väliotsikoille anneta enempiä hierarkioita. Kun kaikki väliotsikot ovat samankokoisia, ei silmäilyssä muodostu eroja tekstin osioiden välille. Niinpä tekstipainotteisella sivustolla kannattaisi tarkistaa otsikkotyylien kirjoa ja niiden hyödyntämistä sivujen visuaalisen hierarkian muodostamiseksi.
Otsikkotekstien koon ja tekstikappaleiden tyhjän tilan lisäksi osioita voi erottaa toisistaan muillakin visuaalisilla erottimilla, esimerkiksi väliviivoilla. Yhden asian ja toisen asian välinen ero osoitetaan konkreettisella rajaviivalla (tai muunlaisella erottimella). Voi se viiva olla väliotsikonkin alla — jonkin tuollaisen tyylivariaation voi keksiä olennaisille väliotsikoille.
Esimerkkejä erityyppisistä viivaelementeistä erottamassa sivun osioita toisistaan.
2) Linkkihierarkia
Verkkosivun skannaajan silmään tarttuvat linkit, koska ne ovat muusta leipätekstistä erottuvaa tekstiä. Visuaalisen hierarkian periaatteissa väri ja kontrasti on koon ja sijainnin rinnalla keskeinen katseen ja tulkinnan ohjaamisen väline: väriltään erottuvat, kirkasväriset tai muutoin muuhun sisältöön kontrastin luovat elementit pistävät silmään ja vetävät katsetta puoleensa.
Kun leipäteksti on tyypillisesti mustaa tai harmaansävyistä, pistää linkkiteksti silmään, kun se on väriltään jotakin muuta, kirkassävyistä tekstiä. Linkkitekstin alleviivaus tehostaa linkin erottuvuutta, koska viivat ohjaavat katsetta (vaikka alleviivaus vähän heikentääkin linkkitekstin luettavuutta).
Kun linkistä halutaan tehdä oikein erottuva, siitä kannattaa muotoilla nappi (eli painike). Napin muodossa tarjottuun linkkiin saa paljon visuaalisen hierarkian erottuvuusviestejä: suurikokoista ja/tai lihavoitua tekstiä, kirkkaan kontrastivärin ja tyhjää tilaa ympärille.
Linkkinappi erottuu visuaalisesti ja korostaa sivun tärkeimpiä linkkejä. Muut linkit ovat tavallisia tekstilinkkejä, jotka erottuvat värin ja alleviivauksen avulla. Luettelosta on helppoa erottaa, mihin yksi linkki loppuu ja uusi alkaa.
Mutta napin erottuvuus toimii vain, jos keinoa käyttää maltillisesti: jos verkkosivulla on 15 eriväristä (tai samanväristä) linkkipainiketta, ei niistä mikään erotu eikä vedä katsetta puoleensa. Päinvastoin, liiallinen räikeiden elementtien viljely tuottaa rauhattoman ja luotaantyöntävän vaikutelman, jossa kukaan ei halua klikata mitään.
Tästä syystä sisällöntuottajan täytyy onnistua priorisoimaan sivunsa linkit. Mitkä linkit olisivat rauhallisia tekstilinkkejä, jotka ohjaavat lukemaan lisää siitä aiheesta, josta juuri annettiin alustava esittely? Mitkä olisivat ne tärkeimmät linkit, joiden klikkaamiseen käyttäjää halutaan ohjata? Nämä olisivat niitä toimintokehotteita (call to action eli CTA), joita tavallisesti esitetään nappeina.
Lukuisten keskenään samanarvoisten linkkien ryhmä kannattaa tehdä vaikkapa luettelon muotoon, jolloin listasta erottuu se, mihin yksittäinen linkki päättyy ja mistä uusi alkaa.
3) Kuvan käyttö
Kuva on vahva huomion herättäjä, koska tekstimassan seasta jokaisen käyttäjän silmät hakeutuvat kuvan luokse. Niinpä kuvan lähellä olevat tekstit tai linkit tulevat paremmin huomatuiksi kuin tekstimassaan kätkeytyvät.
Tämänkin tehokeinon käytössä on hillittävä itseään, jotta keino säilyttäisi tehonsa. Jos sivulla on iso kasa kuvia, ei mikään niistä vedä katsetta puoleensa, vaan ne kilpailevat huomiosta ja luovat levottoman vaikutelman.
Sisällöntuottajalle tulee helposti ahnaus käyttää sivulla paljon kuvia, koska ne ovat virkistäviä ja sivua elävöittäviä elementtejä – omaan silmään kuvat ovat kivoja ja jotenkin ”raikkaampia” kuin tylsä tekstisisältö.
Mutta käyttäjä ei ole tullut verkkosivuille katselemaan kuvia (paitsi jos on kyse kuva-albumista tai todellisesta tuotekatalogista). Käyttäjä haluaa löytää tietyn etsimänsä sivun, tiedon tai palvelun, ja sen löytämiseksi linkkisanat toimivat useimmiten paremmin kuin kuvat.
Jos kyse ei ole nimenomaisesta tuotekatalogista, kannattaa sivulla hyödyntää vain muutamaa valittua kuvaa ohjaamaan kävijän katsetta kaikkein tärkeimpien sisältönostojen pariin.
Sisällöntuottajan tehtävä on auttaa käyttäjää löytämään ne tiedot, joita tämä kaipaa. Verkkosivulla kannattaa mieluummin käyttää paria hyvin valittua kuvaa kuin pussillista rinnakkain aseteltuja kuvia. Kuvilla korostetaan sivulta niitä kohtia, joihin lukijan katsetta halutaan ohjata. Tuohon kohtaan sisällöntuottajan pitäisi asettaa strategisesti tärkein viesti tai linkki.
Itsehillintää visuaalisten elementtien käyttöön
Kun sisällöntuottajat ovat saaneet käyttöönsä nykyaikaisten julkaisujärjestelmien rikkaat ja monipuoliset lohkoelementit, uhkaa sivujen taitto riistäytyä käsistä: sivuista syntyy turhan helposti sekavia sillisalaatteja, joissa palstoituksia ja erinäköisiä elementtejä käytellään levottomasti ja silmiä särkevästi.
Periaate taittolohkojen valinnassa on voinut olla hyvinkin järkevä: kun sivulla esitellään vaikkapa kolme samanarvoista vaihtoehtoa, on ne muotoiltu ”kolme palstaa”-lohkoelementillä. Mutta kun samalla sivulla on esittelyssä myös muita rinnakkaisia vaihtoehtoja, ja markkinointitekstejä, tai kuvan ja tekstin yhdistelmiä, saattaa kutakin elementtiä varten perustellusti valittujen lohkojen kirjo muodostaakin yhdessä kokonaisuuden, jota on todella vaikea seurata ja hahmottaa. Visuaalista hierarkiaa asioiden välisillä suhteille ei synny.
Tässä karkeassa havainnollistuksessa yritetään demonstroida sitä, kuinka verkkosivun elementtien välille joko syntyy visuaalinen hierarkia tai ei synny. Vaikka sisällöntuottajan silmään toisteinen ja yksinkertainen sivu näyttäisi tylsältä, se on lukijalle seurattavampi ja ymmärrettävämpi.
Kyllähän yhdelle verkkosivulle mahtuu paljon erilaisia elementtejä. Ja tyypillisesti käyttäjä näkee niistä vain pienen osan kerrallaan. Mutta todennäköisimmin sivusta tulee tasapainoisempi, jos sillä ei ole käytetty hillittömästi erityyppisiä elementtejä. Ja tämä pätee niin ”tavalliseen sisältösivuun” kuin laskeutumissivuunkin.
Ja elementeissä, joita sivulla käytetään osoittamassa asioiden välistä tärkeysjärjestystä, on syytä hyödyntää visuaalisen hahmottamisen sääntöjä. Tärkeimmät asiat näytetään:
Jos epäilet, että oman verkkosivustosi visuaalinen hierarkia ei ole ihanteellisesti käyttäjän katsetta ohjaava, on tilanteeseen tavallisesti löydettävissä helposti toteutettavia korjauksia.
North Patrolin konsultointityössä voidaan verkkosivuilta tunnistaa ongelmakohtia ja keksiä niille ratkaisuja. Voimme pitää työpajoja, joissa ratkaisuja etsitään yhdessä, ja sisällöntuottajille pidämme valmennuksia, joissa hyvän sisältömuotoilun periaatteet jalkautetaan.
PS. Sinua voisi kiinnostaa tulossa oleva ilmainen webinaarimme:
Askelmerkit tietojärjestelmäuudistukseen: isot päätökset, reittivaihtoehdot ja määrittelyn startti (13.5.2026 klo 10:00).
Ilmoittaudu webinaariin
FM Virpi Blom on verkkopalvelustrategioiden, käyttökokemuksen ja palvelukonseptien asiantuntija. Virpi konsultoi asiakkaitaan strategisten linjausten, konseptoinnin, määrittelyn ja suunnittelun kysymyksissä. Hänen erityisosaamistaan on verkkopalvelujen hyötyodotusten kirkastaminen, positiivisen käyttäjäkokemuksen varmistaminen sekä hankittavien ratkaisujen konseptointi ja määrittely siten, että niin loppukäyttäjien kuin ylläpitäjienkin tarpeet täyttyvät.
Virpin 25-vuotinen kokemus verkkopalvelujen suunnittelusta sisältää satojen internet-, intranet- ja extranet-palvelujen määrittelyä, suunnittelua, toteutusta, käytettävyystestausta ja kehittämistä. Aiemmissa työpaikoissaan hän on mm. toiminut johtavana konsulttina, konsultoinut verkkopalvelujen suunnittelua ja toteutusta lukuisissa eri rooleissa ja vetänyt User Experience -tiimiä.
North Patrolin sisällönsuunnittelupalvelut auttavat varmistamaan, että verkkopalvelusi sisältö on strategista, käyttäjälähtöistä ja vaikuttavaa. Tarjoamme tukea kaikissa sisällönsuunnittelun vaiheissa: liiketoiminnan tavoitteiden kirkastamisesta ja käyttäjien tarpeiden kartoituksesta aina sisältöjen tuotantoon ja jatkuvaan kehittämiseen.
Meitä on yhdeksän konsulttia, kaikki kokeneita suunnittelijoita tai teknologia-asiantuntijoita. Joka vuosi viemme läpi yli 40 projektia, joissa autamme hankkeensa eri vaiheissa olevia asiakkaitamme luomaan uusia digipalveluja ja tietojärjestelmiä. Asiakkaamme ovat olleet erittäin tyytyväisiä työhömme (arvosana 9,5/10), ja monet heistä palaavat asiakkaiksi yhä uudestaan.
Olemme apunasi, kun kaipaat laadukasta vaatimusten määrittelyä, sopivimman konseptin ja ratkaisun muotoilua, tarjouskilpailun läpivientiä tai toteuttajan valvontaa ja apua testaukseen.
Olemme erikoistuneet digipalveluiden suunnittelutyöhön ja laadukkaaseen vaatimusmäärittelyyn. Tehtävämme on auttaa asiakkaita onnistumaan hankkeissaan luomalla mahdollisimman hyvät lähtökohdat toteutusvaiheelle – oli sitten kyse ketterästä toteutuksesta omalla tiimillä tai kumppanin kanssa tehtävästä hankkeesta tai julkisesti kilpailutettavasta urakasta.
Kokemuksen tuomaa tietoa päätöksentekoon
Me emme myy koodausta emmekä lisenssejä. Moni teknologiakonsultti suosittelee asiakkailleen teknisiä ratkaisuja, joita sama talo myös toteuttaa. Meillä tätä vinoumaa ei ole. Tavoitteena on aina löytää asiakkaalle parhaiten soveltuva ohjelmistoratkaisu, oli se sitten räätälöity ratkaisu, saas-palvelu, avoimen lähdekoodin alusta tai näiden yhdistelmä.
Projekti etenee aikataulussa
Toimeksiannoillemme sovitaan aina konkreettinen lopputuotos, jonka avulla asiakas pääsee hankkeessaan eteenpäin. Hioutuneiden menetelmiemme ja kokeneiden konsulttiemme ansiosta pystymme tuottamaan sen tehokkaasti, yllättävän vähäisillä työmäärillä, ja rahallesi syntyy vastinetta. Me myös pidämme huolen, että oma organisaatiosi tekee päätöksiä sovitussa aikataulussa ja dokumentit valmistuvat annetuissa työmäärissä.
