Kuponların, İndirimlerin ve Promosyonların En İyi Uygulamaları UI ve UX

"Alışveriş yapanlar, ister site çapında satışlar, ister belirli indirimli ürünler veya kuponlar şeklinde olsun, fırsatları sever. Ancak, kullanıcıların promosyonları kullanarak başarılı olması için bir web sitesinin iki şeyi iyi yapması gerekir: bu çeşitli promosyonları site genelinde etkili bir şekilde iletmesi ve ayrıca kullanıcıların anlaşmaların iletilmesini kolaylaştırması gerekir.” Kim Salazar, Nielsen Norman Group'ta Kıdemli Kullanıcı Deneyimi Uzmanı

Bu gönderi, web sitenizde veya mobil platformunuzda kupon kodlarını ve otomatik olarak uygulanan promosyonları tanıtmak için kullanıcı arayüzü ve deneyimi tasarlamak için en iyi uygulamaları ve ilhamları toplar. Web sitesindeki promosyon mesajlarından ve fiyat düşüşlerinden kupon ve promosyonların doğrulanması ve ödeme sırasında başvuru ve son olarak ödemeye kadar tüm müşteri yolculuğunu ele alacağız. Bu gönderiyi, müşterilerimizin UI & UX'i, gelir açısından en iyi performansı gösteren DTC e-ticaret platformlarının UI'si ve çeşitli UX çalışmalarına dayanarak yazdık.

Not: Tüm masaüstü ekran görüntüleri Mac, Chrome'da ve tüm mobil ekran görüntüleri Chrome'da iPhone X çözünürlüğü kullanılarak yapılmıştır.

Bu kılavuzun, platformunuzu kupon ve alışveriş sepeti düzeyinde promosyonlar içerecek şekilde yeniden tasarlamanıza veya mevcut müşteri kupon deneyiminizi iyileştirmenize yardımcı olacağını umuyoruz. Herhangi bir sorunuz varsa veya Promosyon Motorumuz Voucherify hakkında daha fazla bilgi edinmek isterseniz, lütfen bizimle iletişime geçmekten çekinmeyin.

Kuponlar ve Promosyonlar Kullanıcı Arayüzü Kiti

Figma'da bulunan Kuponlar ve Promosyonlar Kullanıcı Arayüzü Kitimizden hazır kupon ve promosyon bileşenleri ile daha hızlı pazara sunma süresi elde edin. Daha fazla bilgi edin.

İçindekiler:

Promosyon kullanıcı arayüzü ve kullanıcı deneyimi hakkında genel tavsiye:

• Promosyon zaman çerçevesini açıkça belirtin.
• Herkese açık kuponları otomatik olarak uygulayın.
• Bir satış derleme sayfası sunun.
• Satış kategorinizde filtrelemeyi etkinleştirin.
• Bir müşteri kokpiti sunun.
• İndirimli ürünleri Satış bölümünde ve uygun kategorilerde listeleyin.
• Site çapında promosyonları küresel olarak iletin.
• Promosyon kısıtlamaları konusunda önceden net olun.

Belirli bir sayfada Kupon UX en iyi uygulamaları:

1. Ana sayfa:

• Ana sayfada reklamı yapılan promosyon türleri.
• Satış sayfalarına bağlantı.

2. ‍ Kategori sayfaları.
3. Pop-up'lar.
4. ‍ Sayfa şeridinin üst kısmı .
5. Altbilgi.
6. Ürün sayfası:

• Eski fiyat etiketini açık bırakın.
• Paket promosyon kurallarını açıkça belirtin.

7. Alışveriş sepeti:

• Kupon kodu alanlarını hem alışveriş sepetinin hem de ödeme sayfalarının temel parçası olarak ekleyin.
• Minimum harcama promosyonları için, kullanıcıların hesabını yapın ve harcama hedefine ulaşmalarına yardımcı olun.
• Kullanıcılara alışveriş sepetinde hak kazanabilecekleri mevcut özel teklifleri hatırlatın.
• Herhangi bir özel koşul veya kısıtlamadan bahsedin.

8. Ödeme sayfası:

• Bir kupon kodu alanı ekleyin.
• Kod başarıyla uygulandıysa bir başarı mesajı görüntüleyin.
• Geçersiz kupon kodu durumunda bir hata mesajı görüntüleyin.
• Müşterinin birden fazla indirim kuponu ekleyip ekleyemeyeceğini açıkça belirtin.
• Kullanıcıların indirimlerini bulmalarına yardımcı olun.
• Alınan indirimleri yansıtın.
  

Kupon kodlarının temelleri UI ve UX

Çoğu indirim kuponu ve promosyon tasarımı, yerleşimi ve promosyonu için geçerli olan bazı genel ipuçlarını burada ele alacağız. Daha sonra, müşteri deneyimi açısından en iyi tasarım çözümünü vurgularken, web sitesindeki belirli kupon ve alışveriş sepeti promosyonları yerleşimlerine geçeceğiz. Sadece bir kupon kampanyası başlatmanın asla yeterli olmadığını, kampanyanızı çarpıcı bir başarıya dönüştürmek için kupon tasarımı, yerleştirme, doğrulama ve kullanma sürecine de dikkat etmeniz gerektiğini unutmayın.

