E-Ticaret Mobil Sitenizin UX'ini Geliştirmenin Yolları

Birinin paylaştığı en iyi uygulamanın başkaları için en iyisi olmayabileceğini daima unutmayın. Bu en iyi uygulamalar eşit olarak oluşturulmamıştır, yalnızca başlangıç ​​noktalarıdır. Bu makale dizisinde, en çok araştırılan mobil site en iyi uygulamalarını veya yönergelerini inceleyeceğiz. Amacımız, şaşırtıcı mobil siteler geliştirme konusundaki bilgimizi genişletmek ve kullanıcıların bir mobil siteyi görünüm, netlik, güvenilirlik ve kullanılabilirlik gibi belirli bir boyutta nasıl algıladıklarına ilişkin nicel verilerle en iyi uygulamaları doğrulamaktır.

Uygulamanızda bu makale yönergelerini kullanmak en iyisi olacaktır, ancak sonuçta elde etmeniz gereken şey bu değildir. Optimizasyona başlamanız gereken yer burasıdır. En az bu yönergeler kadar iyi olmalısınız. Unutmayın, bunlar mevcut web uygulamalarıdır. 2 yıl önce işe yarayan şey artık çalışmayabilir. Taktik figür gerçektir. İnsanlar, web teknolojileri ve pazarlama trendleri her zaman değişiyor ve kazançlar her zaman bozulabilir.

Bu yönergeleri dikkate almanızı öneririz, ancak aynı zamanda belirli web sitenizin yönergelere nasıl uyduğunu veya onlardan nasıl farklı olduğunu da göz önünde bulundurmanızı öneririz. Bu uygulamaları hemen mobil sitenize uygulayabilirsiniz, ancak önce bunları test etmenizi öneririz. Her durumda uygulanmayabilirler. “E-Ticaret Mağazanızın Mobil Sitesinin UX'i Nasıl İyileştirilir?” bölümünün ilk bölümünü inceleyelim.

1. Önce Mobil Sitenizi Tasarlamayı Deneyin (Örn. Masaüstü Sitenizi Tasarlamadan Önce)

Satışlarımızda mobil cihazların önemini hepimiz biliyoruz. Satışların %50'den fazlası mobil cihazlardan yapılıyor. Mobil sitenizi tasarlamak ne eğlenceli ne de kolay. Sitenizi tasarlamaya başlamanın en akıllı yolu budur. Nedenini öğrenelim:

Kısıtlamalar, mobil cihazların diğer platformlardan daha yüksek olmasıdır. Ekranların boyutu daha küçüktür ve bant genişliği düşüktür ve diğer birçok kısıtlama vardır. Mobil siteyle sıfırdan başlarsanız, zarif bir bozulmayla (platformlar arasında çevrilmeyen işlevler veya yüklenmesi daha fazla zaman alan istenmeyen veriler gibi) gelen komplikasyonlardan kaçınılabilir.

Ardından, kullanıcı dostu bir mobil site temiz, sezgisel ve yüklenmesi hızlı olmalıdır. Bu gereksinimler tasarımcıları, kullanıcıların siteyi neden ziyaret ettiğini ve hangi içerik ve özelliklerin gerekli olduğunu anlamaya zorlar.
Mobil platformlarda daha iyi bir UX, kullanıcıların aradıkları her şeyi kolayca bulabilecekleri ve daha fazlasını bulabilecekleri anlamına gelir. Bunun yanı sıra, öncelikli içerik için net bir çerçeve geliştirmek, masaüstü site tasarlama iş yükünü azaltır.

2. Mobil Siteyi Otomatik Olarak Yönlendirin ve Sayfalar Mobil Optimize Edilmelidir

Mobil kullanıcı sayısı artmaya devam ediyor ve mobilden alışveriş yapanların sayısı artıyor. İnsanlar cep telefonlarından sık sık alışveriş yapmakta ve bunun kolay olmasını beklemektedir. Eğer ayak uyduramazsan, geride kalıyorsun.

