Desain Pop-Up: Tangkap Saat Panas

Menggunakan formulir berlangganan email adalah salah satu cara paling efektif untuk mendapatkan lebih banyak pelanggan. Dalam artikel ini, kami akan fokus pada formulir berlangganan email pop-up; khususnya, kami akan menjelaskan cara menyempurnakan desain pop-up Anda dan menunjukkan beberapa contoh pop-up yang bagus untuk inspirasi Anda.

Peran formulir pop-up dalam pemasaran email

Pop-up adalah formulir yang muncul di latar depan konten situs web dan mendorong pengguna untuk mendaftar untuk menerima email. Mereka biasanya terdiri dari judul, deskripsi singkat, bidang untuk mengisi alamat email Anda, nama, dan detail lainnya, dan tombol CTA.

Sangat sering pop-up menawarkan magnet utama seperti diskon, ebook gratis, rekaman webinar, tiket acara, dan barang gratis lainnya. Misalnya, di salah satu pop-up mereka, Kate Spade menawarkan diskon 15% untuk semua pelanggan email baru.

Tapi bagaimana pop-up bisa membawa prospek jika banyak dari kita menganggapnya mengganggu? Ada penjelasan ilmiah sederhana untuk itu.

Martin Lindstrom, seorang penulis serta pakar periklanan dan branding, membagikan beberapa hasil menarik dari studi neuromarketing besar selama 3 tahun dalam bukunya “Buyology: Truth and Lies About Why We Buy.” Ringkasnya, ia membuktikan bahwa 90% perilaku pembelian orang tidak disadari, dan banyak tindakan yang dilakukan pengguna bertentangan dengan apa yang mereka yakini. Jadi, terlepas dari pendapat kontroversial tentang pop-up, mereka masih berfungsi: kami dapat mengklaim terganggu oleh pop-up, tetapi kami masih bereaksi terhadapnya dan terus mendaftar.

Sekarang mari kita lihat pop-up beraksi. Sumo menganalisis hampir dua miliar pop-up dalam dua tahun dan menemukan elemen mana yang menjadikannya kontributor berharga untuk keseluruhan hasil pemasaran email.

Dalam eksperimen ini, rata-rata rasio konversi pop-up adalah 3,09%. Pop-up dengan kinerja tertinggi 10% teratas memiliki tingkat konversi rata-rata 9,28%, beberapa di antaranya mencapai hingga 50,2%.

Sumo memperhatikan tren berikut dalam rasio konversi pop-up:

1. Pop-up yang ditempatkan pada konteks yang tepat mencapai tingkat konversi lebih dari 40%. Dengan konteks yang tepat yang kami maksud adalah topik pop-up cocok dengan topik halaman situs web tempat kemunculannya.
2. Waktu pop-up, yang sepenuhnya tergantung pada konteksnya, menghasilkan tingkat konversi 38,4% berkat penundaan 15 detik pada halaman ebook. Alat seperti Google Analytics membantu memecahkan misteri di balik waktu yang paling sesuai untuk setiap kasus.
3. Dengan mempertimbangkan konteks dan waktu, membuat CTA yang sesuai dengan konteks, berusaha menjadi jelas dan membawa nilai, Sumo berhasil mencapai tingkat konversi 60%.

Seperti yang Anda lihat, jika Anda menyelam lebih dalam ke setiap aspek individual dari formulir pop-up dan menguji detail satu per satu, Anda dapat meningkatkan konversi secara signifikan.

Kiat dan trik desain pop-up

Desain adalah aspek yang tidak boleh diabaikan dalam hal mendorong konversi dan menarik lebih banyak prospek. Menurut buku “Buyology” yang disebutkan di atas, konsumen biasanya menghabiskan waktu paling lama 2 detik untuk mengambil keputusan pembelian. Hal pertama yang dilihat orang adalah elemen desain dan warna, dan baru setelah itu mereka mulai membaca kontennya. Jadi, Anda benar-benar hanya memiliki beberapa detik untuk menarik perhatian, menjelaskan maksud Anda, dan mendorong pengguna untuk meninggalkan alamat email mereka di formulir Anda.