Promosyon zaman çerçevesini açıkça belirtin

Müşterilerin ödeme sırasında teklifin artık geçerli olmadığını öğrenmesini önlemek için kupon veya sepet düzeyinde promosyonun süresi hakkında müşterileri bilgilendirmelisiniz. Ayrıca, bir aciliyet duygusu yaratmaya ve alışveriş yapanları siparişlerini tamamlamaları için hafifçe dürtmeye yardımcı olur. Bunu yapmamak, kullanıcı deneyiminin bozulmasına ve müşterilerin sitenizden ayrılmasına neden olur.

Promosyonun zaman dilimini (tarihleri ​​veya saatleri) belirterek veya bir geri sayım sayacı ekleyerek yapabilirsiniz. En iyi uygulama, müşterilerin promosyonun sona erme tarihini bilmesini sağlamak için, yalnızca şartlar ve koşullara değil, her zaman her banner ve reklama promosyon zaman çerçevesi eklemektir.

Kullanıcı Arayüzü Örnekleri:

Pomelo Fashion, tekliflerinin ne zaman sona erdiğini açıkça göstermek için bir geri sayım sayacı kullanıyor.

Shein, promosyon banner'ının veya kategorisinin yanındaki müşterileri geri sayımla teklifin süresi hakkında bilgilendirir. Ayrıca aciliyet duygusu uyandırmak için kalan parça sayısını da gösterirler.

Ayrıca promosyon deneyimini daha da geliştirmek için müşterilere ürün sayfasında teklif süresi hakkında bilgi verirler.

Ve zamanlayıcıyı alışveriş sepetine bile dahil ettiler.

Mobil uygulamasında ekran şu şekilde görünür:

Pretty Little Thing'in ana sayfa başlığında, mobil çözünürlükte de mevcut olan bir promosyon geri sayımı vardır:

Mümkün olan en iyi deneyimi sağlamak için herkese açık kuponları otomatik olarak uygulayın

Sitede bir indirim veya kupon kodu sunuluyorsa, kullanıcıların indirim koduna tıklayarak otomatik olarak sepetlerine uygulamalarına veya en azından tıkladıklarında otomatik olarak kopyalamasına izin vererek geri ödeme sürecini basitleştirebilirsiniz. kodu hatırlamak zorunda değiller. Bu, kullanıcıların sepetlerine uygulamasını kolaylaştırarak promosyon kullanımını artıracaktır. Ayrıca çeşitli kanallardan (e-posta, SMS ve diğer) gönderilen benzersiz indirim kodlarını, müşteri kendisine gelen bağlantıya tıkladığında otomatik olarak uygulayabilirsiniz. Bu gönderiyi izleyerek kupon doğrulama kullanıcı deneyimini nasıl düzelteceğinizi öğrenin.

Teklif herkese açıksa, bunun herkese açık bir kupon kodu yerine yalnızca alışveriş sepeti düzeyinde otomatik olarak uygulanan bir indirim olup olmayacağını her zaman dikkatlice değerlendirin. Müşteriler için ödeme sürecini basitleştirir ve promosyonun dönüşüm oranlarının artmasına neden olabilir.

Bir başka iyi UX uygulaması, kupon kodunu kopyalamayı mümkün kılmaktır (bir görsele gömülü değil, metin olarak web sitesine veya mobil uygulamaya yerleştirin).

Kullanıcı Arayüzü Örnekleri:

Vanity Planet, sepetteki uygun siparişlerde herkese açık kupon kodlarını otomatik olarak uygular. Kasaya gittikten sonra, indirim kodunu yansıtacak şekilde sipariş toplamı yeniden hesaplanır.

Hatta sipariş için uygunsa, indirim kodunu tekrar otomatik olarak uygulayarak siparişe ücretsiz bir ürün bile eklerler:

Burada aynı akışı mobil çözünürlükte görebilirsiniz:

“Sipariş özetini göster” butonuna tıklarsanız, siparişe uygulanan promosyon ve kupon kodlarının bilgilerini içeren sepet içerikleri görüntülenir.

Bir satış derleme sayfası sunun

Herkese açık alışveriş sepeti düzeyindeki tüm promosyonları ve indirim kuponlarını tek bir sayfada toplamak, müşterilerin bunları bulmasını kolaylaştırmanın harika bir yoludur. Bu şekilde, tüm promosyonları göstermek için yalnızca müşteri kokpitlerini kullanmak yerine, promosyonları yeni veya oturum açmamış müşterilere de görüntüleyebilirsiniz. Çoğu zaman şirketler, farklı sayfa öğelerini gizleyebilecek ve müşteri deneyimini bozabilecek tüm promosyon afişlerini ana sayfada görüntüler.

Kullanıcı Arayüzü Örnekleri:

Victoria's Secret, mevcut tüm teklifleri tek bir sitede net bir kullanıcı arayüzünde sunar. Sitedeki bilgi mimarisinin, seçilen teklifleri vurgulamak veya vurgulamak için boyutu nasıl kullandığını not edin.

Daha iyi UX için satış kategorinizde filtrelemeyi etkinleştirin

