Terlepas dari potensi mereka untuk memperparah pengunjung situs, pop-up tetap ada karena alasan yang baik: tingkat percakapan mereka dapat rata-rata 9% pada kinerja terbaik menurut penelitian oleh Sumo. Hal ini membuat mendesain pop-up yang baik tidak hanya penting untuk mengurangi frustrasi pengguna tetapi juga untuk kesuksesan bisnis. Dengan mengingat hal itu, mari kita telusuri beberapa praktik terbaik tentang cara membuat desain pop-up.

1. Timbang pilihan untuk gaya desain pop-up

Pop-up paling dasar dan umum adalah jendela persegi yang muncul di tengah layar. Keuntungannya di sini adalah tidak mungkin untuk dilewatkan. Tentu saja, itu hanya karena memotong langsung visi pengguna. Meskipun tidak ada yang salah dengan pop-up tradisional, pop-up ini sering digunakan sebagai default ketika ada begitu banyak opsi lain (yang berpotensi lebih efektif) untuk dipertimbangkan.

Pop-up dapat muncul di mana saja di layar, dan setiap posisi akan membawa implikasi tentang sifat informasi. Pendekatan front-and-center standar cenderung menandakan sesuatu yang cukup penting sehingga bersedia mengganggu penelusuran pengguna. Biasanya digunakan untuk pembelian langsung pada konten.

Sebaliknya, pop-up dapat meluncur dari atas atau bawah layar, memungkinkan pengguna untuk terus berinteraksi dengan situs saat pop-up ada. Dengan pendekatan ini, pengunjung dapat memilih kapan mereka ingin terlibat dengan pop-up, dan mereka didorong untuk melakukannya lebih cepat daripada nanti jika pop-up cukup menutupi halaman sehingga mengganggu. Pendekatan ini sering digunakan untuk tindakan yang tidak terlalu mendesak, seperti meminta pengunjung memasukkan alamat email mereka.

Pertimbangan desain lain yang terkadang diabaikan adalah animasi, bagaimana pop-up muncul di layar dapat membuat perbedaan besar dalam cara penerimaannya. Fade up, misalnya, jauh lebih lembut dan tidak terlalu menggelegar daripada overlay yang tiba-tiba. Sementara itu, animasi pop dan bouncing literal terasa menyenangkan dan bersahabat. Pendekatan dengan upaya yang lebih tinggi, seperti menampilkan berbagai elemen pop-up melalui animasi unik yang terpisah, membuat pop-up tidak terasa seperti iklan dan lebih seperti fitur situs web yang kreatif dan bermanfaat.

2. Jaga agar pop-up tetap sesuai dengan branding

Seolah-olah menjadi jendela pop-up tidak cukup menarik perhatian, pop-up (dan keinginan untuk segera berkonversi) sering menimbulkan godaan untuk sebanyak mungkin lonceng dan peluit. Hal ini dapat menyebabkan desain yang terlalu menonjolkan ajakan bertindak, terkadang dengan panah literal, atau menebalkan beberapa baris salinan atau terlalu sering menggunakan warna merah, semuanya untuk memastikan bahwa pengguna tidak melewatkan promosi penjualan.

Penipu sering kali menggunakan pop-up yang ada di mana-mana dengan desain yang mengkhawatirkan dan menarik perhatian untuk mengelabui pengguna agar mengunduh malware. Untuk alasan ini, desainer harus merasa bebas untuk membiarkan pop-up menyesuaikan dengan branding situs lainnya, bahkan jika ini menghasilkan gaya yang lebih tenang. Gunakan hierarki visual untuk memprioritaskan informasi dan gambar yang menarik untuk menarik perhatian pemirsa. Hal ini tidak hanya akan menghasilkan desain yang tampak lebih bersih, tetapi juga akan membangun kredibilitas pop-up sehingga muncul sebagai peluang dan bukan tipuan. Secara keseluruhan, desain yang merasa perlu menggunakan teknik menarik perhatian dan di luar merek untuk menarik perhatian menandakan kurangnya kepercayaan pada nilai penawaran pop-up.

