Çevrimiçi Mağazalar için Mobil Dönüşüm Oranları Nasıl Artırılır

İnsanlar telefonlarında her zamankinden daha fazla zaman harcıyorlar. Bunları neredeyse her şey için kullanıyoruz - bankacılık, yatırım, hava durumunu kontrol etme, antrenmanları izleme, müzik dinleme, gezinme ve tabii ki alışveriş.

Web sitesi trafiğinin yaklaşık %55'i mobil cihazlardan geliyor ve çevrimiçi alışveriş yapanların %60'ı önce bir ürünü bulmak için telefonlarını kullanıyor. Mağazanız mobil cihazlarda sorunsuz bir kullanıcı deneyimi sağlamıyorsa, potansiyel müşterilerinizin büyük bir bölümünü kaybetme riskiyle karşı karşıya kalırsınız.

Ancak, mobil dönüşümleri artırmak için çevrimiçi mağazanızı nasıl optimize edebilirsiniz?

Duyarlı bir WordPress temasıyla başlayın

Yüksek kaliteli bir WordPress teması, duyarlı bir çevrimiçi mağaza için mükemmel bir başlangıç ​​noktasıdır. Temanız tüm sitenizin temelidir, bu nedenle her boyutta cihazda harika bir deneyim sunan birini seçin.

Bir temayı değerlendirmek için birkaç ipucu:

• Tema demosunu tabletlerde ve telefonlarda test edin. Muhtemelen tüm olası ekran boyutlarında cihazlara sahip olmadığınız için, deneyimi simüle etmek için Web Sitesi Duyarlı Test Aracı gibi bir site kullanabilirsiniz. Demo öğeleri tüm ekran boyutlarında iyi görünmelidir - hiçbir şey kesilmemeli, okunması zor veya kullanımı zor olmamalıdır.
• Tema demosuna bakarken tarayıcı pencerenizi yeniden boyutlandırın. İçerik buna göre ayarlanmalı ve hiçbir şey kesilmemelidir.
• Tema açıklamasında duyarlı özellikleri arayın. Özellikle "duyarlı tasarım"dan bahsetmeli veya temanın mobil cihazlar için nasıl ayarlandığını tartışmalıdır.
• Tema demosunu Google'ın mobil uyumlu test aracıyla çalıştırın.
• İncelemeleri kontrol edin. Tema kullanıcılarının derecelendirmelerini ve incelemelerini okuyun. Duyarlı tasarım hakkında olumsuz yorumlara dikkat edin.

Temanızın WooCommerce ile entegre olması da önemlidir. Bu, diğer olası çatışmalarla birlikte yanıt verme sorunlarını önleyecektir.

Storefront teması, yukarıdakilerin tümünü karşılar ve esnektir ve özelleştirilmesi kolaydır. Ayrıca, moda, oyuncak, dijital ürünler, rezervasyonlar ve daha fazlası gibi belirli sektörler için tasarlanmış çeşitli alt temalara sahiptir.

Mobil kullanılabilirliği aklınızda bulundurun

Kullanılabilirlik, alışveriş yapanların web sitenizle ne kadar etkili ve verimli bir şekilde etkileşime girebileceğidir. Kötü kullanılabilirlik satışları, dönüşümleri, marka algısını ve SEO'yu olumsuz etkiler. Mobil deneyiminizi gözden geçirirken, kullanılabilirlik en büyük önceliğiniz olmalıdır. Aşağıdakileri göz önünde bulundur:

• Baş parmağınızla düşünün. Mobil kullanıcılar, web sitenizle yalnızca başparmaklarını kullanarak etkileşime girer. Tüm tıklanabilir öğelerin (bağlantılar, düğmeler, menü öğeleri, resimler) bir site ziyaretçisinin kolayca dokunabilmesi için yeterince büyük olması gerekir. Küçük veya birbirine çok yakınlarsa, birisi yanlışlıkla yanlış şeye tıklayabilir.
• Pop-up'lardan ve diğer dikkat dağıtıcı şeylerden kaçının. Mobil ekranlar çok küçük olduğundan ziyaretçilere ne gösterdiğinize öncelik vermek önemlidir. Tüm mobil ekranı kapsayan pop-up'lar, kullanıcılarınızın deneyimini bozabilir ve hatta arama motoru sıralamalarınızı olumsuz etkileyebilir; aynı şey reklamlar ve diğer bildirimler için de geçerlidir. Bu tür içeriği kullanmaya karar verirseniz, ekranın yalnızca bir bölümünü kapladığından ve kolayca kapatıldığından emin olun.
• Ürün filtrelerini uygulayın . Çok sayıda ürün sunuyorsanız, çevrimiçi alışveriş yapan kişinin aradığını bulmak için bir süre gezinmesi gerekebilir. Bu, aynı anda yalnızca birkaç ürünü görüntüleyen mobil ekranlarda özellikle zor olabilir. Müşterileriniz bir satın alma yapmadan önce hayal kırıklığına uğrayabilir ve vazgeçebilir. Filtreler, aradıkları şeye göre seçimleri daraltmalarına yardımcı olur. Sıralama işlevi sağlamak için WooCommerce Ürün Filtreleri gibi bir uzantı deneyin.
• Yeterince büyük yazı tipleri kullanın . Web sitenizin metni çok küçükse, mobil kullanıcıların herhangi bir şeyi okuması çok zor olabilir - ürünleriniz hakkında bilgi edinmek için parmakları kıstırıp yakınlaştırmaları gerekmez. Sitenize ve yazı tipi seçimlerinize bağlı olarak mobil cihazlar için farklı yazı tipi boyutları belirlemeniz gerekebilir.
• Metni parçala. Çok fazla bilgi içeren sayfalarınız varsa, bunları küçük ekranlarda gezinmesi daha kolay olan daha küçük bölümlere ayırın. Bunu akordeonlar, geçişler veya madde işaretleri ile yapabilirsiniz. Uzun blog gönderilerinde, kullanıcıların doğrudan ilginç konulara atlamasına olanak tanıyan alt bölümlere bağlantılar ekleyin.

Ödeme sayfasını basitleştirin

Mobil cihazlarda alışveriş yıllar içinde önemli ölçüde artarken, dönüşümler o kadar büyük değil. Aslında, mobil cihazlarda ortalama e-ticaret dönüşüm oranı, masaüstüne kıyasla %3,83 iken yalnızca %2,03'tür.

Ödeme süreciniz satış yapmak için kritik bir rol oynar. Dönüşüm oranlarını artırmak için mobil cihazlarda mümkün olduğunca basit hale getirin. Müşterilerinizin satın alma işlemi çok uzun sürerse, vazgeçip başka bir yerden alışveriş yapacaklardır.

Gereksiz alanları kaldırın

Ödeme için ihtiyaç duyduğunuz bilgilere yakından bakarak başlayın. Her şey gerekli mi? Muhtemelen kaldırabileceğiniz alanlar olduğunu göreceksiniz:

• İşletmelere satış yapmıyorsanız, Şirket Adı alanını kaldırın.
• Aklınıza müşterilerinizi aramanız gerekebilecek bir senaryo gelmiyorsa Telefon alanını kaldırın.
• Notları kabul etmiyorsanız, Sipariş Notları alanını kaldırın.

Özellikle mobilde ne kadar az alan o kadar iyi. WooCommerce ödeme alanlarının nasıl özelleştirileceği hakkında daha fazla bilgi edinin.

Misafir ödemesine izin ver

Müşteri hesapları harikadır ve bilgilerini otomatik olarak doldurarak ve kredi kartı verilerini kaydederek tekrar alışveriş yapanların ödeme işlemlerini hızlandırır. Peki ya yeni müşteriler?

Herkes mağazanızda, özellikle de mümkün olduğunca çabuk kontrol etmek istedikleri mobil cihazlarda bir hesap oluşturmak istemez. Aslında, müşteri hesaplarına ihtiyaç duymanın, terk edilen sepetlerin %35'ine katkıda bulunduğu düşünülmektedir.

WooCommerce ile misafir ödemesine izin vermek için:

1. WooCommerce → Ayarlar → Hesaplar ve Gizlilik'e gidin.
2. Müşterilerin hesap olmadan sipariş vermesine izin ver'i seçin.
3. Sayfanın altındaki Değişiklikleri Kaydet düğmesini tıklayın.

Misafir ödemesinin mağazanız için doğru olup olmadığını nasıl belirleyeceğinizi öğrenin.

Sosyal girişi kabul et

Müşterileriniz muhtemelen mobil cihazlarında sosyal medya hesaplarına giriş yapmıştır. Sitenizde sosyal oturum açmayı etkinleştirmek, ödeme işlemini basitleştirmek ve yeni bir hesap oluşturmak zorunda kalmalarını önlemek için Facebook, Twitter, Google, Amazon ve daha fazlasını kullanarak oturum açmalarına olanak tanır.

WooCommerce Sosyal Girişi'ni etkinleştirin.

Birden fazla ödeme seçeneğini kabul edin

Birden fazla ödeme şeklinin kabul edilmesi, ödeme işlemini hızlandırır. Kredi kartı işlemlerine de izin verebilirsiniz, ancak PayPal veya Amazon Pay gibi seçenekleri etkinleştirmek, müşterilerin bir kredi kartı çekip tüm ayrıntıları yazmak yerine mevcut hesaplarını kullanarak ödeme yapmalarına olanak tanır.

WooCommerce ödeme ağ geçidi entegrasyonlarını görüntüleyin

Ödeme alanlarını yeterince uzun yapın

Müşterilerin sitenizdeki ödeme alanlarını kolayca doldurabilmesi önemlidir. Alanların, yakınlaştırmaya gerek kalmadan dokunup bilgileri doldurmaları için yeterince uzun olduğundan emin olun. Bunu basit bir CSS ile yapabilirsiniz.

Ödeme sayfanızdaki tarayıcı denetçisini kullanarak başlayın. Bu, her bir alanın sınıfını belirlemenize yardımcı olacaktır. Ardından, her bir sınıf için aşağıdaki kodu kullanın; E-posta alanı bu örnekte kullanılmıştır.

 /** Customize height of checkout fields **/ input[type='email'].input-text{ padding: 100px !important; }

Özel sitenize ve mevcut ayarlara göre dolguyu ayarlayın; Neyin işe yaradığını bulmak için biraz oynamanız gerekebilir. Medya sorgularını kullanarak bu kodun geçerli olduğu belirli cihazları da özelleştirebilirsiniz.

Not: Kod konusunda bilginiz yoksa ve olası çakışmaları çözüyorsanız, yardım için bir WooExpert veya Geliştirici seçmek isteyebilirsiniz. Destek Politikamız kapsamında özelleştirmeler için destek sağlayamıyoruz.

Ürün sayfalarını düzenle

Bireysel ürün sayfalarınızın da duyarlı olması önemlidir. Müşteriler ürün ayrıntılarını okuyabilmeli, fotoğrafları çevirebilmeli ve sepetlerine ürün ekleyebilmelidir.

Sepete Ekle düğmesini yapışkan yapın

