Przestrzeń nad punktem zgięcia, czyli tzw. above the fold – do czego służy?

Przestrzeń nad punktem zgięcia, czyli tzw. above the fold – do czego służy?

Podczas przeczesywania różnego rodzaju zagranicznych blogów, które dotyczą projektowania stron internetowych, raz na jakiś czas można spotkać się z tzw. above the fold.

Co oznacza wspomniane pojęcie? Jaki jest jego odpowiednik w języku polskim? Dlaczego jest tak ważne w kontekście projektowania skutecznych stron internetowych?

Odpowiedzi na te oraz wiele innych pytań znajdziesz w tym właśnie tekście.

Odnajdziesz w nim także kilka grafik (gdyż ciężko opowiadać o zjawisku wizualnym bez wsparcia się właśnie wizualnymi elementami), lecz najpierw musimy rozpocząć od krótkiego teoretycznego wstępu.

Zapraszam do lektury.

Co to jest punkt zgięcia?

O tym, że pierwsze wrażenie jest niezwykle istotne, wiesz doskonale.

Tekstów w rodzaju „X pierwszych sekund decyduje o tym, czy kogoś polubimy, czy też nie” nasłuchałeś się już w swoim życiu zbyt wiele razy.

Jednak tak naprawdę… coś w tym jest.

Zauważ, w jaki sposób projektowało się niegdyś pierwsze strony gazet – głównie na zachodzie Europy i w USA.

Gazety prezentowane były na wystawach zgięte na pół, górną częścią frontem do klientów. Dlatego też robiono wszystko, aby ta górna część możliwie najbardziej przykuwała uwagę przechodniów.

Nagłówki szokowały, „krzyczały” wręcz. Przestrzeń nad punktem zgięcia musiała wyglądać tak, aby przechodzień sięgnął właśnie po ten tytuł, a nie jakiś inny.

Mimo tego, że geneza tej sytuacji sięga wielu lat wstecz, trend przetrwał do dziś – do czasów, w których na każdym kroku mamy komputery.

Zaraz po wejściu na stronę internetową użytkownicy muszą natychmiastowo orientować się, gdzie są. Z jaką firmą mają do czynienia, co ona oferuje oraz co na danej stronie internetowej mogą zrobić.

Zatem co to jest punkt zgięcia w obecnym, nowoczesnym rozumieniu?

Można tak określić dolną krawędź ekranu. Wszystko, co znajduje się nad nią (i nie wymaga przewinięcia widoku w pionie, by coś zauważyć), nazywane jest przestrzenią nad punktem zgięcia (z ang. above the fold).

Ujmując sprawę krótko: wszystko, co jest na danej stronie internetowej najważniejsze, musi być widoczne dla użytkowników od razu – zaraz po tym, jak odwiedzą daną stronę internetową.

Stąd też przestrzeń nad punktem zgięcia nie może wyglądać byle jak. Obecność, wygląd i kolejność występujących na niej elementów muszą być starannie przemyślane.

Above the fold w 2019 roku

Być może podczas czytania wstępu do tego tekstu nasunęło Ci się kilka pytań:

  • Czy dolna krawędź ekranu naprawdę jest wyznacznikiem występowania punktu zgięcia?
  • Jak poradzić sobie z tą kwestią na różnych urządzeniach?
  • Czy naprawdę jest sens zasypywać użytkownika wszystkimi informacjami od razu na wejściu?

Faktycznie, nie da się „na sztywno” zdefiniować wysokości wspomnianego „zgięcia”. Innymi słowy, pierwszy ekran „kończy się” na różnych wysokościach – wszystko w zależności od urządzenia, na którym aktualnie dana strona internetowa jest przeglądana.

Obecnie ważniejsze jest to, aby wytworzyć w użytkownikach chęć przewijania strony dalej. Nie stanowi dla nas żadnego problemu to, by wykonać kilka pionowych ruchów palcem czy też nieco poscrollować myszką w dół. W tych „przewijanych” czasach nie jest to dla nas trudną czynnością.

Użytkownicy dadzą sobie radę. Jeśli na samej górze nie znajdą dokładnie tego, czego szukają (lecz zarazem, gdy strona przykuje ich uwagę i zachęci do dalszego jej eksplorowania – to warunek niezbędny), bezproblemowo przewiną w dół.

