• E-ticaret ve Kullanıcı Arayüzü (UI) Tasarımı

E-ticaret Kullanıcı Arayüzü Tasarımı: İlgi Çekici Ürün Koleksiyonu Sayfaları Nasıl Oluşturulur (6 Uygulanabilir Taktik)

  • Felix Rose-Collins
  • 5 min read
E-ticaret Kullanıcı Arayüzü Tasarımı: İlgi Çekici Ürün Koleksiyonu Sayfaları Nasıl Oluşturulur (6 Uygulanabilir Taktik)

Giriş

Ürün koleksiyon sayfaları ne yazık ki hem tasarımcılar hem de metin yazarları tarafından sıklıkla göz ardı edilir. Oldukça ilgi çekici ürün sayfaları ve açılış sayfaları oluşturmak için çok çaba sarf edilirken, koleksiyon sayfaları yol kenarına düşer ve ne yazık ki ilgi çekici değildir.

Etkileşim yaratan, harekete geçiren, trafik ve dönüşüm sağlayan ürün koleksiyonu sayfaları oluşturmanın altı uygulanabilir yolunu inceleyelim.

Birincil Ürün Fotoğrafının İlgi Çekici Olduğundan Emin Olun

Ürün koleksiyon sayfalarının üstesinden gelmesi gereken ilk tasarım engeli, birincil fotoğrafın ilgi çekici ve ilgi çekici olmasını sağlamaktır. Bir müşterinin dikkatini sayfaya girer girmez veya birkaç kaydırma içinde çekemezseniz, muhtemelen onu kaybetmişsinizdir.

Hedef kitleniz hakkında bildiğiniz her şeyi göz önünde bulundurarak işe başlayın. Nelerden hoşlanıyorlar? Ürünlerinizi neden seviyorlar? Ürünlerinizde neyi seviyorlar? Bu özellikleri nasıl öne ve merkeze koyabilirsiniz?

Ardından, düzeni düşünmeye başlayın. Görsellerin yakınlaştırılması gerekiyor mu? Canlı mı yoksa nötr bir arka plan mı gerektiriyorlar? Arka arkaya kaç ürün göstermelisiniz?

İdeal olarak, birkaç tasarım varyasyonunu A/B testine tabi tutarsınız. Bazen en küçük değişiklikler en büyük farkı yaratabilir.

Bu bebek giyim koleksiyonu sayfasına bakın. Ürünlerin kendileri sevimli ve ilgi çekici, bu nedenle özellikle yeni bir şekilde sergilenmelerine gerek yok. "Yeni" etiketi, belirli ürünleri diğerlerinden açıkça ayırıyor ve müşterinin bunları fark etmesini sağlıyor.

Ranktracker ile tanışın

Etkili SEO için Hepsi Bir Arada Platform

Her başarılı işletmenin arkasında güçlü bir SEO kampanyası vardır. Ancak sayısız optimizasyon aracı ve tekniği arasından seçim yapmak, nereden başlayacağınızı bilmek zor olabilir. Artık korkmayın, çünkü size yardımcı olacak bir şeyim var. Etkili SEO için Ranktracker hepsi bir arada platformunu sunuyoruz

Sonunda Ranktracker'a kaydı tamamen ücretsiz olarak açtık!

Ücretsiz bir hesap oluşturun

Veya kimlik bilgilerinizi kullanarak oturum açın

Bunun gibi ürünleri nötr bir arka plana yerleştirmek, onları öne çıkarmanın harika bir yoludur.

mamasandpapas

Kaynak: mamasandpapas.com

Bir koleksiyon sayfasındaki birincil fotoğrafı ilgi çekici hale getirmenin bir başka yolu da ürünü kullanım halinde göstermektir. Bu seradan seraya sayfasına bakarsanız, bunun nasıl zahmetsizce gerçekleştirilebileceğini göreceksiniz. Her görsel tamamen farklı, farklı bir renk paletinde ve öğeyi farklı bir açıdan gösteriyor. Ürünü kendi evinizde hayal etmenizi kolaylaştırmışlar.

greenhouseemporium

Kaynak: greenhouseemporium.com

Ranktracker ile tanışın

Etkili SEO için Hepsi Bir Arada Platform

