Perjantaina, 9.4.2021

Sisällön ja avaruuden merkitys verkkosivujen käyttökokemuksessa

Miksi sisältöä ei ole aseteltu tiiviimmin? Tämä on kysymys, jonka kuulen usein palavereissa. Kysymys, johon on lopulta hyvin yksinkertainen vastaus. Avaruus, eli sisällön selkeä ja ilmava jaksottaminen nostaa käyttäjälle verkkosivujen ydinsisällön selkeästi paremmin valokeilaan ja sen myötä yksinkertaisesti tehostaa konversiota, joka tuo sinulle liidejä.

Miksi sisältöä ei ole aseteltu tiiviimmin? Tämä on kysymys, jonka kuulen usein palavereissa. Kysymys, johon on lopulta hyvin yksinkertainen vastaus. Avaruus, eli sisällön selkeä ja ilmava jaksottaminen nostaa käyttäjälle verkkosivujen ydinsisällön selkeästi paremmin valokeilaan ja sen myötä yksinkertaisesti tehostaa konversiota, joka tuo sinulle liidejä. Se tekee siinä sivussa verkkosivuistasi myös saavutettavamman sekä visuaalisesti selkeämmän ja tyylikkäämmän.

Kyse on siis varmasti monelle suunnittelijalle tutusta termist√§ ‚Äúwhite-space‚ÄĚ. Suomeksi valkoinen tila, tyhj√§ tila, ilmavuus tai kuten itse sen varsin nokkelasti muotoilin; avaruus. (Kiitos Sein√§joen uudistetun br√§ndin suunnittelijoille ‚Äúavaruuden p√§√§kaupunki‚ÄĚ -sloganin oivalluksesta, oli lainattava t√§h√§nkin tarkoitukseen.)

Korostan, ett√§ white-spacella ei tarkoiteta kirjaimellista valkoista aluetta, vaan sit√§ tyhj√§√§ tilaa, joka j√§tet√§√§n ns. hajurakona muihin sivun elementteihin. 

Analyyttisenä ihmisenä rakastan pohtia, kuinka verkkosivujen suunnittelussa sisällön sisäistämisestä tehdään käyttäjälleen tehokkaampaa ja vaivattomampaa. Aloitetaan kuitenkin ensiksi muistelemalla vanhoja aikoja ja miten paljon ajat ovat muuttuneet. Tervetuloa Karin avaruusmatkalle!

Ennen kaikki oli par… erilaista

Muistelen edelleen kauhulla, kun vuosituhannen alussa l√§hes jokaisen verkkosivun etusivu oli t√§ynn√§ sis√§lt√∂√§; oli puhelinnumeroa, lomakkeita, palvelu- ja yrityskuvausta, myyj√§n yhteystietoa ja kuvia, joskus jopa linkkilistoja. 

Kaikki n√§m√§ olivat usein ahdettu ‚Äúabove-the-foldiin‚ÄĚ, eli sille alueelle, joka n√§yt√∂llesi aukeaa ensimm√§isen√§ kun sivustolle saavut. Edes responsiivisuudesta ei tuolloin ollut tietoakaan, koska mobiililaitteet eiv√§t olleet sill√§ tasolla, ett√§ verkkosivuja olisi mobiililaitteilla selailtu. Sen vuoksi vaatimus ‚Äúhaluan kaikki n√§kyviin heti alkuun‚ÄĚ -ajattelutapa oli jo alkujaan varsin mahdoton, sill√§ responsiivisuuden puutteen vuoksi sen toteuttaminen ei yksinkertaisesti ollut mahdollista tehd√§ jokaiselle k√§ytt√§j√§lle toimivaksi, johtuen eri n√§ytt√∂koista/resoluutioista.

Teknologian kehitys muutti verkkosivujen suunnittelun suunnan

