Mobil Alışveriş Sepeti Tasarımında Yapılması ve Yapılmaması Gerekenler: 6 Pratik Teardown (mCommerce Ayrıntılı Rehber)

Sepet sayfanızın e-ticaret makinenizde hayati bir dişli olduğunu zaten biliyorsunuz. Ancak mobil alışveriş sepeti sayfalarınız – ziyaretçilerin ödeme yapmadan önce gördükleri sayfa – ağırlıklarını çekiyor mu?

Growcode'da, alışveriş sepeti sayfalarının, özellikle mobil söz konusu olduğunda, müşterilerimizin mağazalarının en çok göz ardı edilen bölümlerinden biri olduğunu defalarca görüyoruz. Ve sonuçlar önemli, alt çizgilerini ciddi şekilde bozuyor.

Mobil ticaret satışlarının 2021 yılına kadar tüm e-ticaret satışlarının %52,9'unu oluşturması bekleniyor. Ancak 2017'de ortalama mobil alışveriş sepetini terk etme oranı %85,65 gibi çok büyük bir orandı.

Bu, alışveriş sepetine bir ürün veya ürün ekleyen tüm müşterilerin, satın alma işlemini tamamlamadan kalan 10 müşteriden yaklaşık 9'u anlamına gelir.

#Mobil ticaret satışlarının 2021 yılına kadar tüm e-ticaret satışlarının %52,9'unu oluşturması bekleniyor. #EcommerceStats Tweetlemek İçin Tıklayın
Alışveriş sepetini terk eden mobil müşteri adayları. Yukarıdaki grafikte olduğu gibi toplu verilerin sektörler arasındaki büyük farklılıkları hesaba katmadığını unutmayın. Kaynak.
Bu yazıda, altı örnek alışveriş sepeti inceleme sayfasına göz atacağız. İlk üçü, çoğaltmayı düşünmeniz gereken katı tasarım uygulamalarını kullanırken, kalan örnekler en iyi kaçınılması gereken öğeleri içerir.

Ayrıca, belirli alışveriş sepeti tasarımlarının hatalarına odaklanırken, bunun genel olarak tamamen korkunç oldukları anlamına gelmediğini de belirtmekte fayda var. Mobil alışveriş sepeti en iyi uygulamalarına geçelim.

1. Yapın: Amazon

Amazon'un mobil web siteleri için alışveriş sepeti, iyi yapılmış mobil alışveriş sepeti tasarımının mükemmel bir örneğidir. Kalabalık değil, ama aşırı minimal de değil. Ana CTA'dan dikkat çekmeden gerekli tüm unsurlar dahil edilmiştir. Ayrıca, hediye paketinden ilgili ürünlere kadar, sipariş değerini artırmak için seçilebilecek çok sayıda göze batmayan "eklenti" vardır.
Amazon'un mobil alışveriş sepeti ux. Gerekli tüm unsurlar dahildir.

1. İpucu: Sayfanın üst kısmında zıt renkte ayarlanmış bir net CTA. Kullanıcı aşağı kaydırdıkça bu CTA ekranın üst kısmında yüzmeye devam eder.

