Above the fold

Co to właściwie znaczy

Above the fold (dosłownie „nad zagięciem”, termin z gazet) to obszar strony widoczny natychmiast po wejściu, bez przewijania. To pierwsze i często jedyne, co zobaczy większość odwiedzających, zanim zdecyduje, czy scrollować dalej. Dlatego to najcenniejsza przestrzeń na całej stronie. Najczęściej też marnowana.

Przykład z życia firmy

Firma umieszcza na pierwszym ekranie wielkie zdjęcie i slogan „Witamy na naszej stronie”, a to, czym się zajmuje i co oferuje, wrzuca niżej. Klient wchodzi, w 3 sekundy nie widzi, o co chodzi, i wychodzi: nigdy nie doscrollował do sedna. Ten sam ekran z jasnym „naprawiamy piece w 24 h” zatrzymałby go.

Dlaczego to dla Ciebie ważne

To dlatego to, co dasz above the fold, decyduje o losie całej strony: jeśli pierwszy ekran nie powie jasno, co oferujesz, dla kogo i co zrobić dalej, reszta treści nie dostanie szansy. W czasach, gdy większość ruchu jest z telefonu (mały ekran), przestrzeń „bez przewijania” jest jeszcze cenniejsza, bo mieści mniej.

Jak to wykorzystać

Zadbaj, by na pierwszym ekranie było jasne: co oferujesz, dla kogo i jaki jest następny krok (wyraźne CTA). Wytnij powitania i ozdobniki, które zajmują to miejsce, nie niosąc treści. Sprawdź stronę na telefonie: tam „fold” jest najciaśniejszy. Pierwszy ekran ma odpowiadać na „czy to dla mnie”, zanim ktoś pomyśli o wyjściu.

Above the fold: tłumaczenie i pochodzenie

Above the fold to po angielsku „nad zgięciem”. Określenie pochodzi z prasy: najważniejsze nagłówki drukowano na górnej połowie pierwszej strony gazety, widocznej po złożeniu na pół w kiosku. W internecie oznacza część strony widoczną od razu po wejściu, bez przewijania. Wszystko, co trzeba przewinąć, jest below the fold, czyli pod zgięciem.

Telefon zmienia granicę

Granica zgięcia zależy od urządzenia. Na komputerze widać zwykle więcej treści niż na telefonie, a na telefonach ekran ma różne wysokości. Dlatego pierwszy ekran trzeba sprawdzać przede wszystkim na telefonie, z którego przychodzi dziś większość ruchu w wielu branżach. Ludzie przewijają chętnie, ale tylko wtedy, gdy pierwszy ekran przekona ich, że są we właściwym miejscu.

Co powinno być nad zgięciem

• Jasna odpowiedź, co to za strona i dla kogo jest.
• Główna korzyść albo propozycja wartości.
• Jeden wyraźny przycisk, czyli CTA.
• Szybki dowód: ocena, liczba klientów, logotypy.
• Na stronie produktu: zdjęcie, nazwa, cena, dostępność i przycisk zakupu.

Przykłady z różnych branż

• Sklep internetowy. Na telefonie zdjęcie produktu zajmowało cały ekran, a cena i przycisk były niżej. Po zmniejszeniu zdjęcia i przeniesieniu ceny w górę więcej osób dodaje produkt do koszyka.
• Usługi. Strona hydraulika pokazuje od razu numer telefonu jako przycisk, godziny pracy i obszar dojazdu.
• Firma B2B. Strona oprogramowania zamiast ogólnego hasła ma nagłówek z konkretną korzyścią i przyciskiem do krótkiego demo.

Jak sprawdzić pierwszy ekran krok po kroku

1. Otwórz stronę na swoim telefonie i zrób zrzut ekranu bez przewijania.
2. Pokaż go komuś na pięć sekund i zapytaj, co firma robi i co można tu zrobić.
3. Usuń lub zmniejsz elementy, które nic nie mówią: duże zdjęcia bez treści, slajdery, długie powitania.
4. Sprawdź szybkość ładowania, bo pierwszy ekran musi pojawić się szybko, co mierzy wskaźnik LCP w Core Web Vitals.

Najczęstsze błędy

Najczęstszy błąd to slajder z kilkoma hasłami, które zmieniają się, zanim ktokolwiek je przeczyta. Drugi to wielkie zdjęcie bez informacji, co firma oferuje. Trzeci to upchnięcie wszystkiego w pierwszym ekranie, przez co nic się nie wyróżnia.