Onneksemme laitteisto- ja verkkoteknologioiden kehitys on tuonut sittemmin k√§ytt√§jiin ja heid√§n k√§ytt√§ytymiseen valtavan muutoksen 15 vuoden aikana. On tutkittu, ett√§ k√§ytt√§j√§t jopa pit√§v√§t siit√§, kun p√§√§sev√§t rullailemaan sivustoa yl√∂s-alas. Kyseisest√§ tutkimuksesta on aikaa viitisen vuotta, joten ei tarvitse olla √§lykk√∂ ymm√§rt√§√§kseen kuinka tilastot ovat noista ajoista jopa moninkertaistuneet. 

Muutosta kaiken kaikkiaan ovat tukeneet mm.

  1. Nopeammat internetyhteydet, jotka tukevat laadukkaampaa sisällöntuotantoa suurine kuvineen ja videoineen
  2. Laitteistojen ja web-teknologioiden kehitys
  3. Laajamittaisesti räätälöitävät sisällönhallintajärjestelmät (mm. WordPress)
  4. Mobile First -ajattelutapa verkkosivujen suunnittelussa
  5. Ohjelmistojen kehitys, joka antaa suunnittelijoille lähes rajattoman vapaat kädet toteuttaa itseään ja luoda asiakkaalle moderneja ja saavutettavia visuaalisia ratkaisuja

N√§iden ansiosta en√§√§ ei ole todellakaan tabu jaksottaa sis√§lt√∂√§ rohkeasti ns. foldeihin, eli sill√§ hetkell√§ n√§yt√∂ll√§ n√§kyviin yksitt√§isille asiasis√§ll√∂ille omistettuihin osioihin. N√§in k√§ytt√§j√§ saa rauhassa lukea sen kevyen tekstim√§√§r√§n esimerkiksi myyntik√§rjist√§si. Katse ei n√§in l√§hde harhailemaan ymp√§riins√§ massiivisessa sis√§lt√∂√§hkyss√§. 

‚ÄúSivuston rullailu on jatkumoa, klikkaus on p√§√§t√∂s.‚ÄĚ

Josh Porter

Vanhassa 2000-luvun alun mallissa käyttäjä ei välttämättä löytänyt sisällön sekamelskasta sitä todellista myyntikärkeäsi, eikä sisällön sekamelska (myös selkeä käyttäjäpolkujen puute) edesauta konversiossa. Pahimmassa tapauksessa käyttäjä sulkee välilehden ja jatkaa matkaa kilpailijallesi, todennäköisesti siihen seuraavaan Googlen hakutulokseen yrityksesi jälkeen.

Siksi onkin tärkeää antaa käyttäjän päättää, mitä informaatiota hän sivuilta haluaa sillä hetkellä lukea ja kuinka tämä ohjataan hallitusti päätepisteeseen, josta konversio tapahtuu.

Avaruudella ja sitä tukevilla sisältölohkoilla annat käyttäjälle mielenrauhan

Mistä tässä kaikessa on käytännössä siis kyse? Kyse on sisällön ja verkkosivujen rakenteen tasapainosta, jossa sisältöä paloitellaan mahdollisimman helppolukuiseksi ja jossa eri sisältöosioiden ja -lohkojen välille jätetään rohkeasti tyhjää tilaa. Samalla tällä parannetaan käyttäjän kykyä sisäistää luettu asia entistä tehokkaammin.

Ajatellaan asiaa vertauskuvallisesti vaikka niin, että koitat laskea numeroita ääneen ystävällesi sadasta nollaan. Ystäväsi laskee niitä samanaikaisesti ääneen nollasta sataan. Meneekö sekaisin? Erilaisten, toisiinsa liittymättömän informaation tulva aiheuttaa käyttäjälle luotaantyöntävää tunnetta.

Avaruuden käytön todellinen osaaminen vaatii kuitenkin suunnittelijalta ymmärrystä myös sisällöntuotannon suuntaan, ottamalla huomioon useat erilaiset sisältölohkojen tarpeet ja tekemällä yhteistyötä itse sisällöntuottajan kanssa, joka on samalla aaltopituudella nykyajan verkkosivujen suunnittelun lainalaisuuksista. Jos puhdasta sisällöntuottajaa ei ole, tämä prosessi käydään asiakkaan kanssa tarkasti läpi, eli mitä, millaista ja kuinka pitkää sisältöä mihinkin sisältölohkoon on suositeltavaa syöttää.

