Jos menemme takaisin julkaisemisen alkuaikoihin, saamme termin ”above the fold” terminä, jota käytettiin sisällöstä, joka ilmestyi sanomalehden etusivun ylimmälle puoliskolle. Taiton yläpuolella oleva sisältö näyttäytyi lukijoille näkyvimpänä, ja tarttuvia otsikoita ja eloisaa kuvamateriaalia käytettiin yleisesti kiinnittämään lukijoiden huomio toivoen, että kun he kävelivät lehtikioskin ohi, se saisi heidät ostamaan lehden.
Nyt nopeasti eteenpäin siirtymiseen aperista digitaaliseen, kun samat kustantajat siirsivät liiketoimintaansa printistä verkkoon. Verkkosuunnittelun kehittyessä 1990-luvun alkupuolelta lähtien termi jatkoi tarttumistaan. Mitä ”taiton yläpuolella” tarkoittaa kotisivuillasi? Ja onko sillä yhä väliä vuonna 2019?
Miksi Above The Fold on tärkeä kotisivulleni?
Digitaalisen markkinoinnin aikakaudella taitto ei enää viittaa varsinaiseen taittoon sanomalehdessä, vaan se viittaa sisältöön, joka ladataan ensimmäisenä, kun vierailet verkkosivustolla, ja joka kiinnittää huomiosi ja vetää sinut sisään.
Verkkosuunnittelun maailmassa, jossa huolehdit sisällön sijoittelusta ja asettelusta, koska taiton yläpuolella oleva sisältö on se, mikä on ensimmäisenä näkyvissä verkkosivun kävijän ladatessa sivun. Tuo sisältö on ensisijainen kiinteistö, joka saa suurimman osan sivustosi kävijöiden huomiosta, ja käyttäjäkokemuksen tulisi heijastaa tätä. Jakob Nielsen arvioi, että ”…verkkokäyttäjät käyttävät 80 prosenttia ajastaan sivun yläpuolella olevien tietojen tarkasteluun. Vaikka käyttäjät selaavat nykyään enemmän, he kiinnittävät edelleen vain 20 prosenttia huomiostaan taiton alapuolelle.”
Ensin sinun on kysyttävä itseltäsi, mikä on tärkeintä sisältöä, joka auttaa minua saavuttamaan liiketoimintani tavoitteet.
Kun olet vastannut tuohon kysymykseen, tiedät, mitä sijoittaa tuolle korkean näkyvyyden alueelle. Sisällön tulisi herättää käyttäjän huomio välittömästi ja esittää hänelle juuri sitä sisältöä, jota hän etsii, jotta hän ei hyppää ja käy toisella sivustolla.
Nopeita vinkkejä konversiolukujen kasvattamiseen
- Sankarikuva: Älä ryhdy tässä liian eteeriseksi. Miltä onnelliset asiakkaasi näyttävät? Mitä he kokevat? Näytä kuva, joka herättää positiivisia toiveita.
- Header Copy: Älä menetä selkeyttä ollaksesi nokkela. Jos sekoitat, häviät. Pidä kiinni yksinkertaisesta viestistä, joka näyttää tarkalleen, mitä teet tai samaistuu heidän keskeiseen haasteeseensa.
- Toimintakutsu (CTA):
- Tagline: Yhdistä selkeä otsikkoteksti yhden tai kahden lauseen mittaiseen repliikkiin, joka asettaa brändisi auttamaan asiakkaan ongelman ratkaisemisessa.
- Navigointi: Vähemmän on enemmän. Hieno verkkosuunnittelu ohjaa käyttäjän juuri sinne, minne haluat hänen menevän. Liian monta vaihtoehtoa voi johtaa päätöksentekoväsymykseen.
- Latausnopeus: Kotisivusi latausaika saattaa aiheuttaa kävijöiden hyppäämisen!
Mainosten sijoittaminen taiton yläpuolelle parantaa niiden näkyvyyttä ja tuottaa enemmän mainostuloja kuin huonommin näkyviin paikkoihin sijoitetut mainokset.
Miten ”taittoa” mitataan web-suunnittelussa?
Lyhyesti sanottuna on mahdotonta määritellä tarkalleen, mihin kohtaan taitto sijoitetaan verkkosivustolla. Tarkka sijainti vaihtelee, koska monitorien näytön koot (pöytätietokoneet ja kannettavat tietokoneet), näytön resoluutiot, selainliitännäiset sekä erilaisten matkapuhelinten ja tablettien koot vaihtelevat.
Nyrkkisääntönä useimmat verkkosuunnittelijat ovat yhtä mieltä siitä, että taittolinja on suunnilleen 1000 pikseliä leveä ja 600 pikseliä korkea. Tämä on paras arvio tavallisimmasta näytön ja selaimen yhdistelmästä 1024×768 pikseliä, kun selainikkuna on maksimoitu eikä yläreunaan ole asennettu työkalupalkkeja, jotka työntävät sisältöä alaspäin.
Jos olet utelias oppimaan lisää, tarkista verkkosivusi analytiikkaohjelma (jos sinulla ei ole sellaista käytössäsi, Google Analytics on loistava paikka aloittaa), jonka pitäisi pystyä kertomaan kävijöidesi tavallisimmat ruudunmitat. Vaikka yleinen näytön koko 1024×768 on perinteisesti ollut sopiva, uudet mitat, kuten 320×568 ja 360×640, ovat yleistymässä, mikä johtuu verkkosivustojen mobiilikatselun yleistymisestä.
Mobiilikatselu ja responsiivinen suunnittelu
Viimeisten parin vuoden aikana mobiililaitteiden käyttö verkkoselailuun on lisääntynyt huomattavasti, mikä vaikeuttaa entisestään käsitystä verkkosuunnittelun optimoinnista taittuvan sisällön yläpuolelle.
Yksi haasteeksi on muodostunut se, että mobiililaitteilla on tarjolla monenlaisia näyttökokoja sekä se, että mobiililaitteiden käyttäjät selaavat verkkosivuja enimmäkseen pikemminkin muotokuvamaisessa tilassa kuin vaakatasossa. Tämä taas vaikuttaa siihen, minkä kokoisena suunnittelijan on näytettävä tärkeä sisältö.
Optimizely sanoo: ”Koska niin monet ihmiset käyttävät verkkosivuja niin monilla eri laitteilla, nykyiset verkkosuunnittelukäytännöt edellyttävät responsiivisen suunnittelun käyttämistä: joustavien asettelujen, kuvien ja kaskadoituvien tyylitiedostojen hyödyntämistä. Responsiivisessa suunnittelussa sivulla ei ole kiinteää ulkoasua, vaan sisältö mukautuu kaikenkokoiselle näytölle. Responsiiviset verkkosivut reagoivat tai ”vastaavat” ympäristöön, jossa niitä kulutetaan tai selataan.”
Vaikka tärkeän sisällön on edelleen oltava korkeammalla sivulla, nykyään sivut on suunniteltava niin, että ne houkuttelevat käyttäjiä selaamaan, jotta he eivät missaa tärkeää sisältöä.”
Käsitteenä taitto tulee aina olemaan olemassa, mutta se on sääntö, jota voidaan muuttaa tai muokata, erityisesti ajan myötä. Koska verkkosivuja selataan niin monilla eri laitteilla ja näytön resoluutioilla, taitto vaihtelee aivan liikaa käyttäjäkohtaisesti, jotta siihen voitaisiin luottaa säännöllisesti. Mutta varmistamalla, että sijoitat vain tärkeimmät elementit ja sisällön taiton yläpuolelle, voit löytää hyvän tasapainon sivustosi käytettävyyden ja oikean sisällön tarjoilun välillä ”Taiton yläpuolella.”
Jos haluat lisää vinkkejä kotisivujen parhaista käytännöistä tai siitä, miten parannat verkkosivujesi nopeutta, tutustu näihin blogeihin!
- 5 kotisivun parasta käytäntöä
- 13 tapaa lisätä verkkosivuston nopeutta
Laskeutumissivuista kotisivuihin olemme auttaneet kaltaisiasi yrityksiä rakentamaan käyttäjäkokemuksia, jotka ohjaavat liidit myyntiin. Varaa aika keskustelulle.