Dönüştüren Bir E-Ticaret Ödeme Akışı Nasıl Tasarlanır?

Yayınlanan: 2021-07-22

E-ticaret ödeme akışınız, paranın olduğu yerdir. Bunu düşün. Rastgele ziyaretçiler, ödeme dönüşüm hunisine girmeden önce siteyi terk eder. Motive olmuş alıcılar siparişlerini tamamlamak için buraya gelirler.

Ödeme UX'inizdeki herhangi bir küçük tasarım iyileştirmesi, genellikle sitenizin ne kadar para kazandığı üzerinde doğrudan bir etkiye sahiptir.

Geçenlerde analiz ettiğim bir e-ticaret sitesinde, trafiğin %84,7'sinin satın almaya başladığı bir ödeme sayfası vardı. Bunu %90'a yükseltebilirsek, bunun 461 sipariş daha ve ayda ek 87.175$ ile sonuçlanacağını hesapladım - %23.9 gelir artışı. “Küçük” kazanımlar çok büyük olabilir.

Öyleyse soru şu: "Daha fazla insanın ödeme akışımızdan geçmesini ve satın alma işlemlerini tamamlamasını nasıl sağlayabiliriz? Spesifik taktikler sitenize bağlıdır, ancak cevabı bulma ilkeleri evrenseldir.

E-ticaret ödemelerini düşünmek için bir çerçeve: Fogg Davranış Modeli

Sonuç olarak şudur: Davranış = Motivasyon x Yetenek x Tetik.

İşte modeli:

sis davranış modeli
Persuasive Tech Lab'in izniyle kullanılmıştır .

Grafiğin sağ üst köşesini hedeflemek istiyorsunuz; yüksek motivasyon, yapması kolay, yerinde bir tetikleyici. Motivasyonunuz yüksek ve yeteneğiniz düşükse (yapılması zor), alacağınız şey hayal kırıklığıdır. Motivasyonu düşük ancak yapması kolaysa (örn. çöpü dışarı çıkarın), canınız sıkılır.

Amazon, Fogg Davranış Modelini nasıl kullanır?

Amazon size bir ürün promosyonu içeren bir e-posta gönderdiğinde, bu motivasyon ve tetikleyicidir. İnsanlar bağlantıya tıklar ve ürün sayfasına giderler. Kopyayı ve incelemeleri okurlar ve resme bakarlar, hepsi motivasyonu arttırır. "Sepete Ekle", ödeme işlemini başlatmak için tetikleyicidir.

Peki ya yetenek? Ödeme işlemini tamamlamak ne kadar kolay? Amazon'un kıçı tekmelediği yer burası. Sadece şifrenizi yazmanız ve birkaç kez tıklamanız yeterlidir. Çıkış akışı sürtünmesizdir.

İşte Amazon'un mobil ticaret uygulamasındaki gerçek iş akışı:

amazon mobil uygulama ödeme akışı

Bitti ve bitti. Neyin iyi olduğunu görmek için tüm ödeme akışını adım adım inceleyelim.

Not: Kapsamlı e-ticaret yönergeleri raporumuzdan e-ticaret için tonlarca başka ipucu alabilirsiniz (özellikle e-ticaret için 247 yönerge).

“Sepete Ekle” İşlevinizi ve Alışveriş Sepeti Sayfanızı Nasıl Tasarlayabilirsiniz?

Her şey, insanların sepete bir şeyler eklemesiyle başlar. Bir ziyaretçi, sepetine ilk ürünü eklediği anda, siteye göz atmıyor, alışveriş yapıyor demektir.

“Sepete Ekle” Nasıl Görünmeli?

İnsanlar ürün sayfalarınızda sepete bir şey eklediğinde ne olmalı?

Ben onlar sepetine şey ilave ettik aptalca açık olmalı. Açık onay. Kaç sitenin uygun bir onay göstermeyerek veya küçük bir animasyon ya da fark edilmesi zor küçük bir onay metni göstererek bunu batırması çok saçma.

