Redaktoři novin na to přišli dávno před vznikem webu. Příběh, který stojí za přečtení, patří nad fyzický přehyb. Všechno pod ním soupeří s rozhodnutím otočit stránku. Na webu platí stejný princip pro první zobrazenou oblast, kterou návštěvník vidí, než začne rolovat.
Above the fold označuje tu část webové stránky, která je viditelná v okně prohlížeče, když se stránka poprvé načte, ještě než návštěvník vůbec začne rolovat. Je to jediná část stránky, kterou vidí úplně každý návštěvník. Všechno pod ní si rolování musí zasloužit. Pojem pochází z tisku: noviny přeložené napůl na stánku ukazují jen horní polovinu titulní strany. Tato horní polovina musela upoutat pozornost. Oblast above the fold na webu funguje stejně.
Co je above the fold, se liší podle zařízení, velikosti obrazovky a prohlížeče každého návštěvníka. Velký monitor ukazuje above the fold mnohem víc obsahu než telefon držený na výšku. Navrhovat s ohledem na přehyb znamená myslet na všechny z nich, ne jen na verzi, kterou vidíte na vlastní obrazovce.
Proč na obsahu above the fold záleží?
Výzkumy čtenářského chování soustavně ukazují, že návštěvníci tráví víc času s obsahem blízko horní části stránky. Čím níže obsah leží, tím méně návštěvníků se k němu dostane. Není to selhání pozornosti. Je to rozumná reakce na omezený čas. Návštěvníci rychle posoudí, zda stránku stojí za čtení, a toto posouzení proběhne v první viditelné části.
Above the fold je místo, kde odpovídáte na první otázku návštěvníka: jsem na správném místě? Pokud nadpis, obrázek a prvních pár řádků textu dělají odpověď jasnou, návštěvníci rolují dál. Pokud jsou zmatení nebo si nejsou jistí, většina zbytku stránky šanci nedá.
Co patří above the fold?
Oblast above the fold má omezený prostor a vysoké sázky. Každý prvek, který se tam objeví, by si měl své místo zasloužit tím, že slouží návštěvníkovi nebo posouvá cíl stránky.
Jasný nadpis, který říká, o čem stránka je nebo co z ní návštěvník získá. Podpůrná věta nebo podnadpis, který přidává kontext nebo konkrétnost. Vizuál, který posiluje sdělení, a ne jen dekoruje okolí. Výzva k akci, která dává návštěvníkovi jasný další krok, pokud je už přesvědčený.
Navigace patří above the fold. Návštěvníci očekávají, že nahoře na stránce najdou způsob, jak prozkoumat zbytek webu, a nabídka, která je schovaná nebo skrytá, hned vytváří překážku. Článek o tom, co je navigace webu, popisuje, jak navrhovat nabídky, které fungují dobře na všech zařízeních.
Above the fold nepatří nic, co zabírá místo a nepřispívá k pochopení nebo rozhodnutí návštěvníka. Velké dekorativní obrázky bez informační hodnoty, rotující bannery, které zpožďují načítání, nebo bloky úvodního textu, kterými musí návštěvník rolovat, než se dostane k věci, to všechno plýtvá nejcennějším místem na stránce.
Jak se above the fold liší na mobilu?
Na mobilu je oblast above the fold výrazně menší než na počítači. Obrazovka telefonu na výšku ukazuje zhruba 600 až 800 pixelů výšky. Monitor počítače může ukázat 900 až 1200 pixelů. Stejný design může na počítači odhalit nad přehybem dvě nebo tři sekce, zatímco na mobilu ukáže jen nadpis a obrázek.
Praktický důsledek je, že mobilní návštěvníci se rozhodují, zda zůstat, nebo rolovat, s mnohem menším množstvím informací, než vidí návštěvníci na počítači na první pohled. Co je nejdůležitější, se musí vejít do menšího okna. Častým problémem jsou hlavní sekce s velkým obrázkem na pozadí a minimem textu: na počítači vypadají působivě, ale na mobilu vyplní celou obrazovku jen malým obsahem, než návštěvník musí začít rolovat.
Testovat above the fold na skutečném telefonu je důležité, protože náhledy v prohlížeči a simulace na počítači přesně neukazují, co mobilní návštěvníci vidí. Úplný kontrolní seznam pro mobily najdete v článku jak udělat web přívětivý pro mobily, který popisuje, co před spuštěním ověřit.
Ovlivňuje above the fold rychlost stránky?
Přímo. Oblast above the fold je první věc, kterou prohlížeč vykresluje, takže každý zdroj, který zpozdí její zobrazení, zhoršuje vnímanou dobu načítání, i když se zbytek stránky načte rychle.
Velké hlavní obrázky, webová písma, která se musí načíst, než se zobrazí text, a skripty, které běží před vykreslením stránky, to všechno odsouvá obsah above the fold. Z pohledu návštěvníka se stránka načítá pomalu, i když je technická doba načítání rozumná. Prázdná nebo jen částečně načtená oblast above the fold, zatímco zbytek stránky dohání, je jednou z nejčastějších příčin vysoké míry opuštění na jinak dobře navržených stránkách.
Nejúčinnějšími řešeními jsou optimalizovat hlavní obrázek, upřednostnit načítání zdrojů above the fold a odložit nepodstatné skripty. Článek o tom, co je rychlost webu, popisuje technickou stránku výkonu načítání a co ho ovlivňuje nejvíc.
Ovlivňuje above the fold SEO?
Obsah above the fold je signál, který vyhledávače používají při hodnocení kvality stránky. Stránky, které nad přehybem načítají těžkou reklamu nebo obsah nízké kvality a hlavní obsah odsouvají dolů, jsou penalizovány. Šlo o konkrétní aktualizaci algoritmu zaměřenou na weby, které užitečný obsah schovávaly pod velké bloky reklam.
Kromě této konkrétní penalizace ovlivňuje above the fold SEO nepřímo přes signály chování. Návštěvníci, kteří na stránku přijdou a hned odejdou, protože oblast above the fold jim nedala důvod zůstat, vytvářejí vysokou míru opuštění a krátkou dobu setrvání. Časem tyto signály vyhledávačům říkají, že stránka nesloužila záměru, který za hledáním stál.
Dobrý design above the fold také podporuje lepší strukturu nadpisů. Jasný nadpis viditelný above the fold, podpořený logickou strukturou stránky pod ním, pomáhá návštěvníkům i vyhledávačům stránku rychle pochopit. Článek o tom, co je webdesign, popisuje, jak rozhodnutí o rozvržení, například hierarchie nadpisů, utváří zážitek návštěvníka. Úplný obraz o pořadí ve vyhledávání najdete v článku o tom, co je SEO, který popisuje technické a obsahové faktory, na kterých záleží nejvíc.
Jak WEMASY řeší design above the fold
Šablony tvůrce webů WEMASY jsou postavené s ohledem na oblast above the fold. Hlavní sekce jsou optimalizované pro rychlé načítání a vizuální editor vám umožní před zveřejněním zobrazit náhled, jak každá sekce vypadá při různých velikostech obrazovky. Mobilní náhled ukazuje přesně to, co návštěvníci vidí na telefonu, než začnou rolovat, takže obsah a rozvržení upravíte bez dohadů.
Co je v ceně, zjistíte u tvůrce webů WEMASY, nebo si projděte balíčky na stránce s cenami.
Často kladené otázky
Je above the fold stále relevantní při dnešním chování při rolování?
Ano. Návštěvníci rolují ochotněji než před deseti lety, ale oblast above the fold má stále neúměrnou váhu. Návštěvníci tráví víc času s obsahem blízko horní části stránky bez ohledu na to, kolik rolují. Právě v oblasti above the fold se rozhoduje, zda zůstat, nebo odejít. Udělat ji jasnou, rychlou a přesvědčivou je dnes stejně důležité jako vždycky. S tvůrcem webů od WEMASY to můžete nastavit přímo na svém webu.
Jak vysoká má být hlavní sekce?
Hlavní sekce má odhalit dost obsahu above the fold, aby sdělila účel stránky, aniž by zabrala celou viditelnou oblast. Na počítači může hlavní sekce, která vyplní celou výšku obrazovky jen nadpisem a obrázkem, působit působivě, ale také zdržuje návštěvníka od skutečného obsahu. Lepší přístup je hlavní sekce dost vysoká na silný první dojem, která přitom ukáže náznak obsahu pod ní a signalizuje návštěvníkům, že je na co se dívat, když budou rolovat.
Co je výzva k akci above the fold?
Výzva k akci above the fold je tlačítko nebo odkaz umístěný v první viditelné části stránky, který dává už přesvědčeným návštěvníkům možnost jednat okamžitě bez rolování. Běžnými příklady jsou „Začít“, „Rezervovat hovor“ nebo „Zobrazit ceny“. Ne každý návštěvník above the fold je připravený jednat, proto existuje zbytek stránky, ale jasná akce dostupná brzy snižuje překážky pro ty, kdo připravení jsou.
Potřebuje každá stránka silnou sekci above the fold?
Ano, ale co znamená „silná“, se liší podle typu stránky. Úvodní stránka above the fold musí ukázat, kdo jste a co nabízíte. Článek blogu above the fold musí potvrdit, že je čtenář na správném článku, a dát mu důvod číst dál. Stránka produktu above the fold musí produkt jasně ukázat a zpřístupnit cenu. Princip je stejný pro všechny typy stránek: první zobrazená oblast by měla odpovědět na nejnaléhavější otázku návštěvníka.
Jak otestuji, co se na různých zařízeních zobrazí above the fold?
Nejpřesnější je zkontrolovat své stránky na skutečných zařízeních. Použijte monitor počítače, tablet a telefon držený na výšku i na šířku. Vývojářské nástroje prohlížeče mají režim simulace zařízení, který dává rozumný odhad, ale nezohledňuje panely nástrojů prohlížeče, adresní řádky a oblasti upozornění, které na skutečných telefonech zmenšují viditelnou výšku obrazovky. To, co vypadá dobře v náhledu prohlížeče, má na skutečném zařízení často výrazně jiný konec přehybu.