5 Tips Mudah Diimplementasikan untuk Mendesain Popup yang Menarik (Dengan 24 Contoh)

Diterbitkan: 2022-06-28

Popup dan pesan onsite lainnya biasanya muncul di "ruang ritel" paling premium yang Anda miliki untuk berkomunikasi dengan pelanggan Anda: situs web Anda. Mereka muncul kepada orang-orang yang paling tertarik dengan produk Anda—itu sebabnya mereka mengklik, bukan? Dan itu berarti mereka yang paling terbuka untuk setiap penawaran hebat dari Anda.

Namun, banyak pemasar menghadirkan popup yang sangat mendasar, tidak imajinatif, dan bahkan sangat jelek.

Mengapa?

Karena popup sangat kuat, dan mereka mendapatkan hasil… bahkan ketika Anda tidak berusaha keras untuk mendesainnya. Pemasar yang terbiasa dengan rasio klik-tayang kurang dari 1% sering kali puas dengan rasio konversi 3-5% untuk popup mereka. Tampaknya "cukup baik."

Kenyataannya, para pemasar ini sedang duduk di atas tambang emas—mereka hanya belum menyadarinya. Dengan beberapa penyesuaian sederhana, mereka dapat menggandakan atau melipatgandakan tingkat konversi popup mereka. Dengan sedikit lebih banyak pekerjaan (seperti mempersonalisasi pesan untuk segmen utama), mereka dapat membuat munculan dengan rasio konversi 30-50%.

Berapa banyak perbedaan yang akan dihasilkan untuk bisnis mereka?

Desain sangat kuat dengan popup, dan menyusun popup yang dirancang dengan baik dan indah dapat menjadi aktivitas ROI tertinggi Anda sebagai pemasar. Investasikan hanya beberapa menit dari waktu Anda sekarang, dan Anda dapat memiliki aset yang menghasilkan uang bagi Anda selama berbulan-bulan atau bertahun-tahun yang akan datang!

Daripada menghabiskan berjam-jam mengoptimalkan iklan Facebook untuk peningkatan 5% dalam RKT, saya sarankan menghabiskan sebagian kecil dari waktu itu untuk mengoptimalkan pesan di tempat Anda.

Mari kita lihat bagaimana Anda bisa mendapatkan hasil maksimal dari desain popup Anda!

Jalan pintas ️

  • Mengapa desain popup penting?
  • Gunakan warna yang tepat
  • Tetap sederhana
  • Cocokkan merek Anda
  • Gunakan kontras untuk memusatkan perhatian
  • Gunakan visual untuk menekankan pesan Anda

Mengapa desain popup penting?

Pertama-tama: mengapa desain popup penting? Bukankah itu hanya pesan sederhana, di mana konten mengalahkan desain?

Meskipun pesan dan proposisi nilai dari popup Anda sangat penting, desain yang bagus benar-benar dapat meningkatkan efektivitas pesan apa pun. Popup biasanya muncul entah dari mana, dan hanya memiliki beberapa detik untuk membuat pengunjung terkesan. Dan di dunia kita yang menuntut perhatian, mengesankan pengunjung situs web bukanlah tugas yang mudah.

Memiliki popup yang cantik dan unik seperti di bawah ini bisa mendapatkan tingkat konversi hingga 50%! Sementara itu, menyajikan penawaran yang sama (diskon 10% reguler) dengan cara yang membosankan dan hanya teks akan beruntung untuk mencapai tingkat konversi 10%. Itu perbedaan 400%!

popup design example 01 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Bahkan merek besar pun terkadang salah.

Lihat saja sembulan ini dari Mailchimp. Kemungkinan besar konversi di bawah 2%—yang berarti bahwa 98% pengunjung mereka terganggu (dan dengan demikian terganggu) secara tidak perlu.

popup design example 02 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Sekarang kita tahu mengapa desain popup penting dan kita telah melihat contoh desain popup buruk yang tidak ingin Anda salin, mari beralih ke hal-hal bagus: cara mendesain popup yang menarik dan beberapa contoh bintang untuk inspirasi.

1. Gunakan warna yang tepat

Bertentangan dengan beberapa mitos pemasaran online, tidak ada kombinasi warna tunggal yang lebih unggul dari yang lainnya.

Namun, ada dua faktor penting saat memilih warna:

  • Anda harus dapat membuat kontras (dan dengan demikian fokus) pada elemen terpenting Anda
  • Pilihan warna Anda harus sesuai dengan merek Anda dan menciptakan pengalaman yang konsisten dan mulus.

Kami akan membahas kedua tip ini secara lebih rinci di bagian yang akan datang.

Namun sebagai aturan dasar, Anda dapat memilih latar belakang putih dan menggunakan warna utama merek Anda sebagai tajuk utama dan warna tombol CTA. Ini adalah solusi yang sangat klasik dan berisiko rendah.

Lihat contoh ini dari Enro:

popup design example 03 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Jika Anda lebih suka menggunakan warna merek Anda sebagai latar belakang, Mented Cosmetics memberikan contoh yang bagus. Ini tidak hanya cocok dengan warna merek mereka tetapi juga lebih menekankan nilai-nilai perusahaan mereka:

popup design example 04 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Anda juga bisa menggunakan palet warna terbalik dengan latar belakang gelap. Dalam kasus ini, sebagian besar font harus berwarna putih atau abu-abu terang. Menggunakan warna yang lebih jenuh akan mengurangi keterbacaan pesan Anda.

popup design example 05 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

2. Tetap sederhana

“Less is more”—itu adalah pepatah yang terlalu benar dalam hal popup.

Karena Anda memiliki waktu yang sangat terbatas untuk menarik perhatian dan membangkitkan minat, pesan dan desain Anda harus sangat sederhana.

popup design example 06 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Cobalah untuk bersikap kejam dengan setiap kata dan elemen dalam popup Anda, dan pastikan bahwa setiap kata dan elemen benar-benar diperlukan.

Jika menurut Anda itu cukup sederhana, cobalah untuk lebih sederhana lagi sampai tidak ada yang tersisa kecuali satu proposisi nilai utama dan CTA.

Anda mungkin bertanya-tanya: apakah itu berarti kita harus membatasi diri pada popup hanya teks hitam putih seperti di bawah ini?

popup design example 07 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Jawabannya adalah TIDAK!

Kebanyakan orang hanya akan membaca beberapa kata dari konten popup Anda sebelum memutuskan apakah akan membaca atau menutup popup saja. Itu berarti bahwa desain pesan Anda (warna, gambar, estetika, dll.) setidaknya akan memiliki jumlah dampak yang sama pada efektivitas pesan Anda sebagai judul Anda.

Tentu saja, jika inti pesan Anda terfokus pada produk tertentu, maka (seperti pada halaman arahan kategori) Anda perlu menjaga pesan Anda sesederhana mungkin agar fokus tetap pada produk.

Lihat bagaimana Burberry melakukannya di bawah ini: mereka menggunakan pesan sederhana yang sangat sederhana dengan kontras yang sempurna dan fokus pada tiga produk yang baru saja dilihat.

popup design example 08 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

3. Cocokkan merek Anda

Pesan di situs Anda tidak muncul dalam ruang hampa, tetapi sebagai bagian dari situs web Anda, meskipun muncul dalam hamparan. Jadi, penting agar popup Anda menyatu dengan mulus dengan tema merek Anda.

Ini berarti Anda harus memilih elemen (font, gambar, dll.) yang mirip dengan yang digunakan di situs web Anda.

ClickUp adalah contoh yang bagus tentang cara membuat popup sederhana namun efektif, yang sangat cocok dengan panduan gaya merek:

popup design example 09 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Anda dapat dengan mudah menyimpan popup pada merek dengan menggunakan font merek dan logo Anda, seperti yang dilakukan Ramp:

popup design example 10 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Bahkan jika Anda berada di dunia B2C tempat Anda mempromosikan merek lain, Anda dapat menarik elemen dari kedua merek, seperti yang dilakukan Sephora dengan munculan terkait Gucci ini:

popup design example 11 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

4. Gunakan kontras untuk memusatkan perhatian

Sangat penting bahwa popup Anda menyatu dengan tema merek Anda, ya. Namun, juga penting bahwa mereka menonjol dan menarik perhatian pemirsa.

Jika Anda memiliki banyak konten (mis. daftar butir hal-hal yang disertakan dalam penawaran Anda), pastikan bahwa proposisi nilai Anda jelas dalam salinan header.

Juga, pastikan warna CTA menonjol dari popup lainnya, dan tombolnya besar dan dapat dibaca. Judul dan CTA biasanya merupakan dua elemen terpenting dari popup Anda, jadi pastikan keduanya memiliki kontras yang cukup.

popup design example 12 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Misalnya, Anda dapat memilih warna yang cerah dan kontras untuk tombol CTA Anda. Ini akan membuatnya jauh lebih menarik dan pengunjung Anda akan lebih cenderung mengkliknya.

Jika popup Anda sebagian besar berwarna hitam, Anda dapat mempertimbangkan untuk menggunakan oranye atau merah muda cerah untuk tombol ajakan bertindak Anda.

Menggunakan ukuran font yang berbeda adalah cara termudah untuk memfokuskan perhatian audiens Anda pada esensi popup Anda. Bahkan jika Anda memiliki beberapa jenis teks pada popup yang sama, Anda dapat menggunakan ukuran font, warna, dan teknik peningkatan kontras lainnya untuk menekankan nilai utama pesan Anda, seperti yang dilakukan Komily:

popup design example 13 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Jika Anda memiliki situs web yang gelap, Anda sering perlu memperkenalkan beberapa kontras dengan bermain-main dengan warna lightbox Anda (Anda tahu, area abu-abu setengah transparan di sekitar popup Anda).

Misalnya, jika popup Anda memiliki warna gelap, Anda dapat menggunakan overlay yang lebih terang saat ditampilkan.

Atau Anda dapat menggunakan versi layar penuh dari popup Anda, yang mencakup 100% layar—ini memastikan bahwa popup Anda akan terlihat, seperti pada contoh di bawah ini:

Jika Anda memiliki beberapa tombol, Anda dapat menggunakan warna tombol yang berbeda untuk menekankan CTA utama, yang menunjukkan kepada pengguna dengan cara yang halus opsi mana yang merupakan pilihan yang lebih baik untuk mereka:

Strategi lain melibatkan penyisipan elemen visual seperti panah yang mengarah ke tombol ajakan bertindak. Anda dapat menggunakan objek terarah yang digambar dengan tangan dan cerah untuk menunjukkan ajakan bertindak Anda, seperti pada popup di bawah ini:

popup design example 16 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Cara lain untuk menekankan penawaran Anda melalui desain popup adalah dengan menggunakan bentuk template yang tidak biasa. Ini mematahkan pola popup persegi panjang umum yang dilihat orang di seluruh web, dan itu menarik minat hanya karena unik.

popup design example 17 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Berhati-hatilah untuk tidak menekankan terlalu banyak elemen. Jika Anda memiliki popup survei seperti di bawah ini, pastikan Anda menggunakan gaya tombol sekunder yang tidak terlalu agresif untuk tombol Anda:

5. Gunakan visual untuk menekankan pesan Anda

Seperti kata pepatah, “sebuah gambar bernilai seribu kata.” Hal ini tentu berlaku untuk popup!

Faktanya, otak manusia memproses gambar 60.000 kali lebih cepat daripada teks, dan 90% informasi yang dikirimkan ke otak adalah visual.

Itulah mengapa beberapa visual yang bagus dapat sangat meningkatkan efektivitas pesan di tempat Anda. Tujuannya adalah untuk memilih visual yang tepat untuk memperkuat pesan tertulis, seperti yang dilakukan popup ini:

popup design example 19 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Anda perlu menemukan gambar berkualitas tinggi untuk popup Anda. Sebaiknya gunakan foto asli produk Anda daripada gambar stok, seperti yang dilakukan BlendJet:

popup design example 20 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Pendekatan terbaik adalah menelusuri gambar produk/merek Anda dan memilih gambar relevan yang selaras dengan pesan Anda, seperti sembulan The Oodie ini:

popup design example 21 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Jika Anda menjalankan penjualan musiman, merupakan praktik yang baik untuk memperbarui pesan Anda dengan musim. Menjadi relevan dan tepat waktu menciptakan kesan bahwa penawaran ini terbatas waktu, meningkatkan rasa takut kehilangan (dan dengan demikian, konversi):

Bahkan jika Anda tidak memiliki sesuatu yang spesifik untuk ditawarkan, hanya dengan memperbarui pesan Anda agar sesuai dengan musim saat ini masih dapat meningkatkan rasio konversi secara signifikan, seperti pesan ini:

Jika produk Anda terlihat menyenangkan atau berguna di foto, orang akan cenderung membelinya dan mendaftar ke email atau daftar SMS Anda dengan imbalan diskon.

Jika Anda mencoba mendorong pengunjung untuk meminta hadiah gratis, Anda dapat menggunakan kata-kata dan gambar yang menghubungkan pesan Anda dengan hati audiens Anda, seperti yang dilakukan Castlery:

popup design example 24 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Ringkasan

Saya harap Anda telah menemukan daftar praktik terbaik dan contoh desain popup yang berguna!

Pentingnya desain popup yang bagus sering diabaikan. Tapi mudah-mudahan, sekarang setelah Anda melihat dampak desain cerdas yang bisa dibuat, Anda tidak akan pernah kembali ke popup yang membosankan lagi! Menginvestasikan waktu untuk merancang popup on-brand yang menakjubkan akan memiliki dampak BESAR pada tingkat konversi dan mengirim ROI Anda setinggi langit.

Baru mengenal popup? Mulailah dengan salah satu template siap pakai kami di sini!

register free optimonk account - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Bagikan ini

Bagikan di Facebook
Bagikan di twitter
Bagikan di linkedin
Sebelumnya Pos Sebelumnya 7 Contoh Email Lucu untuk Toko E-niaga
Pos Berikutnya Cara Membuat Popup Mailchimp Yang Akan Menggandakan Daftar Subscriber Anda Lanjut

Ditulis oleh

Csaba Zajdo

Csaba Zajdo adalah pendiri OptiMonk. Sebagai veteran e-niaga, Csaba memiliki pengalaman lebih dari 15 tahun dalam bekerja dengan toko e-niaga. Misinya adalah untuk menemukan kembali industri e-niaga dan membantu toko, dengan menciptakan pengalaman berbelanja yang menyenangkan bagi setiap pelanggan.

ANDA MUNGKIN JUGA SUKA

how to make a mailchimp popup banner 300x169 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Cara Membuat Popup Mailchimp Yang Akan Menggandakan Daftar Pelanggan Anda

Lihat Posting
easy to implement tips to design a popup banner 300x157 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

5 Tips Mudah Diimplementasikan untuk Mendesain Popup yang Menarik (Dengan 24 Contoh)

Lihat Posting
7 funny email examples banner 300x157 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

7 Contoh Email Lucu untuk Toko Ecommerce

Lihat Posting