#Mobil #cart optimizasyon ipucu: Sayfanın üst kısmında zıt renkte bir net #CTA ayarlayın. #ecommerce #optimization Tweetlemek için Tıklayın
Kullanıcı aşağı kaydırdığında CTA ekranın üst kısmında yüzer.
2. İpucu: CTA ekran genelindedir, bu nedenle hem sol hem de sağ elini kullanan kullanıcılar için dokunmak kolaydır.
3. İpucu: Herhangi bir şüpheyi gidermek ve "anlaşmayı tatlandırmak" için sayfanın üst kısmında ücretsiz gönderimin yinelenmesi.
İpucu #4: Ürün detaylarını tekrar kontrol etmek isteyenler için ürün resimleri ve isimleri açıklama sayfasına bağlantı verir.
İpucu #5: Sipariş miktarını değiştirmek, öğeleri silmek ve daha sonra kullanmak üzere kaydetmek için açık ve dokunması kolay düğmeler vardır.
İpucu #6: "Stokta" bildirimi, müşterilere ürünü beklemek zorunda kalmayacakları konusunda güvence verir.
#Mobil #sepet optimizasyonu ipucu: "Stokta" bildirimi, müşterilere ürünü beklemek zorunda kalmayacakları konusunda #güven verir. #ecommerce Tweetlemek İçin Tıklayın
İpucu #7: Amazon, altında kolay bir "Sepete Taşı" düğmesi ile "Sonrası için Kaydedilmiş" ürünleri sergiliyor.
Sonrası için kaydedilen öğeler açıkça görülebilir.
İpucu #8: Sayfadan ayrılmadan sepete eklenebilen ilgili ürünlerin – “Müşteriler de alışveriş yaptı” – dahil edilmesi. Üçüncü öğe tam olarak gösterilmediğinden bu öğenin tasarımı için ek artı, bu nedenle bir kaydırma hareketi önerir.
9. İpucu: Çok fazla boşluk ve gereksiz "dolgu" ayrıntılarının olmaması. Amazon, yalnızca kesinlikle gerekli olanı dahil etti.
İpucu #10: Altbilgideki "Sayfanın Başı"na bağlantı verin.

Bunun gibi daha fazla içgörü ister misiniz?

Haftalık e-ticaret ipuçlarını, stratejilerini ve önde gelen sektör bilgilerini edinin.
Doğrudan gelen kutunuza teslim edilir.

on Gizlilik politikasını okudum ve haber bülteni hüküm ve koşullarını kabul ediyorum.

Devam etmek için lütfen bu onay kutusunu seçin

Woohoo! Az önce kaydoldunuz. Aboneliği onaylamak için gelen kutunuzu kontrol edin.

2. Yapın: Zımba

Staples arabasının güzelliği basitliğidir. Ürünler saniyeler içinde incelenebilir. Sonuç, dahil edilen seçeneklere daha fazla vurgu yapılmasıdır.
Staples arabasının güzelliği basitliğidir. En iyi mobil e-ticaret sepetlerinden biri.
İpucu 1: Amazon gibi, ürünün hem sayfanın üst kısmında hem de ödeme özetinde ücretsiz olarak gönderileceğine dikkat çekiliyor. Dahası, metin yeşil renktedir, bu da bildirimin daha da öne çıkmasını sağlar. “Beklenen teslimatın” kesin tarihi de gösterilir.
İpucu #2: Tasarım son derece basittir ve beyaz boşluktan mükemmel bir şekilde yararlanılır. Müşteriler, siparişlerini hızlı bir şekilde kontrol edebilir, sayfadan ayrılmadan gerekli değişiklikleri yapabilir ve toplamı doğrulayabilir.
3. İpucu: “Kuponlar ve Ödüller” kutusu göze batmaz. Önemli olan "mağazadan teslim alma" seçeneği de dikkatleri ana CTA'dan uzaklaştırmadan sunuluyor.
4. İpucu: "Güvenli" kelimesi, ödeme CTA'sında bulunur.
İpucu #5: Altbilgi kaldırıldı.

Yanlış bir şey mi var? Staples çok haklı olsa da, bu sepet tasarımıyla ilgili bir sorun, genişletilebilir bir menü veya arama formu içermeyen başlığın basitliğidir. Bir şirket yalnızca bir ürün satıyorsa, bu uygun bir çözüm olabilir. Bununla birlikte, çok ürünlü siteler için, müşterilere isterlerse tekrar göz atma seçeneği sunmak her zaman değerlidir.

3. Yapın: Sarar

