Above the fold - co to jest?

Koncepcja above the fold nie jest wymysłem programistów. Jej początków upatruje się w prasie, kiedy to w każdym sklepie stał regał z gazetami. Składano je zazwyczaj na pół, przez co redaktorzy musieli się natrudzić, by najciekawsze informacje zawrzeć właśnie w tej pierwszej, widocznej części. Już wtedy walczono o uwagę klientów i próbowano wszelkich sposobów, by skłonić klientów do zakupu.

Above the fold - definicja

Kierując się zasadą złożonej gazety, above the fold oznacza pierwszy widok tuż po załadowaniu strony. Tak dla przykładu wygląda above the fold po załadowaniu naszej strony głównej.

Zauważ, że pasek przewijania jest na samej górze. Gdybyśmy zescrollowani w dół, wszystko, co się tam pokaże, nazywa się below the fold. Tak prezentuje się podział tego, co na samej górze (above the fold) i pod tzw. linią zgięcia (below the fold):

Dlaczego above the fold jest ważne?

Przestrzeń above the fold to pierwsza widoczna część strony internetowej, którą zobaczy użytkownik. To, jakie elementy tam umieścisz i jaką stylistykę zaprezentujesz, ma ogromne znaczenie. Często nawet decyduje o tym, czy użytkownik dalej będzie chciał przeglądać Twoją stronę. Podobnie jak w życiu - ważne jest pierwsze wrażenie :) Właśnie dlatego w above the fold wyklucz treści, które rozpraszają i nie mają dużego znaczenia z punktu widzenia biznesowego/marketingowego. Skup się za to na elementach przyciągających wzrok. Jeśli zwrócisz uwagę użytkowników, zmniejszysz prawdopodobieństwo, że wyłączą stronę i przejdą do konkurencji.

Które elementy umieścić above the fold?

Przestrzeń above the fold to bardzo mały obszar całej strony, dlatego każdy element, który tam umieszczasz, powinieneś dokładnie przemyśleć. Zobacz dobre praktyki w tym kontekście:

Wystrzegaj się natomiast:

• rozbudowanej treści,
• grafik rozpraszających uwagę,
• przytłaczających i nachalnych reklam.

O czym pamiętać przy projektowaniu above the fold?

1. Prostota. Uważaj, żeby nie przekombinować above the fold. W tym przypadku mniej znaczy więcej, dlatego umieść tam wyłącznie najpotrzebniejsze informacje w kontekście całej ścieżki użytkownika.
2. Aktualność. Trzymaj się najnowszych trendów i pamiętaj o responsywności, czyli o poprawnym wyświetlaniu się above the fold, jak zresztą całej strony, na wszystkich urządzeniach. Zawsze możesz sprawdzić, jak aktualnie wygląda górna część strony Twoich konkurentów i zainspirować się do odświeżenia własnej.
3. Jasna nawigacja. W above the fold nie ma miejsca na niejasną nawigację. Użytkownicy nie mają ani chęci, ani czasu, żeby wybierać elementy z rozkładanego menu albo wchodzić w nieczytelne linki. Ponownie podkreślamy - kieruj się prostotą!
4. Użyteczność. Nie bój się współpracy z firmą UX, jeśli dalej nie jesteś pewien, na co zdecydować się w above the fold. Pamiętaj, że pierwsze zetknięcie się z Twoją stroną jest kluczowe dla użytkownika, dlatego tym bardziej przemyśl, czy nie przyda Ci się pomoc profesjonalistów.
5. Testowanie. Pierwsza wersja nie zawsze jest tą idealną. Dlatego testuj, sprawdzaj, badaj! Zmieniaj układy, H1, położenie CTA i zobacz, jak zareagują na to użytkownicy. Która wersja above the fold przynosi konwersję?