Co umieścić w sekcji above the fold strony internetowej

Jeśli planujesz zlecić komuś budowę strony internetowej lub zrobić ją samodzielnie, sprawdź moje wskazówki odnośnie wyglądu i treści, które powinny być zawarte w sekcji above the fold.

Z tego artykułu dowiesz się:

• co to jest sekcja above the fold strony internetowej
• co umieścić w above the fold na stronie głównej
• co umieścić w above the fold na podstronach
• sekcja above the fold na różnych urządzeniach

Co to jest sekcja above the fold strony internetowej

Sekcję above the fold zwykłem nazywać na własny użytek intro strony internetowej. Intro strony może wywoływać skojarzenia z animacjami na stronach, wykonywanymi w technologii Flash, które były bardzo popularne na stronach internetowych mniej więcej w latach 2005 – 2010. Pamiętam, że to właśnie od animacji i stron we flashu zacząłem swoją przygodę z tworzeniem stron internetowych.

Jednak po skutecznym wyparciu technologii flash z branży projektowania stron, aktualnie jako intro (a więc i sekcję above the fold) należy rozumieć pierwszy ekran (widok) strony internetowej, który widzimy po wejściu na nią.

Jeśli mówimy o sekcji above the fold strony internetowej, to należy pamiętać, że należy rozróżnić ten widok zarówno strony głównej, jak i podstron, ponieważ to właśnie podstrony mogą zbierać najwięcej ruchu na zapytania typu long tail z Google (sprawdź przy okazji moją ofertę pozycjonowanie stron Olsztyn). Warto więc przygotować pierwszy ekran strony w optymalny sposób w obydwu tych miejscach. Sprawdź teraz moje rekomendacje na temat tego, co należy umieścić w sekcji above the fold strony internetowej.

Co umieścić w above the fold na stronie głównej

Niezależnie od tego, czy mówimy o stronie głównej, czy podstronach, w sekcji above the fold koniecznie powinno znaleźć się nasze logo, które jest podlinkowane do strony głównej serwisu, a także (choć to już przestaje być oczywiste) nawigacja, czyli menu strony. W górnym pasku (headerze) strony można też nieraz spotkać:

• ikony mediów społecznościowych (choć te zalecam umieszczać niżej, aby nie odciągać użytkowników od naszej strony),
• główny kontakt – numer telefonu (zadbaj, aby był klikalny przynajmniej na urządzeniach mobilnych) albo adres email (jeśli jest klikalny, to zadbaj, by był zabezpieczony przed spamem)
• przycisk CTA, np. Szybka wycena lub coś podobnego (stosuj tylko, jeśli masz na to miejsce)

W sekcjach above the fold na stronach głównych nowoczesnych serwisów internetowych zwykle widzimy piękne duże elementy multimedialne (zdjęcia, slidery, wideo), które wypełniają cały ekran naszego urządzenia. Jest to słuszne podejście i z pewnością wywoła efekt „wow” u naszego odbiorcy, o ile nie załadujemy w tym miejscu obrazka, który waży kilka megabajtów i wpłynie negatywnie na szybkość ładowania naszej strony internetowej.

Warto wspomnieć, że pasek nawigacyjny z logo może być nałożony na tło graficzne / wideo, a więc niekoniecznie musi występować np. na białym tle. Jeśli zamierzamy zastosować takie rozwiązanie, musimy upewnić się, że logo i elementy nawigacyjne będą na pewno czytelne, gdy zostaną nałożone na zdjęcie lub wideo w tle.

Poza elementem multimedialnym, który należy rozumieć jako zdjęcie w tle, slider (czyli zmieniające się zdjęcia) lub wideo, w sekcji above the fold na stronie głównej koniecznie musimy zawrzeć duży nagłówek, który będzie w prosty, jednoznaczny sposób informował czym się zajmuje nasza firma oraz jakie korzyści będzie z tego miał nasz odbiorca. Przykładowo ja na swojej stronie stosuję duży nagłówek „Od 2010 roku pomagam firmom zdobywać klientów przez internet”. Taki nagłówek pokazuje moje doświadczenie (od 2010 to już sporo) oraz korzyści płynące ze współpracy ze mną (nowi klienci dla Twojej firmy).

Kolejnym elementem w sekcji above the fold, który nie jest wymagany, ale może być pomocny, to dodatkowe zdanie opisowe, które rozwija nasz główny nagłówek, np. trochę bardziej szczegółowo opisuje naszą ofertę. W moim przypadku jest to np. „Tworzę strony i sklepy internetowe oraz prowadzę skuteczne kampanie reklamowe w internecie. Dzielę się praktyczną wiedzą w formie darmowych porad wideo i artykułów dla przedsiębiorców.”

Aby nie przytłaczać odbiorcy zbyt dużą liczbą informacji w sekcji above the fold, nie powinniśmy przesadzać z ilością tekstu. Powinno to być zrobione w taki sposób, aby użytkownik w ciągu 2-3 sekund był w stanie dowiedzieć się, o co chodzi na danej stronie internetowej. Jeśli uzna, że to tematyka, której szukał, powinniśmy teraz pokazać mu jaką akcję polecamy mu wykonać. Najlepszym rozwiązaniem jest wykorzystanie tu dużego guzika akcji (CTA), w którym kierujemy klienta do innej podstrony, kontaktu, formularza, itd.