Belirli bir sepet promosyonu veya indirim kodunun geçerli olduğu tüm öğeleri toplayan bir satış kategorisi sunuyorsanız, kullanıcıların bu kategoride gezinmesine ve filtrelemesine izin vermelisiniz. Bazı ziyaretçiler sadece indirimdeki ürünleri görmek isteyecek, başka bir şey değil, bu nedenle ayrı satış kategorileri onların tüm teklifleri görmelerine ve bu bölümde kolaylıkla gezinmelerine izin vermelidir. Filtrelenmiş gezinme seçenekleri, alışveriş yapanların seçimi etkili bir şekilde daraltmak için satış bölümlerinde sıralama ve filtreleme yapmasına olanak sağlamalıdır. Filtreler olmadan satış alışverişi zor olabilir ve müşterilerin sitenizden ayrılmasına neden olabilir.

Kullanıcı Arayüzü Örnekleri:

Pomelo Fashion, ürün tipi ve boyutuna göre satış kategorisi filtreleri sunar.

Fashion Nova, fiyat noktasına veya bölmelere göre satış kategorisi filtrelemesi sunar:

Bir müşteri kokpiti sunun

Belirli bir müşterinin özel bir müşteri kokpitinde erişebileceği tüm sepet promosyonlarını ve indirim kodlarını görüntülemek, müşterilerin hangi promosyonların kendilerine özel olduğunu anlamalarına yardımcı olur. Ayrıca, kişiselleştirilmiş promosyonları değil, yalnızca halka açık promosyonları gösteren bir satış sayfasının aksine kişisel, benzersiz indirim kuponları, hediye kartları, bağlılık puanları bakiyesi veya diğer ödülleri görüntülemenize olanak tanır.

Kullanıcı Arayüzü Örnekleri:

H&M, müşterilerin sadakat puanları bakiyelerini, mevcut promosyonları ve indirimleri, benzersiz kuponları ve bir tavsiye programını bulabilecekleri bir müşteri kokpiti sunar.

Mobil çözünürlükte müşteri kokpiti:

İndirimli ürünleri Satış bölümünde ve uygun kategorilerde listeleyin

İndirimli ürünlerin gösterimini sitenin özel bir Satış bölümüyle sınırlamayın. En iyi keşfedilebilirlik için, indirimli ürünleri hem uygun kategori sayfasında hem de Satış bölümünde listelemek en iyisidir. Bazı kullanıcılar bir pazarlık bulmaya motive olduklarında doğrudan Satış bölümlerine giderler, ancak diğerleri özellikle Satış bölümlerini aramazlar. Belirli bir öğeyi arayan kullanıcılar genellikle kategoriye göre göz atar. İndirimli ürünleri tam fiyatlı ürünlerle birlikte görüntüleyen siteler, kullanıcıların ilgi alanlarındaki indirimleri keşfetmelerine yardımcı olur.

Kullanıcı Arayüzü Örnekleri:

Pretty Little Thing, her ikisinde de bulunabilmeleri için indirimli ürünleri indirimli ürünler ve ürün kategorileri altında listeler.

Kötü basından kaçınmak için site çapında promosyonları küresel olarak iletin

Site ücretsiz gönderim veya site genelinde başka indirimler veya kuponlar sunuyorsa, bu teklifleri sitenin her sayfasında gösterin. Tutarlı indirim hatırlatıcıları, kullanıcıların bütçelerindeki öğeleri bulmalarına yardımcı olabilir ve onları satın almaya teşvik edebilir. Yine, markanızı alıcılara avantajlar sağlayan bir marka olarak tasvir ederler. Yalnızca seçili alanlarda site çapında promosyonlar göstererek, tüm kullanıcıların bunları keşfetmemesi riskini alırsınız. Ek olarak, kuponların tüm sayfalarda reklamı yapılmadıysa, insanlar, sonuçta markaya olumsuz yansıyacak şekilde, kullanımı önlemek için kasıtlı olarak gizlendiklerini varsayabilirler.

Olası indirim yerleşimleri şunları içerir:

• Ana sayfadaki kahraman alanında promosyon duyuruları.
• Alışveriş sepeti sayfası veya kupon kodunun girilmesi gereken ödeme sayfası da dahil olmak üzere, her sayfanın üst kısmında, alışveriş sepeti promosyon ayrıntıları veya kupon kodu bulunan afişler.
• Ürün listeleme sayfasında veya sağ rayda promosyon açıklamaları.
• Sayfanın alt kısmında, altbilginin içinde veya yakınında afişler.

Kullanıcı Arayüzü Örnekleri:

Pomelo Fashion, site genelindeki kuponlarını ana sayfa başlığında, üst sayfa şeridinde ve kategori sayfalarında iletir.

PrettyLittleThing, müşterilere ürün sayfalarında bile site genelinde indirim kuponlarını hatırlatır - UX açısından harika bir hareket.

Mobil düzende bunu şu şekilde sunarlar:

Pretty Little Thing, ana sayfa başlığında ve üst sayfa şeridinde alışveriş sepeti düzeyindeki promosyonlarının reklamını yapar:

Tüm indirimli ürünleri gösteren bir satış sayfası sunarlar:

