Jak stworzyć szkielet strony docelowej, korzystając z porad ekspertów

Opublikowany: 2018-05-08

Strona docelowa po kliknięciu jest często jednym z pierwszych wrażenia, jakie ludzie widzą na temat Twojej marki, dlatego ważne jest, aby była wyjątkowa. Może w tym pomóc model szkieletowy strony docelowej po kliknięciu, który umożliwia wizualizację rozmieszczenia elementów strony przed faktycznym zbudowaniem strony.

Co to jest model szkieletowy strony docelowej po kliknięciu?

Model szkieletowy to podstawowy układ projektu lub szkielet strony docelowej po kliknięciu, który daje zainteresowanym pomysł na strukturę strony i jakie zasoby są potrzebne do jej zbudowania.

Rares Cimpean, projektant wizualny dla Instapage, wyjaśnia:

Tworząc szkielet strony docelowej po kliknięciu, powinieneś skupić się na przepływie, użyteczności i dostępności strony, jak szybko ludzie mogą dotrzeć do potrzebnych informacji, jak dostępne i rozpoznawalne jest wezwanie do działania itp. Wszystkie te czynniki są brane pod uwagę w fazie wireframing.

Oto kilka przykładów stron docelowych po kliknięciu szkieletu, zarówno długich, jak i krótkich:

Szablon szkieletu strony docelowej po kliknięciu służy kilku głównym celom:

Działać jako pośrednik między szkicem pióra i papieru a pierwszym prototypem
Aby przedstawić przegląd treści, które będą wyświetlane na stronie
Aby zapewnić plan struktury strony
Aby przekazać ogólny kierunek interfejsu użytkownika

Uwaga: nie istnieje jeden model szkieletowy strony docelowej po kliknięciu, który pasuje do wszystkich kampanii. Niektóre strony docelowe po kliknięciu mogą po prostu wymagać nagłówka, tekstu wypunktowanego, formularza i przycisku wezwania do działania, podczas gdy inne mogą wymagać podkreślenia dodatkowych korzyści i przedstawienia dowodu społecznego. Na przykład strony sprzedażowe często wymagają bardziej szczegółowych opisów produktów i mogą wymagać dłuższego opisu. (Pamiętaj, że zawsze możesz przetestować A/B krótką lub długą stronę, aby zobaczyć, która daje lepsze wyniki).

Bez względu na rodzaj strony, którą tworzysz, nasz kierownik ds. projektowania graficznego, Rafał Bogdan, podkreśla, jak ważne jest, aby Twój szkielet był na początku bardzo prosty, aby nie przytłaczać zaangażowanych interesariuszy:

Nie chcę zbytnio skupiać się na elementach, które mogą zostać odrzucone przez interesariuszy w następnej fazie. Główną ideą makiety jest pokazanie określonych funkcji projektu na stronie docelowej po kliknięciu i pomoc w zrozumieniu, jak te funkcje będą się zachowywać na prawdziwej stronie.

Gdy już masz swój szkielet, nadszedł czas, aby projekt nadał mu blask. Poniżej znajdują się elementy, które zwykle znajdują się na stronach docelowych po kliknięciu o wysokim współczynniku konwersji.

Jak stworzyć szkielet strony docelowej po kliknięciu?

Brak nawigacji

Ponieważ strony docelowe po kliknięciu są przeznaczone do konwersji i mają jeden cel, nie powinno być żadnych linków nawigacyjnych, które mogłyby odwracać uwagę użytkowników od celu konwersji. Konwertuj lub odejdź — żadnych innych opcji.

Wiele firm zauważyło znaczne zmiany współczynników konwersji po usunięciu pasków nawigacyjnych:

Career Point College odnotował 336% wzrost współczynnika konwersji po usunięciu górnego paska nawigacyjnego i zmodyfikowaniu układu formularza.
Yuppiechef odnotował 100% wzrost współczynników konwersji (z 3% do 6%) po usunięciu paska nawigacyjnego.
SparkPage odnotował wzrost współczynnika konwersji z 9,2% do 17,6% w ciągu miesiąca, w którym testowano A/B usuwając górną nawigację.

