12 najlepszych praktyk projektowania wyskakujących okienek, które musisz znać (dla urządzeń mobilnych i komputerów stacjonarnych)

Opublikowany: 2021-08-26

🤫 Psst! Jeśli chcesz generować 20% dodatkowej sprzedaży każdego miesiąca za pomocą prostej strategii, sprawdź to. »

Pomimo powszechnego przekonania, ludzie w dzisiejszych czasach są bardziej niż szczęśliwi, mogąc angażować się w wyskakujące okienka.

To prawda, jeśli tworzysz dobre wyskakujące okienka.

Zaufaj nam — przekonaliśmy się na własne oczy, jak skutecznie zwiększają one konwersje i powiększają Twoją listę subskrybentów.

Ale marki muszą wiedzieć, co odróżnia stylowe, przyciągające uwagę wyskakujące okienko od czegoś, co będzie denerwować odwiedzających i odwracać ich uwagę. Tutaj możemy pomóc.

Z tego przewodnika dowiesz się:

  • Czynniki decydujące o tym, co sprawia, że ​​wyskakujące okienko na komputerze lub urządzeniu mobilnym jest „dobre” (z trzynastoma przykładami)
  • Trzy główne błędy, które mogą obniżyć wydajność skądinąd obiecującego wyskakującego okienka
  • Pięć dodatkowych przykładów projektów wyskakujących okienek, aby powiększyć listę e-mailową

Z tym zanurzmy się!

Czy chcesz tworzyć skuteczne wyskakujące okienka, które będą rezonować z odwiedzającymi? Pobierz naszą listę kontrolną wiadomości wyskakujących i 3 razy wyższy współczynnik konwersji wyskakujących okienek!

Pobierz listę kontrolną

Najlepsze praktyki projektowania wyskakujących okienek na pulpicie

Jeśli Twoim celem jest zdobycie większej liczby subskrybentów bezpośrednio z Twojej witryny, wyskakujące okienko e-mail może załatwić sprawę.

Poniżej przedstawiamy kilka zasad zwiększania współczynników konwersji wyskakujących okienek na komputerze. (Ponadto współpracują również z użytkownikami mobilnymi).

1. Przyciągnij uwagę odwiedzających za pomocą przykuwających wzrok kombinacji kolorów

Urzekający schemat kolorów to najprostszy sposób na to, aby wyskakujące okienka nie mogły przeoczyć.

Coś jasnego lub nietypowego może zatrzymać odwiedzających. Na przykład ten pełnoekranowy projekt wyskakujący z Visme.co jest jasny, odważny i wyróżnia ich przesłanie.

popup best practices 01 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

Twoje wyskakujące kolory niekoniecznie muszą być jasne lub nawet „głośne”. Po prostu wyraźny kontrast światła i ciemności może pomóc w wyskakujących okienkach, cóż, pop .

Na przykład ta biało-czarna kolorystyka z Thredup.com jest prosta, ale stylowa i efektowna.

popup best practices 02 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

2. Zachęć odwiedzających, pogrubiając kluczowe frazy korzyści

Spójrzmy prawdzie w oczy: okresy koncentracji kupujących stają się coraz krótsze.

Dlatego najlepiej, jeśli Twoje komunikaty marketingowe są natychmiast zrozumiałe.

Zwróć uwagę na:

  • Utrzymuj krótkie wyskakujące okienka: myśl „mniej znaczy więcej” i unikaj ścian z tekstem.
  • Pisz mocne nagłówki z uderzającymi wyrażeniami, takimi jak „za darmo”, „teraz” lub „zapisz”, aby natychmiast podkreślić korzyści płynące z Twojej oferty.
  • Podziel tekst w wyskakującym okienku na wyraźne sekcje (pomyśl: nagłówek → tekst treści → przycisk wezwania do działania (CTA)), aby zachęcić czytelników do wyrażenia zgody.

Poniżej znajduje się niesamowity przykład oferty Trade Coffee, która jest zgodna z najlepszymi praktykami projektowania wyskakujących okienek opisanymi powyżej.

popup best practices 03 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

3. Zaprezentuj swoje wyskakujące okienka jako spersonalizowaną ofertę (wskazówka: nie reklama)

W idealnym przypadku wyskakujące okienka nie powinny przypominać reklam.

Rozumiemy: wielu konsumentów nie jest zachwyconych wyskakującymi okienkami. Lata i lata denerwujących reklam sprawiły, że wyskakujące okienka mają złą reputację.

Jak rozładować napięcie i zbudować zaufanie odwiedzających witrynę? Po prostu zaprezentuj swoje wyskakujące okienka jako coś, co ma pomóc klientom, a nie sprzedawać im.

Rozważ oferty, które proszą odwiedzających o ich wkład i pragnienie.

