Above the Fold: jak ułożyć stronę Store.fan, żeby odwiedzający kupowali w kilka sekund

Ktoś klika Twój link z opisu, naklejki w relacji albo bio. Jego kciuk już odruchowo zmierza w stronę przycisku Wstecz — tak dziś działa przeglądanie na telefonie. W ciągu następnych trzech sekund, zanim świadomie podejmie jakąkolwiek decyzję, wyrabia sobie opinię: czy to jest warte mojego czasu, czy nie. Nic poniżej pierwszego ekranu nie ma wpływu na ten werdykt — ani akapit bio, ani piąty produkt, ani rekomendacja, której formatowaniu poświęciłeś godzinę. Above the fold to oferta sprzedażowa. Cała reszta jest drobnym drukiem dla osób, które już powiedziały „tak”.

Dlaczego above the fold nadal ma znaczenie na telefonie

To określenie pochodzi z prasy, ale stojąca za nim zasada jest jeszcze bardziej trafna na ekranie telefonu niż kiedykolwiek była na papierze. Czytelnik gazety mógł rozłożyć stronę; osoba trafiająca z linku w bio prawie nigdy nie przewija dalej, jeśli pierwszy ekran od razu nie komunikuje: to jest dla mnie. Przychodzi ze środka przewijania z innego miejsca — z Reela, TikToka, grupowego czatu — i zachowuje ten impet. Jeśli pierwszy ekran Twojego sklepu nie przerwie go czymś konkretnym i atrakcyjnym, kciuk będzie robił dokładnie to, co robił wcześniej: przejdzie dalej.

To główny powód, dla którego dobrze zbudowana strona store.fan wypada lepiej niż zwykła lista linków. Prosta lista pięciu identycznie wyglądających linków zmusza odwiedzającego do ustalenia, co jest ważne. Dobrze uporządkowany sklep wykonuje tę pracę za niego — zdjęcie okładkowe, nagłówek i najważniejsza oferta są ułożone według priorytetu, więc decyzja zapada, zanim odwiedzający musi się nad nią długo zastanawiać.

Trzy elementy, które konkurują o miejsce na pierwszym ekranie

Na większości telefonów widoczny przed przewinięciem obszar mieści około trzech elementów: zdjęcie okładkowe i awatar, nagłówek lub linię bio oraz jeden albo dwa najważniejsze produkty lub bloki. I to wszystko. Trzy miejsca, z których każde ma konkretne zadanie — nie dekoracyjne.

Zwróć uwagę, czego na tej liście brakuje: pełnego katalogu produktów, Twojej historii i kwalifikacji. To wszystko ma znaczenie — ale dopiero wtedy, gdy pierwszy ekran wykonał swoje zadanie i zatrzymał odwiedzającego, który przewija dalej z konkretnym zamiarem, zamiast wyjść obojętnie.

Układaj produkty według priorytetu konwersji, nie chronologii

Najczęstszy błąd w układzie nie jest problemem designu — chodzi o kolejność. Twórcy zwykle dodają produkty w kolejności ich tworzenia, więc nowość automatycznie trafia na górę, albo traktują wszystkie produkty jako równie ważne. Żadne z tych podejść nie odzwierciedla tego, jak faktycznie zachowują się kupujący. Zamiast tego ustawiaj produkty według priorytetu konwersji: oferta, która ma największą szansę przekonać osobę odwiedzającą Cię po raz pierwszy, powinna znaleźć się na samej górze.

W praktyce zwykle oznacza to, że pierwszy powinien być produkt o najniższym progu wejścia i najbardziej oczywistej wartości — szablon za $17, poradnik za $9 albo główny kurs z wyraźnymi dowodami skuteczności — a nie pakiet coachingowy za $500 ani darmowy lead magnet, który zbiera adres e-mail, ale nie przynosi przychodu. Oferty z wyższej półki cenowej lepiej konwertują niżej na stronie, gdy odwiedzający zdąży się rozgrzać podczas przewijania. Darmowe lead magnety najlepiej umieszczać jako drugi lub trzeci blok, a nie jako pierwszą rzecz, którą widzi nieznajoma osoba — rozpoczęcie od „darmowe”, zanim pokażesz płatną wartość, uczy odwiedzających oczekiwać, że wszystko dostaną za nic.

Zdjęcie okładkowe i nagłówek: Twoja oferta w trzy sekundy