Mari lanjutkan dan lihat detail beberapa contoh pop-up yang bagus untuk mengetahui strategi desain pop-up mana yang dapat Anda gunakan untuk formulir langganan Anda sendiri.

Buat pop-up Anda sesuai dengan pedoman perusahaan

Pertama dan terpenting, semua aset desain Anda yang digunakan di semua jenis media — baik itu situs web, email, atau media sosial — harus sesuai dengan pedoman perusahaan perusahaan Anda karena secara keseluruhan, aset ini membentuk kesan tentang Anda sebagai sebuah merek. Itulah mengapa penting untuk tetap berpegang pada warna, font, bentuk, dan elemen desain perusahaan Anda.

Lihatlah halaman Whole Whale About Us. Anda dapat melihat bahwa palet warna terbuat dari nuansa putih dan abu-abu yang dilengkapi dengan nuansa biru muda dan gelap. Ada banyak ruang negatif, font sans serif digunakan di seluruh situs web.

Sekarang lihat desain pop-up mereka, yang sangat cocok dengan desain situs web mereka karena ada warna dan font yang sama yang diterapkan dalam formulir. Terlebih lagi, foto emosional digunakan untuk menarik lebih banyak perhatian ke pop-up. Bagian teks kiri dan bagian gambar kanan sepenuhnya simetris.

Whole Whale menawarkan tiga produk berbeda yang berguna untuk organisasi nirlaba, salah satunya adalah Lighthouse, yang dibuat untuk meningkatkan efektivitas halaman donasi. Perhatikan bagaimana desain pop-up produk ini juga sesuai dengan pedoman desain perusahaan mereka, membuat dampak yang lebih kuat secara keseluruhan.

Desain pop-up Anda tidak harus senetral yang digunakan oleh Whole Whale. Jangan ragu untuk menambahkannya sedikit lebih banyak karakter, terutama jika Anda memiliki blog atau situs web pribadi.

Misalnya, situs web Wait But Why sangat berbeda dari situs Whole Whale sendiri. Ini menyenangkan dan cerah dan memiliki banyak ilustrasi seperti sketsa.

Tidak terkecuali pop-up mereka — ini juga menyenangkan dan pribadi. Bercanda tentang sifat pop-up yang mengganggu, perusahaan hanya mendorong pengguna untuk mendaftar.

Praktikkan teori persepsi visual

Ada beberapa teori persepsi visual yang telah digunakan dalam desain selama berabad-abad sampai hari ini. Kita akan berbicara tentang aturan Rasio Emas dan teori Gestalt, dua teori desain yang paling signifikan.

Aturan Rasio Emas

Rasio Emas kira-kira merupakan rasio 1:1,61 yang ditemukan di alam dan digunakan untuk membuat gambar seimbang secara visual, menyoroti bagian-bagian tertentu dari sebuah gambar.

Bagaimana Anda bisa menggunakan ini dalam praktik? Misalnya, proporsi ini dapat membantu Anda membagi gambar menjadi bagian-bagian yang seimbang, memberi aksen pada elemen paling signifikan dari desain Anda, atau hanya memotong gambar dengan cara yang paling menarik secara visual.

Gambar di bawah ini dipotong menggunakan prinsip Rasio Emas. Perhatikan bagaimana bagian terpenting dari gambar itu, sebuah ponsel, ditempatkan — di tengah spiral, di mana mata manusia tertarik secara alami.

Saat Anda mengerjakan desain pop-up, Anda dapat menempatkan tombol CTA di tengah spiral, gambar berada di awal spiral, yang menempati bagian terbesarnya. Berikut ini bagaimana tata letak dasar pop-up Anda dapat terlihat dalam kasus ini:

Teori Gestalt

