Jak korzystać z wzorca F, aby zwiększyć konwersje

Stworzenie strony docelowej po kliknięciu tak, aby zawierała wszystkie istotne elementy strony docelowej po kliknięciu, jest ważne, ale równie ważna jest ich kolejność i lokalizacja — układ strony docelowej po kliknięciu.

Projektując układ strony docelowej po kliknięciu, należy wziąć pod uwagę sposób, w jaki odwiedzający najprawdopodobniej zobaczą Twoją stronę. Uznanie naszej tendencji do czytania od góry do dołu to dobry początek, aby skłonić odwiedzających do skupienia się na tym, czego od nich oczekujesz. Wiedząc, dokąd ich wzrok prawdopodobnie pójdzie, możesz stworzyć wizualną hierarchię i umieścić swoje wezwanie do działania w najlepszych lokalizacjach, aby umożliwić im konwersję.

Przeprowadzono również szeroko zakrojone badania, które to potwierdzają. W 2006 roku Nielsen Norman Group przeprowadziła jedno z najbardziej użytecznych i najczęściej cytowanych dotychczas badań eye-trackingowych. Podczas badania zbadali, jak 232 użytkowników przeglądało tysiące różnych stron internetowych. Wyniki wykazały, że główne zachowania użytkowników podczas czytania były stosunkowo spójne w różnych witrynach i zadaniach. Użytkownicy czytają w układzie F-Pattern.

Co to jest wzór F?

Wzór F to sposób, w jaki poruszają się nasze oczy, gdy czytamy treści online. W ciągu kilku sekund nasze oczy poruszają się z niezwykłą szybkością po kopii witryny i innych elementach wizualnych, skanując stronę w następującej kolejności:

• Najpierw u góry strony, aby przeczytać ważne nagłówki
• Następnie w lewej części strony, aby wyświetlić cyfry lub wypunktowania
• Wreszcie, ponownie na całej stronie, aby przeczytać pogrubiony tekst lub podtytuły

Poniższe trzy mapy cieplne pochodzą z badań śledzenia wzroku użytkowników na trzech różnych stronach internetowych. Klucz kolorów wygląda następująco:

• Czerwony = najczęściej oglądany i najbardziej zafiksowany na
• Żółty = trochę widoków, ale mniej fiksacji
• Niebieski = najmniej oglądany i prawie żadnych fiksacji
• Szary = prawie nie ma widoków i żadnych fiksacji

Zauważ, że wzór F-Reading jest bardziej szorstkim, uogólnionym konturem - niekoniecznie dokładnym kształtem F. Należy również zauważyć, że wzór F-Pattern nie ogranicza się do dwóch poziomych łodyg, jak tradycyjny F.

Zdarza się, że użytkownicy czytają tylko jedną poziomą linię, przez co wzór będzie wyglądał jak odwrócone L. Innym razem przeczytają trzecią sekcję strony, przez co projekt będzie wyglądał bardziej jak E niż F. I , jeśli Twoja strona docelowa po kliknięciu jest dłuższa, warto dołączyć więcej niż dwa rdzenie, aby pomóc w stworzeniu wizualnej hierarchii, którą ludzie będą chętniej podążać.

Jak wzór F odnosi się do stron docelowych po kliknięciu

Ważne jest, aby projektować strony internetowe z zamierzonym przepływem. Bez niczego umieszczonego specjalnie, aby przyciągnąć uwagę widzów, ich oczy będą naturalnie poruszać się po stronie o dużej zawartości treści w projekcie F-Pattern.

Wzór F-Pattern najlepiej sprawdza się w przypadku stron gęstych z tekstem — takich jak posty na blogu, strony wyników wyszukiwania, dłuższe strony sprzedaży itp. Nie oznacza to jednak, że nie można zaprojektować krótkich stron docelowych po kliknięciu za pomocą układ F-Wzór.

Korzystając z wyników badań eyetrackingowych, możesz strategicznie zaprojektować dowolną stronę docelową po kliknięciu, tak aby najważniejsze elementy znajdowały się dokładnie tam, gdzie Twoi odwiedzający najprawdopodobniej się na nich skupią.

Pamiętaj, że oczy widzów prawie zawsze zaczynają się w lewym górnym rogu strony, zanim zeskanują resztę strony. Jeśli więc Twoja strona docelowa po kliknięciu jest zajęta i chcesz, aby odwiedzający zauważyli konkretny element od razu — na przykład odliczanie do Twojej oferty — pamiętaj, aby umieścić go w tej górnej lewej sekcji. Następnie zaprojektuj resztę strony docelowej po kliknięciu z przejrzystą hierarchią wizualną i przepływem, który prowadzi widzów do CTA.

Strona docelowa po kliknięciu, która ignoruje wzór F

Pest Exterminator stworzył tę stronę docelową po kliknięciu i nie jest ona zgodna z układem F. Brakuje w nim żadnej wizualnej hierarchii:

Na co w pierwszej kolejności kieruje się twoja uwaga? Obraz? Zniżka? Pole jednopostaciowe? Trzy oferty na dole?

Twoje oczy nie są przyciągane do jednego konkretnego miejsca. Zbyt wiele rzeczy przyciąga twoją uwagę w kilku różnych kierunkach. Każdy element został sformatowany tak, aby przyciągał jak najwięcej uwagi, co sprawia, że ​​wszystkie ze sobą konkurują. Dlatego odwiedzającym trudno jest określić główny cel strony, a Pest Exterminator prawdopodobnie będzie miał trudności z generowaniem konwersji.

