Aşağıdaki makale size yardımcı olacaktır:Daha İyi Ecomm Deneyimleri Nasıl Yaratılır?
E-ticaret mağazanızın tasarımı, yüklendiği sayfaya göre önemli ölçüde değişiklik gösterir. Masaüstü kullanıcıları, mobil tarayıcılardan çok farklı bir arayüze sahip olurlar. Peki biri gerçekten diğerinden daha mı önemli?
Kısa cevap: evet.
Araştırmalar gösteriyor ki neredeyse %70 Artık dünya nüfusunun yarısından fazlası cep telefonuna sahip.
Üstelik bunları yalnızca arkadaşlarımızla iletişim kurmak için kullanmıyoruz; 2025 yılına kadar ABD’deki tüm e-ticaret satışlarının %10’undan fazlası mobil cihazlar üzerinden gerçekleşecek.
Mobil odaklı bir tasarım, mobil alışveriş yapanlara öncelik veriyor.
Masaüstünde bir web sitesi oluşturmak ve tüm müşterilerin aynı deneyimi yaşayacağını varsaymak yerine, öncelikle mağazanızın mobil cihazda nasıl göründüğüne ve nasıl hissettiğine odaklanır.
Nereden başlayacağınızdan emin değil misiniz?
#cta-visual-pb#
Mobil öncelikli tasarım nedir?
Mobil öncelikli tasarım, web sitelerinin öncelikle mobil cihazlar için tasarlandığı bir konsepttir. Orijinal tel çerçeveden web geliştirmenin oluşturulmasına kadar her şey mobil cihazlarla ön planda tutularak yapılır.
Mobilin ikinci bir düşünce olduğu masaüstü öncelikli tasarımın aksine, mobil öncelikli konseptin popülaritesi artıyor. Bu, internete cep telefonu aracılığıyla erişen insan sayısının arttığını yansıtıyor.
Mobil öncelikli tasarım ve duyarlı web tasarımı
Mobil öncelikli tasarım, duyarlı web sitesi tasarımından biraz farklıdır; ikincisi, bir web sitesinin içeriğini, görüntülendiği ekran boyutuna göre otomatik olarak yeniden boyutlandırır.
Shopify ve BigCommerce de dahil olmak üzere çoğu e-ticaret platformunun üzerinde yinelenecek duyarlı temalar vardır.
Mobil öncelikli web tasarımı yaklaşımı, bir çevrimiçi mağazanın mobil versiyonunun önce tasarlanması anlamına gelir. Bu her zaman sitenin varsayılan olarak duyarlı olduğu anlamına gelmez.
İdeal senaryo, hem mobil öncelikli hem de duyarlı bir web sitesidir; mobil öncelikli duyarlı tasarım.
Dolayısıyla, mağazanıza mobil cihazlardan erişen kişiler için kullanıcı deneyimine öncelik veriyor olsanız da tasarım, masaüstü ziyaretçiler için otomatik olarak yeniden boyutlandırılır.
#cta-mini-pb#Mobil tasarım 101: Web sitenizin mobil deneyimini nasıl optimize edeceğinizi ve dönüşümleri nasıl artıracağınızı öğrenin. Web seminerini izleyin
Mobil öncelikli tasarım e-ticaret markaları için neden önemlidir?
Masaüstü artık web sitesi trafiği açısından üstün değil. Araştırmalar şunu gösterdi neredeyse %60 İnternet trafiğinin büyük bir kısmı mobil üzerinden gerçekleşiyor.
Mobil öncelikli tasarım, en büyük hedef kitlenizin kullanıcı deneyimine öncelik verir.
Mobil ziyaretçilerin kullanıcı deneyimine öncelik verdiğinizde, içerik en büyük potansiyel müşteri tabanınız için daha erişilebilir olacaktır.
Bu kusursuz kullanıcı deneyimi, herhangi bir ölçeklendirme markası için daha fazla gelir elde etmenin anahtarıdır.
“Sitemizin temiz olmasını, gezinmesinin kolay olmasını ve tüm cihazlarda tutarlı bir görünüme sahip olmasını sağladık. Ayrıca müşterilerin hareket halindeyken sayfaları hızlı bir şekilde yükleyebilmesini sağlamak için hızı da optimize ettik. Sonuçlar? Yalnızca mobil dönüşüm oranımızda artış görmekle kalmadık, aynı zamanda genel gelirimizde de artış gördük.”
—James Smithkurucu ortağı Gençler
Ayrıca mobil odaklı bir tasarım, e-ticaret web sitenizi daha erişilebilir hale getirebilir. Mobil cihazlar için tasarım yaparken kontrast, renk ve metin gibi tasarım öğelerine odaklanmak ADA standartlarını karşılamanıza yardımcı olur.
Mobil öncelikli tasarımın son büyük faydası, e-ticaret satıcılarının arama motorlarında hedef müşterileriyle buluşmasına yardımcı olabilmesidir.
Bazı Google aramalarının %64’ü artık mobilde oluyor.
Sonuç olarak Google, Mobil Öncelikli Dizine Ekleme algoritmasımobil uyumlu tasarımın arama sıralamalarındaki önemini açıkça gösteriyor.
Kurucu ortak Maria Harutyunyan Loopex Dijitale-ticaret mağazası mobil uyumlu olmayan ve mobil arama sonuçlarında sıralamanın kötü olmasına neden olan bir müşteri için bunu uygulamaya koyduk.
Ekip web sitesini şu şekilde yeniledi:
- Siteyi duyarlı hale getirmek
- Gecikme süresini azaltmak için görselleri ve videoları optimize etme
- Gezinmeyi daha akıcı ve erişilebilir hale getirdik
Maria, “Bu değişiklikleri uyguladıktan sonra müşterimizin genel dönüşüm oranında önceki yıla göre %40 oranında bir artış gördük” diyor.
“Ayrıca, Google’ın mobil öncelikli Dizine Ekleme politikası güncellemesi yoluyla daha iyi mobil dostu performans nedeniyle organik arama sıralamalarında da bir artış olduğunu fark ettik; bu, akıllı telefonlar ve tabletlerdeki kalitesiz tasarımların neden olduğu daha yüksek hemen çıkma oranları nedeniyle gelir kaybını büyük ölçüde azalttı.”
Mobil öncelikli tasarımı uygulamaya yönelik en iyi uygulamalar
- Sayfa yükleme hızını azaltın
- Dikey görseller kullanın
- Pop-up’ları sınırlayın
- Web sitenizin navigasyonunu yığınlayın
- Büyük, parmak dostu düğmeler kullanın
- Yapışkan CTA’larla denemeler yapın
- Tasarımınızı farklı cihazlarda test edin
#cta-mini-pb#Mobil öncelikli tasarımı Sayfa Oluşturucu ile test etmek ister misiniz? Ücretsiz oluşturmaya başlayın
1. Sayfa yükleme hızını artırın
Mobil sayfa hızı, pazarlamadan başlayarak müşteri deneyiminin tüm yönleri üzerinde domino etkisi yaratır.
Google gibi arama motorlarının, yavaş yükleme hızına sahip web sitelerini cezalandırdığı ve bunun da daha az sıralamaya yol açtığı bilinmektedir. (Ve hepimiz e-ticaret tüccarları için SEO’nun değerini biliyoruz.)
Üstelik 2018’de, Google Olumsuz bir mobil deneyimi olan kişilerin gelecekte sizden alışveriş yapma olasılığının %62 daha düşük olduğunu buldu.
Bu nedenle, mobil yükleme sürelerindeki yalnızca bir saniyelik gecikmenin, mobil dönüşümleri %20’ye kadar azalttığı kanıtlanmıştır.
Bu birkaç yıl önceydi. Teknoloji, tüketici beklentileri gibi hızlı ilerliyor.
Sitenizin yüklenmesinin ne kadar sürdüğünü test edin Google Sayfa Hızı Analizleri. İlk içerikli boyama, hız endeksi ve toplam engelleme süresi gibi temel yükleme ölçümlerini Shogun tarafından önerilen şu ölçütlerle karşılaştırın:
Mobil sayfa yükleme hızınız istediğinizden yavaşsa aşağıdakileri yaparak mobil deneyimleri daha hızlı hale getirin:
- Kodu en aza indirme. Tarayıcıların aşırı kodu işlemesi için daha fazla zamana ihtiyacı vardır. HTML, JavaScript ve CSS kodunu küçültün. (Bu kod gerekliyse tarayıcı önbelleğe almayı etkinleştirin, böylece birisi web sitenizi her yeniden ziyaret ettiğinde aynı kodun yeniden yüklenmesine gerek kalmaz.) Bazı e-ticaret platformları; Shopifybunu otomatik olarak yapın.
- Görüntülerin sıkıştırılması. Mobil uyumlu web sitelerinde, daha küçük bir ekranda açıkça anlaşılabilen büyük resimler, animasyonlar veya videolar bulunur. Bu görüntülerin sıkıştırılması her zaman görüntü kalitesini etkilemez; yalnızca dosya boyutunu küçültür, dolayısıyla yükleme süreleri artar.
- Gereksiz uygulamaların kaldırılması. Shopify ve BigCommerce’in her biri, perakendecilere pazarlamadan envantere kadar her konuda yardımcı olmayı vaat eden yüzlerce üçüncü taraf uygulamasına sahiptir. Ancak çok fazla uygulama yükleme sürelerini yavaşlatabilir; Backlinko, bir sayfaya eklenen her üçüncü taraf komut dosyasının yükleme süresini artırdığını buldu. 34,1 milisaniye. Web sitenize yüklenen uygulamaları denetleyin ve gerekli olmayanları kaldırın.
2. Dikey görseller kullanın
Ağırlıklı olarak mobil kullanıcıların kullandığı sosyal medya platformları dikey görsellere yabancı değil.
Bu tür yığılmış görüntüler yatay olarak düzenlenir ve ekranın tamamını kaplar, çoğu zaman izleyiciyi kaydırmayı bırakıp kendilerini içeriğe kaptırmaya zorlar.
Çevrimiçi alışveriş yapanlar için mobil odaklı bir deneyim oluştururken de benzer bir yaklaşım benimseyin. E-ticaret ürün sayfalarınızda görseller, videolar veya incelemeler gibi dikey içerik kullanın.
Almak iHeartRaves, Örneğin. Kurucusu ve CEO’su Brian Lim şunları söyledi:
“iHeartRaves’e dahil ettiğimiz en büyük değişiklik, ürün incelemeleri ve geri bildirimler gibi kullanıcı tarafından oluşturulan içeriğin mobil cihazlarda daha kolay erişilebilir hale getirilmesidir.”
Brian, “Müşterilerimizin satın aldıkları ürünleri taşıyan fotoğraflarının yanı sıra, tüm ürün görsellerimizin ve açıklamalarımızın herhangi bir yatay kaydırma olmadan mobil ekrana sığmasını sağladık” dedi. “Ayrıca belirli övgü kıyafetlerinin ve aksesuarlarının ilgili bağlantılarını her incelemenin alt kısmına yerleştirdik, böylece mobil cihazdan ürün satın almayı kolaylaştırdık.”
3. Açılır pencereleri sınırlayın
Pop-up’lar, indirim kodları sunmaktan gelecekte yeniden hedefleme için kullanabileceğiniz e-posta adreslerini toplamaya kadar çeşitli amaçlara hizmet eder.
Ancak unutmayın: Mobil öncelikli tasarım, mobil alışveriş yapanların deneyimine öncelik verir. Bu kişiler e-ticaret mağazanızı daha küçük bir ekrana yüklüyor.
Pop-up’lar, yalnızca birkaç alana sahip olanlar bile, mobil ziyaretçilerin dikkatini satın alma konusunda dağıtabilir.
Yoğun mobil ziyaretçileri önlemek için pop-up stratejinizi dikkatlice denetleyin. Bu şu anlama gelebilir:
- Açılır pencereleri belirli sayfalarla sınırlama. Bir ürün sayfasının amacı birisinin satın almasını sağlamaktır. Kullanıcıyı görevde tutmak için bu sayfadaki pop-up’ları kaldırmayı ve bunun yerine bunları mobil açılış sayfalarına (ana sayfanız veya hakkında sayfanız gibi) uygulamayı düşünün.
- Tetikleyicileri kullanma. Mobil kullanıcılara, bir açılır pencereyle karşılaşmadan önce web sitenizle etkileşimde bulunmaları için birkaç saniye verin. Çıkış amacı (ziyaretçi sitenizden ayrılmak üzere olduğunu işaret ettiğinde görünür) veya zamanlı açılır pencereler (30 saniye gibi belirli bir süre sonra görünür) gibi tetikleyicilerle denemeler yapın.
- Açılır kutunun küçültülmesi. Pop-up kullanımını sınırlamak istemiyorsanız müşterilerinize bunu en aza indirme seçeneğini sunun. Bu şekilde, sayfa içeriğinizi okuduktan sonra daha önce çıktıkları açılır pencereyi tekrar ziyaret edebilirler.
SUNNYLIFE mobil öncelikli tasarım yaklaşımıyla bu yaklaşımı kullanan bir DTC markasıdır. Tasarım ajansıyla çalıştı Yaratıcı (ve Shogun!) Ürün sayfalarını test etmek ve yeniden tasarlamak için.
E-ticaret mağazasının mobil web sitesinde, ad ve e-posta adresi karşılığında %10 indirim sunan küçük bir açılır pencere bulunur.
Açılır pencereyi dikkat dağıtıcı bulan müşteriler bunu en aza indirebilir. Ancak fikirlerini değiştirirler ve indirim isterlerse ürün sayfasının alt kısmında yer alan “%10 indirim kazanın” butonuna tıklayabilirler.
4. Web sitenizdeki gezinmeyi yığınlayın
Web sitenizdeki gezinme, muhtemelen e-ticaret mağazanızın en önemli unsurlarından biridir. Web sitenizdeki insanlara rehberlik ederek aradıkları ürünleri bulmalarına yardımcı olan haritadır.
Bunalmayı önlemek için mobil navigasyonunuzu yalnızca en önemli kategorilerinize bağlantı verecek şekilde yığınlayın.
Müşterilerin daha fazla arama işlevselliğine ihtiyacı varsa, ana seçeneğe tıklandığında görünen klasörlerdeki alt kategorileri gizleyin.
Devasa Şeker bunu mobil menüsüyle hayata geçirin. Ana gezinme çubuğu, genellikle herhangi bir sayfadan her zaman erişilebilen masaüstü gezinmenin aksine, yığılmış ve gizlenmiştir.
İçerik önceliklidir ancak arama işlevi, ihtiyacı olanlar için mevcuttur. Her ürün sayfasının ayrıca kendi navigasyonu vardır.
Belirli bir çikolata çeşidine göz atan müşteriler, aramalarına gerek kalmadan, kendi damak zevklerine daha uygun olan diğer tatları hızla görüntüleyebilir ve bunlara geçiş yapabilir.
5. Büyük, parmak dostu düğmeleri kullanın
Bir mobil web sitesini kaç kez ziyaret ettiniz ve yanlışlıkla yanlış düğmeye tıkladınız?
Alışveriş deneyiminiz rotadan çıkar. Karşılık veriyorsunuz, bulunduğunuz bölümü bulmaya çalışıyorsunuz ve sağ tuşa basıyorsunuz.
Küçük düğmeler kullanıcıları “yağlı parmak sendromu”—kullanıcının parmağı neyi tıklattığını göremeyecek kadar büyük olduğunda meydana gelen bir sorun. Ya düğmeyi tamamen kaçırıyorlar ya da yanlış öğeye basıyorlar.
Parmak dostu düğmeler, e-ticaret web sitenizdeki bu sinir bozucu kullanıcı deneyimini önlemeye yardımcı olur.
Düğmeleri en az 45 piksel genişliğinde yaparak mobil öncelikli tasarım yaklaşımınızla bu sorunu düzeltin; ortalama kullanıcının parmak genişliği. Oynamak için daha fazla alanınız varsa, bir kişinin başparmağının yüzey alanı olan 72 piksel genişliğe sahip başparmak tıklama cihazlarını tercih edin.
Örneğin, Merhaba Sağlık çevrimiçi mağazasında “sepete ekle” düğmelerinden karşılaştırma değiştiricilere kadar çeşitli harekete geçirici mesajlar (CTA) kullanıyor. Bu butonların her biri “şişman parmak sendromu” yaşayan kullanıcıların olumsuz bir kullanıcı deneyimi yaşamasını önleyecek kadar büyük ve aralıklı.
6. Yapışkan harekete geçirici mesajlar ile denemeler yapın
E-ticaret web tasarımı için en iyi uygulama, alışveriş yapanları sayfanın neresinde olursa olsun bekleyen bir harekete geçirici mesaja (CTA) sahip olmaktır.
Mobil öncelikli bir tasarımla bu zor olabilir.
Zaten daha küçük bir ekranla çalışıyorsunuz. Çok fazla düğme, kullanıcı deneyimi üzerinde ters etki yaratabilir ve müşterilerin sayfanın ana içeriğini okumasını engelleyebilir.
Kullanıcı kaydırırken sayfanın ana CTA’sının sayfaya yapışmasını sağlayarak, mobil öncelikli mağazanızda bu sorunu çözün.
SırtRFID engelleyici cüzdanlar satan bir DTC markası, ürün sayfalarında yapışkan bir CTA kullanıyor. Mobil ekranın altındaki küçük, yüksek kontrastlı banner, “sepete ekle” düğmesinin sürekli görünür olmasını sağlar.
Kullanıcı sayfanın neresinde olursa olsun, istenilen sonuç her zaman açıktır.
7. Tasarımınızı farklı cihazlarda test edin
Mobil öncelikli tasarımın en büyük zorluğu çoğu tasarımcının masaüstünden çalışmasıdır.
Mobil öncelikli tasarımınızı dünyaya sunmadan önce, iPhone, Android veya Google Pixel telefonlar da dahil olmak üzere çeşitli mobil cihazlarda düzgün görünüp görünmediğini ve düzgün çalışıp çalışmadığını test edin. Her cihazın farklı ekran boyutu vardır ve bu nedenle web sayfalarını farklı görüntüler.
Ancak test edilmesi gereken yalnızca mobil cihazlar değil.
Farklı cihazların yanı sıra, e-ticaret mağazanızın tasarımının farklı tarayıcılarda çalışıp çalışmadığını kontrol edin. Google Chrome, Safari’nin yanı sıra yapışkan CTA’nızı da gösteriyor mu? Çevrimiçi mağazanıza Microsoft Edge aracılığıyla erişen müşteriler, Firefox ziyaretçilerinizin yaşadığı açılır pencere deneyiminin aynısını mı yaşıyor?
Son olarak, henüz mobil öncelikli tasarımınızı tüm müşteri tabanınıza yayınlamaya hazır değilseniz (veya riski en aza indirmek istediğiniz büyük bir siteniz varsa) Shopify mağazanızda bir A/B testi çalıştırın.
Sayfaları bir kontrol ve değişken grubuna bölerek ziyaretçilerin yeni mobil öncelikli tasarımınızla nasıl etkileşimde bulunduğunu eski sürümle karşılaştırmanıza olanak tanır.
Nuun, her cihazda kusursuz kullanıcı deneyimleri sunmak için Shogun Sayfa Oluşturucu’yu kullanıyor.
Mobil öncelikli tasarım SSS’leri
Mobil öncelikli tasarımın dezavantajları nelerdir?
1. Mobil ekranlardaki gayrimenkuller sınırlıdır
2. Müşterilerin küçük bir yüzdesi hâlâ öncelikle masaüstü bilgisayarlardan alışveriş yapıyor
3. Tasarımcıların ve geliştiricilerin çoğu masaüstü bilgisayardan çalışıyor, bu da genellikle mobil öncelikli tasarımı zorlaştırıyor
Mobil öncelikli tasarım neden önemlidir?
Mobil öncelikli tasarım önemlidir çünkü en geniş müşteri kitlesine yönelik tasarım yapar. Çoğu e-ticaret etkinliği mobil cihaz aracılığıyla gerçekleşir; bu nedenle web sitenizi bu alışveriş yapanları göz önünde bulundurarak tasarlamanız mantıklı olacaktır.
Mobil öncelikli tasarımın tersi nedir?
Masaüstü öncelikli tasarım, mobil öncelikli tasarımın tam tersidir. Masaüstü kullanıcılarının deneyiminin mobil kullanıcılara göre öncelikli olduğu en geleneksel tasarım türüdür.
Mobil öncelikli mi yoksa mobil uyumlu mu kullanmalıyım?
E-ticaret sitelerinin mobil uyumlu olması artık yeterli değil. Mobil öncelikli, modern e-ticaret mağazaları için daha iyi bir seçenektir çünkü en büyük müşteri segmenti olan mobil alışveriş yapanlar için kullanıcı deneyimine öncelik verir.
Mobil öncelikli en iyi kesme noktaları nelerdir?
Kesme noktası, içeriğin yeniden boyutlandırılmasını tetikleyen ekranın genişlik değeridir. Shogun Page Builder’ı kullanan siteler, mobil cihazlarda içerik görüntülemek için 0px – 767px kesme noktalarını kullanır.
Önce mobil ile masaüstü öncelikli arasındaki fark nedir?
Her iki tasarım yaklaşımı arasındaki en büyük fark, önceliklendirildiği cihazdır. Mobil öncelikli tasarım, mobil kullanıcıların deneyimine öncelik veren bir konsepttir; masaüstü öncelikli tasarım ise kullanıcıların masaüstü sürümüne daha büyük bir ekrandan erişmesine öncelik verir.
Shogun ile mobil öncelikli yaklaşımınızı mükemmelleştirin
Mobil öncelikli tasarım artık benzersiz bir konsept değil.
Mobil cihazları aracılığıyla e-ticaret mağazalarına erişen insanların sayısı arttıkça, satıcıların web sitesi tasarım süreci boyunca bu müşterilere öncelik vermesi mantıklı geliyor.
CEO’su David Zhang olarak Kate Arka Planıözetliyor:
“Diğer e-ticaret satıcılarına sunabileceğim en iyi tavsiye, mobil deneyimi ihmal etmemektir. Bunu ihmal etmek satışları önemli ölçüde etkileyebilir; bu nedenle web sitenizin masaüstü ve mobil cihazlar için optimize edildiğinden emin olun. Önce mobil olun.”
#cta-visual-pb#