3. Gunakan bahasa warna dan bentuk secara efektif

Salinan iklan pop-up, asalkan ditulis dengan baik, harus berfungsi membujuk pengguna untuk melakukan suatu tindakan. Namun kata-kata bukanlah satu-satunya alat yang harus gunakan untuk berkomunikasi dengan pop-up: elemen desain visual seperti warna dan bentuk dapat menjangkau pemirsa pada tingkat emosional.

Jika ingin mengurangi iritasi yang mungkin ditimbulkan oleh pop-up, warna yang menenangkan seperti biru atau hijau atau beberapa bentuk pastel dapat melakukannya. Putih murni, sementara itu, dapat menimbulkan perasaan bersih dan rapi, terutama bila dikombinasikan dengan banyak ruang antar elemen. Dari segi bentuk, jendela pop-up, seperti jendela komputer lainnya, secara default berbentuk persegi panjang atau persegi. Mengubah ini menjadi bentuk yang lebih bulat membuat desain tampak mudah didekati dan ramah mengingat kurangnya tepi yang tajam.

Apa pun bentuk atau warna yang pilih, penting bagi untuk menyadari bahwa pilihan berbicara kepada pemirsa, baik menginginkannya atau tidak.

4. Jaga agar konten pop-up tetap jelas dan langsung ke intinya

Karena pop-up pada dasarnya adalah interupsi, respons spontan yang umum dimiliki pengguna adalah segera menutupnya. Cukup sulit untuk membujuk pengunjung untuk mengklik dalam keadaan yang paling ideal, tetapi pop-up memiliki jendela waktu yang sangat kecil untuk mencapai tujuan mereka. Hal ini mengarah pada gaya desain pop-up yang sebagian besar minimalis, jelas dan to the point. Nilai tindakan yang ingin pengguna lakukan harus terlihat jelas dalam sekejap.

Pada kenyataannya, beberapa pop-up mungkin perlu menyertakan lebih banyak (seperti kolom input untuk email) dan banyak yang memilih untuk menyertakan lebih sedikit (seperti gambar pendukung). Pada akhirnya, tergantung pada apa yang ingin capai dan seberapa besar kemungkinan pengunjung situs akan bertahan untuk mendengar kasus.

5. Jangan abaikan tombol tutup

Iklan pop-up dibuat untuk mengonversi, bukan untuk ditutup. Tapi tentu saja, kemampuan untuk menutup sangat penting untuk desain pop-up. Hal ini masalah pengalaman pengguna yang baik untuk memastikan pengguna dapat melakukan tindakan yang mereka perlukan, bahkan jika itu adalah tindakan yang tidak ingin mereka lakukan.

Dalam hal desain, tanda X sederhana di sudut kanan atas biasanya sudah cukup. Meskipun ini bukan pilihan desain yang paling orisinal, ini adalah tempat paling alami yang akan dicari pengguna. Banyak desainer menghilangkan tombol tutup, dan ini bisa menjadi taktik yang berguna, kemampuan untuk keluar tidak boleh disembunyikan, tetapi juga tidak harus menjadi hal yang paling menonjol pada pop-up.

Sebagai alternatif, tombol tutup terkadang disajikan bentuk tombol persegi panjang tradisional. Pada saat yang sama, ini bisa menjadi pendekatan yang baik jika mengubah teks pada tombol tutup untuk memperjelas bahwa pengguna tidak hanya keluar dari pop-up tetapi kehilangan sesuatu

Pada akhirnya, jika pengguna ingin keluar dari pop-up, desain seharusnya mengizinkan mereka melakukannya, karena setiap frustrasi tambahan dengan pop-up akan diterjemahkan menjadi frustrasi dengan merek. Dengan kata lain, akan kalah dalam pertempuran, siapkan diri untuk memenangkan perang melalui pengalaman pengguna yang baik.

