Kategori Sayfası Tasarımı ile Mobil Dönüşümler Nasıl Arttırılır

Yayınlanan: 2022-03-10
Kısa özet ↬ Son araştırmalar, e-ticaret kategori sayfalarının aramada tek tek kategori sayfalarından daha yüksek tıklama oranlarına sahip olduğunu buldu. Bu nedenle, e-ticaret siteniz alışveriş yapanları çekmek ve onları dönüştürmek için mücadele ediyorsa, kategori sayfalarınızın (özellikle mobilde olanlar) yeniden tasarlanması gerekebilir.

E-ticaret tasarımcıları için ana sayfayı, bireysel ürün sayfalarını ve ayrıca ödeme deneyimi tasarlamaya odaklanmak kolaydır, çünkü bunlar mobil alışveriş yapanların yolculuğunda bariz birer basamaktır. Bununla birlikte, aşağıdaki verilere dayanarak, kategori sayfalarının da - arama motorları ve e-ticaret web siteleri arasında aracı olarak - oynayacak bir rolü vardır.

JumpFly SEO Direktörü Jill Kocher Brown, SMX West 2020'de aşağıdaki araştırmayı paylaştı:

SEO Jill Kocher Brown araştırması - e-ticaret kategori sayfası ve ürün sayfası performansı karşılaştırması
SEO Jill Brown, e-ticaret kategori sayfası ile ürün sayfası performansı arasındaki araştırmayı paylaşıyor. (Kaynak: Slideshare) (Geniş önizleme)

Brown, en iyi 30 e-ticaret web sitesini değerlendirdikten sonra, ürün kategorisi sayfalarının , anahtar kelimeler ve trafik sıralaması açısından ürün sayfalarından daha iyi performans gösterdiğini buldu.

Dönüşüm hunisinin zirvesinde olan müşterilerin çevrimiçi ortamda aradıklarını bulmak için mobil aramayı kullandığını düşünürsek, mobil cihazlar için e-ticaret kategori sayfaları tasarlamaya daha fazla odaklanmamız gerekiyor.

Bugün, size aramadan daha fazla ziyaret (ve dolayısıyla yerinde dönüşümler) sağlayacak mobil e-ticaret kategorisi sayfaları tasarlamak için bazı ipuçları vereceğim.

Atlamadan sonra daha fazlası! Aşağıdan okumaya devam edin ↓

Mobil İçin E-Ticaret Kategori Sayfaları Nasıl Tasarlanır?

Hemen atlayalım:

1. Sayfaya Yalnızca Temel Öğeleri Dahil Edin

Mobil cihazlar için e-ticaret kategori sayfaları tasarlarken hedeflediğimiz şey aşağı yukarı bu:

Mobil cihazlarda bir e-ticaret kategorisi sayfası için tel kafes
Mobil cihazlarda bir e-ticaret kategorisi sayfası için örnek bir tel kafes. (Kaynak: Wireframe.cc ile oluşturuldu) (Geniş önizleme)

Ekranın üst kısmına eklememiz gereken unsurlar şunlardır:

  • Gezinme çubuğu (kaydırıldığında kaybolabilir veya sayfanın en üstüne yapışabilir),
  • Açıklayıcı bir kategori sayfası başlığı,
  • Kategorideki toplam ürün sayısı,
  • Filtre seçenekleri,
  • Sıralama ayarları,
  • En az bir veya iki eşleşen ürün.

Bu öğelerin neden ekranın üstünde olması gerektiğine gelince, size bir örnek göstereyim.

SEMrush'a (ve Google'a) göre, "kong köpek oyuncakları", köpek oyuncağı müşterilerinin aradığı popüler bir arama terimidir:

33.100 aylık arama hacmi ile "kong köpek oyuncakları" ile ilgili SEMrush verileri
SEMrush, 'kong köpek oyuncaklarının' aylık arama hacminin 33.100 olduğunu ortaya koyuyor. (Kaynak: SEMrush) (Geniş önizleme)

Arama terimi için en iyi eşleşen sonuçlardan biri PetSmart web sitesindeki bu kategori/marka sayfasıdır:

Kong köpek oyuncakları için PetSmart kategori sayfası
PetSmart'ın Kong marka köpek oyuncakları için ürün kategorisi sayfası. (Kaynak: PetSmart) (Büyük önizleme)

Sayfadaki sonraki dört kaydırma, alışveriş yapanları aşağıdaki gibi bilgilendirici bölümler, videolar ve alt kategorilere götürür:

PetSmart Kong marka bilgileri, video ve alt kategoriler
PetSmart, kategori sayfasının en üstünde Kong markası hakkında bir sürü bilgi içerir. (Kaynak: PetSmart) (Büyük önizleme)

İşte bununla ilgili sorun:

Evcil hayvan ürünlerini keşfeden web sitesindeki ziyaretçiler için bu bilgi, onları çok popüler Kong markası hakkında eğittiği için harikadır. Ancak, Google'da "kong köpek oyuncakları" aramak için zahmete giren ziyaretçiler için bu bilgilerin tümüne ihtiyaçları yoktur. Sadece alışveriş deneyiminin önüne geçiyor.

Best Buy'ın başlığın üzerine bir reklam veya ilk gösterilen sponsorlu bir ürün eklemesinin hayranı olmasam da, kategori sayfasının üst kısmı için kısa düzen iyi yapılmış:

'Etkinlik izleyicileri' için En İyi Satın Al kategori sayfası
Best Buy'ın kategori sayfaları ayrıntılı olarak özlüdür ve ürünleri hemen gösterir. (Kaynak: Best Buy) (Geniş önizleme)

Dahası, Best Buy ek kategori bilgileri içerir (tıpkı PetSmart'ın yaptığı gibi). Ancak, bu bilgiyi akıllıca arama sonuçlarının altına yerleştirir:

Best Buy kategori bilgileri, arama sonuçlarının altında görünür
Best Buy, arama sonuçlarının altında kategori bilgilerini içerir. (Kaynak: Best Buy) (Geniş önizleme)

Best Buy bunu neden yapıyor ve siz neden yapmalısınız?

Birincisi, bir ürün kategorisinde veya markada yeni olan alışveriş yapanların bu bilgilere hala sahip olmalarını istersiniz. Ve ne kadar iyi eğitimli tüketicilerin daha fazla bilgi için ekranın altına bakmaları gerektiği göz önüne alındığında (teşekkürler, Amazon), bu mobil cihazlarda işe yarıyor.

Ayrıca, bu SEO için yararlıdır. Bu kategori açıklaması olmadan, sayfanın sıralanabilirliğini etkilemek için onu meta başlığınıza ve açıklamanıza bırakmanız gerekir. Bunun gibi arama için optimize edilmiş bir bilgi bölümüyle, kategori sayfanızın aramanın en üstüne çıkma şansını artırabilirsiniz.

2. En İkna Edici Ürün Ayrıntılarını Gösterin

Gördüğünüz gibi bu mobil e-ticaret kategori sayfalarında çok fazla yerimiz yok. Bu nedenle, alışveriş yapanlar sonunda eşleşen ürün sonuçlarına ulaştığında, aradıklarını bulmalarını mümkün olduğunca zahmetsiz hale getirmek istersiniz.

Her bir ürün listesine dahil edilmesi gereken ayrıntılar şunlardır:

  • Kristal berraklığında ve çekici bir ürün imajı,
  • Ürün adı (ad/marka ne olduğunu açıklamıyorsa kısa bir açıklama ile birlikte),
  • Fiyat,
  • Yıldız derecelendirmesi ve inceleme sayısı.

Yukarıdaki öğelerden isteğe bağlı olan tek şey derecelendirme/incelemelerdir ve bu yalnızca siteniz yeniyse ve insanları kapatmak için inceleme eksikliği istemiyorsanız geçerlidir.

Ürün listelemelerine başka öğeler eklemeye gelince, buna dikkat edin. Herhangi bir değer katmıyorsa (diğer bir deyişle, bir ürünü diğerinden seçmeyi kolaylaştırmıyorsa), bırakın.

Örneğin, Chewy'den bu "kong köpek oyuncağı" kategori sayfasını alın:

'Kong köpek oyuncağı' için Chewy kategori sayfası
Chewy kategori sayfası ve 'kong köpek oyuncağı' için sonuçlar. (Kaynak: Chewy) (Geniş önizleme)

Bir bütün olarak bu kategori sayfası tasarımı, rakip PetSmart'ın kendi sayfalarını nasıl idare ettiğinden çok daha özlüdür. Ancak, burada oldukça fazla atık var. Yani, gitmesi gereken iki tekrarlayan metin dizisi vardır:

  1. Ürün görsellerinin altında “Daha Fazla Seçenek Mevcut”;
  2. Fiyat ve derecelendirme arasında "49$ üzeri 1-2 günlük ücretsiz kargo".

Ücretsiz gönderim bildirimi, sitenin üst kısmında kolayca kapatılabilir bir yapışkan çubuk olarak görünebilir. Ve "Daha Fazla Seçenek Var"ın burada olması gerekmez. Ürün ayrıntılarını daraltarak, mobil müşteriler mevcut arama sonuçlarına daha hızlı ulaşabilir.

BH Cosmetics'den, kırpılmaya dayanabilecek ürün listelemelerine bir örnek:

BH Cosmetics makyaj fırçaları kategori sayfası
BH Cosmetics, ilgili kategori sayfasında makyaj fırçası setlerini görüntüler. (Kaynak: BH Cosmetics) (Geniş önizleme)

“Çantaya Ekle” düğmelerinin hepsinin gitmesi gerekiyor. Alışveriş yapanlar tek bir ürün resmine bakıp ihtiyaç duydukları şeyin bu olduğunu bilmedikçe, bu sayfadaki bu düğmeler hiçbir işe yaramaz.

Ayrıca “%XX İNDİRİM”in gereksiz olduğunu düşünüyorum. Bunu fazla karmaşık hale getirmek için hiçbir sebep yok. Çizilmiş orijinal fiyat ve pembe renkteki yeni düşük fiyat, teklife dikkat çekmek için yeterli olmalıdır.

Bir e-ticaret web sitesinde envanteri/seçenekleri görüntülemenin tek yolu bu değildir, bu nedenle her bir ürün öğesini özel durumunuza göre değerlendirmeniz gerekir.

Ne hakkında konuştuğumu görebilmeniz için, Expedia'da “Santorini Yunanistan otelleri” için yapılan arama şunları gösterir:

'Santorini Yunanistan otelleri' için Expedia sonuçları
Expedia'da 'Santorini Yunanistan otelleri' için arama sonuçları sayfası. (Kaynak: Expedia) (Geniş önizleme)

Ve Booking.com'da:

Booking.com 'Santorini Yunanistan otelleri' için sonuçlar
Booking.com'daki 'Santorini Yunanistan otelleri' için arama sonuçları sayfası. (Kaynak: Booking.com) (Büyük önizleme)

Her ikisi de, her listeleme için gereken temel ayrıntıları içerir. Ancak, kullanıcıların karar vermesine yardımcı olacak ek ayrıntılar içerirler.

Ancak, bu ekstra bilgilerin nasıl görüntülendiği konusunda büyük bir fark vardır. Expedia'da kullanıcılar, "Kahvaltı dahil" özelliğinin en önemli özellik olduğunu ve özel fiyata yalnızca iki oda kaldığını görebilirler. Bu yararlı bir bilgidir. Ancak Booking.com'da, fiyatın hemen altında görüntülenen yeşil renkte bir çok ayrıntı var. Okuması zor ve tüm ayrıntıların gerekli olduğundan emin değilim.

Şüpheniz varsa, minimum değerle başlayın. Ardından, diğer ayrıntıların tıklama ve dönüşüm oranlarını iyileştirip iyileştirmediğini doğrulamak için A/B testini kullanın.

3. Mobil Kategori Sayfa Boyutlarınızı Yönetin

E-ticaret kategori sayfaları tasarlarken sayfa boyutlarına dikkat etmemizin iki nedeni vardır:

  • Bu tür sayfalarda ne kadar çok görüntü ve veri varsa, yükleme sürelerine ciddi zarar verebilir.
  • Aynı anda ne kadar çok ürün gösterirseniz, müşterilerinizin yaşadığı analiz felci o kadar artar.

Bu nedenle, yapılacak ilk şey, sayfanın ne kadar sürebileceği konusunda bir sınır oluşturmaktır.

Sonsuz kaydırma veya ziyaretçiler sayfayı aşağı kaydırdıkça daha fazla ürün görseli ortaya çıkaran bir otomatik yükleme kullanmak cazip gelse de, Walmart'ın yaptığı gibi sayfalandırma bağlantılarını kullanmanız performans açısından daha iyidir:

Walmart kategori sayfası sayfalandırma
Walmart, ürün kategorisi sayfalarının sonunda sayfalandırma kullanır. (Kaynak: Walmart) (Büyük önizleme)

Walmart'tan alabileceğiniz bir başka ipucu da ürün görüntüleme ayarıdır. Varsayılan olarak ürünler, kategori sayfalarında bir ızgarada görünür:

Walmart kategori sayfası kılavuz görünümü
Varsayılan olarak Walmart, kategori ürünlerini bir ızgara düzeninde görüntüler. (Kaynak: Walmart) (Büyük önizleme)

Kullanıcılar "Sırala ve Filtrele"nin solundaki düğmeyi tıklayarak hizalamayı liste görünümüne değiştirebilir:

Walmart kategori sayfası liste görünümü
Kullanıcılar, ürünleri bir liste düzeninde görüntülemek için Walmart'ın kategori sayfasını ayarlayabilir. (Kaynak: Walmart) (Büyük önizleme)

Bu daha çok kişisel bir zevk meselesi olsa da, liste düzeninin aslında aynı anda daha fazla ürün gösterdiğini görebilirsiniz, bu nedenle kullanıcılar bu düzen seçimini alışveriş deneyimlerini hızlandırmada oldukça faydalı bulabilirler.

Düşünülmesi gereken son bir şey:

Varsayılan sıralama yönteminizin tüm müşterilerin otomatik olarak tercih ettiği yöntem olduğunu varsayamazsınız. Örneğin, Sephora'nın varsayılan sıralaması “En Çok Satanlar”a göredir:

Sephora ürünleri en çok satana göre sıralıyor
Sephora, varsayılan olarak kategori sayfalarını 'En Çok Satan' ürünlere göre sıralar. (Kaynak: Sephora) (Geniş önizleme)

Bildiğimiz gibi, tüketicilerin çevrimiçi alışveriş yaparken endişe duydukları başka şeyler vardır. Karşılanabilirlik bunlardan biridir, bu nedenle “Düşükten Yüksek”e göre sıralama yapmak daha mantıklı olabilir. İncelemeler ve derecelendirmeler aradıkları başka bir şeydir, bu nedenle tercih ettikleri sıralama yöntemi "En Beğenilenler" olabilir:

Sephora müşterileri, kategori sayfası sıralamasını En Çok Satanlar, En Çok Oy Alanlar, Yeni, Fiyat Yüksekten Düşük, Fiyat Düşükten Yüksek olarak değiştirebilir
Sephora müşterileri, kategori sayfalarının sıralanma şeklini değiştirebilir. (Kaynak: Sephora) (Geniş önizleme)

Ve filtreler söz konusu olduğunda cimri olmayın.

Örneğin Sephora, müşterilerin yalnızca iki faktöre göre filtrelemesine izin verir:

Sephora müşterileri, kategori sayfası sonuçlarını Marka ve Fiyat Aralığına göre filtreleyebilir
Sephora müşterileri, kategori sayfası sonuçlarını Marka ve Fiyat Aralığına göre filtreleyebilir. (Kaynak: Sephora) (Geniş önizleme)

Bu, müşterilerin güzellik markalarına aşina olduğunu varsayar. Olmayanlar için bu, mevcut tüm seçenekleri değerlendirmek daha fazla zaman alacağından aradıkları ürünleri bulma yeteneklerini önemli ölçüde bozabilir.

Bunun yerine, kullanıcılara daha kapsamlı filtreleme seçenekleri sunmak için kendi ürün kategorilerinizi ve etiketlerinizi kullanmanız gerekir. Sonuçta, bu veriler envanterinizi daha iyi organize etmenize ve satmanıza yardımcı oluyorsa, müşterileriniz için de aynısını yapmalıdır.

Ulta bunun için iyi bir iş çıkarıyor:

Ulta müşterileri, kategori sayfası sonuçlarını Amaç, Tür, Marka ve daha fazlasına göre filtreleyebilir
Ulta müşterileri, kategori sayfası sonuçlarını Amaç, Tür, Marka ve daha fazlasına göre filtreleyebilir. (Kaynak: Ulta) (Geniş önizleme)

Bu sadece kullanıcı dostu olması açısından da faydalı değildir (gerçi bunun büyük bir kısmı da budur). Alışveriş yapanları incelemek için daha küçük ürün listeleri oluşturmaya teşvik ederek, seçenekler azaldıkça ve sayfa yükleme süreleri iyileştikçe alışveriş deneyimlerini hızlandırmalarını da sağlıyorsunuz.

Toplama

Özetle, mobil e-ticaret kategori sayfalarınızı nasıl tasarladığınıza dikkat edin. Araştırma, bu sayfaların tek tek ürün sayfalarından daha yüksek tıklama oranlarına ve arama motorlarından gelen ziyaretlere sahip olduğunu gösterse de, kötü tasarım seçimleri web sitenizi kuralın istisnası haline getirecektir.