Her başarılı işletmenin arkasında güçlü bir SEO kampanyası vardır. Ancak sayısız optimizasyon aracı ve tekniği arasından seçim yapmak, nereden başlayacağınızı bilmek zor olabilir. Artık korkmayın, çünkü size yardımcı olacak bir şeyim var. Etkili SEO için Ranktracker hepsi bir arada platformunu sunuyoruz

Sonunda Ranktracker'a kaydı tamamen ücretsiz olarak açtık!

Ücretsiz bir hesap oluşturun

Veya kimlik bilgilerinizi kullanarak oturum açın

Müşterinin nihai ürünün neye benzeyeceğini görmesini kolaylaştırmak ve tüm bir yaşam tarzını hayal etmesine yardımcı olmak istiyorsanız bu harika bir taktiktir.

Filtrelerin Çok Dikkat Dağıtıcı Olmadığından Emin Olun

Koleksiyon sayfalarının kullanışlı olabilmesi için filtrelere ihtiyacı vardır. Müşterilerin belirli bir ürünü bulmak için sayfalar dolusu ürüne göz atması beklenemez. Teklifinizin genişliğinden haberdar olmaları muhtemel değildir ve uzun süreli vitrin alışverişi için zamanları olmayabilir.

Filtreler ürünlerinizi anlamlı bir şekilde kategorize etmelidir. Fiyat, boyut ve malzeme, kullanılabilecek en yaygın filtrelerden sadece birkaçıdır. Ürünlerin kendilerini ve farklılaştırıcı faktörlerin neler olduğunu göz önünde bulundurun.

Ürün ne kadar karmaşıksa, o kadar fazla filtre olmalıdır. Müşterilerin doğru ürünü seçmesine yardımcı olacaksa, "yeni başlayanlar için değil" veya "yalnızca profesyoneller için" gibi yararlı olanlar da sunabilirsiniz.

Filtreler ayrıca çok dikkat dağıtıcı olmamalıdır. Erişilmesi kolay olmalı, ancak sayfanın büyük bir bölümünü kaplamamalı veya herhangi bir şekilde tarama deneyimine müdahale etmemelidir.

Bu kompozit zemin kaplama levhaları koleksiyonları sayfasına bir göz atın. Filtreler sol tarafta yer alıyor ve kolayca fark edilebilir lik ile engel olmama arasında doğru dengeyi sağlıyorlar. Ayrıca katlanabilir olduklarına dikkat edin, böylece çok fazla bilgi müşteriyi bunaltmayacaktır.

Ayrıca mantıklı bir şekilde sıralanmışlardır - çoğu insan boyut gibi daha spesifik ayrıntılara dalmadan önce renkleri ve malzemeleri daraltmak isteyecektir.

Ovaeda

Kaynak Ovaeda.com

Çok fazla yer kaplamayan ancak yine de kullanıcı deneyimini önemli ölçüde geliştirecek ve müşterilerin seçimlerini birkaç saniye içinde daraltmalarına olanak tanıyacak benzer bir çözümü kolayca uygulayabilirsiniz.

Üzerine Gelindiğinde Kısa Ürün Açıklamalarını Görüntüleme

Ürün koleksiyonu sayfalarını bir bilgi merkezi olarak düşünün. Burası, belirli bir kategorideki tüm ürünlerinizi sergilediğiniz yerdir. Ne kadar yardımcı olursanız, bir müşterinin dönüşüm sağlama olasılığı da o kadar artar.

Müşterilerin bir ürüne tıklayıp ürün açıklamasını okuduktan sonra geri tıklamasına neden olmayın. Nerede kaldıklarını bulmak için zamanlarını kaydırarak harcamak zorunda kalırlar. Ya da ürünleri yeni sekmelerde açmaya devam ederlerse, kısa süre içinde karşılaştırmaya çalıştıkları ürün sayısından bunalacaklardır.

Koleksiyon sayfasında ne kadar faydalı bilgi gösterebilirseniz o kadar iyi olur. Birisi bir ürünün üzerine geldiğinde basit, kısa bir ürün açıklaması ekleyerek müşterilerin ürünleri hemen o anda karşılaştırmasına yardımcı olabilirsiniz.

