Praktik Terbaik Kupon, Diskon, dan Promosi UI & UX

“Pembeli menyukai penawaran, baik dalam bentuk penjualan di seluruh situs, item obral tertentu, atau kupon. Namun, agar pengguna berhasil menggunakan promosi, sebuah situs web harus melakukan dua hal dengan baik: ia harus mengomunikasikan berbagai promosi ini secara efektif di seluruh situs, dan juga harus memudahkan pengguna untuk mendapatkan kesepakatan yang dikomunikasikan.” Kim Salazar, Spesialis Pengalaman Pengguna Senior dengan Nielsen Norman Group

Posting ini mengumpulkan praktik dan inspirasi terbaik untuk merancang antarmuka pengguna dan pengalaman untuk mempromosikan kode kupon dan promosi yang diterapkan secara otomatis di situs web atau platform seluler Anda. Kami akan membahas seluruh perjalanan pelanggan, mulai dari pesan promosi dan penurunan harga di situs web melalui validasi kupon dan promosi dan aplikasi saat checkout, dan akhirnya, penukaran. Kami menulis posting ini berdasarkan UI & UX pelanggan kami, kinerja terbaik dalam hal pendapatan platform e-commerce DTC UI, dan berbagai studi UX.

Catatan: Semua tangkapan layar desktop dibuat di Mac, Chrome, dan semua tangkapan layar seluler dibuat menggunakan resolusi iPhone X di Chrome.

Kami berharap panduan ini akan membantu Anda mendesain ulang platform Anda untuk menyertakan kupon dan promosi tingkat keranjang atau untuk meningkatkan pengalaman pemberian kupon pelanggan Anda yang sudah ada. Jika Anda memiliki pertanyaan atau ingin tahu lebih banyak tentang Voucherify, Mesin Promosi kami, jangan ragu untuk menghubungi kami.

Kupon & Promosi UI Kit

Dapatkan waktu lebih cepat untuk memasarkan dengan kupon siap & komponen promosi dari Kupon & UI Kit Promosi kami yang tersedia di Figma. Belajarlah lagi.

Daftar isi:

Saran umum tentang UI & UX promosi:

• Nyatakan dengan jelas kerangka waktu promosi.
• Terapkan kupon yang tersedia untuk umum secara otomatis.
• Tawarkan halaman kompilasi penjualan.
• Aktifkan pemfilteran dalam kategori penjualan Anda.
• Tawarkan kokpit pelanggan.
• Cantumkan item yang didiskon di bagian Penjualan serta dalam kategori yang sesuai.
• Komunikasikan promosi di seluruh situs secara global.
• Jelaskan tentang batasan promo di muka.

Praktik terbaik Kupon UX pada halaman tertentu:

1. Halaman beranda:

• Jenis promosi yang diiklankan di halaman beranda.
• Tautan ke halaman penjualan.

2. Halaman kategori.
3. Pop-up.
4. Bagian atas pita halaman.
5. Catatan kaki.
6. Halaman produk:

• Tinggalkan label harga lama.
• Nyatakan aturan promosi bundel dengan jelas.

7. Keranjang belanja:

• Sertakan bidang kode kupon sebagai bagian inti dari halaman keranjang belanja dan halaman checkout.
• Untuk promosi pembelanjaan minimum, lakukan perhitungan untuk pengguna dan bantu mereka mencapai target pembelanjaan.
• Ingatkan pengguna tentang penawaran khusus yang tersedia yang dapat mereka dapatkan di keranjang belanja.
• Sebutkan syarat atau batasan khusus.

8. Halaman pembayaran:

• Sertakan bidang kode kupon.
• Tampilkan pesan sukses jika kode berhasil diterapkan.
• Tampilkan pesan kesalahan jika kode kupon tidak valid.
• Jelaskan apakah pelanggan dapat menambahkan lebih dari satu kupon diskon.
• Bantu pengguna menemukan diskon mereka.
• Mencerminkan diskon yang diterima.
  

Dasar-dasar kode kupon UI & UX

Kami akan membahas beberapa tip umum di sini yang berlaku untuk sebagian besar kupon diskon dan desain promosi, penempatan, dan promosi. Nantinya, kami akan beralih ke penempatan kupon dan promo keranjang khusus di situs web sambil menyoroti solusi desain terbaik dari sudut pandang pengalaman pelanggan. Ingatlah bahwa meluncurkan kampanye kupon saja tidak cukup, Anda juga perlu memperhatikan desain kupon, penempatan, validasi, dan proses penukaran untuk membuat kampanye Anda sukses besar.

Nyatakan dengan jelas kerangka waktu promosi

