9 najlepszych praktyk w zakresie projektowania wyskakujących okienek, które sprawiają, że klienci kupują

Opublikowany: 2022-06-29

Wokół wyskakujących okienek wciąż jest wiele kontrowersji. Niektórzy ludzie ich nie lubią, podczas gdy inni uwielbiają ich używać; Ale jedno jest pewne, wyskakujące okienka się konwertują i zostaną!

Wyskakujące okienka – jeśli są używane prawidłowo – są trudne do przeoczenia, dlatego są najlepszym sposobem na pozyskanie nowych lub powracających użytkowników do działania na podstawie wezwania do działania (CTA).

Dobrą wiadomością jest to, że nie musisz być ekspertem w tej dziedzinie, tworząc najlepszy projekt wyskakującego okienka, aby przyciągnąć większą liczbę odwiedzających i poprawić wrażenia użytkownika.

Istnieją pewne zasady i praktyki , których możesz przestrzegać, aby stworzyć dobrą kampanię wyskakującą.

popup-design-best-practices-cover-showing-two-popup-overlays

Przewodnik po najlepszych praktykach projektowania wyskakujących okienek

Postępowanie zgodnie z najlepszymi praktykami projektowania wyskakujących okienek i korzystanie z niezawodnej aplikacji do tworzenia wyskakujących okienek sprawiają, że tworzenie bardzo angażujących wyskakujących okienek dla Twojej marki/sklepu jest dość łatwe.

Dlatego dzielimy się z Wami dziewięcioma najlepszymi praktykami projektowania wyskakującego okienka, które będzie zarówno atrakcyjne wizualnie, jak i przekonujące. Dodatkowo zamieściliśmy kilka przykładów wyskakujących projektów różnych marek, aby pokazać, jak działają wskazówki.

9 wskazówek, jak zwiększyć współczynniki konwersji za pomocą skutecznych projektów wyskakujących okienek

Jeśli zastanawiasz się, jak ulepszyć projekt wyskakujących okienek, zwiększyć współczynnik konwersji i rozwój firmy, oto kilka pomocnych wskazówek na początek:

1. Określ swoje cele i podejmij działania

simpson-character-opening-life-goal-notebook-to-see-the-goals

Przede wszystkim powinieneś dowiedzieć się, jakie są Twoje cele . Prawda jest taka, że ​​projekty wyskakujących okienek nie mogą być dokładne, jeśli nie wiesz, czego od nich chcesz.

Ważne jest, aby znać swoje cele biznesowe przed rozpoczęciem projektowania wyskakującego okienka, aby projekt mógł być do nich dopasowany.

Musisz określić swoje cele, a następnie podjąć odpowiednie działania.

  • Zwiększanie sprzedaży.
  • Rosnąca lista e-mailowa.
  • Promowanie produktu/usługi.
  • Zmniejszenie porzucania koszyka.

Możesz mieć różne cele dla każdego wyskakującego okienka, ale postępuj zgodnie z określoną taktyką, aby zoptymalizować je, aby uzyskać jak najlepszy wynik.

W tym artykule omówimy każdą z tych taktyk i podamy kilka wskazówek dotyczących ich najskuteczniejszego wdrażania w wyskakujących okienkach, więc zagłębimy się!

2. Upewnij się, że wezwanie do działania przyciąga wzrok

Spraw, aby było to proste, ale intrygujące!

Twoje wezwanie do działania (CTA) jest kluczem do konwersji , jeśli chodzi o projektowanie wyskakujących okienek.

Jest to część Twojego wyskakującego okienka, która zachęca klientów do podjęcia określonej akcji, takiej jak wpisanie adresu e-mail lub dodanie produktu do koszyka.

Co to jest przycisk wezwania do działania?

