Popupy są jednym z najbardziej wszechstronnych narzędzi optymalizacji konwersji, jakie masz do dyspozycji. Możesz ich używać do zbierania adresów e-mail, zwiększania sprzedaży, kierowania odwiedzających, kontaktowania się z potencjalnymi klientami i nie tylko.
A co najlepsze, nie musisz być projektantem, aby stworzyć piękne, skuteczne wyskakujące okienko.
Niezależnie od tego, czy dopiero tworzysz swoje pierwsze wyskakujące okienko e-mail, czy potrzebujesz pomocy w zwiększeniu współczynnika konwersji w istniejących kampaniach, napisałem ten post dla Ciebie.
W tym artykule przedstawię 11 najlepszych praktyk projektowania okienek pop-up, korzystając z przykładów z życia wziętych, i pokażę, jak tworzyć przyjazne dla projektantów okienka pop-up, element po elemencie.
1. Dopasuj projekt swojego wyskakującego okienka do projektu swojej witryny
Niezależnie od tego, jaki typ wyskakującego okienka stworzysz, musi ono uzupełniać Twoją witrynę.
Jednocześnie jednak, paradoksalnie, musi odróżniać się od treści Twojej witryny. (Oczywiście, jeśli ma przyciągnąć uwagę odwiedzających.)
Jednym ze sposobów dopasowania projektu okna pop-up do witryny jest użycie palety kolorów, takiej jak Kolor Adobe.
Prześlij zrzut ekranu swojej witryny internetowej (lub strony, na której chcesz wyświetlić wyskakujące okienko), a Adobe Color poinformuje Cię, jakie kolory pojawiają się na zrzucie ekranu.
Świetnym przykładem marki wykorzystującej projekt swojej witryny w swoim oknie pop-up jest Akademia handlu platyną:
Ich wyskakujące okienko pasuje do kolorów na stronie, nie znikając w tle. Ponadto ciemnoniebieski kolor odróżnia się od jasnoszarych kolorów na stronie, dzięki czemu wyróżnia się jeszcze bardziej.
Jeśli utworzysz wyskakujące okienka w oparciu o kolorystykę swojej witryny, będą one mniej nachalne – dzięki czemu prawdopodobieństwo kliknięcia i konwersji przez odwiedzających będzie większe.
2. Eksperymentuj z nowymi kształtami, aby przyciągnąć uwagę
Czy wiesz, że treść wyskakującego okienka nie musi pozostawać wewnątrz pola?
Możesz eksperymentować z różnymi kształtami w swoich pop-upach, aby uczynić je bardziej wyjątkowymi i przyciągającymi wzrok. W rzeczywistości, im bardziej charakterystyczny jest pop-up, tym bardziej prawdopodobne jest, że się wyróżni.
Na szczęście są one tak samo łatwe do stworzenia jak kwadratowe wyskakujące okienka. Po prostu tworzysz obrazy w różnych kształtach, a następnie dodajesz je jako pływające obrazy do swojego wyskakującego okienka.
Oto wyjątkowy przykład z Drewniana:
Dzięki umieszczeniu obrazów o nietypowych kształtach na krawędziach okna pop-up, WoodUpp pokazuje więcej zdjęć produktów, nie ukrywając treści okna pop-up.
Całkiem sprytne, co?
Aby dowiedzieć się więcej o tym, jak tworzyć obrazy o różnych kształtach za pomocą programu Photoshop, przeczytaj ten szczegółowy przewodnik.
3. Używaj bloków kolorów na obrazach tła, aby zwiększyć czytelność
Jestem wielkim fanem obrazów tła w wyskakujących okienkach.
I to z dobrego powodu:
Gdy w wyskakującym okienku używasz obrazu tła, czasami trudno jest odczytać tekst, ponieważ często kłóci się on z kolorami obrazu.
Na szczęście jest na to sposób.
Pozwól, że pokażę ci przykład.
Duński sklep meblowy, Domek letniskowy 2użyj białych, przezroczystych bloków za swoim tekstem:
Teraz zobacz co się stanie gdy usunę bloki kolorów:
Duża różnica, prawda?
Bloki kolorów sprawiają, że tekst jest o wiele łatwiejszy do odczytania — i to bez blokowania obrazów tła.
Aby utworzyć blok kolorów, utwórz nowy obraz w Photoshopie, używając żądanych wymiarów. Następnie zmień krycie koloru. (W powyższym przykładzie krycie jest ustawione na 80%).
Możesz dodawać bloki w różnych kolorach, w zależności od kolorów znajdujących się w obrazie tła:
4. Uczyń przycisk wezwania do działania centralnym punktem uwagi, aby zwiększyć liczbę kliknięć
Odwiedzający Twoją stronę NIGDY nie powinni czuć się zdezorientowani, nie wiedząc, co zrobić i gdzie kliknąć, gdy zobaczą wyskakujące okienko.
Mając to na uwadze, musisz zadbać o to, aby wezwanie do działania (CTA) stanowiło kluczową część wyskakującego okienka i wykorzystywało je kopia zorientowana na korzyści aby zachęcić odwiedzających do kliknięcia.
Weźmy ten przykład z Ewa Solo:
Przycisk CTA skupia się na wartości oferty: „Weź udział, aby wygrać” [the competition] Teraz”, a czarny kolor na białym tle gwarantuje, że użytkownik nie przeoczy tego napisu.
To samo dotyczy sytuacji, gdy używasz dwóch przycisków CTA:
Wiele witryn e-commerce używa dwóch przycisków CTA, aby zmusić odwiedzających do dokonania wyboru. Jednak wiele z nich używa negatywnego języka w tekście drugiego przycisku, aby zachęcić więcej osób do zapisania się, np. „nie, nie lubię zniżek” lub „nie, chcę zapłacić pełną cenę”.
To, że użytkownicy nie klikają w wyskakujące okienka, nie oznacza, że nie staną się klientami.
Dlatego powstrzymaj się od stosowania negatywnego języka w przyciskach CTA i zamiast ich irytować, daj im możliwość kontynuowania przeglądania Twojej witryny.
5. Używaj mniejszej liczby pól wprowadzania danych, aby zwiększyć współczynnik konwersji
Pozwól, że zadam ci pytanie:
Czy możesz usunąć pole wprowadzania danych z jednego z okienek podręcznych i nadal móc skontaktować się z osobami, które się zarejestrują?
Jeśli odpowiedź brzmi tak, prawdopodobnie masz za dużo pól wprowadzania danych.
Wiem, że zawsze miło jest mieć jak najwięcej informacji o potencjalnych klientach, ale nasze dane pokazują, że za każdym razem, gdy dodasz pole wprowadzania danych, możesz spodziewać się, że wskaźnik konwersji zmniejszy się o 50 procent.
Pamiętaj, że jeśli poprosisz tylko o adres e-mail, zawsze możesz kontynuacja za pośrednictwem poczty e-mail i poproś o więcej informacji.
Pozwól, że pokażę ci przykład.
Oto kampania z dwoma polami wejściowymi:
Oto ta sama kampania, ale z czterema polami wprowadzania danych i przyciskami radiowymi:
Które z nich najprawdopodobniej chciałbyś wypełnić?
Ten z mniejszą liczbą pól wprowadzania danych, prawda?
Konsumenci są mniej skłonni do podawania swoich danych osobowych, dlatego ograniczenie liczby pól wprowadzania danych do minimum nie tylko poprawi wizerunek Twojej kampanii, ale także zwiększy współczynnik konwersji.
6. Wybierz odpowiedni rodzaj formularza dla swojej wiadomości
Projekt Twojego okna pop-up nie dotyczy wyłącznie kolorów — chodzi również o decyzję, jakiego okna pop-up użyć.
W Drip oferujemy wiele różnych typów kampanii onsite, w tym:
- Wyskakujące okienko
- Wsuwane
- Bar
Omówmy je pokrótce.
i. Okno podręczne
To wiadomość, która pojawia się na środku ekranu, nad treścią strony.
To najbardziej „agresywny” typ kampanii onsite i zalecamy jego stosowanie zamiar wyjścia wyzwalacz lub gdy odwiedzający uruchamiają wyskakujące okienko za pomocą kliknięcia przycisku. W ten sposób nie przeszkadzasz odwiedzającym, gdy przeglądają Twoją witrynę.
Gdy używasz wyskakującego okienka z zamiarem wyjścia, powinieneś sprawić, aby Twój formularz przyciągał uwagę tak bardzo, jak to możliwe. To ostatnia szansa, aby złapać odwiedzających, zanim opuszczą witrynę, więc unikaj tworzenia wyskakującego okienka, które wtapia się w otoczenie. Musi się wyróżniać.
ii. Wsuwane
To jeden z najczęściej wykorzystywanych typów kampanii na stronie, ponieważ dyskretnie pojawia się od dołu ekranu, nie blokując treści witryny.
Oznacza to, że użytkownicy mogą kontynuować przeglądanie Twojej witryny bez konieczności zamykania wysuwanego okna.
Najważniejszą rzeczą, o której należy pamiętać podczas projektowania szafki wsuwanej, jest dopasowanie jej do projektu witryny. (Więcej informacji na ten temat znajdziesz w strategii nr 1).
Dzięki możliwości wysuwania i wysuwania masz również możliwość dołączenia teasera.
Teaser nie jest formularzem samym w sobie, lecz dodatkiem do formularzy typu pop-up i slide-in.
Teaser to niewielki pasek wyświetlany u dołu ekranu, gdy kampania na stronie nie została jeszcze uruchomiona ani zamknięta.
To także jedyna rzecz, którą zobaczą użytkownicy Twojej witryny mobilnej, jeśli na jej ekranie wyświetli się wyskakujący okienko lub formularz wysuwany.
Na urządzeniach mobilnych Twoja kampania zostanie uruchomiona dopiero po kliknięciu przez użytkownika teasera, co zapewni płynne działanie aplikacji mobilnej:
Twój teaser powinien „zapowiadać” treść formularza (stąd nazwa), dlatego nie powinien zawierać zbyt wiele treści.
Stwórz przyciągający uwagę nagłówek i kolorowe tło lub obraz w tle, a to wszystko, czego potrzebujesz.
iii. Bar
Pasek znajduje się u góry lub u dołu ekranu.
Oto przykład z Królowie i Królowe:
Ten typ kampanii doskonale sprawdza się, gdy chcemy ogłosić nadchodzącą wyprzedaż, promować nowe linie produktów lub przekazać odwiedzającym ważną wiadomość.
Ponieważ pasek nie zajmuje dużo miejsca na ekranie, możesz odważnie dobrać jego kolory.
Jeśli więc chcesz poinformować o nadchodzącej wyprzedaży, możesz użyć koloru tła kontrastującego z kolorami na Twojej stronie.
7. Dostosuj projekt do różnych urządzeń, aby uniknąć irytowania Google
Kilka lat temu Google ogłosiło swój nowa polityka dotycząca reklam śródmiąższowych.
Wystraszyło to wielu marketerów, ponieważ oznaczało, że właściciele witryn mogą zostać ukarani w przypadku niewłaściwego użycia natrętnych wyskakujących okienek na urządzeniach mobilnych.
Ale to nie znaczy, że nie możesz ich używać, kropka. To po prostu znaczy, że musisz wiedzieć, jak projektować mobilne wyskakujące okienka, aby postępuj zgodnie z najlepszymi praktykami.
Ponieważ na ekranie urządzenia mobilnego masz mniej miejsca, musisz zmniejszyć liczbę elementów wyświetlanych w wyskakującym okienku.
Za pomocą Drip możesz utworzyć wyskakujące okienko na pulpicie, a następnie przełączyć się na widok mobilny, odłączyć je i edytować elementy, które chcesz zmienić pod kątem wersji mobilnej.
Dzięki temu nie musisz tworzyć dwóch oddzielnych okienek pop-up, a jedynie dostosować ich wersję mobilną.
Edytując projekt wyskakującego okienka w wersji mobilnej, należy wziąć pod uwagę kilka kwestii:
- Zawsze należy odłączać elementy, które chcesz zmienić, aby zmiany wprowadzane w oknach podręcznych w wersji mobilnej nie miały wpływu na wersję na komputery stacjonarne.
- Jeśli w oknie podręcznym na pulpicie znajduje się obraz tła, należy go usunąć na urządzeniu mobilnym (może on wyglądać myląco przy ograniczonej przestrzeni).
- Nie używaj więcej niż dwóch pól wprowadzania w wyskakującym okienku mobilnym. Jeśli ludzie muszą przewijać ekran swojego telefonu komórkowego, aby zobaczyć całe wyskakujące okienko mobilne, ma ono zbyt dużo treści (co będzie widoczne w Twoich współczynnikach konwersji).
- Należy skrócić tekst tak, aby zawierał tylko najważniejsze informacje.
- Aby lepiej wykorzystać ograniczoną przestrzeń, należy używać mniejszych czcionek.
Pokażę ci, jak to wygląda w akcji.
Oto wyskakujące okienko na pulpicie, które zaprojektowałem:
A oto wersja mobilna dostosowana do powyższych najlepszych praktyk:
Jak widać, oba wyskakujące okienka nadal są zgodne pod względem projektu, a wiadomość jest taka sama w obu. Jednak projekt został specjalnie dostosowany do urządzenia, na którym są wyświetlane, aby uwzględnić zmianę przestrzeni ekranu.
Wiem, że jest wiele rzeczy do przemyślenia. Ale gdy są dobrze zrobione, mobilne wyskakujące okienka działają.
8. Użyj kontrastu kolorów, aby wyróżnić tekst i działania
Jeśli nie jesteś projektantem, znalezienie odpowiednich kolorów do wykorzystania w wyskakujących okienkach może być trudne (uwierz mi, wiem).
Dobrą zasadą jest unikanie używania tego samego koloru w całym wyskakującym okienku. Jeśli zależy Ci na jednym kolorze, użyj różnych odcieni tego koloru, aby wyskakujące okienko wyglądało atrakcyjniej. Możesz również użyć kontrastujących kolorów. (Dotyczy to zwłaszcza sytuacji, gdy używasz obrazów tła.)
Jeśli w tle wyskakujących okienek znajdują się obrazy, trudno jest dopasować kolor czcionki do tła, tak aby nie stało się ono nieczytelne.
Znajdź więc kolor kontrastujący z głównym kolorem tła i użyj go do elementów, które chcesz, aby się wyróżniały.
Na przykład nagłówek i przycisk CTA:
Użycie kontrastowych kolorów pomoże przyciągnąć uwagę do Twojego wyskakującego okienka, nie sprawiając przy tym wrażenia nieatrakcyjności.
9. Uzyskaj odpowiednie odstępy (bez projektanta graficznego)
Wielu marketerów zapomina o odstępach, gdy tworzą swoje wyskakujące okienka. Odstępy to „niewidoczna” treść w Twoim wyskakującym okienku. A jeśli odstępy w Twoim wyskakującym okienku są nieodpowiednie, będzie to wyglądać źle i prawdopodobnie wpłynie na Twój współczynnik konwersji.
Najważniejszą rzeczą przy rozmieszczaniu jest . Unikaj stosowania różnych odstępów na wszystkich czterech bokach wyskakującego okienka.
Najlepiej, jeśli odstępy u góry i u dołu okna podręcznego będą takie same:
Inną ważną zasadą odstępu jest dostosowanie odstępu, aby nie było pojedynczych słów w jednym wierszu w wyskakującym okienku. Jeśli tak się stanie, możesz przeciągnąć odstęp na zewnątrz lub do wewnątrz, aby uzyskać jedno zdanie mniej lub jedno zdanie więcej, w zależności od tego, co wygląda najlepiej:
Gdy odpowiednio ustawisz odstępy, Twoje okienko będzie wyglądać o wiele bardziej profesjonalnie, co będzie miało wpływ na współczynnik konwersji.
10. Twórz nowe iluzje kształtów za pomocą obrazów .png
Wspomniałem już, że można eksperymentować z różnymi kształtami w wyskakujących okienkach.
Istnieje jednak inny sposób, aby wyróżnić kształt wyskakującego okienka:
Gdy ustawisz obraz .png jako tło kontenera i ustawisz kolor tła okna podręcznego na przezroczysty, obraz stworzy iluzję unikalnego kształtu.
Pozwól, że pokażę ci przykład. To jest z Billeje.info.
Faktyczne okno podręczne ma kształt prostokąta, ale ponieważ tło jest przezroczyste, obraz definiuje jego kształt.
Oto co jest na stronie internetowej:
A tak wyglądałoby to, gdyby tło formularza było białe, a nie przezroczyste:
Wygląda o wiele lepiej z przezroczystym tłem, prawda?
Gdy Twoje wyskakujące okienko wyróżnia się na Twojej stronie i wygląda kreatywnie, jest bardziej prawdopodobne, że odwiedzający je zauważą i podejmą działanie.
11. Jak wybrać odpowiednie czcionki do wyskakującego okienka
Nie możemy mówić o najlepszych praktykach projektowych bez omówienia czcionek.
Jeśli masz wątpliwości, jakiej czcionki użyć w wyskakującym okienku, wybierz czcionkę najczęściej używaną na Twojej stronie internetowej.
Bycie kreatywnym w kwestii czcionek może się opłacić, jeśli zrobisz to dobrze.
Gdy przełączasz się między różnymi czcionkami w wyskakującym okienku, warto przestrzegać kilku sprawdzonych zasad:
- Aby przyciągnąć uwagę, stosuj kreatywne czcionki w nagłówkach.
- W tekście zastosuj standardową czcionkę używaną na stronie internetowej, aby zwiększyć czytelność i mieć pewność, że Twój przekaz nie zostanie zagubiony.
- Nie używaj w wyskakującym okienku więcej niż trzech różnych czcionek.
Oto przykład, jak można eksperymentować z różnymi czcionkami:
Tworząc kolejne wyskakujące okienko, spróbuj użyć ciekawej czcionki w nagłówku i porównaj ją ze standardową czcionką na swojej stronie internetowej.
Zadbaj o to, aby Twój tekst był łatwy do odczytania i zrozumienia.
Wniosek
Projektując wyskakujące okienko dla swojej witryny, należy wziąć pod uwagę wiele elementów projektowych.
Ale jeśli zrobisz to dobrze, Twoje wyskakujące okienka nie tylko będą wyglądać dobrze, ale także generować niesamowite rezultaty.
Spróbuj utworzyć wyskakujące okienko, stosując niektóre z zasad projektowania opisanych w tym poście, a zobaczysz, jaką różnicę to robi.