Devam etmek için, e-ticaret sitesi tüm cihazlar için optimize edilmelidir. Optimize edilmiş bir mobil site, yani tamamen duyarlı bir mobil site ile daha iyi bir mobil deneyim sunun.

Duyarlı tasarım, web sayfalarının görüntülendiği ekrana göre ayarlandığı bir uygulamadır. Web sayfası içeriği, dizüstü bilgisayar, akıllı telefon, tablet, masaüstü vb. farklı cihazların ekranlarına otomatik olarak uyum sağlar. Bu yaklaşımla içerik ve işlevlerde herhangi bir değişiklik olmayacaktır.

Duyarlı bir site ile aynı URL tüm platformlara karşılık gelir. Bu, mobil cihazlar için ayrı URL'lerin olmayacağı ve kullanıcıların bu URL'lere yeniden yönlendirme yapmak için beklemesi gerekmediği anlamına gelir. Daha az yükleme süresi = daha iyi mobil deneyim . Ek olarak, tüm SEO tek bir URL'ye gider.

Uyarlanabilir bir site, duyarlı bir site gibidir, ancak herhangi bir ekran boyutu için tek bir düzen yoktur. Bunun yerine, farklı ekran boyutları için birden çok düzen vardır. Site, hangi cihazın kullanıldığını algılar ve ilgili düzeni görüntüler.

Duyarlı bir mobil site geliştirerek bu yönergeye ulaşmak kolaydır. Siteyi farklı platformlarda ve cihazlarda (farklı tarayıcılarla) QA yaptığınızdan emin olun. Ayrıca, mobil cihazlar için optimize edildiğinden emin olmak için sitedeki tüm sayfaları kontrol edin. Buradaki anahtar, mobil kullanıcılar için en uygun kullanıcı deneyimini sunmaktır.

3. Daha Sorunsuz Bir UX İçin Farklı Platformlarda Tutarlı Tasarım

Kullanılabilirliği sağlamak için tüm platformlarda ve cihazlarda tutarlılığı ve standardı korumanız gerekir. Bu, kullanıcıların kullandıkları cihazdan bağımsız olarak e-ticaret mağazanızda aynı görseller, kalıplar ve akışlarla karşılaşacağı anlamına gelir. Kısacası, e-ticaret mağazanıza bir mobil cihaz veya masaüstü tarayıcı üzerinden erişen kullanıcılar aynı deneyimi yaşar.

Ekran boyutları farklı olduğu için farklı düzenlere ihtiyaç duyulabilir, ancak tutarlı bir şekilde tasarlanmış bir deneyimde kullanıcılar tanıdık işlevleri tanıyacaktır.

Birçok startup ve girişimci, masaüstü ve mobil sitelere farklı ürünler olarak bakma hatasına düşüyor. Bu yaklaşım tutarsızlık yaratarak daha zayıf UX'e ve şirketin markasını yanlış anlama potansiyeline neden olabilir.

Bu sorunu önleyebilirsiniz. İşte birkaç tavsiye:

A. Görsel Kimlik

Aynı renkleri, görünümü, yazı tipi stillerini, görsel öğeleri vb. kullanmaya çalışın.

B. Tutarlı İkonografi

uygulama ve web simgeleri aynı işlevi temsil etmelidir

C. İfadeler

Düğmelerin, bağlantıların ve menü seçeneklerinin adları hem mobil hem de masaüstü web sitesinde aynı olmalıdır.

D. Etkileşimler ve akış

Her özellik için gezinme süreci aynı olmalıdır (ör. bir ürün bulma veya ödeme yöntemi)

E. Tasarımcılar, Geliştiriciler ve Test Ediciler Arasındaki Koordinasyon

Ekipteki herkes, dağıtılan her özellik hakkında benzer bir anlayışa sahip olmalıdır.

Kullanıcıların kendilerini rahat hissettikleri bu temel kavramları hem web hem de mobil servisleri zorlanmadan uygulamak.

