Strony internetowe były wypełnione mnóstwem szumów-strony pełne krzykliwych, brzydkich schematów kolorów, zbyt dużo tekstu zapchanego w małe przestrzenie i wyskakujące okienka, które wyskoczyły z przeglądarki i denerwowały odwiedzających.

Ale projektanci nie znali wtedy nic lepszego, a raczej po prostu pracowali z jedynymi trendami projektowymi i najlepszymi praktykami, o których byli świadomi.

Od tego czasu czasy bardzo się zmieniły.

Programiści i projektanci stron internetowych nie są już ograniczani przez technologię lub technikę, co oznacza, że nie ma już wymówek dla złego projektu. Dotyczy to każdego elementu znalezionego w witrynie WordPress, od obrazu nagłówka strony głównej do formularzy kontaktowych, a także typografii do wyskakujących okienek. Wszystko ma teraz znaczenie przy projektowaniu dla doświadczenia użytkownika.

Dzisiaj chcę skupić się na tym, co sprawia, że dobry projekt pop-up–coś, co uważam za kluczowy element w procesie konwersji. W szczególności chciałbym zbadać anatomię udanego wyskakującego okienka WordPress i jak ten ekscytujący element projektu może zwiększyć współczynnik konwersji.

Argument za używaniem Pop-upów w WordPress

Pop-upy są ciekawym elementem wystroju. Chociaż tymczasowo przerywają wrażenia użytkownika (co zwykle jest nie-nie), te, które są dobrze zrobione, oferują coś tak kuszącego lub ekscytującego, że odwiedzający nie mają nic przeciwko poświęceniu minuty na ich rozważenie.

Oczywiście w tym przypadku mówimy o wyskakujących okienkach generujących konwersję, które służą do zbierania subskrybentów wiadomości e-mail lub popychania odwiedzających przez rurociąg sprzedaży. Jednak wyskakujące okienka mogą być używane do różnych celów. Na przykład możesz udostępnić pliki cookie lub Politykę prywatności, polecić powiązane produkty po dodaniu czegoś do koszyka, a nawet poprosić o szybką ankietę.

Pop-up Anatomy - Target Recommendations Pop-up
Przykład tego, jak sprzedawcy tacy jak Target używają wyskakujących okienek, aby dostarczyć powiązane zalecenia.

W większości przypadków, jeśli używasz wyskakującego okienka, chcesz, aby odwiedzający podejmowali działania. W końcu, po co przerywać ich doświadczenie, jeśli zakłócenie nie jest cennym wykorzystaniem ich czasu? Według Sumo badania prawie dwa miliardy pop-upy, odkryli średni współczynnik konwersji dla tych typów pop-upów był 3.09%.

Istnieją historie z całej sieci, które nie tylko obsługują te dane, ale pokazują, jak wyskakujące okienka działają znacznie lepiej. Jednak wiele z tych studiów przypadków ma kilka lat. Ma to sens, biorąc pod uwagę, że to było, gdy najbardziej innowacyjne i przyszłościowe Programiści i marketerzy zaczęli bawić się technologią pop-up.

To teraz nasuwa pytanie: czy wyskakujące okienka są nadal aktualne i skuteczne? Jeśli rynek jest tak przesycony wyskakującymi okienkami exit-intent, przesuwanymi paskami powitalnymi, nakładkami na całą stronę i innymi, czy jest to narzędzie do generowania konwersji warte użycia w Twojej witrynie WordPress?

Oczywiście, że tak!

Pop-upy wziąć pod uwagę wiele najlepszych praktyk projektowania stron internetowych. Na przykład:

  • Wyskakujące okienka usuwają niepotrzebny bałagan ze stron twojej witryny.
  • Zazwyczaj składają się z ostrej grafiki i minimalnego tekstu.
  • Wezwania do działania są dobrze zaprojektowane i prosto sformułowane.
  • Jest mała krzywa uczenia się dla odwiedzających, ponieważ większość ludzi jest dobrze zaznajomiona z wyskakującymi okienkami i wie, jak z nimi współdziałać.
  • Wyskakujące okienka zapewniają świetną okazję do nasycenia witryny animacjami, filmami lub dowodami społecznościowymi.
  • Możesz łatwo tworzyć je za pomocą wysokiej jakości wtyczek WordPress, takich jak Hustle.
Pop-up Anatomy - HubSpot Social Proof
Wyskakujące okienko HubSpot na początku wygląda prosto,ale potem zauważysz subtelny, ale potężny dowód społeczny.