Comporium Media Services to kolejna marka, która rozumie potrzebę usunięcia nawigacji w celu maksymalizacji konwersji. Nawet ich logo nie jest połączone, co utrzymuje odwiedzających na stronie i skupia się na proszeniu o konsultację:

Postępując zgodnie z najlepszymi praktykami, jedynymi linkami, które powinny być używane, są te, które zwiększają wiarygodność (np. Warunki użytkowania i/lub Polityka prywatności) oraz linki poprawiające wrażenia użytkownika (takie jak znaczniki kotwicy i telefon typu „kliknij, aby połączyć”). numer).

Nagłówek i podtytuł

Twój nagłówek jest jednym z najważniejszych elementów, ponieważ bez niego odwiedzający nie będą wystarczająco przekonani do dalszej oceny Twojej oferty. Ponieważ jest to główny sposób dostarczania wiadomości, musi przyciągać uwagę i być wyraźnie widoczny, gdy tylko użytkownicy trafią na stronę i w części strony widocznej na ekranie.

Podnagłówek jest używany jako uzupełnienie głównego nagłówka, zwłaszcza jeśli jest on długi lub wymaga dodatkowego kontekstu (np. statystyk).

Kluczem do napisania dobrego nagłówka jest upewnienie się, że przekazuje on Twoją unikalną propozycję wartości (UVP) lub to, co odróżnia Twój produkt lub usługę od konkurencji.

Ten nagłówek strony docelowej Autopilot po kliknięciu informuje firmy, że mogą „rozwijać się szybciej” w Autopilocie w porównaniu z innymi programami do automatyzacji marketingu. Podnagłówek uzupełnia ten pomysł, opisując, w jaki sposób mogą one rosnąć szybciej:

Oprócz uwzględnienia UVP istnieją cztery główne rodzaje przekonujących nagłówków:

Aktualności: Przedstaw nowe rozwiązanie potencjalnym klientom
Interes własny: Odwołaj się do własnego interesu potencjalnych klientów<
Szybkie i łatwe rozwiązanie: Odwołaj się do chęci prospektów na szybkie poprawki
Ciekawość: wzbudzić zainteresowanie i ciekawość odwiedzających, zachęcając ich do przeczytania więcej

Możesz użyć jednego lub połączyć kilka, aby uzyskać jeszcze mocniejszy nagłówek. Najbardziej przekonujące nagłówki zawierają dwa lub więcej.

Głoska bezdźwięczna

Ponieważ ludziom łatwiej jest przetwarzać elementy wizualne niż tekst, angażujące media (obrazy, gify i wideo) pomagają przekazać wartość oferty, nawet bardziej niż słowa. Jednak wizualizacje nie są rozwiązaniem uniwersalnym. Rodzaj mediów, które wybierzesz dla swojej strony docelowej po kliknięciu, zależy od tego, co oferujesz.

Rodzaje obrazów stron docelowych po kliknięciu obejmują:

Zdjęcia bohaterów: pokaż odwiedzającym, jak Twój produkt lub usługa zmieni ich życie na lepsze
Zdjęcia produktów: Umożliw odwiedzającym zobaczenie szczegółów Twojej oferty, w tym jej głównych cech
Infografiki: Umożliwiaj odwiedzającym łatwiejszą konceptualizację danych i statystyk (wykresów, wykresów itp.)

Spójrz na obrazy, których używa iContact, aby pokazać potencjalnym klientom kilka przykładów e-maili biznesowych, które pomagają tworzyć:

Oprócz obrazów istnieje kilka rodzajów filmów na stronie docelowej po kliknięciu:

Filmy wyjaśniające : wyjaśnij, jak działa Twój produkt — zwłaszcza jeśli jest nowy lub skomplikowany — z naciskiem na korzyści, jakie przyniesie potencjalnym potencjalnym klientom
Filmy wprowadzające: prezentuj nowe firmy, ogłaszaj nowe produkty lub podkreślaj nowe funkcje produktów
Rekomendacje wideo i studia przypadków: Służ jako dowód społeczny, pokazując prawdziwym, zadowolonym klientom, wyjaśniając ich satysfakcję i sukces z Twojego produktu lub usługi

Jeśli korzystasz z obrazów, trzymaj się z dala od zdjęć stockowych, chyba że przedstawiają realistyczną sytuację Twojej oferty i są związane z tematem. Cokolwiek mniej, ryzykujesz zmniejszenie postrzegania i wartości swojej marki.

Kopiuj

Jakkolwiek kusi Cię, aby powiedzieć odwiedzającym wszystko o swojej ofercie — nie rób tego. Czas uwagi to najwyżej kilka sekund, więc Twoja kopia musi być zwięzła i natychmiast przyciągać uwagę ludzi.

Na przykład wypunktowanie (oznaczone ikonografią, znacznikami wyboru, strzałkami itp.) to powszechny sposób przekazywania ważnych informacji, umożliwiający odwiedzającym szybkie przejrzenie strony i zidentyfikowanie kluczowych propozycji oferty.

Potencjalni klienci mogą szybko dowiedzieć się o rozwiązaniu wideokonferencyjnym Highfive za pomocą pogrubionych nagłówków sekcji, minimalnego tekstu i wypunktowań:

Dowód społeczny

Przed konwersją ludzie muszą zaufać, że Twoja firma oferuje niezawodną usługę. W tym miejscu dowód społeczny może przekonać ich na różne sposoby:

Opinie klientów: pokaż potencjalnym klientom , że spełniasz swoją obietnicę, ponieważ jest ona weryfikowana bezpośrednio od klientów (za pomocą cytatów z określonymi informacjami, statystykami, pełnymi nazwiskami, przynależnością zawodową i tytułami oraz zdjęciami w głowę).
Loga klientów (i liczby): Wyświetlaj znane firmy, z którymi już współpracowałeś (i z iloma), informując odwiedzających: „Ponieważ nasz produkt lub usługa były dla nich wystarczająco dobre, będą one również dla Ciebie”.
Nagrody branżowe: wykaż, że zostałeś publicznie doceniony przez liderów branży, reporterów, stacje informacyjne, strony internetowe itp.
Pieczęcie zaufania: Zapewnij potencjalnym klientom, że ich informacje o płatnościach są bezpieczne i zabezpieczone przed stronami zewnętrznymi.
Polityka prywatności: zapewnia potencjalnym klientom, że ich adres e-mail będzie używany w odpowiedni sposób i nie będzie udostępniany nikomu innemu.

Patrząc wstecz na tę samą stronę docelową Highfive po kliknięciu wcześniej, sprawdź wszystkie dowody społecznościowe, których użyli, aby przekonać odwiedzających do konwersji — logo marki, cytowane referencje i oceny w branży:

Oto kolejny przykład, tym razem ze Splash Omnimedia, który obejmuje wszystkie rodzaje dowodów społecznościowych — liczbę klientów, logo marki, wideo z studium przypadku i cytowane referencje:

Łącząc wszystkie te dowody, przekonujesz potencjalnych klientów do konwersji, klikając przycisk CTA.

Formularz przechwytywania ołowiu

Stworzenie idealnej formy nie jest takie proste. Za mało pól formularza i nie zbierzesz wszystkich potrzebnych informacji; zbyt wiele pól i ryzykujesz odstraszenie potencjalnych klientów. Długość formularza zależy od tego, gdzie w lejku marketingowym znajduje się Twoja oferta. Z reguły im wyżej, tym krótsza forma i na odwrót.

Justworks zaprojektowało tę stronę docelową po kliknięciu, aby zapewnić informacje o cenach. Ponieważ jest to oferta z najwyższej półki, sensowne jest, aby zawierała tylko trzy z pól i wymagała bardzo podstawowych informacji:

W przeciwieństwie do tego bezpłatna wersja próbna Autopilota jest na dalszym etapie ścieżki, więc prośba o więcej informacji jest dopuszczalna:

Wezwanie do działania

Twój przycisk CTA to miejsce, w którym następuje konwersja strony docelowej po kliknięciu, więc musi się wyróżniać i błagać o kliknięcie. Oto główne aspekty optymalizacji przycisku CTA:

Kolor: użyj teorii kolorów, aby znaleźć odcień, ton, odcień lub odcień, który dobrze kontrastuje i wyróżnia się na tle reszty strony.
Kopia: „Prześlij” i „Pobierz” są ogólne i mało inspirujące. Zamiast tego utwórz konkretną, spersonalizowaną kopię i dodaj słowa „ty”, „twój”, „ja” i „mój”, aby wygenerować więcej kliknięć przycisku CTA.
Rozmiar: nie zmuszaj ludzi do szukania przycisku — spraw, aby był zauważalny. Może również zawierać wskazówki wizualne — takie jak odbijające się strzałki na stronie docelowej Volusion po kliknięciu
poniżej — aby zwrócić jeszcze większą uwagę:

Minimalna stopka

Strona docelowa po kliknięciu i stopka witryny to nie to samo. Stopki stron docelowych po kliknięciu nie powinny zawierać map witryn, linków do stron produktów ani kont w mediach społecznościowych. Każdy link, który dodasz, tworzy kolejne rozproszenie i dodatkowy sposób na opuszczenie Twojej strony bez konwersji.

Spójrz na wszystkie te drogi ucieczki, które Infegy zapewnia odwiedzającym:

Jeśli zdecydujesz się dołączyć stopkę strony docelowej po kliknięciu, upewnij się, że wyświetla ona tylko aktualne informacje o prawach autorskich, warunki korzystania z usługi i politykę prywatności, tak jak robi to Tapstone:

Biała przestrzeń

Biała przestrzeń pozwala Twojej stronie oddychać, dzięki czemu wszystkie elementy przyciągają uwagę, a odwiedzający mogą łatwiej poruszać się po Twojej stronie. Dodanie spacji również:

Zmniejsza bałagan
Poprawia czytelność
Ustanawia wizualną hierarchię
Sprawia, że strona docelowa po kliknięciu wygląda bardziej profesjonalnie

Porównaj następujące landing pages po kliknięciu od NASM i Acquisio:

Strona NASM jest zatłoczona i może być dla niektórych przytłaczająca, ponieważ trudno jest zdecydować, gdzie najpierw szukać i jak poruszać się po stronie. Strona Acquisio ma wystarczającą ilość wolnego miejsca, dzięki czemu łatwiej jest poruszać się od góry do dołu i zapewnia ogólnie lepsze wrażenia.

Wszystko zaczyna się od szkieletu strony docelowej po kliknięciu

Stworzenie makiety pozwala zespołowi określić ogólną historię strony, zobaczyć, jakie zasoby będą potrzebne i ile kopii jest wymagane. Stamtąd możesz zaprojektować zoptymalizowaną stronę docelową po kliknięciu, korzystając z powyższych sugestii. Aby jednak stworzyć spersonalizowaną, w 100% konfigurowalną stronę docelową po kliknięciu, potrzebujesz rozwiązania, które jest wystarczająco wydajne do tego zadania.

Dzięki Instapage marketerzy mogą tworzyć strony o doskonałych pikselach dzięki naszemu przyjaznemu dla projektanta kreatorowi, edytorowi CSS, wyrównywaniu i grupowaniu, skrótom klawiszowym i nie tylko. Następnie użyj wbudowanych map ciepła do testów A/B, aby uzyskać jeszcze wyższe konwersje i skaluj swoją produkcję dzięki Instablocks™. Żadne inne rozwiązanie nie może się równać. Zarejestruj się na demo Instapage Enterprise już dziś.