Wyskakujące okienka oparte na preferencjach świetnie nadają się do zwiększania konwersji. Biorąc pod uwagę, że 57% konsumentów chętnie udostępnia dane osobowe w zamian za spersonalizowane oferty.

Na przykład to wyskakujące okienko rejestracji e-mail od Vuori umożliwia otrzymywanie spersonalizowanych wiadomości e-mail na podstawie osobistych preferencji identyfikacji płci danej osoby.

Ten rodzaj wiadomości nie tylko sprawia, że ​​subskrybent czuje, że otrzymuje ofertę, ale oznacza również większe prawdopodobieństwo wysłania odpowiednich ofert w przyszłości.

popup best practices 04 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

Oto kolejny przykład z Uniqlo. Zwróć uwagę, jak wiadomość przedstawia się jako pomocna dłoń („pomóż nam dostosować wiadomości do Ciebie”):

popup best practices 05 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

Spersonalizowane wiadomości, takie jak ta, mają zachęcić odwiedzających do spędzania większej ilości czasu w Twojej witrynie i interakcji z Twoją marką. Jest to podobne do wyskakujących okienek z grywalizacją .

Kilka dodatkowych sekund na miejscu może wydawać się niewiele, ale to cenny czas na nawiązanie kontaktu z nowymi potencjalnymi klientami.

4. Połącz się z potencjalnymi klientami poprzez konwersacyjną kopię

Budowanie zaufania to przełom w wyskakujących okienkach.

Dlatego tak ważne jest przekazywanie przyjaznego i pozytywnego tonu w całym wyskakującym okienku.

Wyskakujące okienka w witrynie nie powinny być domyślnie zatłoczone ani przesadne. Rozmawiaj z potencjalnymi klientami jak przyjaciel, a nie cel sprzedaży.

To wyskakujące okienko z Quip jest doskonałym przykładem tego, o czym mówimy. Przyjazny i gościnny, bez żadnego żargonu czy „mowy biznesowej”.

popup best practices 06 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

5. Zaproś odwiedzających do klikania bez zakłócania doświadczenia użytkownika

Wyskakujące okienka nie muszą być całkowicie bezpośrednie, aby były skuteczne.

W rzeczywistości czasami subtelność może znacznie pomóc w stworzeniu listy.

Nie szukaj dalej niż popularność wiadomości pobocznych i lepkich pasków jako dowodów.

Zamiast ryzykować, że użytkownicy będą przerywać przeglądanie Twojej witryny, te formaty wyskakujących okienek służą jako zachęta i zaproszenie do zapoznania się z Twoją ofertą.

Sprawdź poniższy przykład z Free People:

popup best practices 07 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

Odwiedzający, którzy zdecydują się na tego typu wyskakujące okienka, robią to bez presji, co oznacza, że ​​są bardziej entuzjastycznie nastawieni do tego, co oferujesz.

Ponadto te wyskakujące okienka rzadziej zakłócają przepływ lub estetykę Twojej witryny.

6. Upewnij się, że wyskakujące okienko dociera do ludzi we właściwym momencie

Jest to jedna z najważniejszych sprawdzonych metod dotyczących wyskakujących okienek, jeśli chodzi o to, co dzieje się za kulisami Twoich ofert.

Twoje wyskakujące okienka nie powinny uruchamiać się losowo. Zalecamy odczekanie kilku sekund (co najmniej pięciu) przed zaprezentowaniem odwiedzającym jakichkolwiek wyskakujących okienek.

Możesz łatwo edytować i dostosowywać kontrolki czasu w wyskakujących okienkach za pomocą OptiMonk. Możliwość natychmiastowej zmiany i testowania wyskakujących okienek może pomóc w ustaleniu, co działa najlepiej dla odwiedzających.

Kontrolki ułatwiają również trzymanie się, aby wyjść z wyskakujących okienek intencji najlepszych praktyk i zapobiegać odbijaniu się potencjalnego utraconego ruchu.

Sprawdzone metody projektowania mobilnych wyskakujących okienek, aby zdobywać subskrybentów w podróży

63% ruchu e-commerce pochodzi z urządzeń mobilnych. Oznacza to, że dosłownie nie możesz pozwolić sobie na ignorowanie subskrybentów pochodzących ze smartfonów.

Poniżej znajduje się zestawienie sprawdzonych metod dotyczących wyskakujących okienek, które pomogą Ci zwiększyć współczynniki konwersji mobilnych.

7. Zachęcaj odwiedzających do szybkiego działania, mówiąc zwięźle w swojej kopii

Oszczędność słów to bezpieczny zakład dla wyskakujących okienek.

Jest to szczególnie ważne, gdy próbujesz dotrzeć do użytkowników korzystających z mniejszych ekranów.

Jeśli chcesz dołączyć wyłączenie odpowiedzialności, upewnij się, że nie odwraca ono uwagi od treści wiadomości. Więc nie przebieraj w słowach.

