Above the fold: co je vidět bez posouvání
Above the fold je část stránky, kterou návštěvník vidí hned po otevření, bez posouvání. Výraz pochází z novin: co bylo nad přehybem titulní strany, viděl každý u stánku. Na webu podle první obrazovky lidé během chvilky rozhodují, jestli jsou na správném místě a jestli budou číst dál.
Aktualizováno
Co do první obrazovky patří
První obrazovka nemusí obsahovat všechno. Lidé posouvat umí a posouvají. Musí ale dát důvod pokračovat:
- co děláte a pro koho – v nadpisu, konkrétně,
- hlavní přínos nebo odlišení – jednou větou,
- hlavní akce – tlačítko (CTA) nebo telefon,
- signál důvěry – hodnocení, počet zakázek, logo klientů, pokud jsou skutečné,
- obrázek, který ukazuje skutečnou práci nebo produkt.
Mobil a počítač: dvě různé obrazovky
| Mobil | Počítač | |
|---|---|---|
| Prostor | Na nadpis, pár slov a tlačítko | Nadpis, text, tlačítko, obrázek vedle sebe |
| Navigace | Schovaná v menu, telefon jako tlačítko | Viditelná v hlavičce |
| Obrázek | Pod textem, nebo menší, ať nevytlačí nadpis | Velký, vedle textu |
| Riziko | Cookie lišta a vyskakovací okna zakryjí obsah | Prázdné místo a příliš velký obrázek |
Na mobilu bývá první obrazovka plná cookie lišty, hlavičky a obrázku a na samotné sdělení nezbude místo. Proto se vyplatí zkontrolovat web na telefonu s cookie lištou, jak ji vidí nový návštěvník. Jak lištu navrhnout, aby nepřekážela, popisuje heslo cookie lišta.
Rychlost načtení první obrazovky
Na první obrazovce záleží i technicky. Metrika LCP (Largest Contentful Paint) z Core Web Vitals měří, jak rychle se zobrazí největší prvek v ní, obvykle hlavní obrázek nebo nadpis. Velký obrázek, web font nebo video na pozadí ji zpomalí. Hlavní obrázek proto zmenšete, dejte mu přednost při načítání a nepoužívejte u něj lazy loading.
Časté chyby
- Nadpis „Vítejte“ nebo obecný slogan bez informace, co děláte.
- Karusel s pěti sděleními, z nichž lidé uvidí jedno.
- Fotka z fotobanky přes celou obrazovku, text až pod ní.
- Tlačítko, které vede na obecnou stránku místo k akci.
- Všechno nacpané nahoru – a tím nic čitelné.
Jak první obrazovka souvisí s celkovým návrhem a uživatelským zážitkem, popisuje heslo UX a UI. Návrh úvodní stránky včetně první obrazovky pro mobil i počítač je součástí každého webu, který děláme, od vizitkového za 15 000 Kč.
Časté otázky
Kde přesně je hranice „fold“?
Žádná pevná hranice neexistuje. Záleží na velikosti obrazovky, prohlížeči, zvětšení a liště prohlížeče. Na mobilu je první obrazovka výrazně menší než na notebooku. Navrhujte proto podle nejmenších běžných mobilů a ověřte náhled na několika zařízeních, ne podle jednoho rozměru.
Musí být kontaktní formulář nahoře?
Ne. Nahoře stačí jasné tlačítko, které na formulář vede nebo ho otevře. Formulář v první obrazovce zabírá místo, které potřebuje nadpis a důvod, proč se ozvat. Výjimkou jsou stránky, kam lidé přicházejí s jasným úmyslem poptat, třeba z reklamy.
Pomáhá posuvník (karusel) s více sděleními v první obrazovce?
Většinou ne. Lidé vidí hlavně první snímek, další se ukážou, když už se dívají jinam, a pohyb ruší čtení. Navíc karusely často zpomalují načtení. Jedno jasné sdělení funguje lépe.