Anda harus memberi tahu pelanggan tentang durasi kupon atau promosi tingkat keranjang untuk menghindari pelanggan yang tidak puas yang mengetahui di kasir bahwa penawaran tidak lagi valid. Ini juga membantu menciptakan rasa urgensi dan sedikit mendorong pembeli untuk menyelesaikan pesanan mereka. Gagal melakukannya menyebabkan pengalaman pengguna yang rusak dan pelanggan turun dari situs Anda.

Anda dapat melakukannya dengan menyebutkan kerangka waktu (tanggal atau jam) promosi atau dengan menambahkan penghitung waktu mundur. Praktik terbaik adalah selalu menambahkan kerangka waktu promosi di setiap spanduk dan iklan, tidak hanya pada syarat dan ketentuan, untuk memastikan pelanggan mengetahui tanggal kedaluwarsa promosi.

Contoh UI:

Pomelo Fashion menggunakan penghitung waktu mundur untuk menampilkan dengan jelas kapan penawaran mereka berakhir.

Shein memberi tahu pelanggan di sebelah spanduk atau kategori promosi tentang durasi penawaran dengan hitungan mundur. Mereka juga menunjukkan jumlah potongan yang tersisa, untuk menimbulkan rasa urgensi.

Mereka juga memberi tahu pelanggan tentang durasi penawaran di halaman produk untuk lebih meningkatkan pengalaman promosi.

Dan mereka memasukkan pengatur waktu bahkan di keranjang belanja.

Begini tampilannya di aplikasi seluler mereka:

Pretty Little Thing memiliki hitung mundur promosi di spanduk halaman utama, tersedia juga dalam resolusi seluler:

Terapkan kupon yang tersedia untuk umum secara otomatis untuk memberikan pengalaman terbaik

Jika diskon atau kode kupon ditawarkan di situs, Anda dapat menyederhanakan proses penukaran dengan mengizinkan pengguna untuk menerapkannya secara otomatis ke keranjang mereka dengan mengklik kode diskon atau, setidaknya, menyalinnya secara otomatis saat mengkliknya, sehingga mereka tidak perlu mengingat kodenya. Ini akan meningkatkan penggunaan promosi dengan memudahkan pengguna untuk menerapkannya ke keranjang mereka. Anda juga dapat secara otomatis menerapkan kode diskon unik yang dikirim melalui berbagai saluran (email, SMS, dan lainnya) jika pelanggan mengklik tautan yang mereka terima. Pelajari cara memperbaiki UX validasi kupon dengan mengikuti posting ini.

Jika penawaran tersedia untuk umum, selalu pertimbangkan dengan cermat apakah penawaran tersebut hanya berupa diskon yang diterapkan secara otomatis di tingkat keranjang alih-alih kode kupon publik. Ini menyederhanakan proses checkout untuk pelanggan dan dapat menyebabkan peningkatan tingkat konversi promosi.

Praktik UX bagus lainnya adalah membuat kode kupon memungkinkan untuk disalin (tempatkan di situs web atau aplikasi seluler sebagai teks, bukan disematkan dalam gambar).

Contoh UI:

Vanity Planet secara otomatis menerapkan kode kupon publik pada pesanan yang memenuhi syarat di keranjang. Setelah pergi ke kasir, total pesanan dihitung ulang untuk mencerminkan kode diskon.

Mereka bahkan menambahkan produk gratis ke pesanan, jika pesanan memenuhi syarat untuk itu, lagi-lagi menerapkan kode diskon secara otomatis:

Di sini Anda dapat melihat alur yang sama, pada resolusi seluler:

Jika Anda mengklik tombol “Tampilkan ringkasan pesanan”, isi keranjang akan ditampilkan termasuk informasi tentang promosi dan kode kupon yang diterapkan pada pesanan.

Tawarkan halaman kompilasi penjualan

Mengumpulkan semua promosi tingkat keranjang dan kupon diskon yang tersedia untuk umum di satu halaman adalah cara yang bagus untuk memudahkan pelanggan menemukannya. Dengan cara ini Anda dapat menampilkan promosi juga kepada pelanggan baru atau yang belum login, bukan hanya menggunakan kokpit pelanggan untuk menampilkan semua promosi. Seringkali perusahaan menampilkan semua spanduk promosi hanya di halaman beranda yang dapat mengaburkan elemen halaman yang berbeda dan merusak pengalaman pelanggan.

Contoh UI:

Victoria's Secret menyajikan semua penawaran yang tersedia dalam UI yang jelas di satu situs. Perhatikan bagaimana arsitektur informasi di situs menggunakan ukuran untuk menekankan atau tidak menekankan penawaran yang dipilih.

Aktifkan pemfilteran dalam kategori penjualan Anda untuk UX yang lebih baik