Jeśli wezwanie do działania nie przyciąga wzroku, Twoi potencjalni klienci najprawdopodobniej je zignorują – co w pierwszej kolejności niweczy cały cel korzystania z wyskakujących okienek. Na przykład wyskakujące okienko Hubspot promujące jego blog jest dobrym przykładem prostego, ale chwytliwego wezwania do działania.

Hubspot-email-listing-Popup-example-for-CTA-as-Popup-Design-Best-Practices

Jest kilka rzeczy, które możesz zrobić, aby Twoje wezwanie do działania się wyróżniało:

  • Użyj przycisku zamiast tekstu ; Przyciski są dobrze widoczne i wyróżniają się kolorem tła.
  • Dołącz animacje lub ruchome grafiki ; Zaangażuje to odwiedzających i zachęci ich do podjęcia działań.
  • Bądź zwięzły ; Dodaj słowa zachęcające do działania, aby odwiedzający witrynę dokładnie wiedzieli, czego oczekujesz od nich.
  • Upewnij się, że przycisk lub link jest łatwy do znalezienia ; Nie chcesz, aby odwiedzający musieli go szukać.
  • Dodaj pilność ; używanie wyrażeń takich jak „teraz” lub „tylko dzisiaj” może stworzyć pilność i FOMO.

3. Bądź zwięzły, ale przekonujący ze swoją kopią

Mów mało, ale mów dobrze!

Ponieważ masz tylko kilka sekund, aby zrobić wrażenie na odwiedzającym , zwięzłość jest niezbędna do udanego projektu wyskakującego okienka.

Bądź przekonujący w swojej kopii; Skoncentruj się na zaletach swojego produktu lub usługi i używaj mocnych słów, aby przyciągnąć uwagę.

Wykorzystaj dowód społeczny i zaangażowanie społeczności, aby wzmocnić swój przekaz i jasno określić, co oferujesz.

Dzięki dobrze opracowanemu projektowi wyskakującego okienka możesz przekonać ludzi do działania i poprawić współczynnik konwersji.

Oto przykład krótkiego i przekonującego wyskakującego okienka z Lego. Wyskakujące okienko nawigacyjne, które pojawia się podczas pierwszej wizyty na jego stronie internetowej, zaprasza do odwiedzenia e-sklepu lub strefy zabaw.

Brief-Lego-popup-design-navigating-users-to-two-different-sections-of-the-website-with-two-CTA

Brak sprzedaży, tylko przydatne informacje i krótka wiadomość! Dodatkowo, chociaż CTA są różne, przyciągają wzrok i służą temu samemu celowi wskazywania kierunku.

4. Zastosuj kontrast, aby zwrócić większą uwagę na swoją wiadomość

Jednym z najlepszych sposobów upewnienia się, że projekt wyskakującego okienka jest widoczny i zastosowany, jest zastosowanie kontrastu .

Użyj kolorów, które przeciwstawiają się sobie na kole kolorów, aby najważniejszy element wyskakującego okienka pojawił się przed widzami.

ultra-beauty-contrasting-floating-bar-pink-popup-design-best-practices

Doskonałym przykładem zastosowania tej techniki jest wyskakujące okienko Ultra Beauty.

Różowy kolor tego wyskakującego okienka kontrastuje z białym tłem witryny, a jednocześnie pozostaje w harmonii ze stylem witryny. Również nagłówek „Nie przegap zabawy!” jest krótkie, ale wyzwalające.

Jeśli więc chcesz mieć pewność, że ludzie zobaczą Twoją wiadomość, rozważ użycie kontrastującego koloru przycisku wezwania do działania lub całego wyskakującego okienka.

To może być po prostu różnica między przyciąganiem uwagi a byciem ignorowanym!

5. Używaj kreatywnych obrazów i jak najlepiej je wykorzystaj

Wykorzystaj w pełni dostępne miejsce, dodając odpowiednie obrazy i różne kształty w wyskakujących okienkach. W rzeczywistości im bardziej unikalne jest wyskakujące okienko, tym bardziej prawdopodobne, że będzie się wyróżniać. Oto przykład wyskakującego okienka z powiadomieniem o odpowiedzi na COVID-19 z wykorzystaniem powiązanych i przyciągających wzrok zdjęć:

covid-popup-design-pokazuje-obraz-i-dobre-CTA

Używanie powiązanych obrazów i grafik to świetne sposoby na przyciągnięcie uwagi i ogólnie są skuteczne w zwracaniu uwagi ludzi na Twoje wyskakujące okienko.

Oto kilka dobrych pomysłów na używanie obrazów w wyskakujących okienkach:

  • Obrazy związane z wiadomością, którą chcesz wysłać
  • Zdjęcia Twoich produktów.
  • Osoby, które reprezentują Twoją grupę docelową lub idealnego klienta.
  • Pokazuje używane produkty.

6. Dostosuj projekt wyskakującego okienka do stylu witryny

Wyskakujące okienka mogą pomóc w skłonieniu ludzi do zwrócenia uwagi na Twoją wiadomość, jeśli są dobrze zaprojektowane. Jednak musisz to zrobić ze stylem!

Dopasowanie projektu wyskakującego okienka do ogólnego stylu witryny ma kluczowe znaczenie dla tożsamości Twojej marki.

W ten sposób wyskakujące okienko będzie wyglądało na bardziej dopracowane i będzie wyróżniało się od reszty treści na Twoich stronach.

Używając Adobe Color, możesz stworzyć pasujący projekt wyskakującego okienka. Możesz przesłać zrzut ekranu swojej witryny lub strony, na której pojawi się wyskakujące okienko, a Adobe Color po prostu zasugeruje kolory, które będą pasować do Twojej witryny.

Następnie możesz włączyć te kolory do projektu wyskakującego okienka, aby stworzyć spójny wygląd.

popupsmart-popup-design-matching-popup-to-site-style-showing-team-members-smiling-and-inviting-the-user-to-book-a-demo

Jest to przykład wyskakującego okienka z zamiarem wyjścia Popupsmart, które doskonale trafia do potencjalnych klientów i pasuje do tożsamości marki oraz stylu strony.

Rozwiązanie do tworzenia wyskakujących okienek Popupsmart pozwala w pełni dostosować wyskakujące okienka tak, aby pasowały do ​​stylu Twojego sklepu.

7. Nie pytaj o zbyt wiele informacji

Kiedy wszystko, czego potrzebujesz, aby skontaktować się z klientem, to jego adres e-mail, po co zawracać mu głowę tak wieloma polami?

Zmniejszenie liczby pól wejściowych w wyskakującym formularzu często może skutkować lepszą obsługą i zaangażowaniem klientów.

Dobrą zasadą jest proszenie tylko o potrzebne informacje. Ułatwi to podróż Twoim klientom i będzie bardziej prawdopodobne, że wypełnią formularz.

Ograniczenie liczby pól wejściowych w wyskakującym formularzu pomaga poprawić użyteczność i uzyskać lepsze wyniki. Pamiętaj o tym, projektując następujące wyskakujące okienko e-mail!

Forever-21-prosty-e-mail-wyskakujący-projekt z 20-procentową zniżką-i pokazywanie-dwóch-modelek-dziewczyny-i-chłopaka-w-markowych ubraniach

To dobry przykład; Forever 21 oferuje kupon rabatowy 20% w zamian za adres e-mail w tym wyskakującym okienku.

8. Ułatw zamykanie wyskakujących okienek

Nie jest tajemnicą, że wyskakujące okienka mogą być dość irytujące, jeśli są używane nieprawidłowo. Ale wiesz, co jest jeszcze gorsze? Trudno zamknąć wyskakujące okienka!

Wielu marketerów błędnie używa małych, niezauważalnych i trudnych do kliknięcia „X”, które frustrują odwiedzających i powodują ich odejście. Albo, co gorsza, postanawiają całkowicie zlikwidować przyciski zamykania , mając nadzieję, że odwiedzający sami to zrozumieją.