Ogólnie rzecz biorąc, dobrze zaprojektowane wyskakujące okienko jest Świetne do przyciągnięcia uwagi odwiedzających, gdy jest to najbardziej potrzebne. Możesz ich używać do dostarczania terminowych powiadomień lub żądań. Możesz również użyć danych odwiedzających, aby poprowadzić ich przez rurociąg sprzedaży, Jeśli lub kiedy są rozproszeni, mają wątpliwości lub potrzebują dalszej motywacji.

Anatomia udanego Pop-up w WordPress

Oczywiście sukces wyskakujących okienek w Twojej witrynie WordPress zależy od korzystania z tych, które są bezbłędnie zaprojektowane i mają oferty tak atrakcyjne, że odwiedzający nie mogą się powstrzymać od zaangażowania. Przyjrzyjmy się więc, jak wygląda zwycięska formuła udanego pop-upu.

1. Styl

Sumo wykopał dalej, co sprawia, że pop-upy udane; w szczególności, pod względem pozyskania więcej rejestracji e-mail. Odkryli, że różne rodzaje wyskakujących okienek zazwyczaj są bardziej skuteczne w konwersji odwiedzających do subskrybentów:

  • Wyskakujące okienka subskrypcji e-mail konwertują 2,9% czasu.
  • Powitalne pop-upy mat (te, które zajmują całą stronę po wejściu) konwertują 2.6%.
  • Wyskakujące okienka uruchamiane przewijaniem konwertują 1,9%.
  • Wyskakujące okienka Smart lub hello bar konwertują .5%.

Nie oznacza to, że zawsze powinieneś używać tradycyjnego wyskakującego okienka subskrypcji e-mail. W końcu spójrz na wyskakujące okienko hello bar Neila Patela:

Pop-up Anatomy - Neil Patel Hello bar
Animowane okienko hello bar Neila Patela.

Ten jest dobrze zrobiony, ponieważ jest po prostu zaprojektowany, unintrusive, oraz wykorzystuje zabawną animację, aby zwrócić na nią uwagę, na wypadek, gdyby jej minimalny ślad nie został zauważony. Pamiętaj, że wybór stylu nie polega na użyciu tego, który jest najbardziej popularny lub najbardziej znany z wyższych współczynników konwersji. Chodzi o znalezienie stylu, który działa dla Twojej witryny, odwiedzających, i który ma na celu uzupełnienie doświadczeń między nimi.

2. Kolor

Kolor, oczywiście, zawsze będzie odgrywać główną rolę w projektowaniu stron internetowych. Rozumiejąc psychologię kolorów, które wybrałeś, możesz tworzyć bardziej skuteczne wyskakujące okienka, które konwertują. Oczywiście nie można też zapomnieć o ustalonej palecie kolorów dla swojej marki, więc chodzi o zachowanie równowagi między projektowaniem wyskakującego okienka, które świetnie wygląda na stronie, ale także zmusza odwiedzających do podjęcia działań.

Rozważ to Sumo pop-up, na przykład:

Pop-up Anatomy - Sumo Pop-up
Co jest pierwszą rzeczą, którą zauważysz w tym wyskakującym okienku Sumo? Założę się, że to fioletowy CTA.

Jak wiemy, purpura często kojarzy się z bogactwem. To rzeczywiście inteligentny wybór kolorów dla ich CTA, ponieważ sugeruje, że istnieje korelacja między automatyzacją wzrostu witryny a sukcesem.

3. Skład

Ważne jest, aby zrobić krok wstecz i zobaczyć wyskakujące okienko jako całość. Podczas gdy projekt każdego ruchomego elementu w wyskakującym okienku ma znaczenie,tak samo jak ogólna kompozycja.

Twój pop-up powinien:

  • Być po prostu rozplanowane i łatwe do naśladowania.
  • Zaprojektowany z czystymi liniami i dobrze wyważony.
  • Dołącz odpowiednie obrazy o wysokiej rozdzielczości; najlepiej tylko jeden obraz, który zawiera to, o co chodzi w ofercie.
  • Wydaje się być rozszerzeniem witryny i nie jest oczywiście wykonane z wyskakującego okienka z ograniczonymi opcjami dostosowywania.
  • Użyj typografii, która jest duża i łatwa do odczytania.

Myślę, że wyskakujące okienko gq Black Friday świetnie oddaje te ideały.

Pop-up Anatomy - GQ Subscription
Wyskakujące okienko GQ jest proste w projektowaniu, czyste w linii i bardzo dobrze pasuje do ich marki.