Jika Anda menawarkan kategori penjualan yang mengumpulkan semua item yang berlaku untuk promosi keranjang atau kode diskon tertentu, Anda harus mengizinkan pengguna untuk menavigasi dan memfilter kategori tersebut. Beberapa pengunjung hanya ingin melihat produk yang dijual dan tidak ada yang lain, jadi kategori penjualan yang terpisah akan memungkinkan mereka untuk melihat semua penawaran, dan menavigasi bagian ini dengan mudah. Opsi navigasi yang difilter harus memungkinkan pembeli untuk menyortir dan memfilter dalam bagian penjualan untuk mempersempit pilihan secara efektif. Tanpa filter, belanja penjualan bisa menjadi kerja keras dan dapat mengakibatkan pelanggan turun dari situs Anda.

Contoh UI:

Pomelo Fashion menawarkan filter kategori penjualan berdasarkan jenis dan ukuran produk.

Fashion Nova menawarkan penyaringan kategori penjualan berdasarkan titik harga atau kompartemen:

Tawarkan kokpit pelanggan

Menampilkan semua promosi kereta dan kode diskon yang dapat diakses pelanggan tertentu di kokpit pelanggan khusus membantu pelanggan memahami promosi mana yang tersedia khusus untuk mereka. Hal ini juga memungkinkan Anda untuk menampilkan pribadi, kupon diskon unik, kartu hadiah, saldo poin loyalitas, atau hadiah lainnya, yang bertentangan dengan halaman penjualan yang hanya menampilkan promosi yang tersedia untuk umum, bukan yang dipersonalisasi.

Contoh UI:

H&M menawarkan kokpit pelanggan, di mana pelanggan dapat menemukan saldo poin loyalitas mereka, promosi dan diskon yang tersedia, voucher unik, dan program rujukan.

Kokpit pelanggan pada resolusi seluler:

Cantumkan item yang didiskon di bagian Penjualan dan dalam kategori yang sesuai

Jangan batasi tampilan barang obral ke bagian Penjualan khusus di situs. Untuk kemudahan penemuan terbaik, yang terbaik adalah mencantumkan item yang didiskon di halaman kategori yang sesuai dan di bagian Penjualan. Beberapa pengguna menavigasi langsung ke bagian Penjualan ketika termotivasi untuk menemukan penawaran, tetapi yang lain tidak secara khusus mencari bagian Penjualan. Pengguna yang mencari item tertentu umumnya menelusuri berdasarkan kategori. Situs yang menampilkan item obral bersama dengan item harga penuh membantu pengguna menemukan diskon dalam area minat mereka.

Contoh UI:

Pretty Little Thing mencantumkan item penjualan di bawah item obral dan kategori produk sehingga keduanya dapat ditemukan di keduanya.

Komunikasikan promosi di seluruh situs secara global untuk menghindari pers yang buruk

Jika situs menawarkan pengiriman gratis atau diskon atau kupon di seluruh situs lainnya, tunjukkan penawaran ini di setiap halaman situs. Pengingat diskon yang konsisten dapat membantu pengguna menemukan item dalam anggaran mereka serta mendorong mereka untuk membeli. Sekali lagi, mereka menggambarkan merek Anda sebagai merek yang memberikan keuntungan kepada pembeli. Dengan hanya menampilkan promosi di seluruh situs di area tertentu, Anda berisiko tidak semua pengguna akan menemukannya. Selain itu, jika kupon tidak diiklankan di semua halaman, orang mungkin berasumsi bahwa kupon tersebut sengaja disembunyikan untuk mencegah penggunaan yang pada akhirnya berdampak negatif pada merek.

Kemungkinan penempatan diskon meliputi:

• Pengumuman promosi di ruang pahlawan di beranda.
• Spanduk di bagian atas setiap halaman dengan detail promosi keranjang atau kode kupon – termasuk di halaman keranjang belanja atau halaman checkout tempat kode kupon harus dimasukkan.
• Info promosi dalam halaman daftar produk atau di rel kanan.
• Spanduk di bagian bawah halaman, di dalam atau di dekat footer.

Contoh UI:

Pomelo Fashion mengomunikasikan kupon seluruh situs mereka di spanduk beranda, pita halaman atas, dan halaman kategori.

PrettyLittleThing mengingatkan pelanggan tentang kupon diskon di seluruh situs bahkan di halaman produk – langkah yang bagus dari sudut pandang UX.

Beginilah cara mereka menyajikannya di tata letak seluler:

Pretty Little Thing mengiklankan promosi tingkat keranjang mereka di spanduk halaman utama dan pita halaman atas:

Mereka menawarkan halaman penjualan yang menampilkan semua item yang didiskon:

Mereka juga menunjukkan diskon di halaman produk:

Perjelas tentang pembatasan promosi di muka