Dowodzą tego słowa badaczy z Nielsen Norman Group:

"Users do scroll, but only if what?s above the fold is promising enough. What is visible on the page without requiring any action is what encourages us to scroll."

Zatem nie ma żadnego problemu z tym, by jakieś istotne elementy zamieścić nie od razu „na wejściu”, a niżej. Spełnić trzeba wtedy jeden, aczkolwiek istotny warunek: góra strony musi być interesująca i zachęcająca do przeglądania dalszej części serwisu.

Above the fold i punkt zgięcia

Na powyższym zrzucie ekranu można przyjąć, że przestrzeń nad punktem zgięcia kończy się w momencie, gdy tuż pod sylwetką pojawia się biała powierzchnia.

Dzięki zabiegowi pokazania użytkownikom fragmentu kolejnych treści wiedzą oni, że pod spodem znajduje się coś jeszcze. Są zatem zachęcani do przewijania widoku. Mają świadomość tego, że strona nie „kończy się” zaraz po pokazaniu tzw. hero-image.

Oczekiwanie od odwiedzających kliknięcia „Zapisuje się” zaraz po odwiedzeniu strony może być zbyt wymagające. Należy zatem dać internautom szansę na skorzystanie z tego przycisku (który ewidentnie odgrywa główną rolę na tej stronie) w dalszej kolejności, prezentując go również w innych sekcjach.

Reasumując, przestrzeń nad punktem zgięcia jest mimo wszystko pojęciem dość płynnym. Najważniejsze jest to, aby zamieścić w tym miejscu istotne informacje, dbając zarazem o to, by ci, którzy je ominęli, mogli odnaleźć je gdzieś niżej.

Jak zaprojektować skuteczną przestrzeń nad punktem zgięcia?

Sekcja above the fold może być zaprojektowana na tysiące różnych sposobów, niemniej jednak da się wykrystalizować cztery główne cele, jakie powinny wszystkim twórcom przyświecać.

1. Wyeksponuj tzw. USP (Unique Selling Proposition).

USP, czyli Unique Selling Proposition (unikalna propozycja sprzedaży) to termin, który określa pewien wyjątkowy atut, jakim może poszczycić się np. jakaś firma.

Chodzi po prostu o wyodrębnienie czegoś, czego nie ma żadne inne przedsiębiorstwo.

Taka wartość dodana niejednokrotnie może stanowić swoistą bramkę decyzyjną i pozwalać internautom na skorzystanie właśnie z tej opcji, a nie oferty konkurencji.

Dużo więcej na ten temat przeczytasz w dedykowanym wpisie: USP, czyli unikalna propozycja sprzedaży – przykłady i zastosowanie.

2. Pokaż wyraźnie wezwanie do działania.

CTA i whitespace

Ewidentnie widać, że strona Freedom Debt Relief skupia się na dwóch celach.

Nadrzędnym z nich jest bez wątpienia skorzystanie z czerwonego, odróżniającego się mocno od reszty elementów przycisku.

W dalszej kolejności sugerowane jest wybranie numeru telefonu.

Poprzez taki zabieg użytkownicy skupiają swój wzrok właśnie na tym wyróżnionym elemencie i są poniekąd nakłaniani do skorzystania z niego.

3. Spróbuj zamieścić wizerunek postaci.

Fotografia i zdjęcia - wzrok na obiekt

Strona internetowa Melyssy Griffin to jeden z najbardziej sztandarowych przykładów pod kątem umiejscawiania wizerunku postaci od razu w pierwszej sekcji. Taki zabieg ma kilka zalet.

Po pierwsze bardziej ufamy stronom, które prezentują twarze.

Po drugie dotyczy to w szczególności sytuacji, gdzie wiemy, iż dany wizerunek nie pochodzi ze stocka, a jest miłą dla oka fotografią np. właścicielki danego serwisu (jak w tym przypadku).

Po trzecie zauważ, w którą stronę kieruje się wzrok postaci na tym zdjęciu. Zachęca do zerknięcia w „nasze” prawo – tam, gdzie zamieszczone są istotne informacje.