Gestalt berarti “kesatuan yang utuh” dan menjadi intisari dari keseluruhan teori, yang menjelaskan bagaimana manusia mempersepsikan objek berdasarkan penempatannya dalam ruang dua dimensi.

Ada 6 prinsip umum Gestalt:

1. Kesamaan . Objek serupa dianggap sebagai pola atau kelompok.
2. Lanjutan . Objek yang ditempatkan pada satu jalur dianggap sebagai kelompok, dan mata manusia dipandu oleh garis visual ini.
3. Penutupan . Jika suatu objek kekurangan di beberapa bagian, kita masih mempersepsikannya secara keseluruhan. Pikirkan saja logo WWF dengan panda dan Anda akan memahami prinsip itu.
4. Kedekatan . Objek yang ditempatkan berdekatan satu sama lain dianggap sebagai sebuah kelompok.
5. Gambar/tanah . Orang memisahkan elemen dari latar belakang, sehingga yang lebih besar akan dianggap sebagai tanah, sedangkan yang lebih kecil sebagai objek, atau figur. Prinsip ini sering digunakan dalam karya-karya Escher.
6. Simetri dan ketertiban . Orang merasa lebih aman dan lebih tenang saat melihat desain yang simetris.

Anda tidak harus mempelajari semua prinsip ini dengan hati. Namun, beberapa pengetahuan dasar tentang mereka akan membantu Anda memahami mengapa desain asimetris mungkin terlihat lebih dinamis, dan desain simetris lebih stabil dan lebih aman, serta mengapa perhatian pengguna akan terseret ke objek terbesar atau paling terang yang menonjol dari yang lain.

Sebagai contoh, mari kita lihat contoh desain pop-up dari SheSimplyShops. Perusahaan menawarkan pengguna untuk memutar roda untuk mendapatkan kesempatan memenangkan diskon. Munculan muncul di sisi kiri layar dan tidak simetris: bagian kiri tampak 'lebih berat' daripada bagian kanan. Roda mengambil seluruh bagian kiri pop-up, sedangkan teks dan tombol CTA ditempatkan di sebelah kanan dikelilingi oleh ruang negatif. Semua itu menciptakan suasana dinamis dan energik di sekitar pop-up.

Sebaliknya, bentuk pop-up oleh Leia sepenuhnya simetris dan dengan demikian terlihat jauh lebih tenang daripada contoh sebelumnya. Semua elemen dipusatkan, secara visual mengarah ke satu titik — tombol CTA.

Jaga keterbacaan

Jika Anda ingin pop-up Anda menyampaikan pesan yang tepat, pop-up itu harus mudah dipahami. Dan dalam hal keterbacaan, kemampuan Anda untuk bekerja dengan teks dan tipografi sangat penting.

Tetapkan hierarki visual, di mana elemen seperti judul, deskripsi, dan tombol dipisahkan secara visual — dengan menggunakan font pelengkap, ukuran dan bobot yang berbeda, serta spasi. Leading, spasi di antara baris, dan kerning, spasi di antara huruf, harus memandu pembaca melalui formulir Anda. Informasi yang paling penting harus selalu menjadi yang paling menonjol.

Untuk membuat kontras yang lebih besar, Anda dapat mencampur bobot yang berbeda dari satu font serta serif dan sans serif. Namun, usahakan untuk tetap menggunakan tidak lebih dari dua font, agar bentuknya tidak terlihat berantakan.

Formulir pop-up di blog Tim Ferris adalah contoh tipografi yang bagus. Anda dapat dengan jelas melihat perbedaan antara logotype, judul, subtitle, nama penulis, dan dua tombol, yang lebih menonjol adalah CTA yang diinginkan.

Judul menarik perhatian paling banyak berkat kontras antara latar belakang dan teks. Setelah itu, mata Anda langsung beralih ke tombol CTA. Kemudian, Anda kembali ke atas untuk membaca detailnya — subtitle dan nama penulisnya.