Można zobaczyć, że kolory marki są wykorzystywane i zrobić dobrą robotę kadrowania ofertę. A dla ludzi, którzy nie chcą czytać tekstu po prawej stronie, wystarczy spojrzeć na zgrabny obraz i wyraźną ofertę po lewej, aby zrozumieć, dlaczego warto przerwać ich doświadczenie.

4. Tekst

Następnie mamy wiadomość z wyskakującego okienka. Chociaż nie będziesz tworzyć języka, który wchodzi w te rzeczy, nadal powinieneś zdawać sobie sprawę z wielu praktyk, jeśli chodzi o wypełnianie wyskakujących okienek tekstem.

Należy pamiętać o następujących:

  • Zawsze Dołącz nagłówek, krótką wiadomość (zdanie wystarczy) i wezwanie do działania.
  • Używaj mocnego języka, który przemawia do emocji odwiedzających. Analizator nagłówków CoSchedule zmierzy, jak dobrze działa twój tekst nagłówka.
  • Mów krótko. Jeśli nie możesz napisać go w mniej niż 30 słowach, to ta wiadomość nie należy do wyskakującego okienka.
  • Użyj tego samego głosu marki i osoby ze swojej witryny.
  • Zaoferuj coś cennego, czego odwiedzający nie znajdą nigdzie indziej na stronie.
  • Jeśli to możliwe, użyj pilności. Jeśli nie możesz tego zrobić za pomocą słów, zrób to przez kolor.
  • Dostosuj wiadomość na podstawie danych odwiedzających (np.)
Pop-up Anatomy - Wishpond Screen Overlay
Wishpond wykonuje dobrą robotę, wykorzystując wystarczającą ilość tekstu w tym wyskakującym okienku nakładki.

Pop-up Wishpond jest dobrym przykładem na to, jak wysłać atrakcyjną ofertę za pośrednictwem najkrótszych wiadomości.

5. CTA

W dzisiejszych czasach coraz częściej pojawia się dziwny trend, w którym strony internetowe stwarzają odwiedzającym dwie opcje wezwania do działania. Rozumiem, dlaczego ten trend rośnie, ale widziałem, że jest źle wykonany na tak wielu stronach internetowych, że mam nadzieję, że trend w końcu wygaśnie.

Sam pewnie widziałeś tę kiepską egzekucję:

  1. Opcja Pozytywna Ten mówi: “Och, dziękuję, dziękuję! Wiem, że ta oferta zmieni moje życie na lepsze!”
  2. Opcja Negatywna: Ten mówi: “Lubię dokonywać złych wyborów życiowych i doceniam to, że pocierasz mi to w twarz. Pozwól mi kliknąć tę opcję samo-deprecjacji, aby otrzymać kolejne wyskakujące okienko, które pyta mnie ponownie, czy chcę podjąć tę straszną decyzję.”

To nie znaczy, że wszystkie wyskakujące okienka z dwoma opcjami CTA są zrobione źle lub mają zawstydzić gościa. Tim Ferris jest dobrym przykładem tego, że dobrze się:

Pop-up Anatomy - Tim Ferris Positive Negative
Tim Ferris ‘ s pop-up używa opcji dual CTA, ale robi to w profesjonalny i przyjazny sposób.

Ogólnie rzecz biorąc, powiedziałbym, że jeśli próbujesz być złośliwy lub dręczyć odwiedzających do kliknięcia, zabierz to ze swojej witryny i umieść na Twitterze. Twoja strona internetowa nie jest dla niego miejscem, a Twitter miejmy nadzieję połknie ją w całości.

Poza tym szczególnym peeeve z mojego zwierzaka, sugerowałbym również utrzymanie wezwanie do działania proste. Użyj prostego języka, który wyjaśnia, co użytkownicy otrzymają w zamian za wpisanie adresu e-mail lub kliknięcie przycisku. Ponadto, utrzymuj pracę do minimum: nie więcej niż dwa pola do wypełnienia (tj. adres e-mail i może imię) i jeden przycisk do kliknięcia.

6. Umieszczenie

Możesz nie rozważyć umieszczenia wyskakującego okienka nawet pytania. W końcu nie powinny otwierać się tylko na zawartości Twojej witryny?

Niekoniecznie.

Weź to przewijane wyskakujące okienko z CoSchedule:

Pop-up Anatomy - CoSchedule Side Scroll Pop-up
Umieszczenie wyskakującego okienka może wejść w grę, jeśli zaangażowanie w Twoją witrynę absolutnie nie może zostać naruszone.