Sears, ödeme planları, mağazadan teslim alma, hediye seçenekleri ve promosyonlar dahil olmak üzere birçok ek seçenek sunar. Sepetleri, mobil alışveriş sepetinin terk edilmesini önleyen tasarımı bozmadan birçok farklı öğeyi tek bir sayfada birleştirmek isteyen perakendeciler için iyi bir örnektir.
Sears mobil araba tasarımı birçok öğe içerir, ancak yine de basit tutar.
İpucu 1: Sayfanın üst kısmında, ara toplamın yanında bir CTA bulunur. Bir kilit simgesi daha fazla güven oluşturur ve Paypal kullanarak ödeme yapma seçeneği de sunulur.
İpucu # 2: Yüksek bilet kalemi olarak, bu aşamadaki herhangi bir tereddütü ortadan kaldırmak için ödeme planları dahildir.
İpucu #3: Satış tasarrufları, sipariş özeti bölümünde kırmızı renkte yer alır ve müşterileri, hem aciliyeti artırarak hem de şüpheyi azaltarak ödemeye tıklamaya teşvik eder.
4. İpucu: Yeni müşteriler için daha fazla teşvik görevi gören sadakat programına giriş yapmak için bir bağlantı sağlanır. Bunun, ödeme formuna dahil edilmesi daha iyi olacak, herhangi bir faydası olmayan bir mağaza hesabı oluşturmak için bir bağlantı olmadığını belirtmek önemlidir.
İpucu #5: Sayfanın alt kısmında bir "güvenli ödeme" mührü bulunur.
Yanlış bir şey mi var? Sadece biraz fazla var ve etkisi muhtemelen bazı müşterilerin dikkatini dağıtıyor. Örneğin, alt kısımda dergi abonelikleri ve sadakat programına bir bağlantı sunmaya gerek yoktur.

4. Yapmayın: Vitacost

Vitacost, yukarıda açıklanan unsurların çoğunu kullanmasına rağmen, bunların uygulanması genellikle kusurludur. Sonuç, birkaç küçük değişiklikle alışveriş sepeti dönüşümlerinde büyük olasılıkla bir artış görecek, kötü tasarlanmış bir alışveriş sepeti sayfasıdır.
Vitacost, yukarıda açıklanan unsurların çoğunu kullanır, ancak bunların uygulanması genellikle kusurludur.
Hata 1: İnsanları alışveriş sepeti sayfasından uzaklaştıran rahatsız edici bir arama çubuğunun eklenmesi. Göz atmaya devam etmek isteyenler için bir arama çubuğu simgesi (Amazon örneğinde olduğu gibi) eklemek iyi bir fikirdir. Ama çok büyütmeyin.

#Mobil #cart optimizasyon ipucu: İnsanları alışveriş sepetinden uzaklaştıran rahatsız edici bir arama çubuğu eklemeyin. #ecommerce Tweetlemek İçin Tıklayın
Hata #2: Müşterilerin kafasını karıştırabilecek veya rahatsız edebilecek belirsiz “BOGO” ürününün (bir alana yarı fiyatına) otomatik olarak dahil edilmesi.
Hata #3: Zorlayıcı promosyon kodu çubuğu. Bu, dikkati ana CTA'dan uzaklaştırır ve müşterileri çevrimiçi promosyonları aramak için alışveriş sepetini terk etmeye teşvik eder. Promosyon kutuları görünür olmalı, ancak aşırı derecede olmamalıdır. Kesinlikle bir CTA'dan sonra olmalılar.
Hata #4: Nakliye maliyeti, şüphe uyandıran “TBD” olarak belirlenmiştir (genel olarak kısaltmalardan kaçınmalısınız)
Hata #5: Altbilgi çok büyük. Vitacost, müşterilerin satın alma işlemini tamamlamasını veya uygulamayı indirmesini istiyor mu?
Hata #6: Öğeleri kaldırmak veya artırmak için ürün seçenekleri çok küçük ve dokunulması zor.
Hata #7: Ekran görüntüsünün hemen altında görülebilen kayan çubuk, daha küçük telefonlarda çok fazla ekran alanı kaplıyor.

5. Yapmayın: Yalnız Gezegen

Staples sayfasının minimal bir tasarımı etkin bir şekilde kullandığı yerde, Lonely Planet çok fazla öğeyi hariç tutar. Tereddütleri azaltacak ve güven oluşturacak hiçbir özellik yok, satın almanın değerini artıracak hiçbir öneri veya ürün önerisi yok ve birçok düğmenin tıklanması zor.
Lonely Planet çok fazla öğeyi hariç tutuyor. Cart ux'u geliştirmek için kullanılabilecek çok fazla alana sahipler.
Hata 1: Alan yetersiz kullanılıyor. Sepetin tüm sayfayı doldurması ve mevcut içeriğin üzerine çıkmak yerine beyaz boşluk kullanması daha iyi olur.
Hata #2: Teslimat, indirimler veya ödeme seçenekleri hakkında hiçbir bilgi dahil değildir. Bunlar muhtemelen belirsiz müşterilerin şüphelerini ve korkularını azaltacaktır.
Hata #3: İlgili ürün önerisi yok.
Hata #4: Ürün sayısını artırma veya azaltma düğmeleri, neredeyse tıklanamayacak kadar küçüktür.
Hata #5: CTA – “Ödemeye Devam Et” – bir düğme gibi görünmüyor.
Hata #6: Açılır format, soldan CTA'ya dokunmayı zorlaştırır. Müşterilerin her iki baş parmağını da kullanmasına izin verin!

