W przeszłości strony internetowe zawierały wiele niepotrzebnych elementów, a mianowicie strony pełne krzykliwych i brzydkich schematów kolorów, zbyt dużo tekstu tkwiącego w małych przestrzeniach oraz wyskakujące okienka, które wyskakują i denerwują odwiedzających.

Ale projektanci nie wiedzieli wtedy więcej, a raczej po prostu pracowali z jedynymi znanymi trendami projektowymi i najlepszymi praktykami.

Od tego czasu czasy bardzo się zmieniły.

Twórcy i projektanci stron internetowych nie są już ograniczeni technologią lub techniką, co oznacza, że ​​nie ma już wymówek dla złego projektu. Dotyczy to każdego elementu znajdującego się na stronie WordPress, od obrazu nagłówka strony głównej po formularze kontaktów, a także od typografii po wyskakujące okienka. Wszystko ma teraz znaczenie podczas projektowania pod kątem wygody użytkownika.

Dzisiaj chcę się skupić na tym, co sprawia, że ​​wyskakujące okienko jest skuteczne, co uważam za istotną część procesu konwersji. W szczególności chciałbym przyjrzeć się anatomii skutecznego wyskakującego okienka WordPress i temu, jak ten ekscytujący element może zwiększyć współczynnik konwersji.

Argument za używaniem wyskakujących okienek w WordPress

Wyskakujące okienka to ciekawy element projektu. Chociaż tymczasowo zakłócają wrażenia użytkownika (co zwykle nie jest zbyt cenione), te, które są zrobione dobrze, oferują coś tak pociągającego lub ekscytującego, że odwiedzający nie mają nic przeciwko utracie minutę, aby zwrócić uwagę.

Oczywiście w tym przypadku mówimy o pop-upach generujących konwersję, które służą do zbierania subskrybentów biuletyn lub zachęcić odwiedzających do zakupów. Jednak wyskakujące okienka mogą być wykorzystywane do różnych celów. Na przykład możesz udostępniać pliki cookie lub politykę prywatności, polecać powiązane produkty po tym, jak odwiedzający dodadzą coś do koszyka, a nawet poprosić ich o wypełnienie krótkiej ankiety.

Pop-up Anatomy - Pop-up of Target Recommendations

W większości przypadków, jeśli używasz wyskakującego okienka, prawdopodobnie chcesz, aby odwiedzający podjęli działanie. W końcu po co przerywać im doświadczenie, jeśli zakłócenie nie jest pożytecznym sposobem wykorzystania ich czasu? Według badania obejmującego prawie dwa miliardy wyskakujących okienek, średni współczynnik konwersji tego typu wyskakujących okienek wyniósł 3,09%.

To nasuwa pytanie: czy wyskakujące okienka są nadal aktualne i skuteczne? Jeśli rynek jest tak przepełniony wyskakującymi okienkami wyjścia, paskami powitania, całostronicowymi nakładkami i nie tylko, czy warto użyć tego narzędzia do generowania konwersji w swojej witrynie WordPress?

Oczywiście !!!

Wyskakujące okienka uwzględniają wiele dobrych praktyk projektowania witryn internetowych. Na przykład:

  • Wyskakujące okienka usuwają niepotrzebny bałagan ze stron Twojej witryny.
  • Zwykle składają się z czystych elementów wizualnych i minimalnego tekstu.
  • Wezwania do działania są dobrze zaprojektowane i prosto sformułowane.
  • Odwiedzający muszą się szybko nauczyć, ponieważ większość ludzi zna wyskakujące okienka i wie, jak z nimi wchodzić.
  • Wyskakujące okienka zapewniają zabawną okazję do wypełnienia witryny animacjami, filmami lub dowodami społecznymi.
  • Możesz je łatwo stworzyć za pomocą WordPress wtyczki wysoka jakość jak Hustle lub OptinMonster.

Wyskakujące okno anatomiczne - dowód socjalny HubSpot

Ogólnie rzecz biorąc, dobrze zaprojektowane wyskakujące okienko jest idealne, aby przyciągnąć uwagę odwiedzających, gdy jest to najbardziej potrzebne. Możesz ich używać do wysyłania na czas powiadomień lub próśb. Możesz również wykorzystać dane odwiedzających, aby zachęcić ich do dokonania zakupu.

Anatomia skutecznego wyskakującego okienka WordPress

Oczywiście sukces wyskakujących okienek WordPress zależy od tych, które są doskonale zaprojektowane i mają tak atrakcyjne oferty, że odwiedzający nie mogą się powstrzymać od interakcji. Przyjrzyjmy się więc, jak wygląda zwycięska formuła skutecznego wyskakującego okienka.

1. styl

Różne typy wyskakujących okienek wydają się być bardziej skuteczne w przekształcaniu użytkowników w subskrybentów:

  • Wyskakujące okienka subskrypcji e-mail mają współczynnik konwersji 2,9%.
  • Powitalne wyskakujące okienka (te, które wypełniają całą stronę po wejściu) konwertują na 2,6%.
  • Wyskakujące okienka wyskakujące przekształcają 1,9%.
  • Wyskakujące okienka Smart lub Hello wyświetlają konwersję 0,5%.

Nie oznacza to, że zawsze musisz używać tradycyjnego wyskakującego okienka subskrypcji e-mail. Oto przykład ze strony Neila Patela.