Terkadang, promosi keranjang atau kupon diskon mungkin tunduk pada kualifikasi atau batasan. Jika demikian, pastikan bahwa penawaran tersebut dengan jelas menunjukkan batasan apa yang berlaku. Tautkan ke informasi yang lebih rinci tentang kondisi ini jika perlu, tetapi tidak mengharuskan pengguna untuk menggali cetakan kecil untuk memahami batasan dasar. Tidak ada yang lebih membuat frustrasi daripada mengharapkan untuk menerima kesepakatan, hanya untuk mengetahui di checkout bahwa Anda tidak memenuhi syarat. Ingatlah bahwa desain kupon Anda tidak hanya harus menarik, tetapi yang lebih penting, fungsional.

Contoh UI:

Pretty Little Thing menyatakan langsung di spanduk halaman utama mereka bahwa promosi tersebut tidak termasuk barang obral dan barang kecantikan.

Chewy memberikan tautan ke informasi lebih lanjut ke detail promosi mereka (tombol "Pelajari lebih lanjut") yang diiklankan di pita "hemat 35% untuk Autoship pertama Anda".

Ini adalah pop-up yang ditampilkan setelah mengklik CTA promosi:

Dalam resolusi seluler, pita tidak berisi tombol tetapi dapat diklik. Setelah mengklik pop-up yang sama dengan syarat dan ketentuan promosi ditampilkan:

Praktik terbaik Kupon UX pada halaman tertentu:

Halaman rumah:

Jenis promosi yang diiklankan di halaman beranda:

Anda tidak boleh mengiklankan semua promosi di halaman beranda karena pelanggan mungkin kewalahan dengan jumlah penawaran (dan mendapatkan apa yang disebut kebutaan spanduk). Hanya promosi atau kupon keranjang yang tersedia untuk umum yang boleh diiklankan di sana. Praktik UX terbaik adalah meninggalkan diskon khusus produk atau kategori untuk kategori atau halaman produk.

Contoh UI:

Happy Socks menunjukkan di pita halaman atas dan spanduk utama halaman beranda dari diskon 30% yang diterapkan secara otomatis yang merupakan diskon publik terbesar mereka saat itu.

Tautan ke halaman penjualan

Jika ada promosi kupon atau penerapan otomatis di seluruh situs yang sedang berlangsung, alih-alih mencantumkan semua produk dan ketentuan yang memenuhi syarat di halaman beranda, Anda dapat memberikan penggoda yang akan mengarah ke halaman penjualan tempat pelanggan dapat membaca semua syarat dan ketentuan promosi dan menelusuri produk dan penawaran yang memenuhi syarat.

Contoh UI:

Chubbies Shorts menampilkan spanduk promosi di halaman utama, yang menghubungkan ke halaman koleksi penjualan.

Halaman kategori:

Muncul tiba-tiba

Pop-up dapat digunakan untuk mengiklankan diskon kupon dan promosi tingkat keranjang yang tersedia di toko tetapi memiliki berbagai kelemahan UX. Jika ini adalah satu-satunya metode untuk mengiklankan promosi, pengguna dapat menutupnya dan melupakan ketentuan diskon yang tepat atau kode voucher yang diperlukan. Oleh karena itu, pop-up harus digunakan dengan sarana komunikasi lain seperti spanduk, email, SMS. Masalah lain dari pop-up adalah bahwa mereka mengganggu. Mereka menutupi konten yang sebenarnya ingin dijelajahi pengguna dan dapat dianggap mengganggu.

Di sisi lain, pop-up adalah pengganti atau tambahan yang bagus untuk email saat memberikan diskon kepada pelanggan untuk tindakan yang baru saja mereka lakukan. Misalnya, jika pelanggan berlangganan buletin, Anda dapat menampilkan diskon yang diperoleh pada pop-up. Dengan cara ini, pelanggan akan lebih mudah dan lebih awal daripada jika mereka harus memeriksa kotak masuk mereka. Sekali lagi, pop-up dan email dapat hidup berdampingan, untuk membuat diskon tersedia jika pelanggan ingin kembali lagi nanti.

Alternatif yang baik untuk pop-up di aplikasi seluler adalah pemberitahuan push.

Contoh UI:

Tula menggunakan pop-up untuk mengomunikasikan promosi tingkat keranjang tetapi pop-up dapat diakses juga saat pengguna mengklik spanduk tetap diskon 15%. Itu memungkinkan untuk kembali ke promosi nanti.

Bagian atas pita halaman:

Sama halnya dengan penempatan halaman beranda, pita harus disediakan untuk umum atau promosi kupon diskon atau troli di seluruh situs. Ini adalah tempat yang bagus untuk menambahkan kode kupon publik dan membuatnya terlihat di semua halaman, termasuk checkout, untuk membuat kode mudah diakses ketika pengguna memeriksa keranjang belanja mereka atau menyelesaikan checkout.

Contoh UI:

Chubbies Shorts menggunakan pita untuk mengiklankan promosi gerobak besar yang tersedia untuk umum.

Catatan kaki:

Footer adalah salah satu tempat yang paling jarang dibaca di situs web. Menempatkan kupon diskon atau penawaran tingkat keranjang bukanlah ide terbaik karena diskon mungkin akan dilewatkan oleh sebagian besar pelanggan. Di sisi lain, footer adalah tempat yang bagus untuk menambahkan syarat dan ketentuan promosi. Jika Anda tidak memerlukan halaman terpisah untuk S&K promosi karena S&K sangat singkat, Anda dapat menempatkannya di footer.

Contoh UI:

ThredUp menggunakan footer untuk menampilkan Syarat dan Ketentuan promosi keranjang mereka.

halaman produk:

Tinggalkan label harga lama

Pastikan pelanggan Anda tahu berapa harganya sebelum Anda memotongnya. Orang membuat keputusan pembelian berdasarkan seberapa besar mereka menghargai kesepakatan, bukan seberapa besar mereka menghargai produk. Bila memungkinkan, berikan harga referensi kepada pelanggan Anda yang membuat kesepakatan Anda terlihat bagus sebagai perbandingan.

Contoh UI:

Shein mencoret harga lama, menempatkan harga baru, dan bahkan menambahkan label yang menyatakan tingkat diskon dalam persentase.

Di ponsel, mereka menunjukkan persentase diskon dan nilai dolar dari diskon.

Nyatakan aturan promosi bundel dengan jelas

Untuk diskon bundel, buat penawaran mudah dilihat dan ambil langkah-langkah di halaman produk untuk memastikan bahwa pengguna memenuhi syarat jika mereka mau. Jika situs menawarkan diskon untuk pembelian beberapa item dari produk yang sama, pengguna harus dapat dengan mudah menemukan penawaran dan mencapai persyaratan minimum.

Contoh UI:

Chubbies Shorts menampilkan obral “Beli 2, dapatkan diskon” langsung di sebelah label harga produk pada halaman kategori.

Mereka juga menampilkan diskon di keranjang belanja.

Ketika Anda mengklik diskon, itu dipilih dan ditambahkan ke pesanan, menurunkan harga sebesar $10.

Kereta Belanja:

Sertakan bidang kode kupon sebagai bagian inti dari halaman keranjang belanja dan halaman checkout

Pengguna yang memiliki kode kupon ingin memasukkannya sesegera mungkin. Anda harus memberikan tempat yang jelas untuk kode kupon di keranjang belanja, sebelum langkah pertama dalam proses checkout. Pendekatan UI ini memungkinkan orang untuk memeriksa apakah itu valid sebelum mereka memasukkan informasi pribadi apa pun dan juga memungkinkan totalnya diperbarui dengan tepat di awal proses.

Dalam hal penempatan kode kupon, sangat disarankan untuk menjadikan kode promo sebagai bagian inti dari proses pembayaran alih-alih item bilah sisi. Ketika promosi ditempatkan di rel yang tepat, mereka cenderung dikacaukan dengan iklan dan diabaikan karena kebutaan spanduk.

Di sisi lain, jika pelanggan Anda tidak memiliki kode kupon dan mereka melihat bidang kupon, mereka mungkin merasa kehilangan kemungkinan kesepakatan dan churn, karena mereka akan mulai mencari diskon. Jika tidak semua kupon Anda tersedia untuk umum, solusi terbaik adalah tidak menyediakan bidang teks terbuka yang terlihat. Anda sebaiknya memberikan tautan teks untuk mengekspos bidang teks. Desain ini cenderung tidak menjadi pengguna utama dan mengirim mereka pada pencarian kupon karena banyak pembeli tidak akan menyadarinya. Imbalannya, tentu saja, kurang dapat ditemukan bagi mereka yang memiliki kode kupon.

Kotak kode kupon , apakah secara otomatis diperluas atau disembunyikan di bawah tautan, harus berupa bidang teks. Jika kode kupon Anda memiliki jumlah karakter atau pola tertentu yang tetap, Anda juga dapat menambahkan validasi otomatis yang akan meminta pengguna jika mereka menambahkan karakter yang tidak cukup, terlalu banyak, atau salah ketik (angka, abjad, tanda khusus) untuk membantu mereka melihat kesalahan sebelumnya. Kolom harus cukup panjang untuk mengakomodasi kode kupon yang digunakan di situs, untuk memastikan pengguna memasukkannya dengan benar. Panjang kode kupon terbaik adalah 8-12 karakter. Jika Anda menawarkan saran kode kupon, Anda juga dapat menampilkannya di daftar tarik-turun.