Ponieważ to wyskakujące okienko pojawia się podczas korzystania z narzędzia Headline Analyzer, wybór miejsca na boku był mądrym posunięciem. W ten sposób nie przerywają już angażującego doświadczenia, ale nadal są w stanie uświadomić odwiedzającym, że czeka na nich specjalna wiadomość.

Są też inne miejsca do rozważenia. Witaj bary, oczywiście, trzymaj wyskakujące okienko na samej górze lub na dole strony. Możesz użyć wyskakującego okienka wyrównanego do boku, tak jak CoSchedule w powyższym przykładzie. Możesz też umieścić go w lewym dolnym lub prawym rogu strony (podobnie jak umieszczenie tradycyjnego okna czatu na żywo).

Oczywiście, trzeba być ostrożnym o umieszczenie wyskakujących okienek na telefon komórkowy. Chociaż masz wiele opcji do zabawy na komputerze, telefon komórkowy nie będzie tak miły. W rzeczywistości Google wyśle Twoją witrynę, jeśli uwierzy, że wyskakujące okienka mobilne zakłócają wrażenia:

“Strony, które pokazują natrętne treści interstitials zapewniają użytkownikom gorsze wrażenia niż inne strony, na których zawartość jest natychmiast dostępna. Może to być problematyczne na urządzeniach mobilnych, na których ekrany są często mniejsze.”

Począwszy od początku 2017, Google zaczął karać strony internetowe, które korzystały z wyskakujących okienek w następujący sposób na urządzeniach mobilnych:

  • Wyskakujące okienka, które całkowicie pokrywają stronę główną po wejściu.
  • Te, które zmuszają każdego użytkownika do wyświetlenia (i odrzucenia) wyskakującego okienka, zanim będzie mógł wejść na stronę.
  • Wyskakujące okienka wbudowane bezpośrednio na stronie, zmuszając odwiedzających do zrozumienia, że przewijanie jest wymagane, aby znaleźć rzeczywisty początek zawartości witryny.

Tak więc, jeśli nie masz nic przeciwko dostarczaniu wyskakujących okienek do użytkowników mobilnych, po prostu uważaj na to, jak i gdzie zrób to.

7. Wyjście

Na koniec nie zapomnij o opcji wyjścia. Jest to jeden z powodów, dla których nie lubię podwójnych CTA: zwykle oznacza to, że poręczny przycisk “X” w prawym górnym rogu znika. Proszę, nie rób tego swoim gościom. Zakłócanie ich doświadczeń na miejscu to hazard sam w sobie. Nie odbieraj tego, w jaki sposób każdy wie, jak odrzucić wyskakujące okienko.

DODOcase zaprojektował ich dobrze:

Pop-up Anatomy - Dodocase Countdown Pop-up
Wyskakujące okienko DODOcase wykorzystuje oczywiste ” X ” w prawym górnym rogu, które nie odwraca uwagi od intrygującej (i animowanej) oferty.

Ja też mogę być wbrew powszechnej opinii, ale myślę, że ” X ” powinien być wyraźnie widoczny i wyraźny. Wiem, że jeśli jest bardziej subtelny i lekko zacieniony, to mniej prawdopodobne jest, że odwróci uwagę od oferty. Nie sądzę, żeby to miało znaczenie. Jeśli ktoś zauważy ” X ” i ruszy do niego, prawdopodobnie i tak nie był odpowiednią grupą docelową.

Wrapping Up

W przeciwieństwie do niektórych elementów projektu, które tak naprawdę działają tylko dla niektórych nisz, myślę, że wyskakujące okienko jest takie, które dobrze służyłoby każdej witrynie. Nie tylko są świetne w zdobywaniu większej liczby subskrybentów i zwiększaniu współczynników konwersji, ale także pomagają zachować minimalny i łatwy do nawigacji projekt utworzony w witrynie WordPress.

To powiedziawszy, każde stare wyskakujące okienko nie wystarczy dla Twojej witryny. Musi być dobrze zaprojektowany, dobrze zaplanowany i stanowić naprawdę wartościową ofertę. Zwróć więc uwagę na to, co twoje narzędzia analityczne, narzędzia do mapowania cieplnego i testy A/B mówią o reakcji odwiedzających na te wyskakujące okienka, dzięki czemu możesz przeprojektować i ponownie dostarczyć wrażenia w sposób, który poprawi wrażenia odwiedzających.

Który element projektu okazał się najbardziej skuteczny w zwiększaniu współczynników konwersji na swojej stronie?

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…