Pop-up Anatomy - Neil Patel's Bar Witaj

Ten jest dobrze wykonany, ponieważ jest po prostu zaprojektowany, nieinwazyjny, et wykorzystuje zabawną animację, aby przyciągnąć uwagę na wypadek, gdyby jego minimalny ślad pozostał niezauważony. Pamiętaj, że wybór stylu nie polega na użyciu tego, który jest najpopularniejszy lub najbardziej znany z wyższych współczynników konwersji. Chodzi o znalezienie stylu, który będzie pasował do Twojej witryny i użytkowników, i który będzie dopełniać doświadczenia pomiędzy nimi.

2. kolor

Oczywiście kolor zawsze będzie odgrywał główną rolę w projektowaniu stron internetowych. Rozumiejąc psychologię wybranych kolorów, możesz tworzyć skuteczniejsze wyskakujące okienka, które konwertują. Oczywiście nie możesz też zapomnieć o schemacie kolorów swojej marki, więc chodzi o znalezienie równowagi między zaprojektowaniem wyskakującego okienka, które będzie dobrze wyglądać na stronie, ale które zmusza również odwiedzających do podjęcia działań.

3. kompozycja

Ważne jest, aby cofnąć się o krok i spojrzeć na wyskakujące okienko jako całość. Chociaż projekt każdej ruchomej części w wyskakującym okienku ma znaczenie, podobnie jak ogólny skład wyskakującego okienka.

Twoje wyskakujące okno powinno:

  • być proste i łatwe do naśladowania.
  • Zaprojektowany z czystymi liniami i być dobrze wyważony.
  • Uwzględnij odpowiednie obrazy w wysokiej rozdzielczości; najlepiej pojedynczy obraz podsumowujący tematykę oferty.
  • Wydaje się, że jest to rozszerzenie Twojej witryny i oczywiście nie jest utworzone z wyskakującego okienka z ograniczonymi opcjami dostosowywania.
  • Użyj dużej, łatwej do odczytania typografii.

4. tekst

Następnie mamy wyskakującą wiadomość. Chociaż nie jesteś w trakcie opracowywania języka, który zajmuje się tymi sprawami, istnieje wiele najlepszych praktyk, o których powinieneś wiedzieć, jeśli chodzi o wypełnianie wyskakujących okienek tekstem.

Pamiętaj o następujących kwestiach:

  • Zawsze dołączaj tytuł, krótką wiadomość (wystarczy jedno zdanie) i wezwanie do działania.
  • Używaj mocnego języka, który odwołuje się do emocji odwiedzających.
  • Mów krótko. Jeśli nie możesz napisać tego w mniej niż 30 słowach, ta wiadomość nie pojawia się w wyskakującym okienku.
  • Używaj tego samego tonu i osobowości, których używasz w swojej witrynie.
  • Zaoferuj coś cennego, czego Twoi odwiedzający nie znajdą gdzie indziej na stronie.
  • Jeśli to możliwe, używaj pilności. Jeśli nie możesz tego zrobić słowami, zrób to kolorem.

Wyskakujące okienko Anatomia - nakładka ekranu Wishpond

5. CTA

Obecnie istnieje dziwny, rosnący trend, w którym witryny internetowe dają odwiedzającym dwie opcje wezwania do działania. Rozumiem, dlaczego ten trend rośnie, ale widziałem, że jest on niewłaściwie stosowany na tak wielu stronach internetowych, że mam nadzieję, że w końcu zaniknie.

Prawdopodobnie sam widziałeś tę złą aplikację:

  1. Pozytywna opcja : Ten mówi: „Och, dziękuję, dziękuję! Wiem, że ta oferta wkrótce zmieni moje życie na lepsze! " 
  2. Opcja negatywna : Ten mówi: „Lubię dokonywać złych życiowych wyborów i doceniam, że pocierasz mnie po twarzy”. Pozwól, że kliknę tę opcję automatycznego wycofywania tylko po to, aby otrzymać kolejne okno z pytaniem, czy chcę podjąć tę okropną decyzję. " 

Nie oznacza to, że wszystkie wyskakujące okienka z dwiema opcjami CTA są źle zaprojektowane lub mają na celu zawstydzenie gościa. Tim Ferris ma dobry przykład dobrze wykonanego wezwania do działania z podwójną opcją:

Pop-up Anatomy - Tim Ferris Positive Negative

Ogólnie rzecz biorąc, powiedziałbym, że jeśli próbujesz być sarkastyczny lub zastraszać odwiedzających w podejmowaniu decyzji, opuść swoją witrynę i umieść ją na Twitterze. Twoja witryna nie jest na to odpowiednia i mamy nadzieję, że Twitter całkowicie ją połknie.

Oprócz tego irytującego zwierzaka sugeruję również, aby wezwanie do działania było proste. Używaj prostego języka, który wyjaśnia, co użytkownicy otrzymają po wprowadzeniu adresu e-mail lub kliknięciu przycisku. Ponadto ogranicz pracę do minimum: nie więcej niż dwa pola do wypełnienia (np. E-mail i może imię) i jeden przycisk do kliknięcia.

To wszystko w tym samouczku. Mam nadzieję, że pozwoli ci on dobrze zaprojektować przyciski wezwania do działania.