Co to jest układ wzoru Z i kiedy go używać?

Strony docelowe po kliknięciu, takie jak strony internetowe, zawsze powinny być zgodne z jakąś uporządkowaną hierarchią wizualną. Są szanse, już o tym wiesz, ale warto to powtórzyć. Wszystko, co możesz zrobić, aby skłonić widzów do skupienia się na tym, co chcesz, aby zauważyli, jest w zasadzie nazwą gry.

Dobry projektant rozumie, w jaki sposób użytkownicy przeglądają i przetwarzają informacje online. Ta wiedza wpływa na ich decyzje projektowe i prowadzi do umieszczania najistotniejszych elementów w sposób, który zostanie zauważony. Jeśli wszystko wygląda dobrze, projekt zachęci odwiedzających do podjęcia pożądanego działania.

Jednym z głównych sposobów, w jaki projektanci wpływają na użytkowników i zwracają uwagę na najważniejsze elementy strony, jest zaprojektowanie strony przy użyciu wzorca Z.

Co to jest wzór Z?

Wzór Z-Pattern śledzi trasę, jaką pokonuje ludzkie oko podczas czytania — od lewej do prawej, od góry do dołu:

• Najpierw ludzie skanują od lewego górnego rogu do prawego górnego rogu, tworząc wyimaginowaną poziomą linię
• Następnie w dół i na lewą stronę widocznej strony, tworząc wyimaginowaną linię ukośną
• Na koniec z powrotem w prawo, tworząc drugą poziomą linię

Kiedy oczy widzów poruszają się w tym schemacie, tworzy wyimaginowany kształt „Z”:

Należy zauważyć, że projekty wzoru Z nie muszą być zgodne z tradycyjnym kształtem Z, a liczba kątów Z wzdłuż wzoru może się różnić.

W jaki sposób wzór Z odnosi się do stron docelowych po kliknięciu

Tworzenie strony internetowej z układem Z pomaga stworzyć wizualną hierarchię, którą ludzie będą prawdopodobnie podążać, co czyni ją idealną opcją układu dla projektów stron docelowych po kliknięciu.

Ale po co projektować stronę z wzorem Z zamiast z wzorem F?

Podczas gdy układ F jest bardziej odpowiedni dla stron o dużej zawartości treści, układ Z jest przeznaczony przede wszystkim dla stron z minimalną ilością kopii. Zasadniczo wzór Z lepiej nadaje się do stron, na których priorytetem jest prostota, a głównym wnioskiem jest CTA.

Projektowanie z myślą o układzie Z:

• Górna pozioma linia powinna zawierać główne elementy, na których widzowie mają się najpierw skupić
• Linia ukośna powinna zawierać wszelkie informacje, które składają się na wezwanie do działania
• Dolna pozioma linia powinna podświetlić wezwanie do działania w pewnym punkcie wzoru

Tworzenie strony docelowej po kliknięciu zgodnie z układem Z-Pattern może prowadzić do większej liczby konwersji, ponieważ masz kontrolę nad tym, gdzie poruszają się oczy widza.

Dowiedzmy się nieco więcej o projekcie wzoru Z, analizując kilka przykładów stron docelowych po kliknięciu.

Pamiętaj, że w przypadku krótszych stron docelowych po kliknięciu pokazaliśmy całą stronę. Jednak w przypadku dłuższych stron wyświetlamy tylko w górnej części strony. Być może trzeba będzie przejść do każdej strony docelowej po kliknięciu, aby zobaczyć niektóre z omawianych przez nas kwestii. Ponadto niektóre wymienione przykłady mogą testować A/B swoją stronę z wersją alternatywną niż ta wyświetlana poniżej.

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

Poniższa strona docelowa aplikacji Traffic Light Media po kliknięciu nie jest zgodna ze wzorem Z. Zapewnia jednak celowy przepływ, ponieważ jest czystą, zorganizowaną stroną, która skłania oczy widzów do podążania zamierzoną ścieżką w dół środka strony do przycisku CTA:

Sprytnie przetestują stronę A/B z poniższą odmianą. Tym razem są zgodne z układem Z-Pattern:

Po zobaczeniu tej odmiany ścieżka Z wygląda następująco:

1. Biały nagłówek zwraca uwagę najpierw na ciemniejszym tle, mimo że logo firmy znajduje się wyżej na stronie.
2. Stamtąd ścieżka przechodzi do nagłówka formularza, ponieważ znajduje się on tuż obok nagłówka strony i dobrze kontrastuje z białym tłem. To jest pierwszy kąt w układzie Z.
3. Następnie projekt wzoru jest kontynuowany po przekątnej do lewej strony strony do żółtej kopii „odkryj okazję”.
4. Podążając ścieżką, uwaga zostaje ponownie skierowana na prawą stronę i skupiona na pomarańczowym przycisku CTA.