Pemicu Sosial, pada gilirannya, menawarkan bentuk pop-up yang lebih ringan berdasarkan tipografi tebal. Pertama, Anda melihat judul yang menarik berupa pertanyaan, mata Anda langsung beralih ke tombol CTA yang ketat. Deskripsi dipisahkan secara visual dengan pembagi dan ditulis dalam font berukuran lebih kecil.

Sadar akan pilihan warna Anda

Warna adalah alat yang kuat yang dapat digunakan untuk sepenuhnya mengubah suasana bentuk pop-up Anda. Nuansa pastel akan menghadirkan lebih banyak suasana romantis dan ringan, sementara warna yang keras dan cerah dapat membuat pop-up Anda lebih mewah.

Untuk memilih warna yang berpadu dengan baik, gunakan alat seperti Adobe Color. Ini gratis dan memungkinkan Anda membuat palet warna unik dari awal, mengekstraknya dari gambar, atau sekadar menjelajahi warna dan tren untuk menemukan inspirasi.

Contoh pop-up Tommy Hilfiger menampilkan kontras yang hebat antara merah, biru, dan putih. Judul ditulis dengan huruf kapital tebal, bagian terpentingnya diberi warna merah. Segera perhatian Anda diseret dari judul ke tombol sign-up.

Jika Anda merasa pilihan desain minimalis lebih menarik, Anda dapat menggunakan satu warna primer untuk latar belakang dan warna sekunder untuk teks dan elemen lainnya.

Misalnya, Horizn Studios tidak takut memperkenalkan bentuk yang benar-benar hitam karena mereka menggunakan teks dan tombol putih untuk mengontraskan latar belakang monokromatik. Kontras seperti itu serta latar belakang situs web yang pudar membuat formulir ini terlihat dengan baik.

Elvie&Leo, sebaliknya, menggunakan formulir yang benar-benar putih dengan teks hitam. Sederhana namun berkelas berkat pilihan cerdas font serif untuk pesan utama dan tombol hitam, yang kontras dengan bentuk lainnya.

Situs web My Deal menawarkan opsi minimalis lain dengan semburat warna. Sebuah pesawat kertas merah diarahkan ke kanan — di situlah tombol sign up merah berada. Perhatikan bagaimana tipografi digunakan untuk menyorot pesan utama formulir.

Bereksperimenlah dengan bentuk dan interaktivitas

Tambahkan sedikit lebih banyak kesenangan ke pop-up Anda untuk meningkatkan keterlibatan. Misalnya, Lilin Jackpot menawarkan Anda untuk berpartisipasi dalam lotere spin-to-win.

Saat Anda memutar roda, Anda dapat memenangkan salah satu dari empat hadiah. Seperti itulah tampilan pop-up saat diaktifkan:

Bermain dengan bentuk memungkinkan Anda menarik lebih banyak perhatian ke pop-up. Email Monday, misalnya, menggunakan bentuk yang tidak biasa dari formulir berlangganan — sebuah lingkaran. Menggabungkannya dengan lingkaran yang lebih kecil, yang menunjukkan foto pendiri situs web, merek mungkin memiliki semua peluang untuk mendapatkan lebih banyak prospek.

Giliranmu

Untuk membuat formulir langganan Anda menarik, ingat prinsip-prinsip desain pop-up sederhana ini:

• pastikan formulir pop-up Anda dirancang dengan gaya korporat perusahaan Anda;
• ingat tentang Rasio Emas dan teori Gestalt saat menempatkan elemen desain dan bekerja dengan tipografi formulir Anda;
• pastikan teks pop-up Anda mudah dibaca;
• gunakan warna dengan bijak untuk memberi aksen pada bagian terpenting dari pop-up;
• tambahkan interaktivitas dan mainkan dengan berbagai bentuk untuk membuat pop-up Anda menyenangkan dan luar biasa bagi pengguna.

Siap membuat formulir pop-up pertama Anda dengan SendPulse secara gratis?