Above the fold označuje časť webovej stránky, ktorú návštevník vidí okamžite po načítaní, bez scrollovania. Názov pochádza z tlačených novín, kde obsah "nad záhybom" rozhodoval o tom, či si človek noviny kúpi. Na webe platí rovnaká logika: prvá obrazovka rozhoduje o tom, či návštevník zostane alebo odíde.
Prečo je to dôležité? Máte asi 3-5 sekúnd na to, aby ste presvedčili návštevníka, že je na správnom mieste. Podľa štúdií Nielsen Norman Group sa až 57% času stráveného na stránke odohráva práve v oblasti above the fold. To znamená, že čo umiestnite do tejto zóny, priamo ovplyvňuje konverzie, bounce rate a celkový úspech webu či e-shopu.
V praxi ide o viewport, viditeľnú oblasť prehliadača pri prvom načítaní stránky. Problém je, že táto oblasť nie je univerzálna. Na desktope s rozlíšením 1920×1080 máte k dispozícii výrazne viac priestoru ako na mobile s 375×667 pixelov. Preto sa above the fold nedá definovať fixnou výškou v pixeloch.
Realisticky sa bavíme o približne 600-800 pixeloch výšky na desktope a 500-650 pixeloch na mobile. Ale tieto čísla sú len orientačné. Skutočná výška závisí od zariadenia návštevníka, jeho prehliadača a toho, či má otvorené toolbary alebo bookmarky.
Čo z toho vyplýva pre váš web? Testujte na reálnych zariadeniach, nie len v design toole. V praxi vidíme, že firmy navrhujú hero sekcie s 900-pixelovými obrázkami, ktoré na väčšine mobilov odrežú CTA tlačidlo úplne mimo prvú obrazovku. To je premárnená príležitosť.
Prvá obrazovka plní jednu kritickú úlohu: odpovedá na otázku "Som na správnom mieste?". Ak návštevník túto odpoveď nedostane do pár sekúnd, odchádza. Bounce rate stránok s nejasnou hodnotovou propozíciou v above the fold je bežne o 20-40% vyšší než u stránok, ktoré komunikujú jasne od prvého momentu.
Google tento faktor nepriamo zohľadňuje v rankingu. Keď používatelia odchádzajú späť do vyhľadávania rýchlo (tzv. pogo-sticking), je to signál, že stránka nesplnila očakávania. Navyše, Core Web Vitals metrika Largest Contentful Paint (LCP) meria čas načítania najväčšieho elementu v above the fold. Pomalé hero obrázky a videá vás môžu stáť pozície vo vyhľadávaní aj konverzie súčasne.
V rámci UX/UI dizajnu preto vždy začíname analýzou toho, čo musí byť viditeľné okamžite. Nie je to o tom, čo chce firma povedať, je to o tom, čo potrebuje návštevník vidieť, aby urobil ďalší krok.
Obsah prvej obrazovky sa líši podľa účelu stránky. Ale niekoľko elementov je takmer univerzálnych:
Pre e-shop platí, že kategórie alebo aspoň vyhľadávanie by mali byť dostupné okamžite. Pri korporátnom webe je dôležité, aby hodnota firmy bola jasná ešte pred prvým scrollom.
Na produktovej stránke e-shopu musí byť above the fold fotka produktu, názov, cena a tlačidlo "Do košíka". Podľa Baymard Institute až 18% používateľov opustí nákup, ak nemôžu rýchlo nájsť základné informácie o produkte. Pri tvorbe e-shopov na mieru preto riešime hierarchiu obsahu ešte pred samotným dizajnom.
Pre B2B segment platí, že rozhodovací proces je dlhší, ale prvý dojem stále hrá zásadnú rolu. Above the fold by mal obsahovať jasné pomenovanie problému, ktorý riešite, pre koho a krátky dôkaz expertízy. Logo veľkých klientov v tejto zóne funguje výrazne lepšie než zahrabané v pätičke.
Google hodnotí obsah above the fold z niekoľkých perspektív. Prvá je používateľská skúsenosť, ak ľudia rýchlo odchádzajú, je to negatívny signál. Druhá je technická — Core Web Vitals priamo merajú výkon elementov v tejto oblasti.
LCP (Largest Contentful Paint) cieli práve na najväčší element v above the fold. Ak máte hero obrázok, ktorý sa načítava 4 sekundy, automaticky strácate body. Cieľová hodnota je pod 2.5 sekundy. V praxi to znamená optimalizáciu obrázkov, správne lazy loading nastavenie (ktoré ale nesmie zahŕňať above the fold obsah) a minimalizáciu render-blocking zdrojov.
Ďalší faktor je reklama. Google v minulosti penalizoval stránky, kde above the fold dominovali reklamy namiesto obsahu. Tzv. "Page Layout Algorithm" síce nie je taký prísny ako kedysi, ale princíp zostáva: obsah musí byť prioritou. Ak návštevník musí scrollovať cez tri bannery, aby sa dostal k tomu, čo hľadá, máte problém.
V auditoch webov sa opakovane stretávame s niekoľkými problémami, ktoré priamo znižujú konverzie:
Riešenie nie je komplikované, ale vyžaduje systematický prístup. Pri tvorbe webstránok vždy začíname wireframami mobile-first a testujeme na reálnych zariadeniach ešte pred finálnym dizajnom.
Optimalizácia above the fold nie je jednorázová záležitosť. Ide o kontinuálny proces testovania a iterácie. Niekoľko praktických krokov:
Najprv analyzujte heatmapy a scroll mapy. Nástroje ako Hotjar alebo Microsoft Clarity vám ukážu, kde sa návštevníci zastavujú a kam klikajú. Ak 70% ľudí nikdy nedoscrolluje k vašemu CTA, máte jasnú odpoveď, treba ho posunúť vyššie.
Potom testujte rôzne varianty. A/B test headline môže priniesť 10-30% rozdiel v konverznom pomere. Test pozície CTA tlačidla podobne. Bez dát rozhodujete naslepo.
Zamerajte sa na rýchlosť. Optimalizujte obrázky do formátu WebP, nastavte správne priority pre načítanie a eliminujte zbytočné skripty, ktoré blokujú render. V tracking a analytike sledujeme Core Web Vitals ako jeden z kľúčových výkonnostných ukazovateľov.
Nakoniec myslite na kontext. Návštevník z Google reklamy má iné očakávania než organický návštevník. Landing page pre PPC kampane by mala mať above the fold prispôsobený presne tomu, čo používateľ hľadal.
Above the fold nie je len dizajnový pojem, je to strategická oblasť, ktorá priamo ovplyvňuje, či váš web plní svoje ciele. Jasná hodnota, viditeľné CTA a rýchle načítanie sú základ. Všetko ostatné je optimalizácia.
Pre viac inšpirácie si pozrite naše projekty z praxe.
V praxi riešime túto oblasť ako prvú vec pri každom projekte. Napríklad pri redizajne webu QEX sme zásadne prerobili hero sekciu tak, aby hodnota služby bola jasná do 2 sekúnd, a bounce rate klesol o 23%. Ak riešite podobnú výzvu na vašom webe,napíšte nám a pozrieme sa na to spolu.