Sisällön ja lohkojen suunnittelu ei ole aivan itsestään selvä homma. Millaista sisältöä asiakas tuottaa tulevaisuudessa? Tukeeko suunnitellut sisältölohkot uutta sisältöä? Joskus sivuston julkaisun jälkeen asiakkaan on kuitenki tarve saada täysin uusia sisältölohkoja, jotka tukevat uutta ja erilaista sisältöä. Homma pyöräytetään tuolloin luonnollisesti jatkokehityksen työlistalle.

Miten sisällön ja lohkojen kanssa siis kaadutaan tai marssitaan voittoon?

Kuten siis todettua, pelkästään selkeällä sisällön jaksottelulla ei juhlita onnistumista, sillä yhtä suuri merkitys on sivuston sisällöllä. Alle olen listannut syitä miten verkkosivujen uudistuksessa voidaan epäonnistua ja onnistua näiden saralta.

Epäonnistunut toteutus syntyy, jos

  1. Suunnittelija ei hahmota mikä asiakkaan sisällöstä on oleellista nostaa selkeästi jalustalle
  2. Yhteisty√∂ sis√§ll√∂ntuottajan kanssa ei onnistu toivotulla tavalla. Esimerkiksi sovituista asioista ei pidet√§ kiinni ja sis√§lt√∂lohkot eiv√§t tue tuotettua sis√§lt√∂√§. 
  3. Erilaisia sis√§lt√∂lohkoja ei ole suunniteltu tarpeeksi monimuotoiselle sis√§ll√∂lle (ts. sis√§lt√∂lohkovaihtoehdot ovat puutteelliset eri tyyppisille sis√§ll√∂ille). 
  4. Verkkosivuilla ei ole mink√§√§nlaisia ‚Äúlinjauksia‚ÄĚ. V√§listykset heittelev√§t, fonttikoot ovat niin ja n√§in, yhdenmukaisuutta ei l√∂yd√§ suurennuslasillakaan. N√§m√§ ovat usein ongelmia mm. Elementor-toteutuksissa, joissa sis√§lt√∂lohkojen m√§√§r√§ voi l√§hte√§ t√§ysin lapasesta. Kyll√§, se voi olla my√∂s ongelma, jos asiakkaalla on k√§yt√∂ss√§√§n liikaa lohkovaihtoehtoja ja aiheuttaa sivustolle suuria ep√§johdonmukaisuuksia.
  5. Käyttäjäpolkuja ei ole rakennettu kohderyhmiä ajatellen.

Onnistunut toteutus syntyy, kun

  1. Suunnittelija osaa suunnitella sisältölohkot sisältökeskeisesti niin, että se herättää käyttäjässä kiinnostusta ja johtaa konversioon selkeiden käyttäpolkujen kautta
  2. Yhteistyö sisällöntuottajan kanssa kulkee käsikädessä; sisältö ja sisältölohkojen rakenteet tukevat jämäkästi toinen toisiaan
  3. Sis√§ll√∂n rakenneratkaisut ovat monimuotoisia ja mahdollistaa asiakkaan rakentaa sivut itse ilman, ett√§ rakenne ‚Äúr√§j√§ht√§√§‚ÄĚ tai n√§ytt√§√§ vajavaiselta (Huom. Monimuotoiset sis√§lt√∂lohkot kuuluvat jokaiseen toteuttamaamme sivuston perusominaisuuksiin.)
  4. Käytetään mm. yhdenmukaisia välistyksiä eri sisältölohkojen välillä ja niiden sisällä (huom. eli avaruutta). Nämä ovat usein asiakkaalle melko näkymättömiä asioita, tai asioita joita ei tule ajatelleeksi. Suunnittelijalle ne ovat kuite