Na przykład to wyskakujące okienko subskrypcji e-mail od Casetify przechodzi od razu do sedna.

popup best practices 08 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

Sprawdź wyskakujące okienko Skullcandy poniżej. Jasny, odważny slogan mówi sam za siebie i nie wymaga mnóstwa wyjaśnień dla odwiedzających na ogrodzeniu na temat przystąpienia.

popup best practices 09 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

8. Spraw, aby wyskakujące okienka były jak najbardziej przyjazne dla kranu

Angażowanie się w wyskakujące okienko powinno być proste dla użytkowników mobilnych.

To powiedziawszy, zdziwiłbyś się, jak wiele wyskakujących okienek mobilnych jest koszmarem w nawigacji.

Za dużo miejsc do dotknięcia. Mylące kolory. Niepotrzebne przewijanie. Lista jest długa.

Chociaż oferty mobilne są zwykle minimalistyczne, nadal musisz pamiętać o kilku najlepszych technikach. To zawiera:

  • Zdefiniowane przyciski (zarówno do włączenia , jak i wyjścia, jeśli to konieczne)
  • Wyraźny nagłówek i czytelna kopia, idealnie mieszcząca się na jednej stronie (bez przewijania)
  • Kolory oddzielające różne elementy wyskakującego okienka

To wyjaśnia popularność pełnoekranowych wyskakujących okienek mobilnych, które zaznaczają powyższe pola.

Na przykład ta oferta firmy Skechers jest przejrzysta i łatwa w nawigacji, niezależnie od tego, czy ktoś jest zainteresowany, czy nie.

popup best practices 10 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

To samo dla tego mobilnego wyskakującego okienka z Pura Vida:

popup best practices 11 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

9. Spraw, aby Twoje oferty były łatwe i wymagały mniejszej liczby pól formularza

To nie przypadek, że wszystkie przykłady wyskakujących okienek mobilnych w tym poście wymagają tylko adresu e-mail do subskrypcji.

Pojedyncze pola oznaczają mniej wysiłku i mniej czynników rozpraszających dla odwiedzających witrynę. To ostatecznie sprawia, że ​​proces wyboru jest szybki i bezbolesny.

Oszczędność kilku cennych sekund przy mniejszej liczbie pól może stanowić różnicę między nowym subskrybentem a odrzuconym gościem.

10. Wybierz jedno potężne wezwanie do działania (wezwanie do działania), które przyciąga odwiedzających

Frazy CTA są kluczowym elementem optymalizacji konwersji.

Im bardziej przekonujące jest Twoje wezwanie do działania, tym większe prawdopodobieństwo, że zdobędziesz zgodę.

CTA od Nectar Sleep („Zaoszczędź 399 $”) obiecuje ogromne oszczędności i sprawia, że ​​ich oferta wydaje się bardziej wartościowa.

popup best practices 12 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

Samo poproszenie odwiedzających witrynę o „kliknij tutaj” to zmarnowana okazja do podkreślenia korzyści.

11. Użyj liczb, aby podkreślić poważne oszczędności JAK NAJSZYBCIEJ

Możesz także piggyback na powyższym przykładzie. Liczby są popularne do rozsypywania w wyskakujących okienkach, aby zarówno pokazać oszczędności, jak i przekazać natychmiastową wartość.

Łatwiej naszemu mózgowi przetwarzać liczby niż czytać tekst. Zauważ, że tak wiele mobilnych wyskakujących okienek opiera się na „10 USD ZNIŻKI” lub „Zaoszczędź 10%” jako centralnym punkcie swojej oferty?

Oto nagłówek oparty na liczbach, który zachęca ludzi do zapisania się do biuletynu od Arctic Fox. Zwróć też uwagę na przyciągający wzrok design:

popup best practices 13 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

12. Dokładnie sprawdź, czy Twoje wyskakujące okienka są przyjazne dla Google

Chociaż wyskakujące okienka nie wpływają bezpośrednio na pozycję Twojej witryny w Google, wyszukiwarka zajęła stanowisko w sprawie „natrętnej” zawartości .

Wyskakujące okienka nie powinny utrudniać użytkownikom korzystania z witryny ani w żaden inny sposób uniemożliwiać im dostępu do treści w witrynie.

To mówi, dlaczego powinieneś uważać na wyskakujące okienka pełnoekranowe, prezentując je dopiero po tym, jak odwiedzający będą mieli okazję się przeglądać.

Wyobraź sobie, że ktoś po raz pierwszy odwiedza Twoją witrynę za pomocą telefonu komórkowego. Nie chcesz sygnalizować swojej witryny jako spamu lub od razu odciągać nowych użytkowników, prawda? Może to mieć złą wiadomość dla współczynnika odrzuceń.