Przyjrzyjmy się teraz kilku przykładom stron docelowych po kliknięciu, które są zgodne z wzorcem F-Reading.

Pamiętaj, że w przypadku krótszych stron docelowych po kliknięciu pokazaliśmy całą stronę. W przypadku dłuższych stron wyświetlamy tylko w górnej części strony. Ponadto niektóre z wymienionych marek mogą przeprowadzać testy A/B swojej strony z wersją alternatywną niż ta wyświetlana poniżej.

strony docelowe po kliknięciu zgodne z układem F

Dovico

Powyższa strona docelowa Dovico po kliknięciu wykorzystuje najlepsze praktyki projektowania stron internetowych F-Pattern. Zwróć uwagę, że każdy ważny element znajduje się dokładnie wzdłuż trasy F-Pattern, na której odwiedzający będą naturalnie patrzeć podczas przeglądania tej strony:

1. Widzowie najpierw zajrzą w lewym górnym rogu strony, gdzie zauważą logo firmy.
2. Poruszając się wzdłuż pierwszej poziomej łodygi, dojdą do uśmiechniętej twarzy kobiety. Szczególnie interesujące jest to, że F-Kąt opada w dół w kierunku jej twarzy i nie znajduje się bezpośrednio w numerach telefonów.
3. Przechodząc w dół lewej strony strony do następnego poziomego tematu, widzowie skupią swoją uwagę na nagłówku i podtytule.
4. Na koniec przejdą wzór F w dół pionowego trzpienia, gdzie przejdą do przycisku CTA, który jest głównym celem strony docelowej po kliknięciu.

Umieszczenie najważniejszych elementów strony docelowej po kliknięciu wzdłuż F-Layout w ten sposób pomaga zoptymalizować stronę Dovico i przekonać odwiedzających do podjęcia działań w ramach oferty.

Wydajność dynamiczna

Strona docelowa po kliknięciu Dynamic Yield również jest zgodna z układem F-Pattern, ale ponieważ ich nazwa i logo są najmniejsze w części strony widocznej na ekranie, wzrok widza prawdopodobnie zacznie się w innym miejscu:

1. Prawdopodobnie najpierw przyciągnie ich nagłówek strony, ponieważ czcionka jest większa, a jej część jest pogrubiona.
2. Następnie przesuną się wzdłuż pierwszej łodygi do obrazu po prawej stronie, co kończy pierwszą poziomą łodygę.
3. Przeglądając pionowy trzpień, widzowie przeczytają podtytuł.
4. Kontynuując w dół, jasny niebieski przycisk CTA prawdopodobnie przyciągnie uwagę odwiedzających.
5. Po naciśnięciu przycisku CTA plakietki klienta działają jak rdzeń dodawania, a strona jest kontynuowana w podobny sposób w części strony widocznej na ekranie.

Wspólna chiropraktyka

Ponieważ projekty wzorów F nie zawsze muszą być zgodne z tradycyjnym kształtem F, zauważ, że strona docelowa Joint Chiropractic po kliknięciu ma sporo poziomych pni:

1. Podobnie jak w przypadku Dynamic Yield, nagłówek zaczyna się od wzoru F (i kontynuuje po prawej stronie z formularzem).
2. Po drugie, deklaracja misji (większą czcionką niż reszta kopii) znajduje się na następnym pniu.
3. Wreszcie ikonografia i śmiałe zalety Wspólnej Chiropraktyki tworzą ostateczne pnie wzoru.

Pomimo większej liczby pni, strona została stworzona z myślą o najlepszych praktykach projektowania stron internetowych F-Pattern, co ułatwia odwiedzającym śledzenie i skupienie się na najważniejszych częściach strony docelowej po kliknięciu.

Boston Globe

Strona docelowa po kliknięciu w Boston Globe nie ma typowego kształtu F, co ostatecznie pomaga przekonać odwiedzających do konwersji w ramach promocji:

1. Zaczynając od lewego górnego rogu, odwiedzający najpierw dostrzegają logo gazety.
2. Bezpośrednio pod logo znajduje się nagłówek, a następnie obraz wzdłuż tej samej poziomej łodygi.
3. Kontynuując w dół pionowej łodygi, odwiedzający skupiają się na jasnozielonym przycisku CTA.
4. Jeśli zdecydują się przejść dalej w dół pionowego pnia, dowiedzą się, czego mogą się spodziewać, rejestrując się w celu uzyskania nieograniczonego dostępu.

Twoja kolej na użycie wzoru F

Uwzględnienie wszystkich niezbędnych elementów strony docelowej po kliknięciu jest ważne dla konwersji, ale ich układ jest równie ważny.

Projekt F-Pattern pomaga ustalić wizualną hierarchię i celowy przepływ, aby odwiedzający mogli skupić się na określonych elementach. Jeśli uda Ci się skłonić ich do podążania wybraną ścieżką, będą mniej skłonni do odbijania się, a zamiast tego będą bardziej zaangażowani i podejmą działania na Twojej stronie.

Mając na uwadze te przykłady, nadeszła Twoja kolej, aby zastosować F-Layout w praktyce. Stwórz własną profesjonalną stronę docelową po kliknięciu za pomocą Instapage, poproś o demo Enterprise już dziś.