Ułatwienie odwiedzającym zamykania wyskakujących okienek sprawia, że ​​nadal angażują się w Twoją witrynę.

Sprawdź 20 inspirujących wyskakujących okienek używanych przez znane marki.

Nie może się skończyć ludzie, którzy opuszczają strony internetowe tylko dlatego, że nie mogli zamknąć irytującego wyskakującego okienka, które się pojawiało. Nie ryzykuj w ten sposób uszkodzenia współczynnika odrzuceń!

Dzięki Popupsmart możesz dostosować przycisk zamykania wyskakującego okienka, aby pasował do stylu Twojej witryny, pozostając jednocześnie dostępnym dla odwiedzających.

9. Twórz dostosowane mobilne wyskakujące okienka

Jak wszyscy wiemy, ruch mobilny staje się coraz ważniejszy, a jeśli Twoja witryna nie jest zoptymalizowana pod kątem urządzeń mobilnych, tracisz wiele potencjalnych możliwości biznesowych.

Dostosowywanie wyskakujących okienek do różnych urządzeń może być trudne, ale zapewnia dotarcie do wszystkich możliwych kanałów i odbiorców.

Ponieważ użytkownicy komputerów stacjonarnych mają większy ekran, możesz dodać więcej elementów do wyskakującego okienka. tworzenie-dostosowanego-desktopu-projektowania-wyskakującego-za pomocą narzędzia popupsmart

Z drugiej strony użytkownicy mobilni są ograniczeni, więc musisz zmniejszyć liczbę czynników w wyskakującym okienku. tworzenie-dostosowanego-mobilnego-wyskakującego-projektu-z-popupsmart-narzędziem

Popupsmart ułatwia przełączanie między widokiem stacjonarnym i mobilnym , dzięki czemu możesz łatwo edytować elementy, które wymagają zmiany.

Możesz także tworzyć oddzielne wyskakujące okienka dla różnych urządzeń lub używać tego samego projektu dla wyskakującego okienka mobilnego.

Jeśli chcesz, aby Twoje mobilne wyskakujące okienka były zabawne i wciągające, rozważ poniższe wskazówki:

  • Skróć wyskakujące okienko i wezwanie do działania na urządzeniu mobilnym
  • Usuń wszystkie mylące obrazy tła
  • Zminimalizuj liczbę pól formularza

Zacznij projektować wyskakujące okienka o wysokiej konwersji już teraz!


Postępując zgodnie z tymi najlepszymi praktykami w zakresie projektowania wyskakujących okienek, możesz stworzyć angażujące doświadczenie dla swojej marki, które prowadzi do zadowolonych klientów.

Oparcie wyskakującego okienka na tych zasadach zwiększy Twoje szanse na uzyskanie większej liczby konwersji i ostatecznie pomoże Ci osiągnąć cele związane z marką.

Co więcej, te praktyki nie są trudne do naśladowania i możesz je improwizować zgodnie ze swoimi wymaganiami.

Lepiej jednak pamiętać, że wszystko powinno być nastawione na jeden cel – pomoc użytkownikom w wykonaniu pożądanego działania .

Czy są jakieś inne sprawdzone metody, które chciałbyś dodać do tej listy? Daj nam znać w komentarzach!

Poniżej wymieniono kilka powiązanych artykułów, które mogą okazać się pomocne w badaniach:

  • 27 doskonale zoptymalizowanych projektów wyskakujących, które zainspirują do 2022 roku
  • Popup UX Design: typowe błędy i co należy zamiast tego zrobić
  • Wyskakujące okienko e-mail: kompletny przewodnik z 15 świetnymi przykładami

Terminy pokrewne:

  • Co to jest współczynnik klikalności (CTR)?
  • Co to jest współczynnik konwersji?
  • Co to jest marketing e-mailowy?