Ayrıca ürün sayfasında indirimi gösterirler:

Promosyonlarla ilgili kısıtlamalar konusunda önceden net olun

Bazen alışveriş sepeti promosyonları veya indirim kuponları, niteleyicilere veya kısıtlamalara tabi olabilir. Bu durumda, teklifin hangi kısıtlamaların geçerli olduğunu açıkça belirttiğinden emin olun. Gerekirse bu koşullar hakkında daha ayrıntılı bilgilere bağlantı verin, ancak kullanıcıların temel kısıtlamaları anlamaları için ayrıntılı bilgileri incelemelerini gerektirmez. Hiçbir şey, yalnızca ödeme sırasında uygun olmadığınızı öğrenmek için bir anlaşma almayı beklemekten daha sinir bozucu olamaz. Kupon tasarımınızın sadece göz alıcı değil, daha da önemlisi işlevsel olması gerektiğini unutmayın.

Kullanıcı Arayüzü Örnekleri:

Pretty Little Thing, promosyonun indirimli ürünleri ve güzellik ürünlerini hariç tuttuğunu ana sayfa afişlerinde doğrudan belirtir.

Chewy, "ilk Otomobilinizde %35 tasarruf edin" şeridinde reklamı yapılan promosyon ayrıntılarına ("Daha fazla bilgi" düğmesi) daha fazla bilgi için bir bağlantı verir.

Bu, promosyon CTA'sına tıkladıktan sonra görüntülenen açılır penceredir:

Mobil çözünürlükte, şerit düğme içermez, ancak tıklanabilir. Aynı pop-up'a tıkladıktan sonra promosyon hüküm ve koşulları görüntülenir:

Belirli sayfalarda Kupon UX en iyi uygulamaları:

Ana sayfa:

Ana sayfada reklamı yapılan promosyon türleri:

Müşteriler tekliflerin sayısı karşısında bunalıma girebileceğinden (ve afiş körlüğü denen bir durumla karşılaşabileceğinden) ana sayfada tüm promosyonların reklamını yapmamalısınız. Burada yalnızca herkese açık alışveriş sepeti promosyonları veya kuponlarının reklamı yapılmalıdır. En iyi UX uygulaması, kategori veya ürün sayfaları için ürüne veya kategoriye özel indirimler bırakmaktır.

Kullanıcı Arayüzü Örnekleri:

Happy Socks, üst sayfa şeritlerinde ve ana sayfalarında, o andaki en büyük kamu indirimi olan otomatik uygulanan %30 indirimli yaz indirimini gösterdi.

Satış sayfalarına bağlantı

Site genelinde devam eden bir otomatik uygulanan veya kupon promosyonu varsa, tüm uygun ürünleri ve koşulları ana sayfada listelemek yerine, müşterilerin tüm hüküm ve koşulları okuyabileceği satış sayfasına yönlendirecek bir bilgi sunabilirsiniz. promosyon ve uygun ürünlere ve tekliflere göz atın.

Kullanıcı Arayüzü Örnekleri:

Chubbies Shorts, ana sayfada satış koleksiyonu sayfasına bağlantı veren bir promosyon başlığı görüntüler.

Kategori sayfaları:

Açılır pencereler

Pop-up'lar, mağazada bulunan kupon indirimlerinin ve alışveriş sepeti düzeyindeki promosyonların reklamını yapmak için kullanılabilir, ancak bunların çeşitli UX dezavantajları vardır. Bir promosyonun reklamını yapmanın tek yöntemi bunlarsa, kullanıcılar bunları kapatabilir ve tam indirim koşullarını veya gereken kupon kodunu unutabilir. Bu nedenle pop-up'lar banner, e-posta, SMS gibi diğer iletişim araçlarıyla birlikte kullanılmalıdır. Pop-up'ların bir başka sorunu da müdahaleci olmalarıdır. Kullanıcıların gerçekten göz atmak istediği içeriği kapsar ve rahatsız edici olarak görülebilir.

Öte yandan, pop-up'lar, müşteriye az önce gerçekleştirdikleri bir eylem için indirim atarken, e-postaların harika bir alternatifi veya ekidir. Örneğin, müşteri haber bültenine abone olduysa, kazanılan indirimi bir açılır pencerede görüntüleyebilirsiniz. Bu şekilde, müşteri gelen kutularını kontrol etmek zorunda kaldığından daha kolay ve daha erken elde eder. Yine, bir müşteri daha sonra tekrar gelmek isterse indirimi kullanılabilir hale getirmek için pop-up ve e-posta bir arada bulunabilir.

Mobil uygulamadaki pop-up'lara iyi bir alternatif, push bildirimleridir.

Kullanıcı Arayüzü Örnekleri:

Tula, alışveriş sepeti düzeyinde bir promosyonu iletmek için pop-up'ları kullanır, ancak pop-up'a, kullanıcı %15 indirimli sabit banner'ı tıkladığında da erişilebilir. Bu, promosyona daha sonra geri dönmeyi mümkün kılar.

Sayfa şeridinin üst kısmı:

Ana sayfa yerleşimine benzer şekilde, halka açık veya site çapında alışveriş sepeti veya indirim kuponu promosyonları için şerit ayrılmalıdır. Kullanıcılar alışveriş sepetlerini kontrol ederken veya ödemeyi tamamlarken kodun kolayca erişilebilir olmasını sağlamak için herkese açık bir kupon kodu eklemek ve ödeme dahil tüm sayfalarda görünür kılmak için harika bir yerdir.

Kullanıcı Arayüzü Örnekleri:

Chubbies Shorts, halka açık büyük alışveriş sepeti promosyonlarının reklamını yapmak için şeridi kullanır.

Altbilgi:

Altbilgi, web sitesinde en az okunan yerlerden biridir. İndirim kuponları veya alışveriş sepeti düzeyinde teklifler yerleştirmek en iyi fikir değildir, çünkü indirimler muhtemelen çoğu müşteri tarafından kaçırılacaktır. Öte yandan, altbilgi, promosyon hüküm ve koşullarını eklemek için harika bir yerdir. Ş&K çok kısa olduğu için promosyonun Ş&K için ayrı bir sayfasına ihtiyacınız yoksa, bunları altbilgiye yerleştirebilirsiniz.

Kullanıcı Arayüzü Örnekleri:

ThredUp, sepet promosyonlarının Hüküm ve Koşullarını görüntülemek için alt bilgiyi kullanır.

Ürün sayfası:

Eski fiyat etiketini açık bırakın

İndirim yapmadan önce müşterilerinizin fiyatın ne olduğunu bildiğinden emin olun. İnsanlar satın alma kararlarını, ürüne ne kadar değer verdiklerine göre değil, anlaşmaya ne kadar değer verdiklerine göre verirler. Mümkün olduğunda, müşterilerinize, karşılaştırma yaparak anlaşmanızın iyi görünmesini sağlayan bir referans fiyat verin.

Kullanıcı Arayüzü Örnekleri:

Shein eski fiyatın üzerini çiziyor, yeni fiyatı yerleştiriyor ve hatta yüzde olarak indirim seviyesini belirten bir etiket ekliyor.

Cep telefonunda, indirimin yüzdesini ve indirimin dolar değerini gösterirler.

Paket promosyon kurallarını açıkça belirtin

Paket indirimler için, tekliflerin kolayca görülmesini sağlayın ve kullanıcıların isterlerse hak kazanmalarını sağlamak için ürün sayfalarında adımlar atın. Site, aynı üründen birden fazla ürün alımı için indirim sunuyorsa, kullanıcılar teklifi kolayca keşfedebilmeli ve minimum gereksinime ulaşabilmelidir.

Kullanıcı Arayüzü Örnekleri:

Chubbies Shorts, kategori sayfasındaki ürün fiyat etiketinin hemen yanında "2 al, indirim al" indirimini gösterir.

Ayrıca alışveriş sepetindeki indirimi de gösteriyorlar.

İndirime tıkladığınızda seçilip siparişe eklenir, fiyat 10$ düşer.

Alışveriş Sepeti:

Kupon kodu alanlarını hem alışveriş sepetinin hem de ödeme sayfalarının temel parçası olarak dahil edin

Kupon koduna sahip olan kullanıcılar bir an önce bu kodu girmek isterler. Ödeme sürecindeki ilk adımdan önce, alışveriş sepetinde kupon kodları için net bir yer sağlamalısınız. Bu UI yaklaşımı, kişilerin herhangi bir kişisel bilgiyi girmeden önce geçerli olup olmadığını kontrol etmelerini sağlar ve ayrıca toplamın sürecin başlarında uygun şekilde güncellenmesini sağlar.

Kupon kodu yerleştirme söz konusu olduğunda, promosyon kodlarını bir kenar çubuğu öğesi yerine ödeme işleminin temel bir parçası yapmanız şiddetle önerilir. Promosyonlar doğru raya yerleştirildiğinde, reklamlarla karıştırılma eğilimi gösterirler ve afiş körlüğü nedeniyle göz ardı edilirler.

Öte yandan, müşterinizin bir kupon kodu yoksa ve bir kupon alanı görürse, olası bir fırsatı kaçırdığını hissedebilir ve indirim aramaya başlayacakları için kaybedebilir. Tüm kuponlarınız herkese açık değilse, en iyi çözüm görünür bir açık metin alanı sağlamamaktır. Bir metin alanını ortaya çıkarmak için bir metin bağlantısı sağlamayı tercih etmelisiniz. Bu tasarımın, kullanıcıları bir kupon arayışına gönderme olasılığı daha düşüktür, çünkü birçok müşteri bunu fark etmeyecektir. Tabii ki takas, kupon kodu olanlar için daha az bulunabilir olmasıdır.

Kupon kodu kutusu otomatik olarak genişletilsin veya bir bağlantının altına gizlensin, bir metin alanı olmalıdır. Kupon kodlarınızın sabit sayıda karakteri veya belirli bir kalıbı varsa, yeterli sayıda, çok fazla veya yanlış türde (sayısal, alfabetik, özel işaretler) karakter eklemeleri durumunda kullanıcıyı uyaran bir otomatik doğrulama da ekleyebilirsiniz. hatayı daha erken fark ederler. Alan, sitede kullanılan kupon kodlarını içerecek kadar uzun olmalı ve kullanıcıların bunları doğru bir şekilde girmelerini sağlamalıdır. Kupon kodlarının en iyi uzunluğu 8-12 karakterdir. Kupon kodu önerileri sunuyorsanız, bunları bir açılır listede de görüntüleyebilirsiniz.