Bu bariatrik kalsiyum çiğneme koleksiyonu sayfası harika bir iş çıkarıyor. Üründe hangi vitamin ve mineralleri bulabileceğinizi söyleyen kısa bir ürün açıklaması alırsınız. Faydaları da vurgulanıyor: tadı harika, bağışıklık sağlığını destekliyor vb.

Bariatricfusion

Kaynak: Bariatricfusion.com _

Açıklamaların ne kadar kısa olduğuna dikkat edin. Bunları birkaç saniye içinde okuyabilir ve ürünleri karşılaştırmaya devam edebilirsiniz.

Bu taktiği uygularken, fareyle üzerine gelinen açıklamayı dikkatlice düşünün. Ürün sayfasındaki açıklamayla aynı olması gerekmez. Ürünün faydalarından veya temel özelliklerinden kısaca bahsederek onu sayfadaki diğer ürünlerden açıkça ayırmalıdır.

Burada satışı zorlamak yerine bilgilendirici olmaya odaklanın. Müşteriler seçimlerine güveniyorlarsa dönüşüm sağlama olasılıkları daha yüksektir.

Biraz Sosyal Kanıt Ekleyin

Sosyal kanıt, sayfaları daha ilgi çekici ve yararlı hale getirmek için harika bir araçtır. Müşterilerinize güvenilir olduğunuzu, güvenilir olduğunuzu ve ürünlerinizin kaliteli olduğunu göstereceklerdir. Bu, özellikle markanıza henüz aşina olmayan ve dönüşüm konusunda daha tereddütlü olabilecek yeni müşteriler için önemlidir.

Sosyal kanıtın birçok şekli vardır, ancak yıldız derecelendirmeleri koleksiyon sayfalarınıza koyabileceğiniz en faydalı kanıt türüdür. Birkaç amaca hizmet edeceklerdir:

  • bireysel ürünün kalitesini değerlendirmek
  • kaç müşterinin satın aldığını ve incelemek için zaman ayırdığını gösterin
  • müşterilerin daha hızlı satın alma kararları vermesine yardımcı olun

Yıldız derecelendirmelerini dahil etmek kolaydır. Sephora'nın göz farı paleti koleksiyonu sayfasına göz atın. Görülmesi kolaydır ve ilgili tüm bilgileri gösterir: kaç yorum olduğu ve ürünle ilgili genel memnuniyetin ne olduğu. Ayrıca bu paletlerden birinin diğerlerinden çok daha popüler olduğunu da açıkça görebilirsiniz.

sephora

Kaynak: sephora.com

Koleksiyon sayfalarınıza ekleyebileceğiniz bir diğer harika sosyal kanıt sinyali de gerçek zamanlı satış bildirimleridir.

Bu özel dizüstü bilgisayar çıkartmaları sayfasına göz atın. Sayfada gezinirken, sağ alt köşede göze batmayan bir açılır pencere açılır ve size web sitesinde kimin alışveriş yaptığını, nereden geldiklerini ve ne satın aldıklarını söyler.

Bu, pazarlama taktiklerinize biraz FOMO eklemek için harika bir yoldur. Müşterilere, birileri satın aldığı için açıkça popüler olan diğer ürünler gösterilecektir. Ayrıca güçlü güven ve güvenilirlik sinyalleri gönderecektir.

Açılır pencerenin çok gösterişli veya dikkat dağıtıcı olmadığından emin olun. Ayrıca, alışveriş yapanları rahatsız etmemeleri için bunları aralıklı olarak yerleştirmeye çalışın.

vinylstatus

Kaynak: vinylstatus.com

Çoklu Ürün Görünümlerini Görüntüleme

Müşteriler bir ürünü ne kadar iyi görebilirse, dönüşüm sağlama şansları da o kadar yüksek olur. Koleksiyon sayfasında bir ürüne ait ne kadar çok görsel gösterirseniz, o kadar çok etkileşim ve ilgi yaratırsınız.

Birden fazla görseli birkaç şekilde dahil edebilirsiniz. Bir ürün galerisinde kaydırmaya izin verebilir veya üzerine gelindiğinde farklı bir fotoğraf görüntüleyebilirsiniz.

H&M'inbu erkek çocuk giyim sayfası kaydırılabilir bir ürün galerisine sahiptir. Tek tek ürün sayfalarında yer alan tüm fotoğrafları doğrudan koleksiyon sayfasından görebilirsiniz, böylece asla tıklamak zorunda kalmazsınız.