„Jakie są największe błędy w wyskakujących okienkach, których marki powinny unikać?”

Dobre pytanie! Czasami najlepszym sposobem na trzymanie się najważniejszych najlepszych praktyk dotyczących wyskakujących okienek jest wiedza, czego nie robić.

Przyjrzyjmy się największym błędom, które mogą potencjalnie obniżyć wydajność wyskakujących okienek.

1. Komunikowanie nieistotnych lub niepotrzebnych treści

Wyskakujące okienka „Zajęty” mogą być irytujące. Upewnij się, że ograniczasz swój tekst i unikasz wielu wiadomości. Trzymaj się jednego lub dwóch zdań z jednym tematem. Jest mniej prawdopodobne, że przytłoczy odwiedzających witrynę.

2. Przedstawienie rozczarowującej oferty

Zadaj sobie pytanie: jaką wartość zapewniasz potencjalnym subskrybentom w zamian za ich adresy e-mail? Duże rabaty, bezpłatna dostawa i nagrody dla kupujących po raz pierwszy są często niezbędne, aby zrobić wrażenie na kupujących i skłonić ich do subskrypcji.

Uzyskaj zachęty do kreatywnej pracy i burzy mózgów, które wykraczają poza podstawowe aktualizacje lub 5% zniżki.

3. Poleganie na oldschoolowych, spamerskich projektach wyskakujących okienek

W OptiMonk prowadzimy krucjatę przeciwko złym wyskakującym okienkom.

Zajęty. Spam. Sprzedaży. Znasz te, o których mówimy.

Dobre wieści? Tworzenie stylowych, wartych kliknięcia wyskakujących okienek jest możliwe dla każdej marki — dzięki takim narzędziom jak OptiMonk.

5 dodatkowych przykładów projektów wyskakujących okienek, które pomogą Ci rozwinąć Twoją listę e-mailową

Jeśli chodzi o projektowanie wyskakujących okienek, odrobina inspiracji może pomóc w tworzeniu niesamowitych ofert.

Oto pięć świetnych przykładów projektów wyskakujących okienek, które pomagają rozwinąć listę e-mailową (oraz zestawienie tego, co robią dobrze).

1. Tendrzewa

Ta wiadomość poboczna od Tentree jest doskonałym przykładem nieinwazyjnego wyskakującego okienka.

Zauważ, że przycisk CTA w ofercie wyróżnia się na tle pozostałej części schematu kolorów witryny? Podczas gdy subtelność wiadomości bocznej sprawia, że ​​wydaje się, że jest to część strony głównej.

popup best practices 15 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

2. CZARNY i pogrubiony

Ta oferta jest odpowiednio odważna i ma bezpośredni nagłówek, którą trudno przeoczyć.

Możliwość wyboru między opcjami napojów podkreśla również, jak wykorzystać personalizację i preferencje, aby przypieczętować umowę z pierwszymi gośćmi.

popup best practices 16 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

3. Bailly

Czasami opłaca się zachować prostotę. Ten wyskakujący e-mail od Bailly'ego udowadnia, że ​​projekt wyskakującego okienka nie musi być nauką rakietową.

Prosta oferta w zamian za e-mail odwiedzających to zawsze uczciwa gra.

popup best practices 17 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

4. Chwyć zielony dom

To kolejny przykład prostego, ale skutecznego wyskakującego okienka, które pomaga rozwijać listę e-mailową.

Język konwersacyjny („Chcesz specjalną ofertę przy pierwszym zamówieniu?”) i wezwanie do działania („PROSZĘ TAK”) pokazuje, w jaki sposób podstawowe opcje kopiowania mogą przekonać odwiedzających do podania swoich informacji.

popup best practices 18 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

5. Magiczna Łyżka

Idealnie, Twoja wyskakująca oferta powinna mówić sama za siebie. Ta reklama Magic Spoon obiecuje coś wielkiego z szansą na wygranie darmowych płatków na miesiąc, używając jasnego języka i mocnych słów („darmowe”, „wygraj”), aby złożyć oświadczenie.

popup best practices 19 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

I tym kończymy nasz przewodnik!

Czy trzymasz się tych sprawdzonych metod dotyczących wyskakujących okienek?

Jeśli chodzi o tworzenie „dobrego” wyskakującego okienka, istnieje mnóstwo ruchomych elementów do zarządzania.

Mamy nadzieję, że nasza lista podpowiedziała Ci, na czym powinieneś się skupić. Te wskazówki mogą poprowadzić Cię w kierunku większej liczby subskrybentów i konwersji, niezależnie od tego, czy optymalizujesz swoje obecne kampanie, czy zaczynasz całkowicie od zera.

Aby dowiedzieć się więcej o tworzeniu wyskakujących okienek o wysokiej konwersji, zapoznaj się z naszym Ultimate Guide to Popups.

popup guide johnsonbox - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)