6. Yapmayın: Nike

Nike'ın sayfasındaki ana sorun, çeşitli öğelerin, birlikte veya sayfanın farklı noktalarına yerleştirildiğinde nasıl çalışabilecekleri konusunda çok az düşünceyle, rastgele dahil edilme şeklidir. CTA hakkında da kafa karışıklığı var.
Nike'ın sayfasına çeşitli unsurlar rastgele dahil edilmiştir.
Hata 1: Kargo indirimleri sadece üyeler için geçerlidir. Bu, gereksiz sürtüşmeler yaratır ve katılmak istemeyen, kaybettiklerini düşünecek müşteriler için caydırıcı olabilir. Müşterilere, yeni müşteriler için kaydolma seçeneğiyle birlikte ödeme aşamasında oturum açma seçeneği sunun. Sepet sayfası yalnızca siparişleri incelemek için olmalıdır.

Hata #2: İki CTA kullanımı. Belirli bir eylem planı aradığınız için alışveriş sepeti sayfalarında bir CTA'ya sahip olmak neredeyse her zaman daha iyidir. Birden fazla CTA sunmanın tek nedeni, müşterilere farklı ödeme seçenekleri arasında seçenek sunmaktır. Bir kullanıcı size e-posta adresini verdikten sonra uygun bir form (giriş formu veya adres formu) göstermek daha iyi olur.

Hata #3: "Kabul edilen ödeme türleri", ödeme CTA'sının yanında listelenmez. Bu rozetleri alışveriş sepeti sayfanıza eklemek iyi bir fikirdir, özellikle de Nike kadar iyi tanınmıyorsanız, ancak altbilgi onlar için uygun bir yer değilse.

Hata 4: Müşteriler kendilerini bu şekilde tanımlamazlarsa “misafir” terimi kafa karışıklığına neden olabilir (misafir olarak alışveriş yapıyorsanız üye olabilir misiniz?)

Mobil Alışveriş Sepeti Tasarımını Tamamlama

En iyi performans gösteren alışveriş sepeti sayfalarının çoğu temiz ve basit bir tasarıma sahiptir, ancak aynı zamanda doğru türde ve miktarda bilgi sağlar. Kendinizinkini yeniden tasarlarken, alışveriş sepeti sayfalarının amacının, alışveriş yapanların siparişlerini gözden geçirmesi ve onaylaması, gereksiz öğeleri kaldırması ve benzer ürünler eklemesi olduğunu unutmayın. Hesaplarına giriş yapmak veya kaydolmak gibi istenen diğer işlemler ödeme sayfasına bırakılabilir. Bu nedenle, bu mobil alışveriş sepeti en iyi uygulamalarını ve diğer alışveriş sepeti optimizasyon tekniklerini unutmayın.

Ve unutmayın, bölünmüş test anahtardır! Kendi testlerinizi oluşturmak için burada açıklanan taktikleri kullanın ve uzun vadede öğelerin ince ayarını yapma taahhüdünde bulunun. Bunu yaparsanız, dönüşümlerinizde neredeyse kesinlikle istikrarlı artışlar göreceksiniz.

115 Noktalı E-ticaret Optimizasyonu Kontrol Listesini Alın

Sekiz yıllık deneyime dayanarak, en iyi içgörülerimizi tek bir kitapta topladık: 7+ Figürlü Çevrimiçi Mağazanın E-Ticaret Optimizasyonu Kontrol Listesi. Ana sayfadan ödemeye kadar tüm sayfalarınızın performansını artırmak istiyorsanız, kopyanızı buradan alın.