4. Mobil Sitenizi Tasarlarken Bir Cihaza Öncelik Vermek İçin Analitikten Yararlanın

Hepimiz bir web sitesine en az bir kez mobil cihazlarımızdan erişiriz. Ancak mağazanızda gezinmek için en çok hangi mobil cihazın veya platformun kullanıldığını biliyorsanız, sitenizi o cihaz için en iyi şekilde optimize edebilirsiniz.

Google Analytics gibi analitik araçlar, bir kullanıcının web sitenize tam olarak nasıl eriştiğini belirlemek için size verimli, hızlı ve net ölçüm bilgileri sağlayabilir. Google Analytics'i kullanarak aşağıdaki soruların yanıtlarını alabilirsiniz:

• Web sitesini ziyaret eden kaç kullanıcı Android veya iOS topluluğundandı?
• Ziyaretçilerin ne kadarı düşük çözünürlüklü ekranlı cihazları kullanıyor?
• En son Android sürümünü kullanan kullanıcılarla 2 yıllık sürümü kullanan kullanıcıların sayfa ziyaretleri arasında bir fark var mı?
• iOS mobil kullanıcıları, Android kullanıcılarına kıyasla mağazada ne kadar zaman harcıyor?
• Ne tür bir bağlantı kullanıldı? Wifi mi yoksa mobil veri mi?

Bunun gibi veriler ürün stratejisi için değerlidir ve şirketler hedef kitlenize odaklanabilir. Kullanıcılarının gerçek ihtiyaçlarına uygun ürünler yaratabilirler.

Örneğin , Bir e-ticaret mağazasında çok sayıda resim, içerik ve ekranda kaydırma gerektiren uzun bir liste bulunur. Çoğu kullanıcının sitede birkaç saniye kaldığını fark edebilirler. Şirket, sitesine erişen cihazların profilini kontrol edebilir. Ayrılan kullanıcılar küçük ekranlı ve düşük çözünürlüklü cihazlar kullanıyorsa, kullanıcılar kötü UX nedeniyle siteden ayrılıyor olabilir. Dolayısıyla atabileceğimiz bir sonraki adım, UX'i geliştirmek.

Kısacası, kullanıcılar hakkında ne kadar çok şey bilirsek, o kadar erişilebilir, verimli ve keyifli bir ürün sağlayabiliriz.

5. Sitenizin Mobil Sürümlerini Test Edin

Web sitenizin farklı mobil cihazlarda nasıl göründüğünü ve çalıştığını kontrol etmelisiniz. Web sitenizi test etmek için kullanabileceğiniz bazı araçlar mevcuttur.

A. Google'ın Mobil Dostu

Bu basit bir araçtır. Site URL'nizi girmeniz gerekiyor ve Google "kullanıcı dostu" bir inceleme oluşturacaktır. İnceleme şöyle olabilir:
"Bu sayfanın bir mobil cihazda kullanımı kolaydır."
VEYA
"Sayfa mobil uyumlu değil - bu sayfanın bir mobil cihazda kullanılması zor olabilir. Aşağıdaki sorunları düzeltin:

• Metin okunamayacak kadar küçük
• Görünüm alanı ayarlanmadı
• Tıklanabilir öğeler birbirine çok yakın
• Uyumsuz eklentiler kullanıyor.”

B. Mobiltest. ben mi

Mobil test.me'de, kontrol etmek istediğiniz web sitesi URL'sini girmeniz ve cihazı ve işletim sistemini seçmeniz gerekir. Oradan, herhangi bir mobil cihazda tam web sitesi görünümünü elde edebilirsiniz. Test ederek, başlatmadan önce hataları düzeltebilirsiniz.

6. Esnek ve Akışkan Tasarım Düzenleri Yapın