6. Desain secara terpisah untuk versi seluler

Membuat versi seluler dari pop-up melibatkan lebih dari sekadar memperkecil desain. Pengalaman seluler sangat berbeda dari pengalaman desktop.

Pertama, selain ukuran yang lebih kecil, harus mempertimbangkan rasio aspek: ponsel dalam orientasi potret sedangkan desktop dalam lanskap. Hal ini berarti desain harus terbaca dengan baik di jendela yang lebih tinggi dan lebih sempit. Selain itu, pengunjung sebagian besar akan default untuk menggunakan satu tangan dan satu ibu jari. Hal ini berarti bahwa bidang formulir, yang seharusnya cukup terbatas pada pop-up desktop, akan menjadi lebih rumit bagi pengguna. Selain itu, pop-up yang muncul lebih dekat ke bagian bawah layar akan lebih mudah dijangkau oleh ibu jari.

Namun, desain seluler tidak semuanya tentang pembatasan: situs web seluler juga hadir dengan lebih banyak bentuk input daripada desktop, seperti menggesek, mencubit, dan mengetuk pada tekanan yang berbeda, dan desain pop-up dapat menggunakan ini untuk interaksi yang lebih tak terduga.

Semua ini untuk mengatakan bahwa meskipun sudah memiliki versi desktop dari pop-up yang dirancang, harus mendedikasikan upaya untuk versi seluler yang terpisah. Banyak desainer saat ini mengadopsi pendekatan mobile-first dalam desain digital (di mana versi seluler dibuat sebelum ukuran layar yang lebih besar), dan tidak ada alasan mengapa tidak dapat mendekati desain pop-up dengan cara yang sama. Melakukannya memungkinkan untuk memulai yang sederhana dan menambahkan detail saat ukuran layar meningkat.

7. Sesuaikan desain pop-up berdasarkan pengujian

Sementara (seperti semua desain) ada seni yang terlibat dalam desain pop-up, pada akhirnya bermuara pada kinerja. Satu-satunya cara akan tahu bahwa desain bagus adalah jika berhasil: yang artinya itu adalah mengubah pelanggan. Tingkat konversi rata-rata dari pop-up yang berhasil adalah sekitar 3%.

Inilah sebabnya mengapa bagian terpenting dari proses desain pop-up adalah pengujian dan analisis. Setelah mengevaluasi kinerja desain terhadap sasaran, harus menindaklanjuti temuan dengan menyesuaikan desain. Metode yang sangat populer adalah pengujian A/B, di mana menempatkan dua versi desain yang berbeda di depan dua segmen pengguna yang berbeda untuk melihat mana yang berkinerja lebih baik. Gunakan pengujian A/B untuk memvariasikan elemen desain tertentu untuk menemukan resep mana yang dapat menghasilkan konversi yang lebih tinggi.

Intinya adalah tidak peduli seberapa bagus tampilan pop-up atau seberapa baik desainnya secara teoritis, yang penting adalah apa yang dipikirkan pengunjung.

Pop-up tidak secara inheren menjadi gangguan bagi pengguna untuk ditangani. Seperti banyak elemen antarmuka digital lainnya, desainlah sesuatu yang memutuskan apakah pengalaman itu menyakitkan atau tidak. Hal ini semua adalah masalah perspektif: desain pop-up dapat mengganggu pemirsa dengan iklan atau mengingatkan mereka akan peluang. Meskipun tip ini adalah tempat yang bagus untuk memulai mendapatkan pop-up yang benar-benar akan dihargai pengunjung, desain pop-up yang baik pada akhirnya bergantung pada kerja sama dengan desainer yang baik.

Normal 0 false false false IN X-NONE AR-SA /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:8.0pt; mso-para-margin-left:0cm; line-height:107%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri",sans-serif; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:Arial; mso-bidi-theme-font:minor-bidi; mso-ansi-language:#0021; mso-fareast-language:EN-US;}