Pierwszy ekran a szybkość

To, co widać na pierwszym ekranie, powinno ładować się najszybciej. Duże zdjęcie albo film na górze strony często decyduje o wskaźniku LCP, czyli czasie wyświetlenia największego elementu. Kompresuj obraz, podaj jego wymiary w kodzie i nie ładuj go leniwie, bo jest potrzebny od razu. Elementy niżej na stronie mogą ładować się później.

Czego unikać na pierwszym ekranie

• suwaków z kilkoma hasłami, z których każde widać przez kilka sekund,
• ogólnych haseł typu „Witamy na naszej stronie”,
• wielkiego baneru cookie zasłaniającego połowę ekranu,
• okienka z zapisem do newslettera zaraz po wejściu,
• kilku przycisków o tej samej wadze, które rozpraszają.

Czy wszystko musi być na górze

Nie. Ludzie przewijają strony, zwłaszcza na telefonach. Pierwszy ekran ma przekonać, że warto przewinąć: jasno powiedzieć, co oferujesz, dla kogo i co zrobić dalej. Szczegóły, opinie i cennik mogą być niżej. Problemem jest pierwszy ekran, który niczego nie mówi i nie daje powodu, żeby zostać.

Jak testować pierwszy ekran

Pokaż stronę komuś na pięć sekund i zapytaj, co firma robi i co można na stronie zrobić. Sprawdź też mapę przewinięć: jeśli większość osób nie przewija dalej niż pierwszy ekran, nagłówek lub obraz nie zachęcają. Porównuj wersje w teście A/B, zmieniając jeden element naraz.

Wyjaśnienie na prostym przykładzie

Gazeta w kiosku leży złożona na pół. Przechodzień widzi tylko górną połowę pierwszej strony i na jej podstawie decyduje, czy w ogóle sięgnąć.

Above the fold to ta górna połowa strony internetowej, którą widać od razu, bez przewijania. Na telefonie to naprawdę niewiele miejsca. Tu klient w kilka sekund musi zrozumieć, co oferujesz, dla kogo i co ma zrobić dalej. Wielki slider z ogólnym hasłem marnuje to miejsce.

Trudne słowa z tego hasła

• Landing page. Strona przygotowana pod jedną konkretną akcję. Zobacz landing page.
• CTA. Jedno jasne zdanie mówiące, co zrobić dalej. Zobacz CTA.
• Współczynnik odrzuceń. Odsetek osób, które wychodzą bez żadnej akcji. Zobacz współczynnik odrzuceń.
• Efekt pierwszego wrażenia. Pierwszy kontakt ustawia ocenę na długo. Zobacz efekt pierwszego wrażenia.

Ćwiczenie na 15 minut

1. Otwórz swoją stronę główną na telefonie.
2. Zrób zrzut ekranu bez przewijania.
3. Pokaż go komuś na pięć sekund i zapytaj, co robi Twoja firma.
4. Jeśli nie wie, przepisz nagłówek i dodaj przycisk w widocznym miejscu.

Pierwszy ekran zaczyna sprzedawać; skutek zobaczysz we współczynniku odrzuceń.

Najczęstsze pytania

Co oznacza above the fold?

To część strony widoczna od razu po wejściu, bez przewijania. Nazwa pochodzi z prasy, gdzie najważniejsze treści drukowano na górnej połowie pierwszej strony.

Co powinno być w pierwszym ekranie strony?

Jasna informacja, co to za strona i dla kogo, główna korzyść, jeden wyraźny przycisk i szybki dowód, na przykład ocena lub liczba klientów.

Czy ludzie przewijają strony?

Tak, ale tylko wtedy, gdy pierwszy ekran przekona ich, że są we właściwym miejscu. Dlatego to, co widać bez przewijania, ma duże znaczenie.

Czy ludzie przewijają strony?

Tak, zwłaszcza na telefonach. Pierwszy ekran ma jednak przekonać, że warto przewinąć dalej.

Jak sprawdzić, co widać bez przewijania?

Otwórz stronę na kilku telefonach i komputerze albo użyj trybu podglądu urządzeń w przeglądarce.

Powiązane pojęcia

Efekt pierwszego wrażenia  ·  Landing page  ·  Konwersja