Sunulan kuponların etrafındaki kopyayı nasıl ifade ettiğinize gelince, zihinsel muhasebe pazarlama psikolojisi, ürünleriniz daha fazla ihtiyaç kategorisine girme eğilimindeyse, müşterilerinize kuponları "kazandıklarını" söylemeniz gerektiğini önerir (bir açılır pencere düşünün) "Merhaba! Az önce 10 dolarlık bir indirim kuponu kazandınız!" diyen mesaj), çünkü kazanma eylemi daha ciddi bir gelir kaynağı gibi görünüyor. Buna karşılık, ürünleriniz daha anlamsızsa, kuponlarınızı bir sürpriz olarak veya onlara şanstan dolayı verilmiş gibi kullanmaya çalışmalısınız (“Az önce 10 dolarlık bir kupon kazandınız!” mesajını hayal edin). Zihinsel muhasebe hakkında daha fazla bilgiyi blog yazımızda okuyabilirsiniz.

Kupon kodlarının kendilerinin hatırlanması ve kupon kutusuna yazılması kolay olmalıdır (onları bir açılır menü veya aralarından seçim yapabileceğiniz bir radyo düğmesi olarak sunmadığınız sürece). Bu, kombinasyonların müşteriler için bir anlam ifade etmesini sağlamak, O ve 0 gibi benzer harf ve rakamlardan kaçınmak ve uzunluğu 12 karakterin altında tutmak anlamına gelir. Blog yazımızda bilişsel akıcılık hakkında daha fazla bilgi edinin.

Kullanıcı Arayüzü Örnekleri:

Birchbox, sepet görünümünde çok görünür bir kupon kodu kutusuna sahiptir. Ayrıca, alışveriş sepeti görünümünde kaçıranlar için ödeme görünümünde bir kupon kodu kutusunu açmak için bir bağlantı sunarlar. Her iki adımda da kupon kodu ekleme seçeneğini korumanın harika bir yolu, ödeme formundaki kupon kodu kutusunu gizleyerek kesintiyi azaltmaya yardımcı olur.

Mobil çözünürlükte, kupon kutusu gizlenir ve üzerine tıklayarak genişletilmesi gerekir:

Yine, ödeme sayfasında promosyon kodu kutusuna bir bağlantı var:

Minimum harcama promosyonları için kullanıcılar için hesap yapın ve harcama hedefine ulaşmalarına yardımcı olun

Bazı siteler, belirli bir doların üzerindeki alışverişlerde ücretsiz kargo gibi promosyonlar sunar. Bu fırsatlar, kullanıcıları kendilerine hak kazanmak için fazladan zaman ve para harcamaya teşvik eder.

Minimum harcama promosyonları için siteler, kullanıcılara teklife hak kazanmak için tam olarak ne kadar harcamaları gerektiğini söylemelidir. Bunun için harika bir kullanıcı arayüzü fikri, ister ücretsiz gönderim, ister % veya dolar indirimi olsun, kullanıcıların indirime hak kazanmak için ne kadar daha fazla harcaması gerektiğini doğrudan alışveriş sepetinde geri saymaktır.

Müşterilerin ücretsiz kargoya ulaşmak için daha fazla harcamaya motive olmalarını sağlamak, ancak alışverişlerini "yeterli" harcama düzeyine, bir fiyat tavanı koymak ve ücretsiz kargoya ulaşmak için gereken değere sabitlemek için sınırlamamak istiyorsanız, oynayabilirsiniz. Harcamanın başlangıcında daha hızlı giden ücretsiz kargoya yönelik ilerlemeyi ve sipariş hacmi "hedefine" ulaşmaya doğru daha yavaş giden ilerlemeyi görüntülemek için kullanıcı arayüzünüzle. Bu, araştırmaya dayalı “hedef hızı” fikrine göredir. Bununla ilgili daha fazla bilgiyi bu blog yazısında okuyabilirsiniz.

Siteler, alışveriş yapanların minimum harcama hedefine ulaşmasını sağlayacak ve onları matematiği kendileri yapma zahmetinden kurtaracak alışveriş sepetinde ilgili öğeleri önererek daha da ileri gidebilir.

Kullanıcı Arayüzü Örnekleri:

Tula, ücretsiz kargoya hak kazanmak için alışveriş sepetinde ne kadar eksik olduğunu göstermek için kullanıcı arayüzünü kullanır.

Kullanıcılara alışveriş sepetinde hak kazanabilecekleri özel teklifleri hatırlatın

Kullanıcıların dikkatini çekmek ve mevcut alışveriş sepeti düzeyinde ve kupon promosyonlarını keşfetmelerine yardımcı olmak için son şans, alışveriş sepeti sayfasındadır. Orada yine de siparişte kolayca değişiklik yapabilirler, bu nedenle ücretsiz gönderim veya indirimler gibi kullanıcıların hak kazanabileceği özel teklifleri eklediğinizden emin olun.