Traktuj zdjęcie okładkowe jak billboard, nie jak zdjęcie profilowe. Powinno komunikować kategorię i jakość, zanim ktokolwiek przeczyta choć jedno słowo — może to być estetyczna makieta produktu, autentyczne zdjęcie, na którym uczysz lub tworzysz, albo starannie przygotowana kompozycja pokazująca zawartość pliku. Unikaj przeładowanych zdjęć stockowych i wszystkiego, co mogłoby należeć do dowolnego twórcy; to konkret sprawia, że nieznajoma osoba się zatrzymuje. Projektant sklepu w panelu pozwala w kilka minut zmieniać zdjęcia okładkowe, motywy i bloki układu, więc nie ma powodu, by obraz zastępczy odbierał Ci sprzedaż.

Linia nagłówka wykonuje jeszcze więcej pracy niż obraz. Powinna odpowiadać na jedno pytanie: co dostanę, jeśli zostanę? Porównaj ogólnikowe „witaj na mojej stronie” z konkretnym „presety Lightrooma na 5 minut dla fotografów mobilnych”. Druga wersja w mniej niż dwie sekundy mówi odwiedzającemu, czy ma przewijać dalej, czy wyjść — dokładnie taką decyzję chcesz, żeby szybko podjął, na swoją korzyść. Jeśli chcesz zobaczyć dobrze zrealizowany przykład od początku do końca, przykładowy sklep na żywo pokazuje, jak zdjęcie okładkowe, nagłówek i najważniejsza oferta współpracują ze sobą, zamiast walczyć o uwagę.

Pierwszy ekran nie jest wycieraczką powitalną. To oferta, która ma trzy sekundy, żeby zadziałać.— zespół store.fan

Co powinno znaleźć się poniżej pierwszego ekranu — a co nie

Nie wszystko musi walczyć o miejsce na pierwszym ekranie, a upychanie całego katalogu w górnej sekcji zwykle przynosi odwrotny skutek, bo strona wygląda na przeładowaną. Dodatkowe produkty, pełniejsze bio i dowody społeczne powinny znaleźć się poniżej pierwszego ekranu — widoczne dla osoby, która jest już na tyle zaangażowana, by przewijać, ale nie konkurujące o uwagę z osobą, która jeszcze nie jest.

• Above the fold: zdjęcie okładkowe, nagłówek, 1–2 najważniejsze oferty według priorytetu konwersji
• Tuż poniżej: druga grupa produktów, pakiety albo wyraźny separator kategorii
• Dalej: rekomendacje, pełniejsze bio i dodatkowe linki społecznościowe
• Na dole: mniej ważne linki zewnętrzne oraz starsze lub sezonowe produkty

Kody rabatowe i kampanie: wykorzystaj je, żeby zdobyć kliknięcie, a nie je utrudnić

Dobrze umieszczony baner albo ograniczony czasowo kod rabatowy może zamienić spojrzenie w kliknięcie, ale tylko wtedy, gdy wzmacnia Twoją najważniejszą ofertę, zamiast z nią konkurować. Wbudowane kody rabatowe i banery kampanii powinny znajdować się obok głównego produktu, a nie być rozrzucone przy pięciu różnych linkach — jeden wyraźny sygnał pilności above the fold działa lepiej niż trzy ciche sygnały w różnych miejscach strony. Jeśli testujesz to po raz pierwszy, połącz jedną kampanię z najważniejszym produktem na tydzień, zanim dodasz kolejne.

Dlaczego warto poprawić to w tym tygodniu, a nie kiedyś

Łatwo potraktować układ strony jako projekt na później — coś, co dopracujesz, gdy będziesz mieć więcej produktów albo obserwujących. Jednak układ wpływa na każdego odwiedzającego, który klika Twój link, także na osoby, których pozyskanie wymagało już Twojej pracy albo wydatków na reklamy. Źle uporządkowany pierwszy ekran nie kosztuje Cię tylko dzisiejszej sprzedaży; kosztuje Cię sprzedaż każdej przyszłej osobie, dopóki go nie poprawisz. Dobra wiadomość jest taka, że to jedna z najszybszych zmian, jakie możesz wprowadzić: nie potrzebujesz nowych produktów, wystarczy zmienić kolejność tych, które już masz. Jeśli jeszcze nie masz sklepu, jego utworzenie zajmuje kilka minut i pozwala od razu zacząć testy.

Dobry układ nie zastąpi dobrego produktu, ale decyduje o tym, czy dobry produkt się sprzedaje, czy pozostaje niewidoczny poniżej przeładowanego pierwszego ekranu. Porównaj obecny układ ze swoimi planami i funkcjami, aby upewnić się, że korzystasz z każdego dostępnego narzędzia projektanta — motywy, bloki okładki i banery kampanii istnieją właśnie po to, by pierwszy ekran skuteczniej sprzedawał. Jeśli utkniesz przy zmianie kolejności, zawsze możesz skontaktować się z pomocą techniczną albo przejrzeć blog, gdzie znajdziesz więcej porad dotyczących usprawniania pozostałej części lejka, gdy pierwszy ekran już konwertuje.