hm

Kaynak:hm.com

Üzerine geldiğinizde farklı bir fotoğraf görüntülemeyi tercih ederseniz, ilham almak için bu kadın plaj kıyafeti koleksiyonu sayfasına göz atın. Marka, üzerine geldiğinizde ürünün arka yüzünü akıllıca gösteriyor, böylece başka bir sayfa açmak zorunda kalmadan tüm parçayı görebiliyorsunuz. Bu, giyim markaları için harika bir taktik.

simplybeach

Kaynak:simplybeach.com

Galeri mi yoksa fareyle üzerine gelinen fotoğraf mı ekleyeceğinize karar verirken ürünün niteliğini göz önünde bulundurun. Bir müşterinin kaç fotoğraf görmesi gerekir? Ve bu fotoğraflar ne olmalı?

Ürünü kullanılırken gösterebilir veya yeni bir müşteriyi etkileme olasılığı daha yüksekse müşterinin fotoğraflarına yer verebilirsiniz. Ürünü yakından gösterebilir, hatta ürün özelliklerini listeleyebilirsiniz.

Son Görüntülenen Öğeleri Göster

Ürün önerileri genellikle tek tek ürün sayfaları için ayrılmıştır. Burası aynı zamanda markaların "son görüntülenen" karuseli koyacağı yerdir.

Bununla birlikte, koleksiyon sayfasında yer vererek, müşterilere daha önce gördükleri ve beğendikleri ürünleri nazikçe hatırlatabilirsiniz. Aynı anda çok sayıda sekmenin açık olması nedeniyle geçmişlerine geri dönmek için harcadıkları zaman ve çabadan tasarruf etmelerini sağlayın.

Adidas erkek koşu ayakkabıları sayfasına göz atın. Tek bir ürünü görüntülediğinizde, koleksiyon sayfasının alt kısmında ilginizi çeken ürünleri takip etmenize yardımcı olacak bir "son görüntülenenler" özelliği göreceksiniz.

adidas

Ranktracker ile tanışın

Etkili SEO için Hepsi Bir Arada Platform

Her başarılı işletmenin arkasında güçlü bir SEO kampanyası vardır. Ancak sayısız optimizasyon aracı ve tekniği arasından seçim yapmak, nereden başlayacağınızı bilmek zor olabilir. Artık korkmayın, çünkü size yardımcı olacak bir şeyim var. Etkili SEO için Ranktracker hepsi bir arada platformunu sunuyoruz

Sonunda Ranktracker'a kaydı tamamen ücretsiz olarak açtık!

Ücretsiz bir hesap oluşturun

Veya kimlik bilgilerinizi kullanarak oturum açın

Kaynak: adidas.com

Aynı karusel tek tek ürün sayfalarında da yer alarak kişiye özel bir göz atma deneyimi sunuyor.

Ayrıca, tıpkı ürün sayfalarında yaptığınız gibi, müşterilere görüntüledikleri ürünlere göre ürünler önerebilirsiniz.

Toparlıyoruz

Bu ürün koleksiyonu sayfası tasarım taktiklerinden hangilerini kendi sayfalarınızda uygulayabileceğinizi düşünün. Belki de altısı da dönüşüm oranlarınızı artırmada rol oynayabilir.

Her zaman ürün(ler)inizin doğasını ve hedef kitlenizin sorunlu noktalarını aklınızda bulundurun. Ne arıyorlar ve tasarım çalışmalarınız bunu bulmalarına nasıl yardımcı olabilir?

Felix Rose-Collins

Felix Rose-Collins

Ranktracker's CEO/CMO & Co-founder

Felix Rose-Collins is the Co-founder and CEO/CMO of Ranktracker. With over 15 years of SEO experience, he has single-handedly scaled the Ranktracker site to over 500,000 monthly visits, with 390,000 of these stemming from organic searches each month.

Ranktracker'ı kullanmaya başlayın... Hem de ücretsiz!

Web sitenizin sıralamada yükselmesini engelleyen şeyin ne olduğunu öğrenin.

Ücretsiz bir hesap oluşturun

Veya kimlik bilgilerinizi kullanarak oturum açın

Different views of Ranktracker app