Ketika sampai pada bagaimana Anda mengungkapkan salinan di sekitar kupon yang ditawarkan , psikologi pemasaran akuntansi mental menunjukkan bahwa jika produk Anda cenderung lebih jatuh ke dalam kategori kebutuhan, Anda harus memberi tahu pelanggan Anda bahwa mereka telah "mendapatkan" kupon (bayangkan sebuah pop-up pesan yang mengatakan "Hai! Anda baru saja mendapatkan kupon diskon $ 10!"), Karena tindakan menghasilkan membuatnya tampak seperti sumber pendapatan yang lebih serius. Sebaliknya, jika produk Anda lebih sembrono, Anda harus mencoba memberikan kupon sebagai kejutan atau diberikan kepada mereka karena keberuntungan (bayangkan pesan yang mengatakan “Anda baru saja memenangkan kupon diskon $10!”). Anda dapat membaca lebih lanjut tentang akuntansi mental di posting blog kami.

Kode kupon itu sendiri harus mudah diingat dan ditulis di kotak kupon (kecuali Anda menawarkannya sebagai dropdown atau tombol radio untuk dipilih). Ini berarti membuat kombinasi berarti bagi pelanggan, menghindari huruf dan angka yang mirip seperti O dan 0 dan menjaga panjangnya di bawah 12 karakter. Baca lebih lanjut tentang kefasihan kognitif di posting blog kami.

Contoh UI:

Birchbox memiliki kotak kode kupon yang sangat terlihat di tampilan keranjang. Mereka juga menawarkan tautan untuk membuka kotak kode kupon di tampilan checkout, bagi mereka yang melewatkannya di tampilan keranjang belanja. Ini adalah cara yang bagus untuk mempertahankan opsi untuk menambahkan kode kupon di kedua langkah, menyembunyikan kotak kode kupon di formulir checkout yang membantu mengurangi churn.

Pada resolusi seluler, kotak kupon disembunyikan dan harus diperluas dengan mengkliknya:

Sekali lagi, ada tautan ke kotak kode promo di halaman checkout:

Untuk promosi pembelanjaan minimum, lakukan perhitungan untuk pengguna dan bantu mereka mencapai target pembelanjaan

Beberapa situs menawarkan promosi seperti pengiriman gratis untuk pembelian di atas jumlah dolar tertentu. Kesepakatan ini menarik pengguna untuk menghabiskan waktu dan uang ekstra untuk memenuhi syarat bagi mereka.

Untuk promosi dengan pembelanjaan minimum, situs harus memberi tahu pengguna dengan tepat berapa banyak lagi yang harus mereka belanjakan untuk memenuhi syarat untuk penawaran tersebut. Ide UI yang bagus untuk itu adalah menghitung mundur langsung di keranjang belanja berapa banyak yang harus dikeluarkan pengguna untuk memenuhi syarat untuk mendapatkan diskon, apakah itu pengiriman gratis, % atau diskon dolar.

Jika Anda ingin memastikan pelanggan termotivasi untuk membelanjakan lebih banyak untuk mencapai pengiriman gratis tetapi tidak membatasi belanja mereka untuk mencapai tingkat pembelanjaan yang “cukup”, menetapkan batas harga dan berpegang pada nilai yang diperlukan untuk mencapai pengiriman gratis, Anda dapat bermain dengan UI Anda untuk menampilkan kemajuan menuju pengiriman gratis yang berjalan lebih cepat di awal pembelanjaan dan lebih lambat dalam mencapai "sasaran" volume pesanan. Ini sesuai dengan ide "kecepatan tujuan", berdasarkan penelitian. Anda dapat membaca lebih lanjut tentang itu di posting blog ini.

Situs dapat melangkah lebih jauh, dengan menyarankan item yang relevan di keranjang belanja yang memungkinkan pembeli mencapai target pembelanjaan minimum dan menghemat upaya mereka untuk menghitung sendiri.

Contoh UI:

Tula menggunakan UI untuk menunjukkan di keranjang belanja berapa banyak yang hilang untuk memenuhi syarat pengiriman gratis.

Ingatkan pengguna tentang penawaran khusus yang tersedia yang dapat mereka dapatkan di keranjang belanja

Kesempatan terakhir untuk menarik perhatian pengguna dan membantu mereka menemukan tingkat troli dan promosi kupon yang tersedia ada di halaman troli. Di sana mereka masih dapat dengan mudah membuat perubahan pada pesanan, jadi pastikan untuk menyertakan penawaran khusus yang dapat memenuhi syarat bagi pengguna, seperti pengiriman gratis atau diskon.

Penawaran harus terlihat jelas untuk menarik perhatian pengguna. Untuk menarik perhatian pengguna, gunakan penempatan dan bobot visual yang sesuai.

Berikut adalah beberapa praktik UX terbaik:

• Untuk penawaran tingkat produk, berikan pesan di dekat produk itu sendiri.
• Untuk penawaran di seluruh situs, tunjukkan penawaran di ruang prioritas tepat di atas opsi untuk melanjutkan ke pembayaran.
• Jika diskon berlaku untuk pengiriman, penempatan dengan diskon di seluruh lokasi atau di samping total pengiriman mungkin sesuai.
  