Kullanıcıların dikkatini çekmek için teklifler açıkça görülebilmelidir. Kullanıcının gözünü çizmek için uygun yerleşimi ve görsel ağırlığı kullanın.

İşte en iyi UX uygulamalarından bazıları:

• Ürün düzeyinde teklifler için, ürünün yanında mesajlaşmayı sunun.
• Site genelindeki teklifler için, ödemeye devam etmek için teklifi, seçeneğin hemen üzerindeki öncelikli bir alanda sunun.
• İndirim gönderim için geçerliyse, site genelinde indirimlerle veya gönderim toplamının yanına yerleştirme uygun olabilir.
  

Müşterilere, özellikle ödeme sırasında çok fazla kupon ve sepet düzeyinde promosyon teklif etmeyin. Seçim aşırı yüklemesi, çalkantıya neden olabilir. Çeşitliliğin değeri ve aşırı seçim yüklemesi hakkında daha fazla bilgiyi blog yazımızda okuyun.

Kullanıcı Arayüzü Örnekleri:

Chubbies Shorts, mevcut tüm indirimleri ve ödülleri doğrudan alışveriş sepetinde gösterir.

Herhangi bir özel koşul veya kısıtlamadan bahsedin

Sepet promosyonu veya kuponlarının herhangi bir özel koşulu veya kısıtlaması varsa, müşteriler satın alma işlemini tamamlamadan önce bunu satış sayfasında, hüküm ve koşullarınızda ve alışveriş sepetinde belirtin.

Kullanıcı Arayüzü Örnekleri:

Shein, alışveriş sepetinde promosyonlarının özel koşullarından bahseder, örneğin bir müşterinin satın alabileceği maksimum promosyon ürünü sayısı ve indirimli ürünlerin iade edilememesi.

Ödeme sayfası:

Bir kupon kodu alanı ekleyin

Daha önce de belirttiğimiz gibi, kupon kodu alanını hem alışveriş sepeti sayfasına hem de ödeme sayfasına eklemeniz, alışveriş sepeti görüntüleme sayfasında uygulamayı unutması durumunda daha iyidir.

Kod başarıyla uygulandıysa bir başarı mesajı görüntüle

Kupon kodunun başarıyla uygulandığını onaylamak için bir başarı mesajı ve indirim tutarını gösterin. Kullanıcıların mesajı gördüğünden ve girilen kupon koduyla ilişkilendirdiğinden emin olmak için mesajı kupon kodu alanının yakınına yerleştirin. Bu mesajın sayfanın üstünde veya altında görünmesi kafa karıştırıcı olabilir. Kuponun başarıyla uygulandığına dair tek bilgi kaynağının başarı mesajı olmadığından emin olun. Eklenen indirimi sipariş toplamlarında, alışveriş sepetinde ve ödeme sayfasında, tercihen hangi kupon kodunun hangi indirimi uyguladığını belirterek görüntüleyin (özellikle müşteriler siparişe birden fazla indirim kodu ekleyebiliyorsa).

Kullanıcı Arayüzü Örnekleri:

Pretty Little Thing, bir onay işareti ve geçerli bir kod girildikten sonra siparişe uygulanan tasarruf miktarını gösterir. Ayrıca, hangi indirim kodunun indirimi uyguladığını belirterek, sipariş toplamlarında hesaplanan indirim tutarını da görüntülerler.

Ayrıca mobil görünümde uygulanan kupon kodunu ve ilgili indirimi görüntülerler:

{{CTA}}

Kullanıcı Arayüzü Kitimizde bulunan hazır bileşenlerle ön uçunuzu oluşturun

inşa etmeye başla

{{ENDCTA}}

Geçersiz kupon kodları için bir hata mesajı görüntüle

Kod geçersizse veya promosyon koşulları karşılanmıyorsa, kupon koduyla ilgili sorunun türünü belirten ilgili bir hata mesajı göstermelisiniz. Kullanıcıya neyin yanlış olduğunu ve sorunu nasıl çözebileceklerini bildirmeyeceğinden, her durumda aynı hata mesajını görüntülemeyin.

Kullanıcı hata mesajını fark etmeyebileceğinden, hata mesajını sayfanın üstünde veya altında değil, kupon kodu kutusunun hemen yanında görüntüleyin. Örneğin kırmızı veya başka bir zıt renk kullanarak hata mesajının görünür olduğundan emin olun.

Görüntülenecek hata mesajı türleri:

• Kupon kodu geçersiz.
• Kupon kodu zaten kullanılmış ve daha fazla kullanılamaz.
• Kuponu uygulamak için sipariş tutarı yetersiz veya fazla (bu durumda, kupona hak kazanmak için ne kadar eksik veya alışveriş sepetinde ne kadar fazla olduğuna ilişkin bilgileri iade edin).
• Sipariş içeriği promosyon şartlarını karşılamıyor (bu durumda, kalifiye olmak için hangi öğelerin kaldırılması veya eklenmesi gerektiğini belirtin).
• Kuponun süresi doldu.
• Diğer nedenler – başka durumları hayal edebiliyorsanız, özellikle onlar için bir mesaj oluşturun. Aklınıza gelmemiş diğer tüm durumlar için tek bir varsayılan mesajınız olsun.