Po czwarte tło w żaden sposób nie odciąga uwagi. Jest to jednolity kolor, zatem nasz wzrok nie błądzi po jakimś skomplikowanym tle, a momentalnie skupia się na postaci.

4. Zadbaj o przyciągający uwagę wygląd.

Jak zachęcić do kontaktu na stronie poprzez CTA?

Górna część strony serwisu dr.cash jest idealnym przykładem tego, jak obecnie projektuje się przestrzeń nad punktem zgięcia.

Ma bardzo nowoczesny „look”:

  • stonowaną, zgrabną paletę barw
  • styl flat (czyli postawienie na nieskomplikowane obiekty, bez rozbudowanych cieni oraz z prostymi kształtami)
  • sporo tzw. whitespace

Tego typu design z jednej strony skupia się na konkretach, a z drugiej urzeka nas swoim przyjemnym wyglądem.

Aż chce się przewijać stronę niżej, gdyż oczekujemy, że dalsze sekcje będą równie ładne.

Przestrzeń nad punktem zgięcia, czyli tzw. above the fold – podsumowanie tekstu

Wszystko sprowadza się do tego, aby pierwszy widok, jaki użytkownik ujrzy po wejściu na stronę, był zachęcający.

Musi przede wszystkim jasno i klarownie przekazywać to, co dana firma czy też usługa oferuje odwiedzającym.

Jeśli wszystko to będzie dodatkowo okraszone przyjemnym dla oka wyglądem, sukces będzie zdecydowanie bliżej.

Spodobał Ci się ten tekst?

Jeśli sądzisz, że moglibyśmy Tobie pomóc, odezwij się do nas. Wypełnij bardzo prosty formularz szybkiej wyceny. Gwarantujemy szybką odpowiedź.

Bądź pierwszą osobą, która skomentuje ten artykuł! 😉

Oświadczam, że akceptuję postanowienia zawarte w polityce prywatności. *

Jakub Ozorowski

Co-founder agencji interaktywnej MobileTry z Olsztyna, świadczącej kompleksowe usługi przede wszystkim małym firmom. Specjalizacją agencji jest tworzenie stron internetowych i sklepów internetowych. Ponadto MobileTry prowadzi kampanie reklamowe w internecie oraz oferuje usługi z zakresu pozycjonowania.

Mało czytania? Nie ma problemu!

Sprawdź inne teksty powiązane z tym artykułem

Michał Ziółkowski

5 lat temu

Porady dotyczące user interface – 7 ważnych kwestii

Oto nasze porady dotyczące user interface, których wcielenie w życie sprawi, że Twoja strona internetowa będzie bardziej przyjazna odbiorcom. Sprawdź je!

Jakub Ozorowski

5 lat temu

Brak konwersji w sklepie internetowym – 10 typowych przyczyn

Brak konwersji w sklepie internetowym to niewątpliwie ogromny problem dla właścicieli stron e-commerce. Jakie są najczęstsze przyczyny tego stanu rzeczy?

Michał Ziółkowski

5 lat temu

Proces tworzenia strony internetowej – na czym polega?

Z jakich kroków składa się proces tworzenia strony internetowej? Jakie jego aspekty są istotne, a które mniej? Zobacz, jak proces ten powinien przebiegać.

Michał Ziółkowski

5 lat temu

Najczęstsze błędy typograficzne na stronach internetowych

Jakie są najczęstsze błędy typograficzne na stronach internetowych? Dlaczego należy ich bezwzględnie unikać na własnej stronie? Poznaj nasz poradnik.

Jakub Ozorowski

5 lat temu

Aktualizacja strony internetowej – kiedy najlepiej ją przeprowadzić?

W którym momencie aktualizacja strony internetowej powinna być przeprowadzona? Po czym poznać, że najwyższy czas na zmiany? Poznaj nasz poradnik.

Jakub Ozorowski

5 lat temu

Co irytuje użytkowników stron internetowych? – 14 kwestii

Czy wiesz, co irytuje użytkowników stron internetowych? Jakie są to elementy? W naszym wpisie wymieniamy kluczowe sprawy, na które musisz zwrócić uwagę.