Bonobo'da sepet eklemeyi kaçıramazsınız. "Sepete Ekle"yi tıkladıktan sonra, araba küçük bir animasyonla görünür; bu, insan gözünün harekete tepki vermesi iyidir. Ziyaretçiden alıcıya geçişi gösteren ince bir görsel ipucu.

bonobo sepeti animasyon ekleme
"Sepete Ekle"yi tıkladığınızda, Bonobos, dikkatinizi sepetinize çekmek için animasyon kullanır ve sizi kasaya yönlendirir.

"Ödeme" düğmesiyle birlikte sepet içeriği de kullanıcı başka bir yere tıklayana kadar görünür durumda kalır. Bu iyi. "Ödeme" düğmesinin rengini mavi dışında bir renkle değiştirirdim - yeterince göze çarpmıyor. Görsel hiyerarşideki ana şey “Sepete Ekle” düğmesidir, ancak ürün zaten sepettedir.

ASOS, küçük bir animasyon da gösterir. Sepet içeriğini açarlar ve birkaç saniye sonra katlarlar. "Çantaya Ekle" düğmesi, alıcılar için güzel bir onay olan "Eklendi" olarak da değişir:

ASOS ödeme animasyonu
ASOS'taki açılır menü kalıcı değildir, bu da birincil harekete geçirici mesajın - kontrol etmek için - alışveriş yapanın bakışlarından uzak olmasını sağlar.

Kullanıcı bir yere tıklayarak bir seçim yapana kadar sepet içeriğini açık tutardım. Bu şekilde, “Ödeme” butonu onların yüzüne bakmaya devam eder.

Her zaman daha fazla şey satın almalarını istesek de, tek bir öğeyi bile satın alma sürecini iyileştirmek büyük gelişmelere yol açabilir. Onları kasaya doğru itmek her zaman iyi bir fikirdir.

Ürün sepete girdikten sonra ne olacak?

İki ana yaklaşım vardır:

  1. "Sepet ekleme" onayını gösterin ve kullanıcıları aynı sayfada tutun. Artıları: İnsanlar başka bir sayfaya geçmek istemediler, bu yüzden sürpriz yok. Ödeme yapmadan önce sepete daha fazla ürün eklemeyi de düşünebilirler. Eksiler: Baktıkları ürün zaten sepette var. Satın almak isteyebilecekleri başka bir şeye bakarlarsa sizin için daha faydalı olur.
  2. Kullanıcıyı sepet sayfasına aktarın. Artıları: Onları ödeme yapmaya bir adım daha yaklaştırıyorsunuz. Bu aynı zamanda ek satış teklifleri yapmak için harika bir fırsattır. Eksileri: "Sepet başına ürün" maksimize etme konusunda kaybedebilirsiniz.

Amazon sizi bir alışveriş sepeti sayfasına götürür, sepete ürün eklediğinizi onaylar ve size ek satışları gösterir. Amazon'un iyi yaptığı şey, alışveriş sepeti içeriğini küçültmek, bu nedenle yukarı satışlar öne çıkıyor:

sepete ekledikten sonra amazon upsell

Potansiyel stratejilerin doğru dengesi, sektörünüze ve hedeflerinize bağlıdır ve bunu kesinlikle test etmek istersiniz.

Akılda tutulması gereken metrikler:

  • Ortalama işlem değeri;
  • İşlem başına ortalama miktar.

Yalnızca işlem sayısını değil, her işlem için harcanan tutarı da artırmak istiyoruz.

Sepet içeriğini iyi göster

Sepet içeriğini etkili bir şekilde görüntülemenin temel ilkeleri netlik ve kontroldür.

  • netlik Sepette ne olduğunu ve nakliye ve vergiler dahil nihai maliyeti anlamak kolay ve açıktır. Sürpriz maliyetler, insanların alışveriş arabalarını terk etmesine neden olur.
  • Kontrol: Miktarı güncellemek veya ürünleri kaldırmak gibi değişiklik yapmak kolaydır.

ASOS'un alışveriş sepeti sayfasında iyi bir görüşü var:

ödemeden önce asos sepet sayfası