Pamiętaj, że te ruchy oczu są subiektywne i nie wszyscy użytkownicy będą skanować strony w ten sam sposób. Najważniejszą rzeczą, o której należy pamiętać, jest skupienie uwagi widzów na ścieżce, którą chcesz, aby podążali, i przekonanie ich do konwersji za pomocą wezwania do działania.

Przyjrzyjmy się teraz niektórym stronom docelowym po kliknięciu, które są zgodne z układem wzorca Z.

strony docelowe po kliknięciu zgodne ze wzorem Z

LifeLock

Ta strona po kliknięciu LifeLock jest zgodna ze wzorem Z, ale nie kończy się wezwaniem do działania:

1. Odwiedzający prawdopodobnie zacznie od nagłówka, ponieważ jest to większa czcionka niż reszta tekstu i dobrze kontrastuje z ciemnym tłem.
2. Skanując w prawo, widz skupi się na twarzy mężczyzny, która jest pierwszym kątem Z.
3. Następnie wzrok przeniesie się po przekątnej do jasnoczerwonego przycisku CTA w drugim punkcie zwrotnym.
4. Na koniec skupimy się na obrazie smartfona.

Podobnie jak projekty z wzorem Z nie mogą tworzyć tradycyjnego „Z”, ważne jest, aby pamiętać, że CTA nie są wymagane przy kątach wzoru Z. Po prostu lepiej, jeśli CTA znajdują się na zakrętach, ponieważ to tam trafią oczy widzów.

ZadzwońPożar

Ta strona po kliknięciu CallFire to kolejny przykład, który nie tworzy tradycyjnego Z, ale wzorzec jest nadal widoczny:

1. Przeglądający zaczną od nagłówka strony, ponieważ jest on większy niż reszta tekstu.
2. Stąd odwiedzający będą skanować w dół iw prawo przechodząc przez obraz, skupiając się na formularzu i przycisku CTA — tworząc pierwszy kąt Z.
3. Następnie widzowie przemieszczają się w lewo w kierunku filmu — tworząc drugi kąt Z.
4. W końcu oczy widzów przesuną się przez stronę na ikonografię i trzy kroki.

Wyrocznia

Strona Oracle to kolejny przykład, który nie podąża za tradycyjnym Z, ale ścieżka prowadzi do CTA na końcu:

1. Odwiedzający stronę prawdopodobnie zaczną od nagłówka, ponieważ jest to największa czcionka na stronie i jest łatwa do odczytania z całą otaczającą białą przestrzenią.
2. Następnie przesuną się poziomo do obrazu po prawej stronie.
3. Od tego momentu ludzkie oko naturalnie spłynie na lewą stronę grafiki.
4. Na koniec oczy widzów przejdą dolną część strony do CTA, gdzie kończy się układ Z.

Fleetmatics

Ta strona docelowa Fleetmatics po kliknięciu zawiera wezwanie do działania pod wieloma kątami Z:

1. Możliwe, że nagłówek i podtytuł w lewym górnym rogu przyciągną uwagę widzów jako pierwsze.
2. Stamtąd odwiedzający przeskanują w prawo, aby zobaczyć wideo w tle.
3. Tworząc pierwszą przekątną w kształcie litery Z, odwiedzający prawdopodobnie zeskanują w lewo w kierunku pierwszego pomarańczowego przycisku CTA.
4. Następnie wzrok użytkownika przejdzie przez plakietki klientów, przechodząc tam iz powrotem przez wypunktowaną kopię do drugiego pomarańczowego przycisku CTA.
5. Na koniec układ Z jest kontynuowany z powrotem w lewo w kierunku obrazu i z powrotem do trzeciego przycisku CTA.

Wzór jest kontynuowany w dalszej części strony, tworząc więcej kątów Z. A dzięki włączeniu CTA na wielu zakrętach widzom trudno będzie je zignorować i przekonać się do kliknięcia i konwersji.

Zaprojektuj następną stronę z układem Z-Pattern

Każda z omówionych powyżej marek świetnie sobie radzi, umieszczając elementy strony docelowej po kliknięciu w układzie Z-Pattern. Po drodze skutecznie wpływają na wzrok widza i kierują go na CTA.

Mając na uwadze te przykłady i aby użytkownicy byli bardziej skoncentrowani na konwersji, zaprojektuj następną stronę docelową po kliknięciu za pomocą Instapage. Zarejestruj się na demo Instapage Enterprise już dziś.