Kullanıcı Arayüzü Örnekleri:

Yaz Tuzu, girilen kod geçersizse veya promosyon koşulları karşılanmıyorsa bir hata mesajı görüntüler. Müşterileri kodlarını tekrar kontrol etmeye teşvik ederler. Halka açık kuponların üst şeritte görünmesi, hatayı düzeltmeye yardımcı olur.

Mobil çözünürlükte şu şekilde görüntülerler:

Müşterinin birden fazla indirim kuponu ekleyip ekleyemeyeceğini veya promosyonları birleştirip birleştiremeyeceğini açıkça belirtin

Siparişe yalnızca bir kupon eklenmesine izin verirseniz, müşteri geçerli bir kupon kodu eklediğinde kupon kodunu ortadan kaldırın veya gizleyin. Müşteriler kupon kodunu başka bir kupon koduyla değiştirmek isteyebileceğinden, "kupon kodumu değiştir" düğmesini ekleyerek değiştirin. Kupon kodunu da kaldırma seçeneğiniz olduğunu unutmayın. Müşterilerin sipariş başına yalnızca bir kupon kodu ekleyebileceğini sayfanın bir yerinde açıkça belirtmelisiniz.

Müşteriler daha fazla kupon kodu ekleyebiliyorsa, bir kupon kodu ekledikten sonra bunu "siparişe eklendi" olarak görüntüleyebilir ve kupon kodu alanının yeniden yüklenmesine ve tekrar boş kalmasına izin verebilirsiniz, böylece müşteriler başka bir kupon kodu uygulayabilir.

İndirim kodları ve sepet promosyonları birleştirilemezse, bunu promosyon reklamlarında, Şartlar ve Koşullarda ve ödeme sayfasında, özellikle birisi zaten indirimde olan ürünlerin üzerine bir kupon eklemeye çalışırsa bir hata mesajı olarak açıkça belirtmelisiniz.

Kullanıcı Arayüzü Örnekleri:‍

Summer Salt, eklenen kuponu kupon kodu alanının altına ekleyerek, siparişe kupon uygulandığında kupon kodu alanını boşaltarak kullanıcıların sipariş başına birden fazla kupon uygulayabileceğini düşündürür.

Pretty Little Thing, müşterilerin sipariş başına yalnızca bir kupon kodu uygulamasına olanak tanır. Kupon siparişe uygulandıktan sonra kupon alanını ortadan kaldırarak yerine “kod değiştir” butonunu koyarlar.

Kullanıcıların yükseltilmiş müşteri deneyimi için indirimler bulmasına yardımcı olun

Kupon kodu alanının yanında, mevcut tüm indirimleri görebilecekleri müşteri kokpitine veya sadece aralarından seçim yapabilecekleri kupon ve alışveriş sepeti promosyonlarının bir listesini göstermelisiniz. Bu, müşterilerin fırsatlarınızı kullanmasını çok daha kolay hale getirir ve alışveriş sepetlerine daha fazla ürün eklerlerse indirime hak kazanabileceklerini görürlerse alışveriş sepetlerinin boyutunu artırabilir.

Kullanıcı Arayüzü Örnekleri:

Shein, ödeme sırasında kupon kodu alanının yanındaki mevcut kuponları toplayan ve kupon kodu alanı altında herkese açık kuponlardan bahseden "Kuponlarım" sayfasına bağlantı verir.

Kuponlarım bağlantısına tıklandığında açılan mevcut kuponları ve süresi dolan kuponları gösteren müşteri kokpitidir.

Mobil uygulamada kuponları “kupon uyarısı” olarak görüntülerler. Bu açılır pencereye tıklarsanız, mevcut tüm kuponları görebilir ve hangisini kullanacağınızı seçebilirsiniz.

Alınan indirimi yansıtın

Alışveriş sepetindeki ürünlere uygulanan indirimleri veya özel kısıtlamaları, hem alışveriş sepeti düzeyindeki promosyonları hem de kuponları gösterin. Kupon kodları, ödeme bilgileri talep edilmeden önce doğrulanmalı ve maliyete yansıtılmalıdır. Sepet düzeyinde indirimler, uygulandıkları şeye bağlı olarak ürün veya sipariş düzeyinde görüntülenmelidir. Kullanıcıların tasarrufları görebilmeleri ve toplamın nasıl hesaplandığını anlamaları önemlidir. En iyisi, hangi kupon kodunun ve hangi promosyonun onlara sipariş toplamında tam olarak ne kadar tasarruf sağladığını göstermektir.

İndirimli ürünlerle ilgili özel kısıtlamalar, müşteriler siparişlerini vermeden önce bildirilmelidir.

Kullanıcı Arayüzü Örnekleri:

Shein, alışveriş sepeti özetinde ürün düzeyinde ürün düzeyinde indirimler görüntüler.

Shein, müşterilerin indirim kodlarını yalnızca kasada uygulamalarına izin verir. 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.

Özet

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?

Başlamak

{{ENDCTA}}