Neyi doğru buluyorlar:

  • Ürün fotoğrafları;
  • Ürün adı ve fiyatı;
  • Kaldırma, daha sonrası için kaydetme veya boyut gibi ayrıntıları değiştirme yeteneği;
  • Kabul ettikleri ödeme türlerini gösterin;
  • Toplam fiyatı gösterin ve ücretsiz teslimatı onaylayın;
  • "Ödeme" için harekete geçirici mesajı temizleyin;
  • “Kolay getiri”yi vurgulayarak belirsizliği azaltın.

Indochino, alışveriş sepeti içeriğini sunmak için hoş, minimalist bir yaklaşıma sahiptir. Bununla birlikte, sayfada belirgin bir kupon kutusu ve miktarları değiştirememe gibi birkaç sorun var:

indochino ödeme sayfası.

Görsel hiyerarşiyi doğru yapın

Görsel hiyerarşideki bir numaralı şey kasaya devam etmek olmalıdır. (Farklı CTA'ları test edin.). İki harekete geçirici mesaj olmalıdır: biri sepetin üstünde diğeri altında.

Bunun gibi bir şey—iki ödeme düğmesi açıkça göze çarpıyor:

modcloth iki ödeme düğmesi

Modcloth, bu sayfayı en son gözden geçirmemizden bu yana geliştirdi. Önceden, yazılması gereken miktarın güncellenmesi. Artık miktarı artırmak veya azaltmak için stepper kullanabilirsiniz.

Modcloth'un ayrıca bir PayPal seçeneği sunduğuna dikkat edin. Çoğu kişi kredi kartıyla ödemeyi tercih etse de, 1-2 alternatif ödeme yöntemi (örneğin PayPal, Amazon) sunmak iyi bir fikirdir ve dönüşümlerin artmasına yardımcı olduğu görülmüştür. Yine de çok fazla seçenek can sıkıcıdır.

Modcloth ayrıca, 75 doların üzerindeki siparişlerde ücretsiz iade ve ücretsiz kargo olduğunu hatırlatır.

Kuponları öne çıkarmayın

İnsanlar "Kupon kodunu buraya girin" alanını gördüklerinde kendilerini daha az özel hissederler. "Neden benim yok?" Birçoğu bir kupon bulmak için Google'a gider; çoğu asla geri dönmez. Kupon aramak için siteden ayrılmak, alışveriş sepetini terk etmenin yaygın bir nedenidir.

Yani, bu iyi bir fikir değil:

kasada kupon kodu kutusu.

Bunun yerine, "Kuponunuz var mı?" yazan bir metin bağlantısına sahip olun. Veya benzeri. Birisi bağlantıya tıkladığında, yukarıdaki gibi bir giriş alanı görünmesini sağlayın. Metin bağlantıları daha az belirgindir, bu nedenle daha az insan bunlara dikkat edecektir.

Halihazırda bir kupon koduna sahip olan müşteriler, bunu girmenin bir yolunu arayacaktır. Gerçekten iyi saklamadığınız sürece, onu bulacaklar ve kupon kodlarını uygulayabilecekler.

Alışveriş yapanlara iyi şeyleri hatırlatın: nakliye, iade ve güvenlik

Mallarını ne zaman alacaklar? Kargo ne kadar. ücretsiz mi İşlem güvenli olacak mı? İnsanlara hatırlat.

Ödeme düğmesinin altında "Şimdi Güvenle Öde" yazan bu üç önemli mesajı gösteren bir örnek:

ödeme örneğinde belirsizliği azaltmak.

Kalıcı sepetler FTW

İnsanlar sepete bir şey eklediğinde, sepet içeriğinin süresinin dolmasına izin vermeyin. Kullanıcıları, kaldıkları yerden devam edebilmeleri için gelecek hafta veya gelecek ay geri getirmek için alışveriş sepetini bırakma e-postalarını ve yeniden hedefleme reklamlarını kullanın.

Kaydolma işlemi: Bir hesap oluşturmak ya da oluşturmamak?

Birçok e-ticaret sitesi, alıcıların satın almadan önce kaydolmalarını ister. Hatta bazıları kaydı zorluyor (yani kayıt olmadan satın almak mümkün değil). Uzun lafın kısası: Yapma. Dönüşümlere zarar verir. Çok.

Her dört kişiden biri, zorunlu kayıt nedeniyle çevrimiçi satın alma işlemlerini terk ediyor. Zorunlu kayıt, “açgözlü pazarlamacı sendromunun” bir parçasıdır. E-ticaret pazarlamacılarının bunu neden yapmak istediğini anlamak kolaydır - kullanıcının "kilitlenmesini" ve bir hesabı olduğu için daha fazla alışveriş yapmasını umuyorlar.

Durum gerçekten böyle mi? Lütfen. Kaç tane web sitesinde kayıtlı hesabınız var? Şimdi bu nedenle onlara sadık hissediyor musunuz? Bahse girerim çoğuna bir kereden fazla giriş yapmamışsındır.

Kullanılabilirlik gurusu Jared Spool tarafından anlatılan zorunlu kayıt hakkında güzel bir hikaye:

Daha basit olabilecek bir form hayal etmek zor: iki alan, iki düğme ve bir bağlantı. Ancak, bu formun müşterilerin büyük bir e-ticaret sitesinden yılda 300.000.000 $'a kadar ürün satın almasını engellediği ortaya çıktı. Daha da kötüsü, sitenin tasarımcılarının bir sorun olduğuna dair hiçbir fikri yoktu.

Form basitti. Alanlar E-posta Adresi ve Şifre idi. Düğmeler Giriş ve Kayıt idi. Bağlantı Şifremi Unuttum idi. Siteye giriş formuydu. Kullanıcıların her zaman karşılaştığı bir formdur. Bununla nasıl sorunları olabilir?

Sorun, formun yerleşimi kadar, formun yaşadığı yerle ilgili değildi. Kullanıcılar, alışveriş sepetlerini satın almak istedikleri ürünlerle doldurduktan ve Checkout düğmesine bastıktan sonra karşılaşıyorlardı. Ürün için ödeme yapmak için bilgileri gerçekten girmeden önce geldi.

Ekip, formu tekrar eden müşterilerin daha hızlı satın almalarını sağlayan bir araç olarak gördü. İlk kez satın alan kişiler, kayıt için fazladan çaba harcamaktan çekinmezler, çünkü sonuçta, daha fazlası için geri gelecekler ve sonraki satın alımlarda uygunluğu takdir edeceklerdir. Herkes kazanır, değil mi?

Siteden ürün alması gereken kişilerle kullanılabilirlik testleri yaptık. Alışveriş listelerini getirmelerini istedik ve satın almaları için para verdik. Tek yapmaları gereken satın alma işlemini tamamlamaktı.

İlk kez alışveriş yapanlar hakkında yanılmışız. Kayıt yaptırmayı düşündüler. Sayfayla karşılaştıklarında kayıt olmak zorunda kalmaktan rahatsız oldular. Bir alışverişçinin bize söylediği gibi, “Ben bir ilişkiye girmek için burada değilim. Sadece bir şeyler satın almak istiyorum."

Zorunlu kaydı kaldırarak, satışları 300 milyon dolar artırdılar .

Spool'un ekibi ayrıca çoğu kişinin sistemde birden fazla hesabı olduğunu da anladı. İnsanlar zaten hesapları olduğunu unutmuşlardı. Standart e-postalarıyla bir tane oluşturmaya çalıştıklarında hata mesajları aldılar, bu yüzden daha fazla hesap oluşturmak için alternatif bir e-posta kullanmak zorunda kaldılar.

Bunun yerine ne yapmalısın? Her zaman bir misafir ödemesi teklif edin. Satıştan sonra kayıt üzerinde çalışabilirsiniz:

  • “Kaydol” kelimesinden bahsetmeyin bile. "Yeni Müşteri" veya benzer bir terim söyleyin.
  • Kontrol ettikten sonra, "Teşekkürler" sayfasında hesap oluşturma teklifinde bulunun. Ödeme sayfasında ad, e-posta ve adres zaten var, bu nedenle bir hesap oluşturmak birkaç tıklamadan fazla sürmemelidir. İstedikleri şifreyi isteyin (veya otomatik olarak oluşturmak için bir seçenek sağlayın) ve hesaplarını oluşturma iznini onaylayın.

Tecrübelerime göre, e-ticaret sitelerinde en yaygın yaklaşım hala optimalin altında. Genel olarak, çok meşgul ve yeni müşterilerden bir seçim yapmalarını isteyerek tereddüte yol açıyor:

kötü ödeme seçeneği örneği.

Birkaç, çok daha fazla tercih edilen seçenek var.

Ödeme kaydı seçeneği 1

Kullanıcılara yeni veya geri dönen olmak üzere iki seçenek sunun:

asos yeni veya geri dönen müşteriler kaydı

Asos her zaman bu yaklaşıma sahip değildi. Bu, üç seçeneği olan önceki kayıt sayfasıydı:

asos eski hesap oluşturma süreci

Bu yaklaşımı ortadan kaldırmak ve basitleştirilmiş bir sürüme geçmek, alışveriş sepetini terk etmeyi %50 oranında azalttı!

Hala (esas olarak) zorunlu bir kayıttır, ancak farklı şekilde paketlenmiştir. Sosyal giriş seçenekleriyle de daha kolay. Tipik bir kullanılabilirlik sorunu sadece birkaç tıklamaya indirgenmiştir.

Ödeme kaydı seçeneği 2

Alışveriş sepetinin terk edilmesi önemli bir sorundur. E-postanızı önceden istemek, terk edilmiş bir alışveriş sepeti kurtarma sürecini başlatmayı kolaylaştırır. Ayrıca, iki kolay seçenek vardır: duyusal aşırı yüklenme yok:

ödemeye başlamak için daha iyi bir seçenek.
ödeme akışına alternatif başlangıç.

Ödeme kaydı seçeneği 3

Bir başka harika yol da oturum açma ekranını tamamen atlamaktır. Bunun yerine, varsayılan olarak misafir ödemesine geçin. Mevcut bir hesabı olan kişiler bağlantı üzerinden giriş yapabilir ve yeni müşteriler ödeme yaptıktan sonra bir hesap oluşturabilir:

elmas mumlar misafir ödeme varsayılanı

Diamond Candles'ın iyi yaptığı şey görünmez bile. Sizin için otomatik olarak bir hesap oluşturuyorlar ama bundan bahsetmiyorlar. Aynı e-posta adresiyle dört misafir check-out yaptığınızı ve sonunda bir hesap oluşturmaya karar verdiğinizi varsayalım (esas olarak bir şifre girin).

Bu e-posta adresiyle önceki tüm siparişleriniz bu hesap için birleştirilir, böylece yeni oluşturulan hesabınız uygun bir sipariş geçmişiyle birlikte gelir.

Ödeme kaydı seçeneği 4

Bu seçenekle, satın alma işlemi tamamlandıktan sonra bir teşvik ile birlikte hesap kaydı sunulmaktadır. İşte Speedo'dan bir örnek:

hızlı ödeme örneği.

İnsanlar size para ödeyene kadar herhangi bir hesap kaydı ile uğraşmazlar. Seçim yapmak zorunda kalsaydınız, sizin için daha önemli olan şey: hesap kayıtları mı yoksa satın almalar mı?

Genellikle, "teşekkür ederim" sayfaları pek kullanışlı değildir, ancak burada öyle değil. Size beyinsiz bir teklif sunarlar: Bir şifre girin ve bir kupon alın (artı sipariş takibi, daha hızlı satın alma vb.). Buradaki yeni kullanıcılar için hesap oluşturma yüzdesi genellikle %75'in üzerindedir.

E-ticaret Ödeme Sayfası

Burası para sayfası. Son ödeme sayfanızdaki herhangi bir artış, banka hesabınızda güzel bir fark yaratacaktır. Ödeme akışınızda daha iyi bir son adım oluşturmanıza yardımcı olacak birkaç ilkeyi burada bulabilirsiniz.

En son kredi kartı bilgilerini isteyin

Kişilerin, faturalandırma aşamasına gelmeden önce gönderi bilgilerini tamamlamasını sağlayın. Bu, Cialdini'nin Bağlılık ve Tutarlılık ilkelerini eyleme geçirir. İnsanlar bir şeyi yapmaya başladıklarında bitirmeleri gerektiğini düşünürler.

Halihazırda adlarını, e-postalarını ve ideal olarak fatura adresiyle aynı olan gönderim bilgilerini girmeleri istenmiştir, bu nedenle tekrar yazmaları gerekmez.

Bazen kapıya ayak tekniği olarak adlandırılan aynı ilke, form alanları için de geçerlidir. Önce ad gibi daha kolay alanlarla başlayın. Kredi kartı numarası alanı "en zor"dur, bu nedenle en son gelmelidir.

Bu yapmaması gereken budur:

çevrimiçi ödeme için fatura formu örneği.

Bu daha iyi. (Buraya nakliye sayfasından ulaşabilirsiniz.)

Online ödeme örneği için kredi kartı girişi.

İyi tarafı : Net bir 1-2–3 adım akışına sahiptir. Ad alanı, kart ayrıntılarından önce gelir ve fatura adresinin (gönderim ile aynıysa) tekrar girilmesi gerekmez.

Kötü: Ana CTA “Kaydet ve Devam Et”tir. Devam et nereye ? "İncelemeye Devam Et" gibi veya bir sonraki işlem ne olursa olsun spesifik olmalıdır.

Gerçek bir kredi kartına benzeyen bir ödeme formu kullanın

Ödeme formunu şu skeuomorfik şekilde tasarlayarak gerçek yaşam dokunuşu ekleyin:

Kredi kartı girişi için skeuomorfik tasarım.

Sisteminize uygulamak için Skeuocard adlı ücretsiz(!) bir arayüz edinebilirsiniz. Burada bir demo deneyin.

Ödeme sürecinin güvenli görünmesini sağlayın

Güvenlik ciddi bir endişe kaynağıdır. SSL ile ödemeleri güvenli hale getirmenin yanı sıra, insanlara bundan bahsedin. Bu, güvenli görünmek için yapılmış bir form örneğidir:

kredi kartı girişi için güvenli form örneği.

Çalışmasının bazı nedenleri:

  • Kredi kartı numarası alanı için farklı arka plan rengi.
  • SSL logosu.
  • Yazılı açıklama: “Güvenli kredi kartı ödemesi. Bu, güvenli bir 128 bit SSL şifreli ödemedir.”
  • Son kullanma ve güvenlik kodu için açıklamalar.

Kitleniz teknoloji konusunda bilgili değilse, SSL veya HTTPS'nin ne olduğunu bilmeyebileceklerini unutmayın, bu nedenle açık bir şekilde konuşun.

Kredi kartlarını sisteminizde saklayın

Elbette, PCI uyumluluğuyla uğraşmak zorundasınız ve saldırıya uğrama riski var, ancak geri dönen kullanıcılardan çok daha fazla para kazanacaksınız. İnsanların fatura bilgilerini girmeleri gerekmediğinde, satın alma işlemi tek tıklamayla gerçekleşir.

Amazon büyük ölçüde öldürüyor çünkü geri dönen alıcılar için sürtüşme neredeyse tamamen ortadan kalktı! Ödeme akışı neredeyse hiç akış değildir; tek tıklamayla gerçekleşen bir olaydır.

Geri dönen ziyaretçilerin satın alma olasılığı yeni ziyaretçilerden çok daha fazladır, ancak bu, geri dönen alıcılarla karşılaştırıldığında hiçbir şey değildir . Onlara kolay gelsin.

Sonuç

E-ticaret optimizasyonu çalışmalarınızı ödeme akışında başlatın. Buradaki göreceli kazançlar, çok güzel mutlak toplamlarla sonuçlanacaktır.

Ödeme işleminizin UX'ini iyileştirmek için:

  • "Sepete Ekle" işlevini netleştirin.
  • Ziyaretçilerin sepet ürünlerini değiştirmesini veya kaldırmasını kolaylaştırın.
  • Kayıt sürecini kolaylaştırın—yeni alıcıların satın alma işleminden sonra kaydolmasına izin verin.
  • Ödeme sayfasında, önce en kolay bilgiyi isteyin.