Jangan menawarkan terlalu banyak kupon dan promosi tingkat keranjang kepada pelanggan, terutama saat checkout. Pilihan yang berlebihan dapat menyebabkan churn. Baca lebih lanjut tentang nilai variasi dan pilihan yang berlebihan di posting blog kami.

Contoh UI:

Chubbies Shorts menampilkan semua diskon dan hadiah yang tersedia langsung di keranjang belanja.

Sebutkan kondisi atau batasan khusus

Jika promosi atau kupon keranjang memiliki ketentuan atau batasan khusus, sebutkan di halaman penjualan, dalam syarat dan ketentuan Anda, dan di keranjang belanja, sebelum pelanggan menyelesaikan pembelian.

Contoh UI:

Shein menyebutkan kondisi khusus promosi mereka di keranjang belanja, misalnya jumlah maksimum produk promosi yang dapat dibeli pelanggan dan barang yang dijual tidak dapat dikembalikan.

Halaman pembayaran:

Sertakan kolom kode kupon

Seperti yang telah kami sebutkan sebelumnya, lebih baik untuk memasukkan kolom kode kupon pada keduanya, halaman keranjang belanja dan halaman checkout jika seseorang lupa menerapkannya pada halaman tampilan keranjang belanja.

Tampilkan pesan sukses jika kode berhasil diterapkan

Tampilkan pesan sukses dan jumlah diskon untuk mengonfirmasi bahwa kode kupon telah berhasil diterapkan. Tempatkan pesan di dekat bidang kode kupon untuk memastikan pengguna melihatnya dan mengaitkannya dengan kode kupon yang dimasukkan. Menampilkan pesan itu di bagian atas halaman atau di bagian bawah halaman mungkin membingungkan. Pastikan pesan sukses bukan satu-satunya sumber informasi bahwa kupon telah berhasil diterapkan. Tampilkan diskon tambahan di total pesanan, di keranjang belanja dan di halaman checkout, sebaiknya tentukan kode kupon mana yang telah menerapkan diskon mana (terutama, jika pelanggan dapat menambahkan lebih dari satu kode diskon ke pesanan).

Contoh UI:

Pretty Little Thing menunjukkan tanda centang dan jumlah penghematan yang diterapkan pada pesanan setelah memasukkan kode yang valid. Mereka juga menampilkan jumlah diskon yang dihitung dalam total pesanan, menentukan kode diskon mana yang menerapkan diskon.

Mereka juga menampilkan kode kupon yang diterapkan dan diskon terkait pada tampilan seluler:

{{CTA}}

Bangun frontend Anda dengan komponen siap pakai yang disertakan dalam Kit UI kami

Mulai membangun

{{ENDCTA}}

Tampilkan pesan kesalahan untuk kode kupon yang tidak valid

Jika kode tidak valid atau kondisi promosi tidak terpenuhi, Anda harus menampilkan pesan kesalahan yang relevan yang menyatakan jenis masalah dengan kode kupon. Jangan tampilkan pesan kesalahan yang sama dalam setiap kasus karena tidak akan menginstruksikan pengguna apa yang salah dan bagaimana mereka dapat memperbaiki masalah tersebut.

Tampilkan pesan kesalahan tepat di sebelah kotak kode kupon, bukan di bagian atas atau bawah halaman karena pengguna mungkin tidak melihat pesan kesalahan. Pastikan pesan error terlihat, misalnya dengan menggunakan warna merah atau warna kontras lainnya.

Jenis pesan kesalahan untuk ditampilkan:

• Kode kupon tidak valid.
• Kode kupon sudah digunakan dan tidak dapat ditukarkan lagi.
• Jumlah pesanan tidak cukup atau berlebihan untuk menerapkan kupon (dalam hal ini, kembalikan informasi tentang berapa banyak yang hilang untuk memenuhi syarat kupon atau berapa banyak kelebihan yang ada di keranjang belanja).
• Isi pesanan tidak memenuhi persyaratan promosi (dalam hal ini, sebutkan item mana yang harus dihapus atau ditambahkan untuk memenuhi syarat).
• Kupon telah kedaluwarsa.
• Alasan lain – jika Anda dapat membayangkan kasus lain, buat pesan khusus untuk mereka. Miliki satu pesan default untuk semua kasus lain yang tidak terpikirkan oleh Anda.

Contoh UI:

Summer Salt menampilkan pesan kesalahan jika kode yang dimasukkan tidak valid atau jika syarat promosi tidak terpenuhi. Mereka mendorong pelanggan untuk memeriksa ulang kode mereka. Memiliki kupon publik yang terlihat di pita atas membantu memperbaiki kesalahan.

Ini adalah bagaimana mereka menampilkannya pada resolusi seluler:

Jelaskan apakah pelanggan dapat menambahkan lebih dari satu kupon diskon atau menggabungkan promosi