W mojej ocenie, na bazie ponad 10-letniego doświadczenia w tworzeniu stron internetowych, to już wszystko, co powinniśmy wyświetlać w intro (sekcji above the fold) na stronie internetowej. Podsumowując, będzie to:

• pasek nawigacyjny z logo, menu oraz innymi elementami opcjonalnymi
• element multimedialny (np. zdjęcie w tle, slider, wideo)
• duży nagłówek prezentujący temat i korzyści dla klienta
• mniejszy nagłówek opisujący ofertę
• przycisk CTA

Jeżeli udało się przez nasze intro zaciekawić użytkownika na tyle, że kliknął w przycisk lub zjechał w dół, możemy uznać to za sukces. Warto wspomnieć, że możesz monitorować takie rzeczy np. w nagraniach sesji narzędzia Hotjar.

Co umieścić w intro na podstronach

Podstrony w naszym serwisie różnią się zwykle od strony głównej. O ile sekcja above the fold na stronie głównej powinna robić efekt wow przez zawarte multimedia i design, o tyle na podstronach powinniśmy bardzo szybko pokazać użytkownikowi odpowiedź na jego pytanie.

Należy pamiętać, że nasze podstrony mogą zbierać dużo ruchu z wyszukiwarki Google, na tematy, które poruszają (szczególnie, jeśli zainteresujemy się usługą pozycjonowania stron). Powiedzmy, że ktoś wpisuje w Google frazę „jak być wyżej w Google” i widzi na pierwszym miejscu link do mojego artykułu. Czy w takiej sytuacji powinien na tej podstronie zobaczyć efektowne intro, grafiki, itd? W mojej ocenie nie. Powinien jak najszybciej zobaczyć odpowiedź na swoje pytanie. Dobrze by było pokazać też użytkownikowi, w jakim miejscu naszego serwisu się znajduje. Wykonać do możemy za pomocą tzw. nawigacji okruszkowej – breadcrumbs.

Co więc należy pokazać w sekcji above the fold na podstronach naszego serwisu?

• główny pasek nawigacyjny (header) – najczęciej ten sam, co na stronie głównej
• breadcrumbs, czyli menu okruszkowe, w którym pokazujemy użytkownikowi w którym miejscu strony się znalazł
• duży, wyraźny tytuł danej podstrony
• odpowiedź na pytanie (np. w formie wideo) lub zajawkę odpowiedzi w formie wstępu do artykułu.

Sekcja above the fold na różnych urządzeniach

Warto mieć na uwadze, że intro naszej strony internetowej może wyglądać różnie na różnych urządzeniach. Każdy wyświetlacz ma inną sekcję above the fold i niestety musimy się z tym pogodzić.

Zalecam potestowanie swoich sekcji above the fold na różnych urządzeniach – komputerach, telefonach, tabletach, Smart Watch, Smart TV, itd. Jeśli na jakiejś rozdzielczości nasze treści są ucięte, nie wyświetlają się poprawnie lub stwierdzimy jakieś inne odstępstwa od zaproponowanych w tym artykule elementów, skontaktujmy się z wykonawcą swojej strony internetowej, aby wprowadzić stosowne usprawnienia.

Mam nadzieję, że wskazówki z tego artykułu były dla Ciebie przydatne. Jeśli po przeczytaniu tego tekstu jesteś zainteresowany zleceniem mi wykonania strony internetowej dla Twojej firmy, skontaktuj się ze mną.

Zobacz także

O czym pisać na blogu firmowym i dlaczego warto go prowadzić?

Kategorie: Strony internetowe

Jeszcze kilkanaście lat temu samo posiadanie strony internetowej było postrzegane jako wyznacznik wiarygodnego, solidnego przedsiębiorstwa. Wiele od tych czasów...

Czytaj więcej Artykuł

Co powinna zawierać strona internetowa?

Kategorie: Strony internetowe

Planujesz stworzenie strony internetowej, ale nie wiesz jakie informacje powinna ona zawierać? Sprawdź moje wskazówki, bazujące na ponad 10-letnim...

Czytaj więcej Artykuł

Nowoczesna strona internetowa – jaka powinna być?

Kategorie: Strony internetowe

Strona internetowa to narzędzie, bez którego obecnie nie może obyć się prawdopodobnie żadna działalność komercyjna ani publiczna. Także osoby...

Czytaj więcej Artykuł

Jak poprawnie umieszczać logo na stronie internetowej?

Kategorie: Strony internetowe

Jeśli posiadasz stronę internetową lub dopiero planujesz ją założyć, koniecznie zadbaj o poprawność dodania logo firmowego w górnej części strony. Z tego...

Czytaj więcej Artykuł

Jak sprawdzić szybkość strony internetowej?

Kategorie: Strony internetowe

Zastanawiasz się jak sprawdzić szybkość strony internetowej i do czego w ogóle jest to potrzebne? Odpowiedź znajdziesz w poniższym artykule....

Czytaj więcej Artykuł