Günümüz pazarında, tasarımcıların çabalarını artıran çok sayıda mobil çözünürlük ve ekran boyutu bulunmaktadır. Birçok cihazın yoğunlukları da değişir. Düşük yoğunluklu ekrandan (360 piksel) yüksek yoğunluklu ekrana (4K) kadar, yoğunluğu tanımlamanın yaygın yolları şunlardır:

• Düşük yoğunluk (ldpi)
• Orta yoğunluk (mdpi)
• Yüksek yoğunluklu (hdpi)
• xhdpi (Ekstra yüksek yoğunluk)
• xxhdpi (Ekstra ekstra yüksek yoğunluk)
• xxxhdpi (Ekstra-ekstra-ekstra yüksek yoğunluk)

Yoğunlukla ilgili bazı basit terimler

Bir çözüm

Ekrandaki piksel sayısı

B. Yoğunluktan Bağımsız Piksel (DP)

Bir sanal piksel birimi, bir UI düzenini tanımlar. Bir DP, yerleşim boyutlarını veya konumunu yoğunluktan bağımsız bir şekilde ifade eder. DP, 160 dpi ekranda 1 fiziksel piksele eşittir.

C. Ekran Boyutu

Ekranın boyutu ekran diyagonal uzunluğu olarak ölçülür.

D. Ekran Yoğunluğu

Genellikle inç başına nokta sayısıyla gösterilen, ekranın fiziksel alanı içindeki piksel miktarı.

Tüm bu kavramlar mobil site geliştirilirken uygulanabilir. Arayüzlerin tüm cihazlar arasında uyarlanabilir olmasını sağlar. Buna sıvı arayüzü denir. Kısacası, bir akışkan arayüzü, boyutların yüzde olarak tanımlandığı bir arayüzdür.

7. Duyarlı Tasarım Kullanmıyorsanız Tutarlılığı Sürdürmek İçin Ayrı URL'ler Oluşturun

Tasarımcılar, e-ticaret mağazasının UI'sini tasarlarken içeriğin nasıl görüntüleneceğini ve farklı cihazlara sahip kullanıcıların ona erişeceğini düşünmelidir. Bazı senaryolarda, orantı ve düzen orijinal tasarım özelliklerinden çok farklıdır. Web siteleri birden fazla cihaza sığacak şekilde tasarlanmadığında "duyarlı" değildirler.
Duyarlı tasarım, istemci cihaz türünü algılayan ve görüntülendiği ekran boyutuna uyum sağlamak için tasarımını ayarlayan bir geliştirme tekniğidir. Böylece aynı içerik masaüstünde 3 sütun biçiminde, tablette 2 sütun biçiminde ve akıllı telefonda 1 sütun biçiminde görüntülenebilir.

Tepki vermeyen tasarım, yanlış yazı tipi boyutları, tıklanamayan düğmeler vb. gibi birden çok soruna yol açabilir. Son derece duyarlı tasarımlar oluşturabilen herkes bizim gibi değildir. Ancak geliştiricilerin ve tasarımcıların duyarlı web tasarımını yönetmeleri için bir alternatif var. Cihaz türünü (HTML etiketleri aracılığıyla) otomatik olarak tanıyan URL'ler oluşturabilirler. Cihazı algıladıktan sonra içerik en iyi şekilde görüntülenebilir:

Oluşturulan URL'lere birkaç örnek:

• www.website.com (masaüstü erişimi)
• m.website.com (mobil erişim)
• www.website.com (temel HTML ile daha hafif sürüm) (telefon erişimi özelliği)

8. Sayfaları Mobil Ekranlara Sığdırmak İçin “Görünüm Meta Etiketi” Kullanın

Google'a göre, "bir görünüm penceresi, ana sayfanın mobil cihazlarda görüntülenme şeklini kontrol edebilir." Başka bir deyişle, tasarımcılar görünümü hesaba katmazlarsa, bir mobil cihazdaki UI, tıpkı masaüstü sitesi gibi görünecektir. Sistem bu senaryoda ekranı mobil kullanım için uyarlayacaktır ancak genel olarak çalışmamaktadır. Bazı durumlarda, görüntüler bozulacak ve kötü bir kullanıcı deneyimi yaratacaktır. Görünüm penceresini uyguladıktan sonra, tasarımcılar görüntüleme modunu kontrol edebilir ve UX'i iyileştirebilir.