Jika Anda mengizinkan hanya satu kupon untuk ditambahkan ke pesanan, setelah pelanggan menambahkan kode kupon yang valid, buat kode kupon menghilang atau disembunyikan. Ganti dengan menambahkan tombol “ubah kode kupon saya” karena pelanggan mungkin ingin mengubah kode kupon ke yang lain. Ingatlah untuk memiliki opsi untuk menghapus kode kupon juga. Anda harus menyatakan dengan jelas di suatu tempat di halaman bahwa pelanggan hanya dapat menambahkan satu kode kupon per pesanan.

Jika pelanggan dapat menambahkan lebih banyak kode kupon, setelah mereka menambahkan satu kode kupon, Anda dapat menampilkannya sebagai “ditambahkan ke pesanan” dan membiarkan bidang kode kupon diisi ulang dan dikosongkan lagi, sehingga pelanggan dapat menerapkan kode kupon lainnya.

Jika kode diskon dan promosi keranjang tidak dapat digabungkan, Anda harus menyatakannya dengan jelas di iklan promosi, T&C dan di halaman checkout, terutama sebagai pesan kesalahan jika seseorang mencoba menambahkan kupon di atas barang yang sudah dijual.

Contoh UI:‍

Summer Salt menambahkan kupon tambahan di bawah bidang kode kupon dan mengosongkan bidang kode kupon setelah kupon diterapkan ke pesanan, menyarankan pengguna untuk menerapkan lebih dari satu kupon per pesanan.

Pretty Little Thing memungkinkan pelanggan untuk menerapkan hanya satu kode kupon per pesanan. Mereka membuat bidang kupon menghilang setelah kupon diterapkan ke pesanan dan menggantinya dengan tombol “ubah kode”.

Bantu pengguna menemukan diskon untuk meningkatkan pengalaman pelanggan

Di sebelah bidang kode kupon, Anda harus menampilkan tautan ke kokpit pelanggan tempat mereka dapat melihat semua diskon yang tersedia atau sekadar daftar kupon dan promosi keranjang untuk dipilih. Hal ini memudahkan pelanggan untuk menggunakan penawaran Anda dan dapat meningkatkan ukuran keranjang belanja mereka, jika mereka melihat bahwa mereka dapat memenuhi syarat untuk mendapatkan diskon jika mereka hanya menambahkan beberapa item lagi ke keranjang belanja mereka.

Contoh UI:

Shein menautkan ke halaman "Kupon saya" yang mengumpulkan kupon yang tersedia di sebelah bidang kode kupon saat checkout dan menyebutkan kupon yang tersedia untuk umum di bawah bidang kode kupon.

Ini adalah kokpit pelanggan yang menunjukkan kupon yang tersedia dan kupon kedaluwarsa yang dibuka saat mengklik tautan “Kupon saya”.

Di aplikasi seluler, mereka menampilkan kupon sebagai “peringatan kupon”. Jika Anda mengklik pop-up itu, Anda dapat melihat semua kupon yang tersedia dan memilih yang mana yang akan digunakan.

Mencerminkan diskon yang diterima

Tunjukkan diskon atau batasan khusus yang diterapkan pada item di keranjang belanja, baik promosi tingkat keranjang maupun kupon. Kode kupon harus divalidasi dan tercermin dalam biaya sebelum meminta informasi pembayaran. Diskon tingkat keranjang harus ditampilkan di tingkat produk atau pesanan, tergantung pada apa diskon itu diterapkan. Sangat penting bahwa pengguna dapat melihat penghematan dan memahami bagaimana totalnya dihitung. Yang terbaik adalah bahkan menampilkan kode kupon dan promosi mana yang memberi mereka jumlah penghematan yang tepat dalam total pesanan.

Pembatasan khusus pada item diskon harus dikomunikasikan sebelum pelanggan memesan.

Contoh UI:

Shein menampilkan diskon tingkat produk pada tingkat produk dalam ringkasan keranjang belanja.

Shein memungkinkan pelanggan menerapkan kode diskon hanya di kasir. In the order summary, they reflect the product discounts by showing the difference between retail price and subtotal. Then, if you apply any discount codes to the whole order, it is displayed as the “discount” of the subtotal. Note that they show both, cart-level and discount coupons savings in the order total but in different places.

On the mobile app, coupons can be selected at checkout. Then they are displayed in the order total.

Ringkasan

This was a long one. The key takeaway here is that coupon offers and promotions shouldn't be run for the sake of it. Besides tinkering with the offer itself, your team also needs to consider the best design, placement, and validation possible. Keep in mind that the promotional ROI won't peak if you don't make your offers easy to find and apply. Even the best offer will go unnoticed if it's not promoted properly. Always remember to clearly communicate the value of the discount and any conditions customers need to meet. Hopefully, these UX tips will get you started.

{{CTA}}

Are you ready to fix your coupon UX?

Memulai

{{ENDCTA}}