Sanomalehtitoimittajat keksivät tämän jo kauan ennen verkkoa. Lukemisen arvoinen juttu kuuluu fyysisen taitteen yläpuolelle. Kaikki sen alapuolella kilpailee päätöstä vastaan kääntää lehteä eteenpäin. Verkkosivustolla sama periaate pätee ensimmäiseen näkymään, jonka vierailija näkee ennen vierittämistä.
Above the fold tarkoittaa verkkosivun osaa, joka näkyy selainikkunassa sivun latautuessa ensimmäisen kerran, ennen kuin vierailija vierittää lainkaan. Se on ainoa sivun osa, jonka jokainen vierailija näkee. Kaiken sen alapuolella olevan täytyy ansaita vierittäminen. Termi on peräisin painetusta mediasta: lehtikioskilla kahtia taitettu sanomalehti näyttää etusivusta vain yläpuoliskon. Tuon yläpuoliskon piti ansaita huomio. Verkkosivuston above the fold -alue toimii samalla tavalla.
Se, mikä on above the fold, vaihtelee jokaisen vierailijan laitteen, näyttökoon ja selaimen mukaan. Suuri pöytäkoneen näyttö näyttää paljon enemmän sisältöä taitteen yläpuolella kuin pystyasennossa pidetty puhelin. Taitteelle suunnittelu tarkoittaa kaikkien miettimistä, ei vain sitä versiota, jonka näet omalla ruudullasi.
Miksi above the fold -sisällöllä on merkitystä?
Lukukäyttäytymistä koskeva tutkimus osoittaa johdonmukaisesti, että vierailijat viettävät enemmän aikaa sivun yläosan sisällön parissa. Mitä alempana sisältö on, sitä harvempi vierailija sinne ehtii. Tämä ei ole tarkkaavaisuuden epäonnistuminen. Se on järkevä reaktio rajalliseen aikaan. Vierailijat arvioivat nopeasti, kannattaako sivu lukea, ja arvio tehdään ensimmäisessä näkyvissä olevassa osassa.
Above the fold on se paikka, jossa vastaat vierailijan ensimmäiseen kysymykseen: olenko oikeassa paikassa? Jos otsikko, kuva ja ensimmäiset tekstirivit tekevät vastauksen selväksi, vierailijat vierittävät. Jos he ovat hämmentyneitä tai epävarmoja, useimmat eivät anna muulle sivulle mahdollisuutta.
Mitä above the fold -alueelle kuuluu?
Above the fold -alueella on rajallisesti tilaa ja korkeat panokset. Jokaisen siellä näkyvän elementin pitäisi ansaita paikkansa palvelemalla vierailijaa tai edistämällä sivun tavoitetta.
Selkeä otsikko, joka kertoo, mistä sivu kertoo tai mitä vierailija saa. Tukeva lause tai alaotsikko, joka lisää kontekstia tai tarkkuutta. Visuaali, joka vahvistaa viestiä eikä vain koristele sen ympärillä. Toimintokehote, joka antaa vierailijalle selkeän seuraavan askeleen, jos hän on jo vakuuttunut.
Navigointi kuuluu above the fold -alueelle. Vierailijat odottavat löytävänsä tavan tutkia muuta sivustoa sivun yläosasta, ja piilotettu tai haudattu valikko luo kitkaa heti. Artikkeli mikä on verkkosivuston navigointi käsittelee, miten suunnitellaan valikoita, jotka toimivat hyvin kaikilla laitteilla.
Above the fold -alueelle ei kuulu mikään, joka vie tilaa edistämättä vierailijan ymmärrystä tai päätöstä. Suuret koristekuvat ilman tietoarvoa, latausta viivästyttävät pyörivät bannerit tai johdantotekstilohkot, joiden läpi vierailijan täytyy vierittää ennen asiaan pääsyä, kaikki tuhlaavat sivun arvokkainta tilaa.
Miten above the fold eroaa mobiilissa?
Mobiilissa above the fold -alue on huomattavasti pienempi kuin pöytäkoneella. Pystyasennossa oleva puhelimen ruutu näyttää noin 600-800 pikselin korkeuden. Pöytäkoneen näyttö voi näyttää 900-1200 pikseliä. Sama suunnitelma voi paljastaa pöytäkoneella kaksi tai kolme osiota taitteen yläpuolella, kun mobiilissa näkyy vain otsikko ja kuva.
Käytännön seuraus on, että mobiilivierailijat tekevät päätöksensä jäädä tai vierittää paljon pienemmällä tiedolla kuin pöytäkoneen vierailijat näkevät ensisilmäyksellä. Sen, mikä on tärkeintä, täytyy mahtua pienempään ikkunaan. Hero-osiot, joissa on suuri taustakuva ja vähän tekstiä, ovat yleinen ongelma: ne näyttävät näyttäviltä pöytäkoneella, mutta täyttävät koko mobiiliruudun hyvin vähällä sisällöllä ennen kuin vierailijan täytyy vierittää.
Above the fold -alueen testaaminen oikealla puhelimella on tärkeää, koska selainesikatselut ja pöytäkonesimulaatiot eivät esitä tarkasti sitä, mitä mobiilivierailijat näkevät. Täydellisen tarkistuslistan mobiilihuomioista löydät artikkelista miten teet verkkosivustosta mobiiliystävällisen, jossa käydään läpi, mitä tarkistaa ennen julkaisua.
Vaikuttaako above the fold sivun nopeuteen?
Suoraan. Above the fold -alue on ensimmäinen asia, jonka selain _blocked_öi, joten mikä tahansa resurssi, joka viivästyttää sen näyttämistä, heikentää koettua latausaikaa, vaikka muu sivu latautuisi nopeasti.
Suuret hero-kuvat, verkkofontit, jotka täytyy ladata ennen tekstin näyttämistä, ja skriptit, jotka ajetaan ennen sivun _blocked_öintiä, työntävät kaikki above the fold -sisältöä alaspäin. Vierailijan näkökulmasta sivu latautuu hitaasti, vaikka tekninen latausaika olisi kohtuullinen. Tyhjä tai osittain latautunut above the fold -alue, kun muu sivu vasta ottaa kiinni, on yksi yleisimmistä syistä korkeisiin poistumisprosentteihin muuten hyvin suunnitelluilla sivuilla.
Hero-kuvan optimointi, above the fold -resurssien latauksen priorisointi ja ei-välttämättömien skriptien lykkääminen ovat tehokkaimmat korjaukset. Artikkeli mikä on verkkosivuston nopeus käsittelee latauksen suorituskyvyn teknistä puolta ja sitä, mikä siihen vaikuttaa eniten.
Vaikuttaako above the fold SEO:hon?
Above the fold -sisältö on signaali, jota hakukoneet käyttävät sivun laatua arvioidessaan. Sivuja, jotka lataavat raskasta mainontaa tai heikkolaatuista sisältöä taitteen yläpuolelle ja työntävät pääsisällön alas, rangaistaan. Tämä oli erityinen algoritmipäivitys, joka kohdistui sivustoihin, jotka hautasivat hyödyllisen sisällön suurten mainoslohkojen alle.
Tämän erityisen rangaistuksen lisäksi above the fold vaikuttaa SEO:hon välillisesti käyttäytymissignaalien kautta. Vierailijat, jotka päätyvät sivulle ja poistuvat heti, koska above the fold -alue ei antanut heille syytä jäädä, tuottavat korkeita poistumisprosentteja ja lyhyen viipymäajan. Ajan myötä nämä signaalit kertovat hakukoneille, ettei sivu palvellut haun taustalla olevaa tarkoitusta.
Hyvä above the fold -suunnittelu tukee myös parempaa otsikkorakennetta. Selkeä otsikko näkyvissä taitteen yläpuolella, jota tukee looginen sivurakenne sen alapuolella, auttaa sekä vierailijoita että hakukoneita ymmärtämään sivun nopeasti. Artikkeli mikä on verkkosuunnittelu käsittelee, miten asetteluratkaisut, kuten otsikkohierarkia, muokkaavat vierailijakokemusta. Täyden kuvan hakusijoituksista saat artikkelista mikä on SEO, jossa käydään läpi tärkeimmät tekniset ja sisällölliset tekijät.
Miten WEMASY hoitaa above the fold -suunnittelun
WEMASYn verkkosivustorakentimen mallipohjat on tehty above the fold -alue mielessä. Hero-osiot on optimoitu nopeaan lataukseen, ja visuaalisessa editorissa voit esikatsella, miltä kukin osio näyttää eri näyttökooilla ennen julkaisua. Mobiiliesikatselu näyttää täsmälleen sen, minkä vierailijat näkevät puhelimella ennen vierittämistä, joten voit säätää sisältöä ja asettelua arvailematta.
Katso, mitä sisältyy, WEMASYn verkkosivustorakentimesta, tai tutustu paketteihin hinnastosivulla.
Usein kysytyt kysymykset
Onko above the fold edelleen merkityksellinen nykyaikaisessa vierityskäyttäytymisessä?
On. Vierailijat vierittävät herkemmin kuin kymmenen vuotta sitten, mutta above the fold -alueella on edelleen suhteeton painoarvo. Vierailijat viettävät enemmän aikaa sivun yläosan sisällön parissa riippumatta siitä, kuinka paljon he vierittävät. Above the fold -alueella tehdään päätös jäädä tai lähteä. Sen tekeminen selkeäksi, nopeaksi ja vakuuttavaksi on yhtä tärkeää nyt kuin se on aina ollut. WEMASYn verkkosivustorakentimella saat tämän käyttöön suoraan omalla sivustollasi.
Kuinka korkea hero-osion pitäisi olla?
Hero-osion pitäisi paljastaa tarpeeksi sisältöä taitteen yläpuolella viestiäkseen sivun tarkoituksen kuluttamatta koko näkymää. Pöytäkoneella hero, joka täyttää koko näytön korkeuden vain otsikolla ja kuvalla, voi tuntua näyttävältä, mutta se myös viivästyttää vierailijan pääsyä varsinaiseen sisältöön. Parempi tapa on hero, joka on tarpeeksi korkea tekemään vahvan ensivaikutelman ja näyttää silti vihjeen sisällöstä alapuolella, mikä kertoo vierailijoille, että vierittämällä näkee lisää.
Mikä on toimintokehote above the fold -alueella?
Toimintokehote above the fold -alueella on painike tai linkki, joka on sijoitettu sivun ensimmäiseen näkyvään osaan ja antaa jo vakuuttuneille vierailijoille mahdollisuuden toimia heti vierittämättä. Yleisiä esimerkkejä ovat "Aloita", "Varaa puhelu" tai "Katso hinnat". Kaikki above the fold -alueella olevat vierailijat eivät ole valmiita toimimaan, minkä vuoksi muu sivu on olemassa, mutta selkeä toiminto heti saatavilla vähentää kitkaa niille, jotka ovat.
Tarvitseeko jokainen sivu vahvan above the fold -osion?
Tarvitsee, mutta se, mitä "vahva" tarkoittaa, vaihtelee sivutyypin mukaan. Etusivun above the fold -alueen täytyy kertoa, keitä olet ja mitä tarjoat. Blogiartikkelin above the fold -alueen täytyy vahvistaa, että lukija on oikealla artikkelilla, ja antaa syy jatkaa lukemista. Tuotesivun above the fold -alueen täytyy näyttää tuote selkeästi ja tehdä hinnoittelu helposti saataville. Periaate on sama sivutyypistä riippumatta: ensimmäisen näkymän pitäisi vastata vierailijan välittömimpään kysymykseen.
Miten testaan, mitä näkyy above the fold -alueella eri laitteilla?
Tarkin tapa on tarkistaa omat sivusi oikeilla laitteilla. Käytä pöytäkoneen näyttöä, tablettia ja puhelinta sekä pysty- että vaaka-asennossa. Selaimen kehittäjätyökaluissa on laitesimulaatiotila, joka antaa kohtuullisen arvion, mutta ei huomioi selaimen työkalupalkkeja, osoitepalkkeja ja ilmoitusalueita, jotka pienentävät näkyvää ruudun korkeutta oikeilla puhelimilla. Se, mikä näyttää hyvältä selainesikatselussa, on usein todellisella laitteella huomattavasti eri kohdassa taitetta.