Yapışkan bir Sepete Ekle düğmesi, müşteriyi ürün bilgilerini okurken sayfada takip eder. Satın almaya ikna olurlarsa, satın alma işlemi yapmak için tamamen yukarı kaydırmak zorunda kalmazlar. Aslında, yapışkan bir Sepete Ekle düğmesinin siparişleri %7,9 artırdığı gösterilmiştir! Düğmenizi mobil cihazlarda yapışkan hale getirmek için bu CSS'yi ekleyin:

 /** Make the Add to Cart button sticky **/ @media only screen and (max-width: 900px) { .cart { position: fixed; bottom: 0; background: #ffffff; width: 100%; z-index: 3; } }

Temanıza ve web sitesi tasarımınıza bağlı olarak CSS ile biraz oynamanız gerekebilir. Ancak kodu düzenlemek istemiyorsanız, WooCommerce için Sticky Add to Cart gibi bir eklenti de kullanabilirsiniz.

Görüntüleri sezgisel hale getirin

Müşteriler bir ürün sayfasına geldiklerinde, daha fazla fotoğraf görüntülemek için resim galerinizi kaydırabilmeyi ve bir öğeyi yakınlaştırmak için parmaklarını kullanabilmeyi umarlar. Bu mobil hareketler o kadar sezgisel ki neredeyse bilinçaltında yapılıyor. Sitenizin bunları desteklediğinden emin olun.

Birden fazla fotoğraf olduğunu belirtmek için oklar veya noktalar ekleyin. Aksi takdirde, mobil kullanıcılarınız kaydırabileceklerini bile bilmiyor olabilir!

Önemli bilgilere öncelik verin

Müşterilerin çok fazla kaydırmak zorunda kalmadan kritik ürün bilgilerini görüntüleyebildiğinden emin olun. Ürünlerinize özel fiyatlara, varyasyonlara (renk, beden vb.), indirimlere, incelemelere ve diğer ayrıntılara öncelik verin: Giysi satıyorsanız, malzeme önemli olabilir. Veya bir elektronik mağazasıysanız, her satın alma işlemiyle birlikte gelen garantiyi vurgulamak isteyebilirsiniz.

Tam ürün açıklamaları ve özellikleri (yıkama talimatları, SKU'lar, malzemeler vb.) gibi ek bilgiler sayfanın daha aşağılarına düşebilir. Bu şekilde, müşterileriniz daha fazla bilgi isterse, kolayca bulabilirler, ancak yalnızca temel bilgilerden memnunlarsa bunalmazlar.

Mobil menünüzü basitleştirin

Mobil cihazlarda birincil menünüzü olabildiğince basit tutun. Uzun bir sayfa listesi, site ziyaretçilerini bunaltacak ve kafasını karıştıracaktır. Temel öğelere kadar daraltın, ardından en önemli sayfalar önce olacak şekilde listelendikleri sıraya göre öncelik verin.

Good Batch, mobil menülerini, Giriş ve Sepet bağlantılarına ek olarak yalnızca beş sayfa içerecek şekilde kısaltır. Bu basit ve konuya.

Çok sayıda sayfa eklemeniz gerekiyorsa, genişletilebilir geçişli alt menüleri kullanmayı deneyin. Birincil menü öğelerini sınırlayın ve bir kullanıcı her birini genişlettiğinde alt menü öğelerini gösterin. Bir menünün genişlediğini belirtmek için ok gibi semboller kullandığınızdan emin olun!

Nuria, cep telefonunda her birinin yanında oklarla birlikte daha fazla seçenek olduğunu gösteren beş ana menü öğesi sunar. Bir kullanıcı tıkladığında, birincil menü kayar ve net bir "geri" düğmesi olan bir alt menüyü ortaya çıkarır. Bu, müşterilerini bunaltmadan gerekli tüm seçenekleri göstermelerini sağlar.

Mobil menüleri görüntülemenin birkaç yolu vardır, bu nedenle hedef kitleniz için en iyi olanı seçin. İçerirler:

• Bir hamburger menüsü . Hamburger sembolü, üst üste dikey olarak yığılmış üç satırdır. Menü, kullanıcı simgeye tıklayana kadar gizlenir. Bu, çok sayıda sayfası olan siteler için harika bir seçenektir ancak site ziyaretçilerinin bulması daha zor olabilir.
• Bir sekme menüsü . Bu, tipik masaüstü gezinmesine çok benzer ve menü öğelerini sitenin üst kısmında yatay olarak listeler. Bu, yalnızca minimum bağlantı içeren menüler için kullanılmalıdır; kullanıcıların tüm öğeleri görüntülemek için yakınlaştırması veya kaydırması gerekmemelidir.
• Yüzen bir eylem düğmesi . Menü simgesi olan bir düğme sayfada yüzer ve kullanıcıyı kaydırdığında takip eder. Tıklandığında menüyü gösterecek şekilde genişler. Bu, birincil menünüzü erişilebilir tutmanın iyi bir yoludur, ancak dikkat dağıtıcı olabilir veya içeriğin üzerini kapatabilir.
• Bir açılır menü . Sayfa seçeneklerini görüntülemek için tıklandığında sayfanın üst kısmında bir menü çubuğu açılır. Hamburger menüsüne göre biraz daha fazla yer kaplar ancak site ziyaretçileri tarafından daha kolay görülebilir.

Tipik olarak, temanız duyarlı menü stillerini içerecektir. Olmazsa veya farklı bir seçenekle gitmek istiyorsanız, şu eklentilere göz atın:

• WP Mobil Menü
• ShiftNav
• Duyarlı Menü

Hangi seçeneği seçerseniz seçin, müşterilerinizin kullanmasının kolay olduğundan ve ihtiyaçlarına uygun olduğundan emin olun. Ve unutmayın, bu tamamen ayrı bir mobil menü oluşturmak anlamına gelebilir!

Önemli özelliklerin bulunmasını kolaylaştırın

Mobil cihazlarda sınırlı ekran alanı sayesinde eşyaların kaybolması kolaydır. Ziyaretçilerin kritik işlevleri hızla bulabildiğinden emin olun.

Arama çubuğunu görünür yap

Birçok web sitesi kenar çubuğunda bir arama kutusu içerir, ancak bu genellikle mobil cihazlarda sayfanın en altına itilir. Masaüstü başlığınızdaki arama işlevi, telefondaki aynı alana sığmayabilir. Ancak, istedikleri ürünü arama yeteneğinden yararlanabilecek çevrimiçi alışveriş yapanlar için kritik bir işlevdir.

Harika bir çözüm, arama çubuğunu alışveriş yapanların kolayca görebileceği şekilde mobil menünüze eklemektir. Bazı temalar bu işlevsellik için bir ayar sunar, ancak sizinki yoksa, aynı şeyi özel kod kullanarak da yapabilirsiniz.

header.php dosyanızı açın ve aşağıdaki işlevi ekleyin: <?php get_search_form(); ?> <?php get_search_form(); ?> . Ardından, CSS kullanarak ihtiyaçlarınıza göre şekillendirebilirsiniz.

Ve koda dokunmak istemiyorsanız, Ivory Search gibi bir eklenti aynı işlevi görür.

İletişim bilgilerini net bir şekilde görüntüleyin

İletişim bilgilerini bir altbilgiye veya kenar çubuğuna eklerseniz, mobil kullanıcılar sayfanın en altına kaydırmak zorunda oldukları için görüntülemekte zorlanırlar. Menüde iletişim sayfanıza görünen bir bağlantıyla bunu karşılayın.

Ayrıca, kullanıcıların kolayca iletişim kurabilmesi için birincil menünüze tıklanabilir bir telefon numarası ve/veya e-posta adresi eklemek isteyebilirsiniz. Bunu yapmak için:

1. WordPress kontrol panelinizde Görünüm → Menü'ye gidin.
2. "Düzenlemek için bir menü seçin"in yanındaki açılır menüden doğru menüyü seçin. Bu, ayarları nasıl yaptığınıza bağlı olarak ya birincil menünüz ya da mobil menünüz olacaktır.
3. Sol sütundaki Özel Bağlantıları genişletin.
4. URL kutusuna uygun bağlantıyı ekleyin. Bir telefon numarası için tel:+18005553927 ekleyin ve numaraları kendi numaranızla değiştirin. Boşluk veya başka simgeler olmadığından emin olun. Bir e-posta adresi için mailto:[email protected] adresini ekleyin.
5. Bağlantı Metni kutusuna menünüzde görüntülenecek metni ekleyin. Örneğin, "Bizi Arayın" veya "800-555-3927'yi Arayın" diyebilirsiniz.
6. Menüye Ekle düğmesini tıklayın ve seçtiğiniz konuma sürükleyin.
7. Sağ alt köşedeki mavi Menüyü Kaydet düğmesini tıklayın.

Bir kullanıcı mobil cihazında telefon numarasına tıkladığında otomatik olarak sizi arayacaktır. E-posta adresinizi tıkladıklarında, varsayılan e-posta uygulamasında size yeni bir e-posta açılacaktır.

Sepeti kolayca erişilebilir hale getirin

Bir müşteri, sepetine bir ürün ekledikten sonra alışverişe devam etmek isterse, bu sepeti düzenleyebilmesi ve daha sonra kontrol edebilmesi önemlidir.

WooCommerce için Mini Sepet Eklentisi, web sitenizin hem masaüstü hem de mobil sürümlerine bir sepet seçeneği ekler. Masaüstünde, alışveriş sepeti ürün adlarını, fotoğrafları ve fiyatları içerir ve alışveriş yapanların sayfadan ayrılmadan miktarları düzenlemesine olanak tanır. Mobilde, sepetteki ürün sayısını ve sipariş toplamını gösterir. Ayrıca, alışveriş yapanlar tek bir tıklamayla Sepet sayfasına gidebilirler.

Web sitesi hızına odaklanın

Web sitesi hızı herhangi bir cihazda önemli olsa da, küçük cihazlar için tartışmasız daha önemlidir. Mobil alışveriş yapanlar, göz atmak için genellikle daha yavaş internet bağlantılarını veya hücresel verileri kullanır, bu nedenle sitenizin mümkün olduğunca çabuk yüklendiğinden emin olmak için elinizden gelen her şeyi yapmalısınız. Mobil kullanıcıların %53'ü, yüklenmesi üç saniyeden uzun sürerse bir siteyi terk eder ve Google'ın yeni mobil öncelikli dizine ekleme özelliği, web sitenizin mobil sürümüne öncelik verir.

Sitenizin mevcut yükleme süresini anlayarak başlayın. GTMetrix ve Pingdom Web Sitesi Hız Testi, sitenizin hızını anlamanıza ve iyileştirme önerileri sunmanıza yardımcı olabilir. Google PageSpeed ​​Insights, özellikle mobil cihazlar için bir test bile sunar.

Ardından, sitenizi optimize etmek için aşağıdaki kaynakları kullanın:

• Çevrimiçi Mağazanızı Hızlandırmak için Görselleri Nasıl Optimize Edebilirsiniz?
• WooCommerce ve Hız ile Dikkate Alınması Gereken İlk Şeyler
• WooCommerce Sitem Neden Yavaş ve Nasıl Düzeltilir?
• WooCommerce için Google PageSpeed ​​Insights'ta Yüksek Performans Puanı Nasıl Elde Edilir
• Bu Jetpack Özellikleriyle WooCommerce Sitenizi Hızlandırın

Ayrıca, Google tarafından hafif, akıcı mobil deneyimler oluşturmak için oluşturulmuş bir çerçeve olan AMP'yi (Hızlandırılmış Mobil Sayfalar) etkinleştirmeyi de düşünebilirsiniz. Özellikle belirli çevrimiçi mağazalar için blog gönderilerini hızlandırmanın harika bir yolu. AMP ile site hızını artırma hakkında daha fazla bilgi edinin.

Online mağazanızı mobil cihazınızda test edin

Mağazanızı düzenli olarak test etmek ve mobil cihazlarda her şeyin nasıl çalıştığını anlamak önemlidir. Sitenizin süreci, tema demolarını test etmek için yukarıda listelenen adımlara benzer - Google'ın mobil uyumlu testi gibi araçların bir kombinasyonunu ve tarayıcı pencerenizi yeniden boyutlandırma gibi manuel yöntemler kullanın.

Her şeyi test edin! Her bağlantıya tıklayın; her sayfada gezinin; ve her bir işlevsellik parçasını kontrol edin. Sitenizin tüm yönleri telefonlarda ve tabletlerde kolayca görüntülenebilir, okunabilir ve gezinilebilir olmalıdır.

Mobil cihazlarda yapılacak birkaç küçük değişiklik, müşteri memnuniyeti ve dönüşümlerde büyük fark yaratabilir. Daha fazla ipucu mu arıyorsunuz? Mobilde WooCommerce'in Gücünün Kilidini Nasıl Açacağınızı Okuyun.