Viewport Nasıl Dikkate Alınır?

CSS Aygıt Uyarlama özelliğinde bulunan "görünüm alanı meta etiketi" adlı bir CSS etiketi kullanabilirsiniz.
Bu etiket aşağıdaki sözdizimine sahiptir: <meta name = “viewport” content = “width = device-width, initial-scale =1”>

9. Mobil Tasarıma Başlarken Web Sitesinin “Çekirdeğini” Belirleyin.

Tasarımcılar, mobil site tasarımlarını oluştururken sitenin ana özelliklerinin net bir şekilde sunulmasını sağlamalıdır. Kısacası, mobil web siteleri tam işlevselliğe izin vermelidir çünkü CTA, mobil cihazlar için tasarlanmış herhangi bir web sitesinde açıktır.

Ancak eklenecek diğer özellikler nasıl belirlenir? Web sitenizin çekirdeğini düşünün. Web sitesinin temel direkleri nelerdir? Web sitesinin ana özellikleri nelerdir? Hangi özellikler önemsizdir, ancak UX'i geliştirir (arama, filtreler vb. gibi)?

Temel konsepti bir yemek dağıtım e-ticaret sitesine uygulama örneğini inceleyelim. Bu sitenin ana sütunları şunlar olacaktır:

• Giriş Yap ve Kaydol
• Ürün Arama
• Ürün Listeleme
• Sepete ekle
• Ödeme

Bir masaüstü sitenin daha fazla özelliği vardır, ancak gerekli olanları filtreleyebilir ve mobil siteye dahil edebilirsiniz. Ayrıca, kullanıcıların küçük bir ekranda çok fazla seçenekle boğulmuş hissetme olasılığını da ortadan kaldırır.

10. Basit Formlar ve Giriş Alanları Kullanın

Kullanıcının destek ekibiyle iletişim kurmak veya haber bültenleri ve diğer amaçlar için birçok sitede doldurabileceği bir form vardır. Mobil kullanıcılar, uygun şekilde tasarlanmadıkları takdirde bu formları büyük bir sorun olarak görebilirler. Form ne kadar uzun ve karmaşık olursa, kullanıcıların bilgi girmesi o kadar zor olur.

Mobil Cihazlar İçin Form Nasıl Optimize Edilir?

• Yalnızca kullanıcıların girmesi zorunlu olan temel alanları dahil edin. Çok fazla zorunlu alan varsa, kullanıcının kayıt işlemini bırakma olasılığı daha yüksektir.
• Alanları çok fazla alana bölmeyin. Örneğin, ad/soyadı basit bir ad olarak kabul edilebilir.
• İletişim no gibi sayısal alanlar için sayısal klavyenin otomatik olarak etkinleştirildiğinden emin olun. , posta kodu vb.
• Hata mesajlarını kısa ve öz yapın.
• Alanlara otomasyonu dahil etmeye çalışın. Örneğin, kullanıcının adresini sorarken GPS işlevinden yararlanın ve Pin kodu, eyalet, şehir vb. alanları önceden doldurun.

Bu temel kavramları uygulamak, mobil sitenizin kullanıcı deneyimini iyileştirecektir. Bu uygulamalar, kullanıcıların formu veya sitenizi terk etme şansını sınırlayacaktır.

Toplama

Bu dizinin ilk aşamasında, e-ticaret mağazanızın mobil site UX'ini geliştirmek için 10 yönergeyi inceledik. Hindistan'daki en iyi e-ticaret geliştirme şirketi Emizentech'te, son derece duyarlı e-ticaret mağazaları geliştirme konusunda uzmanlığa sahibiz. Gereksinimlerinizi bize bildirin.